DataRequests.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <script setup lang="ts">
  2. import { defineAsyncComponent, ref } from "vue";
  3. import Toast from "toasters";
  4. import { useWebsocketsStore } from "@/stores/websockets";
  5. import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
  6. const AdvancedTable = defineAsyncComponent(
  7. () => import("@/components/AdvancedTable.vue")
  8. );
  9. const { socket } = useWebsocketsStore();
  10. const columnDefault = ref(<TableColumn>{
  11. sortable: true,
  12. hidable: true,
  13. defaultVisibility: "shown",
  14. draggable: true,
  15. resizable: true,
  16. minWidth: 230,
  17. maxWidth: 600
  18. });
  19. const columns = ref(<TableColumn[]>[
  20. {
  21. name: "options",
  22. displayName: "Options",
  23. properties: ["_id"],
  24. sortable: false,
  25. hidable: false,
  26. resizable: false,
  27. minWidth: 76,
  28. defaultWidth: 76
  29. },
  30. {
  31. name: "resolved",
  32. displayName: "Resolved",
  33. properties: ["resolved"],
  34. sortProperty: "resolved",
  35. minWidth: 150
  36. },
  37. {
  38. name: "type",
  39. displayName: "Type",
  40. properties: ["type"],
  41. sortable: false
  42. },
  43. {
  44. name: "userId",
  45. displayName: "User ID",
  46. properties: ["userId"],
  47. sortProperty: "userId"
  48. },
  49. {
  50. name: "_id",
  51. displayName: "Request ID",
  52. properties: ["_id"],
  53. sortProperty: "_id"
  54. }
  55. ]);
  56. const filters = ref(<TableFilter[]>[
  57. {
  58. name: "_id",
  59. displayName: "Request ID",
  60. property: "_id",
  61. filterTypes: ["exact"],
  62. defaultFilterType: "exact"
  63. },
  64. {
  65. name: "userId",
  66. displayName: "User ID",
  67. property: "userId",
  68. filterTypes: ["contains", "exact", "regex"],
  69. defaultFilterType: "contains"
  70. },
  71. {
  72. name: "resolved",
  73. displayName: "Resolved",
  74. property: "resolved",
  75. filterTypes: ["boolean"],
  76. defaultFilterType: "boolean"
  77. }
  78. ]);
  79. const events = ref(<TableEvents>{
  80. adminRoom: "users",
  81. updated: {
  82. event: "admin.dataRequests.updated",
  83. id: "dataRequest._id",
  84. item: "dataRequest"
  85. }
  86. });
  87. const resolveDataRequest = (id, resolved) => {
  88. socket.dispatch("dataRequests.resolve", id, resolved, res => {
  89. if (res.status === "success") new Toast(res.message);
  90. });
  91. };
  92. </script>
  93. <template>
  94. <div class="admin-tab container">
  95. <page-metadata title="Admin | Users | Data Requests" />
  96. <div class="card tab-info">
  97. <div class="info-row">
  98. <h1>Data Requests</h1>
  99. <p>Manage data requests made by users</p>
  100. </div>
  101. </div>
  102. <advanced-table
  103. :column-default="columnDefault"
  104. :columns="columns"
  105. :filters="filters"
  106. data-action="dataRequests.getData"
  107. name="admin-data-requests"
  108. :max-width="1200"
  109. :events="events"
  110. >
  111. <template #column-options="slotProps">
  112. <div class="row-options">
  113. <button
  114. v-if="slotProps.item.resolved"
  115. class="button is-danger material-icons icon-with-button"
  116. @click="resolveDataRequest(slotProps.item._id, false)"
  117. :disabled="slotProps.item.removed"
  118. content="Unresolve Data Request"
  119. v-tippy
  120. >
  121. remove_done
  122. </button>
  123. <button
  124. v-else
  125. class="button is-success material-icons icon-with-button"
  126. @click="resolveDataRequest(slotProps.item._id, true)"
  127. :disabled="slotProps.item.removed"
  128. content="Resolve Data Request"
  129. v-tippy
  130. >
  131. done_all
  132. </button>
  133. </div>
  134. </template>
  135. <template #column-resolved="slotProps">
  136. <span :title="slotProps.item.resolved">{{
  137. slotProps.item.resolved
  138. }}</span>
  139. </template>
  140. <template #column-type="slotProps">
  141. <span
  142. :title="
  143. slotProps.item.type
  144. ? 'Remove all associated data'
  145. : slotProps.item.type
  146. "
  147. >{{
  148. slotProps.item.type
  149. ? "Remove all associated data"
  150. : slotProps.item.type
  151. }}</span
  152. >
  153. </template>
  154. <template #column-userId="slotProps">
  155. <span :title="slotProps.item.userId">{{
  156. slotProps.item.userId
  157. }}</span>
  158. </template>
  159. <template #column-_id="slotProps">
  160. <span :title="slotProps.item._id">{{
  161. slotProps.item._id
  162. }}</span>
  163. </template>
  164. </advanced-table>
  165. </div>
  166. </template>