rewrite previous instances tables

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -5,75 +5,31 @@
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
-            <InputGroupField
-                v-model="previousInstancesWorldDialogTable.filters[0].value"
-                :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="display: block; width: 150px" />
-        </div>
-        <DataTable :loading="loading" v-bind="previousInstancesWorldDialogTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
-                <template #default="scope">
-                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.instance_name')" prop="name">
-                <template #default="scope">
-                    <LocationWorld
-                        :locationobject="scope.row.$location"
-                        :grouphint="scope.row.groupName"
-                        :currentuserid="currentUser.id" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.instance_creator')" prop="location">
-                <template #default="scope">
-                    <DisplayName
-                        :userid="scope.row.$location.userId"
-                        :location="scope.row.$location.tag"
-                        :force-update-key="previousInstancesWorldDialog.forceUpdate" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span v-text="scope.row.timer"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
-                <template #default="scope">
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="showPreviousInstancesInfoDialog(scope.row.location)"
-                        ><i class="ri-information-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-if="shiftHeld"
-                        style="color: #f56c6c"
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogWorldInstance(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                    <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        v-else
-                        class="button-pd-0 w-6 h-6 text-xs"
-                        @click="deleteGameLogWorldInstancePrompt(scope.row)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
+                    <InputGroupField
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        clearable
+                        class="w-1/3"
+                        style="display: block" />
+                </div>
+            </template>
+        </DataTableLayout>
     </el-dialog>
 </template>
 
 <script setup>
-    import { computed, nextTick, reactive, ref, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
+    import { computed, nextTick, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -81,14 +37,17 @@
 
     import {
         compareByCreatedAt,
-        formatDateFilter,
+        localeIncludes,
         parseLocation,
         removeFromArray,
         timeToText
     } from '../../../shared/utils';
-    import { useInstanceStore, useUiStore, useUserStore } from '../../../stores';
+    import { useInstanceStore, useSearchStore, useUiStore, useUserStore, useVrcxStore } from '../../../stores';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createColumns } from './previousInstancesWorldColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
 
@@ -103,20 +62,14 @@
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
+    const { stringComparer } = storeToRefs(useSearchStore());
 
-    const previousInstancesWorldDialogTable = reactive({
-        data: [],
-        filters: [{ prop: 'groupName', value: '' }],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: { prop: 'created_at', order: 'descending' }
-        },
-        pageSize: 10,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
-    });
+    const vrcxStore = useVrcxStore();
+    const rawRows = ref([]);
+    const search = ref('');
+    const pageSizes = [10, 25, 50, 100];
+    const pageSize = ref(10);
+    const tableStyle = { maxHeight: '400px' };
     const loading = ref(false);
     const previousInstancesWorldDialogIndex = ref(2000);
 
@@ -130,6 +83,65 @@
         }
     });
 
+    const displayRows = computed(() => {
+        const q = String(search.value ?? '')
+            .trim()
+            .toLowerCase();
+        const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
+        if (!q) return rows;
+        return rows.filter((row) => {
+            return (
+                localeIncludes(row?.worldName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.groupName ?? '', q, stringComparer.value) ||
+                localeIncludes(row?.location ?? '', q, stringComparer.value)
+            );
+        });
+    });
+
+    const columns = computed(() =>
+        createColumns({
+            shiftHeld,
+            currentUserId: currentUser.value?.id,
+            forceUpdateKey: props.previousInstancesWorldDialog?.forceUpdate,
+            onShowInfo: showPreviousInstancesInfoDialog,
+            onDelete: deleteGameLogWorldInstance,
+            onDeletePrompt: deleteGameLogWorldInstancePrompt
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesWorldDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
+        }
+    });
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: /** @type {any} */ (next)
+            }));
+        },
+        { immediate: true }
+    );
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        pageSize.value = size;
+    };
+
     function refreshPreviousInstancesWorldTable() {
         loading.value = true;
         const D = props.previousInstancesWorldDialog;
@@ -141,14 +153,14 @@
                 array.push(ref);
             }
             array.sort(compareByCreatedAt);
-            previousInstancesWorldDialogTable.data = array;
+            rawRows.value = array;
             loading.value = false;
         });
     }
 
     function deleteGameLogWorldInstance(row) {
         database.deleteGameLogInstanceByInstanceId({ location: row.location });
-        removeFromArray(previousInstancesWorldDialogTable.data, row);
+        removeFromArray(rawRows.value, row);
     }
 
     function deleteGameLogWorldInstancePrompt(row) {
@@ -177,9 +189,3 @@
         }
     );
 </script>
-
-<style scoped>
-    .button-pd-0 {
-        padding: 0;
-    }
-</style>