rewrite previous instances tables

2026-04-24 01:03:50 +02:00 · 2026-01-13 17:08:23 +09:00
parent 38a8247e9c
commit a2b1cb20ab
10 changed files with 974 additions and 350 deletions
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
+++ b/src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
@@ -0,0 +1,104 @@
+import { ArrowUpDown } from 'lucide-vue-next';
+
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+    <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 px-2"
+        onClick={() => {
+            const sorted = column.getIsSorted();
+            if (!sorted && descFirst) {
+                column.toggleSorting(true);
+                return;
+            }
+            column.toggleSorting(sorted === 'asc');
+        }}
+    >
+        {label}
+        <ArrowUpDown class="ml-1 h-4 w-4" />
+    </Button>
+);
+
+export const createColumns = ({ onLookupUser }) => [
+    {
+        id: 'created_at',
+        accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
+        size: 170,
+        header: ({ column }) =>
+            sortButton({
+                column,
+                label: t('table.previous_instances.date'),
+                descFirst: true
+            }),
+        cell: ({ row }) => {
+            const createdAt = row.original?.created_at;
+            const shortText = formatDateFilter(createdAt, 'short');
+            const longText = formatDateFilter(createdAt, 'long');
+            return <span title={longText}>{shortText}</span>;
+        }
+    },
+    {
+        id: 'friend',
+        accessorFn: (row) => (row?.isFavorite ? 2 : row?.isFriend ? 1 : 0),
+        size: 70,
+        enableSorting: false,
+        header: () => t('table.gameLog.icon'),
+        meta: {
+            thClass: 'text-center',
+            tdClass: 'text-center'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            if (original?.isFavorite) {
+                return <span title="Favorite">⭐</span>;
+            }
+            if (original?.isFriend) {
+                return <span title="Friend">💚</span>;
+            }
+            return null;
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.displayName ?? '',
+        header: ({ column }) =>
+            sortButton({ column, label: t('table.previous_instances.display_name') }),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        onLookupUser?.(original);
+                    }}
+                >
+                    {original?.displayName ?? ''}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'time',
+        accessorFn: (row) => row?.time ?? 0,
+        size: 100,
+        header: ({ column }) => sortButton({ column, label: t('table.previous_instances.time') }),
+        cell: ({ row }) => <span>{row.original?.timer ?? ''}</span>
+    },
+    {
+        id: 'count',
+        accessorFn: (row) => row?.count ?? 0,
+        size: 100,
+        header: ({ column }) => sortButton({ column, label: t('table.previous_instances.count') }),
+        cell: ({ row }) => <span>{row.original?.count ?? ''}</span>
+    }
+];