rewrite previous instances tables

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -7,67 +7,41 @@
         :fullscreen="fullscreen"
         destroy-on-close
         @close="closeDialog">
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <Location :location="location.tag" style="font-size: 14px" />
-            <InputGroupField
-                v-model="dataTable.filters[0].value"
-                :placeholder="t('dialog.previous_instances.search_placeholder')"
-                style="width: 150px"
-                clearable />
-        </div>
-        <DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
-            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
-                <template #default="scope">
-                    <TooltipWrapper side="left">
-                        <template #content>
-                            <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
-                        </template>
-                        <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </TooltipWrapper>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
-                <template #default="scope">
-                    <template v-if="scope.row?.isFriend">
-                        <TooltipWrapper v-if="scope.row?.isFavorite" side="top" content="Favorite">
-                            <span>⭐</span>
-                        </TooltipWrapper>
-                        <TooltipWrapper v-else side="top" content="Friend">
-                            <span>💚</span>
-                        </TooltipWrapper>
-                    </template>
-                    <span v-else></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.display_name')" prop="displayName" sortable>
-                <template #default="scope">
-                    <span class="x-link" @click="lookupUser(scope.row)">{{ scope.row.displayName }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
-                <template #default="scope">
-                    <span>{{ scope.row.timer }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.previous_instances.count')" prop="count" width="100" sortable>
-                <template #default="scope">
-                    <span>{{ scope.row.count }}</span>
-                </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">
+                    <Location :location="location.tag" style="font-size: 14px" />
+                    <InputGroupField
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        style="width: 150px"
+                        clearable />
+                </div>
+            </template>
+        </DataTableLayout>
     </el-dialog>
 </template>
 
 <script setup>
-    import { nextTick, ref, watch } from 'vue';
+    import { computed, nextTick, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { compareByCreatedAt, formatDateFilter, parseLocation, timeToText } from '../../../shared/utils';
+    import { useGameLogStore, useInstanceStore, useSearchStore, useUserStore, useVrcxStore } from '../../../stores';
+    import { compareByCreatedAt, localeIncludes, parseLocation, timeToText } from '../../../shared/utils';
+    import { DataTableLayout } from '../../ui/data-table';
     import { InputGroupField } from '../../../components/ui/input-group';
-    import { useGameLogStore, useInstanceStore, useUserStore } from '../../../stores';
+    import { createColumns } from './previousInstancesInfoColumns.jsx';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { lookupUser } = useUserStore();
     const { previousInstancesInfoDialogVisible, previousInstancesInfoDialogInstanceId } =
@@ -78,6 +52,12 @@
     const previousInstancesInfoDialogIndex = ref(2000);
 
     const loading = ref(false);
+    const rawRows = ref([]);
+    const search = ref('');
+    const pageSizes = [10, 25, 50, 100];
+    const pageSize = ref(10);
+    const tableStyle = { maxHeight: '400px' };
+
     const location = ref({
         tag: '',
         isOffline: false,
@@ -101,28 +81,58 @@
         strict: false,
         ageGate: false
     });
-    const dataTable = ref({
-        data: [],
-        filters: [
-            {
-                prop: 'displayName',
-                value: ''
-            }
-        ],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: {
-                prop: 'created_at',
-                order: 'descending'
-            }
-        },
-        pageSize: 10,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
+    const fullscreen = ref(false);
+
+    const { stringComparer } = storeToRefs(useSearchStore());
+    const vrcxStore = useVrcxStore();
+
+    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) => localeIncludes(row?.displayName ?? '', q, stringComparer.value));
+    });
+
+    const columns = computed(() =>
+        createColumns({
+            onLookupUser: lookupUser
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'previousInstancesInfoDialog',
+        data: displayRows,
+        columns: columns.value,
+        getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}),
+        initialSorting: [{ id: 'created_at', desc: true }],
+        initialPagination: {
+            pageIndex: 0,
+            pageSize: pageSize.value
         }
     });
-    const fullscreen = ref(false);
+
+    watch(
+        columns,
+        (next) => {
+            table.setOptions((prev) => ({
+                ...prev,
+                columns: 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;
+    };
 
     watch(
         () => previousInstancesInfoDialogVisible.value,
@@ -152,7 +162,7 @@
                 array.push(entry);
             }
             array.sort(compareByCreatedAt);
-            dataTable.value.data = array;
+            rawRows.value = array;
             loading.value = false;
         });
     }