rewrite tables

src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue

@@ -10,31 +10,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteRequestResponseMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteResponseConfirmDialog">
-            <el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70">
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message"> </el-table-column>
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
-                        <SquarePen
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteRequestResponseTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteRequestResponseRowClick" />
 
         <template #footer>
             <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
@@ -58,13 +39,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteRequestResponseColumns.jsx';
 
     import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
     import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +82,26 @@
         visible: false
     });
 
+    const inviteRequestResponseRows = computed(() => inviteRequestResponseMessageTable.value?.data ?? []);
+    const inviteRequestResponseColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteResponseDialog
+        })
+    );
+
+    const { table: inviteRequestResponseTable } = useVrcxVueTable({
+        persistKey: 'invite-request-response-message',
+        data: inviteRequestResponseRows,
+        columns: inviteRequestResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteRequestResponseRowClick(row) {
+        showSendInviteResponseConfirmDialog(row?.original);
+    }
+
     function showEditAndSendInviteResponseDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {

src/views/Notifications/dialogs/SendInviteResponseDialog.vue

@@ -10,30 +10,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteResponseMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteResponseConfirmDialog">
-            <el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70" />
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message" />
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
-                        <SquarePen
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteResponseTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteResponseRowClick" />
 
         <template #footer>
             <Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
@@ -57,13 +39,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteResponseColumns.jsx';
 
     import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
     import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +83,26 @@
         visible: false
     });
 
+    const inviteResponseRows = computed(() => inviteResponseMessageTable.value?.data ?? []);
+    const inviteResponseColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteResponseDialog
+        })
+    );
+
+    const { table: inviteResponseTable } = useVrcxVueTable({
+        persistKey: 'invite-response-message',
+        data: inviteResponseRows,
+        columns: inviteResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteResponseRowClick(row) {
+        showSendInviteResponseConfirmDialog(row?.original);
+    }
+
     function closeInviteDialog() {
         cancelSendInviteResponse();
     }

src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx

@@ -0,0 +1,53 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];

src/views/Notifications/dialogs/sendInviteResponseColumns.jsx

@@ -0,0 +1,53 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];