rewrite gamelog table

src/app.css

@@ -421,12 +421,6 @@ html.dark .x-friend-item > .detail > .extra,
     color: var(--color-neutral-300);
 }
 
-.lucide {
-    width: 16px;
-    height: 16px;
-    stroke-width: 1.5px;
-}
-
 #x-app {
     background: var(--el-bg-color-page);
     color: var(--el-text-color-primary);

src/styles/globals.css

@@ -121,3 +121,9 @@
         @apply bg-background text-foreground;
     }
 }
+
+.lucide {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5px;
+}

src/views/Feed/columns.jsx

@@ -369,6 +369,17 @@ export const columns = [
     }
 ];
 
+/**
+ * Function that format the differences between two strings with HTML tags
+ * markerStartTag and markerEndTag are optional, if emitted, the differences will be highlighted with yellow and underlined.
+ * @param {*} s1
+ * @param {*} s2
+ * @param {*} markerStartTag
+ * @param {*} markerEndTag
+ * @returns An array that contains both the string 1 and string 2, which the differences are formatted with HTML tags
+ */
+
+//function getWordDifferences
 function formatDifference(
     oldString,
     newString,
@@ -437,6 +448,7 @@ function formatDifference(
         const match = findLongestMatch(oldStart, oldEnd, newStart, newEnd);
 
         if (match.size > 0) {
+            // Handle differences before the match
             if (oldStart < match.oldStart || newStart < match.newStart) {
                 result.push(
                     ...buildDiff(
@@ -448,12 +460,14 @@ function formatDifference(
                 );
             }
 
+            // Add the matched words
             result.push(
                 oldWords
                     .slice(match.oldStart, match.oldStart + match.size)
                     .join(' ')
             );
 
+            // Handle differences after the match
             if (
                 match.oldStart + match.size < oldEnd ||
                 match.newStart + match.size < newEnd
@@ -483,10 +497,13 @@ function formatDifference(
                 return r;
             }
 
+            // Add deletions
             if (oldStart < oldEnd)
                 result.push(
                     ...build(oldWords, oldStart, oldEnd, markerDeletion)
                 );
+
+            // Add insertions
             if (newStart < newEnd)
                 result.push(
                     ...build(newWords, newStart, newEnd, markerAddition)

src/views/GameLog/GameLog.vue

@@ -1,217 +1,85 @@
 <template>
     <div class="x-container" ref="gameLogRef">
-        <div style="margin: 0 0 10px; display: flex; align-items: center">
+        <DataTableLayout
-            <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
+            :table="table"
-                <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
+            :loading="gameLogTable.loading"
-                    <el-switch
+            :table-style="tableHeightStyle"
-                        v-model="gameLogTable.vip"
+            :page-sizes="pageSizes"
-                        active-color="var(--el-color-success)"
+            :total-items="totalItems"
-                        @change="gameLogTableLookup"></el-switch>
+            :on-page-size-change="handlePageSizeChange">
-                </el-tooltip>
+            <template #toolbar>
-            </div>
+                <div style="margin: 0 0 10px; display: flex; align-items: center">
-            <el-select
+                    <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                v-model="gameLogTable.filter"
+                        <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                multiple
+                            <el-switch
-                clearable
+                                v-model="gameLogTable.vip"
-                style="flex: 1"
+                                active-color="var(--el-color-success)"
-                :placeholder="t('view.game_log.filter_placeholder')"
+                                @change="gameLogTableLookup"></el-switch>
-                @change="gameLogTableLookup">
+                        </el-tooltip>
-                <el-option
+                    </div>
-                    v-for="type in [
+                    <el-select
-                        'Location',
+                        v-model="gameLogTable.filter"
-                        'OnPlayerJoined',
+                        multiple
-                        'OnPlayerLeft',
+                        clearable
-                        'VideoPlay',
+                        style="flex: 1"
-                        'Event',
+                        :placeholder="t('view.game_log.filter_placeholder')"
-                        'External',
+                        @change="gameLogTableLookup">
-                        'StringLoad',
+                        <el-option
-                        'ImageLoad'
+                            v-for="type in [
-                    ]"
+                                'Location',
-                    :key="type"
+                                'OnPlayerJoined',
-                    :label="t('view.game_log.filters.' + type)"
+                                'OnPlayerLeft',
-                    :value="type"></el-option>
+                                'VideoPlay',
-            </el-select>
+                                'Event',
-            <el-input
+                                'External',
-                v-model="gameLogTable.search"
+                                'StringLoad',
-                :placeholder="t('view.game_log.search_placeholder')"
+                                'ImageLoad'
-                clearable
+                            ]"
-                style="flex: 0.4; margin-left: 10px"
+                            :key="type"
-                @keyup.enter="gameLogTableLookup"
+                            :label="t('view.game_log.filters.' + type)"
-                @change="gameLogTableLookup"></el-input>
+                            :value="type"></el-option>
-        </div>
+                    </el-select>
-
+                    <el-input
-        <DataTable v-bind="gameLogTable" :data="gameLogDisplayData">
+                        v-model="gameLogTable.search"
-            <el-table-column width="20"></el-table-column>
+                        :placeholder="t('view.game_log.search_placeholder')"
-            <el-table-column :label="t('table.gameLog.date')" prop="created_at" width="140">
+                        clearable
-                <template #default="scope">
+                        style="flex: 0.4; margin-left: 10px"
-                    <el-tooltip placement="right">
+                        @keyup.enter="gameLogTableLookup"
-                        <template #content>
+                        @change="gameLogTableLookup"></el-input>
-                            <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
+                </div>
-                        </template>
+            </template>
-                        <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
+        </DataTableLayout>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.type')" prop="type" width="150">
-                <template #default="scope">
-                    <el-tag
-                        v-if="scope.row.location && scope.row.type !== 'Location'"
-                        type="info"
-                        effect="plain"
-                        size="small">
-                        <span
-                            class="x-link"
-                            @click="showWorldDialog(scope.row.location)"
-                            v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                    </el-tag>
-                    <el-tag v-else type="info" effect="plain" size="small">
-                        <span v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                    </el-tag>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.user')" prop="displayName" width="200">
-                <template #default="scope">
-                    <span
-                        v-if="scope.row.displayName"
-                        class="x-link table-user"
-                        style="padding-right: 10px"
-                        @click="lookupUser(scope.row)"
-                        v-text="scope.row.displayName"></span>
-                    <template v-if="gameLogIsFriend(scope.row)">
-                        <span v-if="gameLogIsFavorite(scope.row)">⭐</span>
-                        <span v-else>💚</span>
-                    </template>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.detail')" prop="data">
-                <template #default="scope">
-                    <Location
-                        v-if="scope.row.type === 'Location'"
-                        :location="scope.row.location"
-                        :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName" />
-                    <Location
-                        v-else-if="scope.row.type === 'PortalSpawn'"
-                        :location="scope.row.instanceId"
-                        :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName" />
-                    <template v-else-if="scope.row.type === 'Event'">
-                        <span v-text="scope.row.data"></span>
-                    </template>
-                    <template v-else-if="scope.row.type === 'External'">
-                        <span v-text="scope.row.message"></span>
-                    </template>
-                    <template v-else-if="scope.row.type === 'VideoPlay'">
-                        <span v-if="scope.row.videoId" style="margin-right: 5px">{{ scope.row.videoId }}:</span>
-                        <span
-                            v-if="scope.row.videoId === 'LSMedia' || scope.row.videoId === 'PopcornPalace'"
-                            v-text="scope.row.videoName"></span>
-                        <span
-                            v-else-if="scope.row.videoName"
-                            class="x-link"
-                            @click="openExternalLink(scope.row.videoUrl)"
-                            v-text="scope.row.videoName"></span>
-                        <span
-                            v-else
-                            class="x-link"
-                            @click="openExternalLink(scope.row.videoUrl)"
-                            v-text="scope.row.videoUrl"></span>
-                    </template>
-                    <template v-else-if="scope.row.type === 'ImageLoad'">
-                        <span
-                            class="x-link"
-                            @click="openExternalLink(scope.row.resourceUrl)"
-                            v-text="scope.row.resourceUrl"></span>
-                    </template>
-                    <template v-else-if="scope.row.type === 'StringLoad'">
-                        <span
-                            class="x-link"
-                            @click="openExternalLink(scope.row.resourceUrl)"
-                            v-text="scope.row.resourceUrl"></span>
-                    </template>
-                    <template
-                        v-else-if="
-                            scope.row.type === 'Notification' ||
-                            scope.row.type === 'OnPlayerJoined' ||
-                            scope.row.type === 'OnPlayerLeft'
-                        ">
-                    </template>
-                    <span v-else class="x-link" v-text="scope.row.data"></span>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.gameLog.action')" width="80" align="right">
-                <template #default="scope">
-                    <template
-                        v-if="
-                            scope.row.type !== 'OnPlayerJoined' &&
-                            scope.row.type !== 'OnPlayerLeft' &&
-                            scope.row.type !== 'Location' &&
-                            scope.row.type !== 'PortalSpawn'
-                        ">
-                        <el-button
-                            v-if="shiftHeld"
-                            style="color: #f56c6c"
-                            text
-                            :icon="Close"
-                            size="small"
-                            class="small-button"
-                            @click="deleteGameLogEntry(scope.row)"></el-button>
-                        <i
-                            class="ri-delete-bin-line small-button"
-                            style="opacity: 0.85"
-                            v-else
-                            @click="deleteGameLogEntryPrompt(scope.row)"></i>
-                    </template>
-                    <el-tooltip
-                        v-if="scope.row.type === 'Location'"
-                        placement="top"
-                        :content="t('dialog.previous_instances.info')">
-                        <el-button
-                            v-if="shiftHeld"
-                            text
-                            :icon="DataLine"
-                            size="small"
-                            class="small-button"
-                            @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
-                        <i
-                            v-else
-                            style="opacity: 0.85"
-                            class="ri-file-list-2-line small-button"
-                            @click="showPreviousInstancesInfoDialog(scope.row.location)"></i>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-            <el-table-column width="5"></el-table-column>
-        </DataTable>
     </div>
 </template>
 
 <script setup>
-    import { Close, DataLine } from '@element-plus/icons-vue';
+    import {
+        getCoreRowModel,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+        useVueTable
+    } from '@tanstack/vue-table';
+    import { computed, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
-    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
 
-    import { useGameLogStore, useInstanceStore, useUiStore, useUserStore, useWorldStore } from '../../stores';
+    import { useAppearanceSettingsStore, useGameLogStore, useSharedFeedStore, useVrcxStore } from '../../stores';
-    import { formatDateFilter, openExternalLink, removeFromArray } from '../../shared/utils';
+    import { DataTableLayout } from '../../components/ui/data-table';
+    import { createColumns } from './columns.jsx';
     import { database } from '../../service/database';
-    import { useSharedFeedStore } from '../../stores';
+    import { removeFromArray } from '../../shared/utils';
-    import { useTableHeight } from '../../composables/useTableHeight';
+    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
+    import { valueUpdater } from '../../components/ui/table/utils';
 
-    const { showWorldDialog } = useWorldStore();
+    const { gameLogTableLookup } = useGameLogStore();
-    const { lookupUser } = useUserStore();
-    const { showPreviousInstancesInfoDialog } = useInstanceStore();
-    const { shiftHeld } = storeToRefs(useUiStore());
-    const { gameLogIsFriend, gameLogIsFavorite, gameLogTableLookup } = useGameLogStore();
     const { gameLogTable } = storeToRefs(useGameLogStore());
     const { updateSharedFeed } = useSharedFeedStore();
+    const appearanceSettingsStore = useAppearanceSettingsStore();
+    const vrcxStore = useVrcxStore();
 
     function getGameLogCreatedAt(row) {
         if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
@@ -262,7 +130,12 @@
     const { t } = useI18n();
     const emit = defineEmits(['updateGameLogSessionTable']);
 
-    const { containerRef: gameLogRef } = useTableHeight(gameLogTable);
+    const gameLogRef = ref(null);
+    const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(gameLogRef, {
+        offset: 30,
+        toolbarHeight: 54,
+        paginationHeight: 52
+    });
 
     function deleteGameLogEntry(row) {
         removeFromArray(gameLogTable.value.data, row);
@@ -287,14 +160,73 @@
             })
             .catch(() => {});
     }
+
+    const columns = createColumns({
+        getCreatedAt: getGameLogCreatedAt,
+        onDelete: deleteGameLogEntry,
+        onDeletePrompt: deleteGameLogEntryPrompt
+    });
+
+    const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
+    const pageSize = computed(() =>
+        gameLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : gameLogTable.value.pageSize
+    );
+
+    const sorting = ref([]);
+    const pagination = ref({
+        pageIndex: 0,
+        pageSize: pageSize.value
+    });
+
+    const table = useVueTable({
+        data: gameLogDisplayData,
+        columns,
+        getRowId: (row) =>
+            `${row.type}:${row.rowId ?? row.uid ?? row.displayName + row.location + row.time}:${getGameLogCreatedAt(row)}`,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
+        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
+        state: {
+            get sorting() {
+                return sorting.value;
+            },
+            get pagination() {
+                return pagination.value;
+            }
+        }
+    });
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        if (gameLogTable.value.pageSizeLinked) {
+            appearanceSettingsStore.setTablePageSize(size);
+        } else {
+            gameLogTable.value.pageSize = size;
+        }
+    };
+
+    watch(pageSize, (size) => {
+        if (pagination.value.pageSize === size) {
+            return;
+        }
+        pagination.value = {
+            ...pagination.value,
+            pageIndex: 0,
+            pageSize: size
+        };
+        table.setPageSize(size);
+    });
 </script>
 
 <style scoped>
-    .small-button {
-        padding: 0;
-        height: 18px;
-        cursor: pointer;
-    }
     .table-user {
         color: var(--x-table-user-text-color) !important;
     }

src/views/GameLog/columns.jsx

@@ -0,0 +1,314 @@
+import Location from '../../components/Location.vue';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from '../../components/ui/dropdown-menu';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from '../../components/ui/tooltip';
+import { ArrowUpDown } from 'lucide-vue-next';
+import { storeToRefs } from 'pinia';
+
+import { formatDateFilter, openExternalLink } from '../../shared/utils';
+import { i18n } from '../../plugin';
+import {
+    useGameLogStore,
+    useInstanceStore,
+    useUiStore,
+    useUserStore,
+    useWorldStore
+} from '../../stores';
+
+const { t } = i18n.global;
+
+const UNACTIONABLE_TYPES = new Set([
+    'OnPlayerJoined',
+    'OnPlayerLeft',
+    'Location',
+    'PortalSpawn'
+]);
+
+export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
+    const { showWorldDialog } = useWorldStore();
+    const { lookupUser } = useUserStore();
+    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
+    const { shiftHeld } = storeToRefs(useUiStore());
+
+    const handleDelete = (row) => {
+        if (shiftHeld.value) {
+            onDelete(row);
+            return;
+        }
+        onDeletePrompt(row);
+    };
+
+    return [
+        {
+            id: 'spacer',
+            header: () => null,
+            enableSorting: false,
+            meta: {
+                class: 'w-[20px]'
+            },
+            cell: () => null
+        },
+        {
+            accessorFn: (row) => getCreatedAt(row),
+            id: 'created_at',
+            meta: {
+                class: 'w-[140px]'
+            },
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === 'asc')
+                    }
+                >
+                    {t('table.gameLog.date')}
+                    <ArrowUpDown class="ml-1 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => {
+                const createdAt = getCreatedAt(row.original);
+                const shortText = formatDateFilter(createdAt, 'short');
+                const longText = formatDateFilter(createdAt, 'long');
+
+                return (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <span>{shortText}</span>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">
+                                <span>{longText}</span>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                );
+            }
+        },
+        {
+            accessorKey: 'type',
+            meta: {
+                class: 'w-[150px]'
+            },
+            header: () => t('table.gameLog.type'),
+            cell: ({ row }) => {
+                const original = row.original;
+                const label = t(`view.game_log.filters.${original.type}`);
+                const isLink =
+                    Boolean(original.location) && original.type !== 'Location';
+
+                return (
+                    <Badge variant="outline" class="text-muted-foreground">
+                        <span
+                            class={isLink ? 'x-link' : undefined}
+                            onClick={() =>
+                                isLink && showWorldDialog(original.location)
+                            }
+                        >
+                            {label}
+                        </span>
+                    </Badge>
+                );
+            }
+        },
+        {
+            accessorKey: 'displayName',
+            meta: {
+                class: 'w-[200px]'
+            },
+            header: () => t('table.gameLog.user'),
+            cell: ({ row }) => {
+                const original = row.original;
+                return (
+                    <span>
+                        {original.displayName ? (
+                            <span
+                                class="x-link table-user pr-2.5"
+                                onClick={() => lookupUser(original)}
+                            >
+                                {original.displayName}
+                            </span>
+                        ) : null}
+                        {gameLogIsFriend(original) ? (
+                            <span>
+                                {gameLogIsFavorite(original) ? '⭐' : '💚'}
+                            </span>
+                        ) : null}
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'detail',
+            header: () => t('table.gameLog.detail'),
+            enableSorting: false,
+            meta: {
+                class: 'min-w-0 overflow-hidden'
+            },
+            cell: ({ row }) => {
+                const original = row.original;
+                if (original.type === 'Location') {
+                    return (
+                        <div class="w-full min-w-0 truncate">
+                            <Location
+                                location={original.location}
+                                hint={original.worldName}
+                                grouphint={original.groupName}
+                            />
+                        </div>
+                    );
+                }
+
+                if (original.type === 'PortalSpawn') {
+                    return (
+                        <div class="w-full min-w-0 truncate">
+                            <Location
+                                location={original.instanceId}
+                                hint={original.worldName}
+                                grouphint={original.groupName}
+                            />
+                        </div>
+                    );
+                }
+
+                if (original.type === 'Event') {
+                    return (
+                        <span class="block w-full min-w-0 truncate">
+                            {original.data}
+                        </span>
+                    );
+                }
+
+                if (original.type === 'External') {
+                    return (
+                        <span class="block w-full min-w-0 truncate">
+                            {original.message}
+                        </span>
+                    );
+                }
+
+                if (original.type === 'VideoPlay') {
+                    const showLink =
+                        original.videoId !== 'LSMedia' &&
+                        original.videoId !== 'PopcornPalace';
+                    const label = original.videoName || original.videoUrl;
+                    return (
+                        <span class="block w-full min-w-0 truncate">
+                            {original.videoId ? (
+                                <span class="mr-1.5">{original.videoId}:</span>
+                            ) : null}
+                            {showLink ? (
+                                <span
+                                    class="x-link"
+                                    onClick={() =>
+                                        openExternalLink(original.videoUrl)
+                                    }
+                                >
+                                    {label}
+                                </span>
+                            ) : (
+                                <span>{original.videoName}</span>
+                            )}
+                        </span>
+                    );
+                }
+
+                if (
+                    original.type === 'ImageLoad' ||
+                    original.type === 'StringLoad'
+                ) {
+                    return (
+                        <span class="block w-full min-w-0 truncate">
+                            <span
+                                class="x-link"
+                                onClick={() =>
+                                    openExternalLink(original.resourceUrl)
+                                }
+                            >
+                                {original.resourceUrl}
+                            </span>
+                        </span>
+                    );
+                }
+
+                if (
+                    original.type === 'Notification' ||
+                    original.type === 'OnPlayerJoined' ||
+                    original.type === 'OnPlayerLeft'
+                ) {
+                    return null;
+                }
+
+                return (
+                    <span class="x-link block w-full min-w-0 truncate">
+                        {original.data}
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'action',
+            meta: {
+                class: 'w-[90px] max-w-[90px] text-right'
+            },
+            header: () => t('table.gameLog.action'),
+            enableSorting: false,
+            cell: ({ row }) => {
+                const original = row.original;
+                const canDelete = !UNACTIONABLE_TYPES.has(original.type);
+                const canShowPrevious = original.type === 'Location';
+
+                if (!canDelete && !canShowPrevious) {
+                    return null;
+                }
+
+                return (
+                    <div class="flex justify-end">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    class="h-7 px-2 text-xs"
+                                >
+                                    ...
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                {canDelete ? (
+                                    <DropdownMenuItem
+                                        onSelect={() => handleDelete(original)}
+                                    >
+                                        Delete
+                                    </DropdownMenuItem>
+                                ) : null}
+                                {canShowPrevious ? (
+                                    <DropdownMenuItem
+                                        onSelect={() =>
+                                            showPreviousInstancesInfoDialog(
+                                                original.location
+                                            )
+                                        }
+                                    >
+                                        {t('dialog.previous_instances.info')}
+                                    </DropdownMenuItem>
+                                ) : null}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                );
+            }
+        }
+    ];
+};