123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <script setup lang="ts">
- import { defineAsyncComponent, ref } from "vue";
- import Toast from "toasters";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
- const AdvancedTable = defineAsyncComponent(
- () => import("@/components/AdvancedTable.vue")
- );
- const { socket } = useWebsocketsStore();
- const columnDefault = ref(<TableColumn>{
- sortable: true,
- hidable: true,
- defaultVisibility: "shown",
- draggable: true,
- resizable: true,
- minWidth: 230,
- maxWidth: 600
- });
- const columns = ref(<TableColumn[]>[
- {
- name: "options",
- displayName: "Options",
- properties: ["_id"],
- sortable: false,
- hidable: false,
- resizable: false,
- minWidth: 76,
- defaultWidth: 76
- },
- {
- name: "resolved",
- displayName: "Resolved",
- properties: ["resolved"],
- sortProperty: "resolved",
- minWidth: 150
- },
- {
- name: "type",
- displayName: "Type",
- properties: ["type"],
- sortable: false
- },
- {
- name: "userId",
- displayName: "User ID",
- properties: ["userId"],
- sortProperty: "userId"
- },
- {
- name: "_id",
- displayName: "Request ID",
- properties: ["_id"],
- sortProperty: "_id"
- }
- ]);
- const filters = ref(<TableFilter[]>[
- {
- name: "_id",
- displayName: "Request ID",
- property: "_id",
- filterTypes: ["exact"],
- defaultFilterType: "exact"
- },
- {
- name: "userId",
- displayName: "User ID",
- property: "userId",
- filterTypes: ["contains", "exact", "regex"],
- defaultFilterType: "contains"
- },
- {
- name: "resolved",
- displayName: "Resolved",
- property: "resolved",
- filterTypes: ["boolean"],
- defaultFilterType: "boolean"
- }
- ]);
- const events = ref(<TableEvents>{
- adminRoom: "users",
- updated: {
- event: "admin.dataRequests.updated",
- id: "dataRequest._id",
- item: "dataRequest"
- }
- });
- const resolveDataRequest = (id, resolved) => {
- socket.dispatch("dataRequests.resolve", id, resolved, res => {
- if (res.status === "success") new Toast(res.message);
- });
- };
- </script>
- <template>
- <div class="admin-tab container">
- <page-metadata title="Admin | Users | Data Requests" />
- <div class="card tab-info">
- <div class="info-row">
- <h1>Data Requests</h1>
- <p>Manage data requests made by users</p>
- </div>
- </div>
- <advanced-table
- :column-default="columnDefault"
- :columns="columns"
- :filters="filters"
- data-action="dataRequests.getData"
- name="admin-data-requests"
- :max-width="1200"
- :events="events"
- >
- <template #column-options="slotProps">
- <div class="row-options">
- <button
- v-if="slotProps.item.resolved"
- class="button is-danger material-icons icon-with-button"
- @click="resolveDataRequest(slotProps.item._id, false)"
- :disabled="slotProps.item.removed"
- content="Unresolve Data Request"
- v-tippy
- >
- remove_done
- </button>
- <button
- v-else
- class="button is-success material-icons icon-with-button"
- @click="resolveDataRequest(slotProps.item._id, true)"
- :disabled="slotProps.item.removed"
- content="Resolve Data Request"
- v-tippy
- >
- done_all
- </button>
- </div>
- </template>
- <template #column-resolved="slotProps">
- <span :title="slotProps.item.resolved">{{
- slotProps.item.resolved
- }}</span>
- </template>
- <template #column-type="slotProps">
- <span
- :title="
- slotProps.item.type
- ? 'Remove all associated data'
- : slotProps.item.type
- "
- >{{
- slotProps.item.type
- ? "Remove all associated data"
- : slotProps.item.type
- }}</span
- >
- </template>
- <template #column-userId="slotProps">
- <span :title="slotProps.item.userId">{{
- slotProps.item.userId
- }}</span>
- </template>
- <template #column-_id="slotProps">
- <span :title="slotProps.item._id">{{
- slotProps.item._id
- }}</span>
- </template>
- </advanced-table>
- </div>
- </template>
|