diff --git a/src/components/dialogs/MainDialogContainer.vue b/src/components/dialogs/MainDialogContainer.vue
index 6669ddb2..3328e300 100644
--- a/src/components/dialogs/MainDialogContainer.vue
+++ b/src/components/dialogs/MainDialogContainer.vue
@@ -21,10 +21,8 @@
import AvatarDialog from './AvatarDialog/AvatarDialog.vue';
import GroupDialog from './GroupDialog/GroupDialog.vue';
- import PreviousInstancesGroupDialog from './PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
import PreviousInstancesInfoDialog from './PreviousInstancesDialog/PreviousInstancesInfoDialog.vue';
- import PreviousInstancesUserDialog from './UserDialog/PreviousInstancesUserDialog.vue';
- import PreviousInstancesWorldDialog from './PreviousInstancesDialog/PreviousInstancesWorldDialog.vue';
+ import PreviousInstancesListDialog from './PreviousInstancesDialog/PreviousInstancesListDialog.vue';
import UserDialog from './UserDialog/UserDialog.vue';
import WorldDialog from './WorldDialog/WorldDialog.vue';
@@ -37,6 +35,7 @@
const {
previousInstancesInfoDialogVisible,
+ previousInstancesInfoDialogInstanceId,
previousInstancesUserDialog,
previousInstancesWorldDialog,
previousInstancesGroupDialog
@@ -67,34 +66,43 @@
const dialogCrumbs = computed(() => uiStore.dialogCrumbs);
const activeCrumb = computed(() => dialogCrumbs.value[dialogCrumbs.value.length - 1] || null);
const activeType = computed(() => {
- if (activeCrumb.value?.type) {
- return activeCrumb.value.type;
- }
- if (userStore.userDialog.visible) {
- return 'user';
- }
- if (worldStore.worldDialog.visible) {
- return 'world';
- }
- if (avatarStore.avatarDialog.visible) {
- return 'avatar';
- }
- if (groupStore.groupDialog.visible) {
- return 'group';
- }
- if (previousInstancesInfoDialogVisible.value) {
- return 'previous-instances-info';
- }
- if (previousInstancesUserDialog.value.visible) {
- return 'previous-instances-user';
- }
- if (previousInstancesWorldDialog.value.visible) {
- return 'previous-instances-world';
- }
- if (previousInstancesGroupDialog.value.visible) {
- return 'previous-instances-group';
- }
- return null;
+ const type = (() => {
+ if (previousInstancesInfoDialogVisible.value) {
+ return 'previous-instances-info';
+ }
+ if (previousInstancesUserDialog.value.visible) {
+ return 'previous-instances-user';
+ }
+ if (previousInstancesWorldDialog.value.visible) {
+ return 'previous-instances-world';
+ }
+ if (previousInstancesGroupDialog.value.visible) {
+ return 'previous-instances-group';
+ }
+ if (userStore.userDialog.visible) {
+ return 'user';
+ }
+ if (worldStore.worldDialog.visible) {
+ return 'world';
+ }
+ if (avatarStore.avatarDialog.visible) {
+ return 'avatar';
+ }
+ if (groupStore.groupDialog.visible) {
+ return 'group';
+ }
+ const crumb = activeCrumb.value;
+ return crumb?.type ?? null;
+ })();
+ console.log('[prev-instances] activeType', {
+ type,
+ infoVisible: previousInstancesInfoDialogVisible.value,
+ infoId: previousInstancesInfoDialogInstanceId.value,
+ userVisible: previousInstancesUserDialog.value.visible,
+ worldVisible: previousInstancesWorldDialog.value.visible,
+ groupVisible: previousInstancesGroupDialog.value.visible
+ });
+ return type;
});
const activeComponent = computed(() => {
switch (activeType.value) {
@@ -109,15 +117,28 @@
case 'previous-instances-info':
return PreviousInstancesInfoDialog;
case 'previous-instances-user':
- return PreviousInstancesUserDialog;
+ return PreviousInstancesListDialog;
case 'previous-instances-world':
- return PreviousInstancesWorldDialog;
+ return PreviousInstancesListDialog;
case 'previous-instances-group':
- return PreviousInstancesGroupDialog;
+ return PreviousInstancesListDialog;
default:
return null;
}
});
+ const activeComponentProps = computed(() => {
+ switch (activeType.value) {
+ case 'previous-instances-user':
+ return { variant: 'user' };
+ case 'previous-instances-world':
+ return { variant: 'world' };
+ case 'previous-instances-group':
+ return { variant: 'group' };
+ default:
+ return {};
+ }
+ });
+
const dialogClass = computed(() => {
switch (activeType.value) {
case 'world':
@@ -137,13 +158,6 @@
}
});
- const keepAliveInclude = [
- 'PreviousInstancesInfoDialog',
- 'PreviousInstancesUserDialog',
- 'PreviousInstancesWorldDialog',
- 'PreviousInstancesGroupDialog'
- ];
-
const shouldShowBreadcrumbs = computed(() => dialogCrumbs.value.length > 1);
const shouldCollapseBreadcrumbs = computed(() => dialogCrumbs.value.length > 5);
const middleBreadcrumbs = computed(() => {
@@ -199,7 +213,10 @@
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
deleted file mode 100644
index 7c39163e..00000000
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-
-
-
- {{ t('dialog.previous_instances.header') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
index 243668d5..d5f2b21a 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
@@ -77,7 +77,6 @@
strict: false,
ageGate: false
});
- const fullscreen = ref(false);
const { stringComparer } = storeToRefs(useSearchStore());
const vrcxStore = useVrcxStore();
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue
new file mode 100644
index 00000000..2567b230
--- /dev/null
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue
@@ -0,0 +1,299 @@
+
+
+
+ {{ t('dialog.previous_instances.header') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
deleted file mode 100644
index 421db481..00000000
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-
-
-
- {{ t('dialog.previous_instances.header') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesColumns.jsx
new file mode 100644
index 00000000..ff01eeb4
--- /dev/null
+++ b/src/components/dialogs/PreviousInstancesDialog/previousInstancesColumns.jsx
@@ -0,0 +1,229 @@
+import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
+
+import DisplayName from '../../DisplayName.vue';
+import Location from '../../Location.vue';
+import LocationWorld from '../../LocationWorld.vue';
+import { Button } from '../../ui/button';
+import { i18n } from '../../../plugin';
+import { formatDateFilter } from '../../../shared/utils';
+
+const { t } = i18n.global;
+
+const sortButton = ({ column, label, descFirst = false }) => (
+
+);
+
+const resolveBool = (maybeRef) => {
+ if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
+ return !!maybeRef.value;
+ }
+ return !!maybeRef;
+};
+
+const baseDateColumn = () => ({
+ 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 }) => {formatDateFilter(row.original?.created_at, 'long')}
+});
+
+const timeColumn = () => ({
+ id: 'time',
+ accessorFn: (row) => row?.time ?? 0,
+ size: 100,
+ header: ({ column }) => sortButton({ column, label: t('table.previous_instances.time') }),
+ cell: ({ row }) => {row.original?.timer ?? ''}
+});
+
+const actionsColumn = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt, onLaunch }) => ({
+ id: 'actions',
+ enableSorting: false,
+ size: onLaunch ? 140 : 120,
+ header: () => t('table.previous_instances.action'),
+ meta: {
+ thClass: 'text-right',
+ tdClass: 'text-right'
+ },
+ cell: ({ row }) => {
+ const original = row.original;
+ const isShiftHeld = resolveBool(shiftHeld);
+
+ return (
+
+ {onLaunch ? (
+
+ ) : null}
+
+
+
+
+
+ );
+ }
+});
+
+export const createPreviousInstancesColumns = (variant, config) => {
+ if (variant === 'user') {
+ return [
+ baseDateColumn(),
+ {
+ id: 'world',
+ accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+ header: ({ column }) => sortButton({ column, label: t('table.previous_instances.world') }),
+ meta: {
+ stretch: true
+ },
+ cell: ({ row }) => (
+
+ )
+ },
+ {
+ id: 'creator',
+ accessorFn: (row) => row?.$location?.userId ?? '',
+ size: 170,
+ header: () => t('table.previous_instances.instance_creator'),
+ cell: ({ row }) => (
+
+ )
+ },
+ timeColumn(),
+ actionsColumn({
+ shiftHeld: config.shiftHeld,
+ onLaunch: config.onLaunch,
+ onShowInfo: config.onShowInfo,
+ onDelete: config.onDelete,
+ onDeletePrompt: config.onDeletePrompt
+ })
+ ];
+ }
+
+ if (variant === 'world') {
+ return [
+ baseDateColumn(),
+ {
+ id: 'instance',
+ accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
+ header: () => t('table.previous_instances.instance_name'),
+ meta: {
+ stretch: true
+ },
+ cell: ({ row }) => (
+
+ )
+ },
+ {
+ id: 'creator',
+ accessorFn: (row) => row?.$location?.userId ?? '',
+ size: 170,
+ header: () => t('table.previous_instances.instance_creator'),
+ cell: ({ row }) => (
+
+ )
+ },
+ timeColumn(),
+ actionsColumn({
+ shiftHeld: config.shiftHeld,
+ onShowInfo: config.onShowInfo,
+ onDelete: config.onDelete,
+ onDeletePrompt: config.onDeletePrompt
+ })
+ ];
+ }
+
+ return [
+ baseDateColumn(),
+ {
+ id: 'instance',
+ accessorFn: (row) => row?.worldName ?? row?.name ?? '',
+ header: () => t('table.previous_instances.instance_name'),
+ meta: {
+ stretch: true
+ },
+ cell: ({ row }) => (
+
+ )
+ },
+ timeColumn(),
+ actionsColumn({
+ shiftHeld: config.shiftHeld,
+ onShowInfo: config.onShowInfo,
+ onDelete: config.onDelete,
+ onDeletePrompt: config.onDeletePrompt
+ })
+ ];
+};
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
deleted file mode 100644
index 4a7c8a09..00000000
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
-
-import Location from '../../Location.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-
-);
-
-const resolveBool = (maybeRef) => {
- if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
- return !!maybeRef.value;
- }
- return !!maybeRef;
-};
-
-export const createColumns = ({ shiftHeld, onShowInfo, onDelete, onDeletePrompt }) => [
- {
- 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 }) => (
- {formatDateFilter(row.original?.created_at, 'long')}
- )
- },
- {
- id: 'instance',
- accessorFn: (row) => row?.worldName ?? row?.name ?? '',
- header: () => t('table.previous_instances.instance_name'),
- meta: {
- stretch: true
- },
- cell: ({ row }) => (
-
- )
- },
- {
- id: 'time',
- accessorFn: (row) => row?.time ?? 0,
- size: 100,
- header: ({ column }) =>
- sortButton({ column, label: t('table.previous_instances.time') }),
- cell: ({ row }) => {row.original?.timer ?? ''}
- },
- {
- id: 'actions',
- enableSorting: false,
- size: 120,
- header: () => t('table.previous_instances.action'),
- meta: {
- thClass: 'text-right',
- tdClass: 'text-right'
- },
- cell: ({ row }) => {
- const original = row.original;
- const isShiftHeld = resolveBool(shiftHeld);
-
- return (
-
-
-
-
-
- );
- }
- }
-];
diff --git a/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx b/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
deleted file mode 100644
index e8faef33..00000000
--- a/src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { ArrowUpDown, Info, Trash2 } from 'lucide-vue-next';
-
-import DisplayName from '../../DisplayName.vue';
-import LocationWorld from '../../LocationWorld.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-
-);
-
-const resolveBool = (maybeRef) => {
- if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
- return !!maybeRef.value;
- }
- return !!maybeRef;
-};
-
-export const createColumns = ({
- shiftHeld,
- currentUserId,
- forceUpdateKey,
- onShowInfo,
- onDelete,
- onDeletePrompt
-}) => [
- {
- 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 }) => (
- {formatDateFilter(row.original?.created_at, 'long')}
- )
- },
- {
- id: 'instance',
- accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
- header: () => t('table.previous_instances.instance_name'),
- meta: {
- stretch: true
- },
- cell: ({ row }) => (
-
- )
- },
- {
- id: 'creator',
- accessorFn: (row) => row?.$location?.userId ?? '',
- size: 170,
- header: () => t('table.previous_instances.instance_creator'),
- cell: ({ row }) => (
-
- )
- },
- {
- id: 'time',
- accessorFn: (row) => row?.time ?? 0,
- size: 100,
- header: ({ column }) =>
- sortButton({ column, label: t('table.previous_instances.time') }),
- cell: ({ row }) => {row.original?.timer ?? ''}
- },
- {
- id: 'actions',
- enableSorting: false,
- size: 120,
- header: () => t('table.previous_instances.action'),
- meta: {
- thClass: 'text-right',
- tdClass: 'text-right'
- },
- cell: ({ row }) => {
- const original = row.original;
- const isShiftHeld = resolveBool(shiftHeld);
-
- return (
-
-
-
-
-
- );
- }
- }
-];
diff --git a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue b/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
deleted file mode 100644
index 07c0be95..00000000
--- a/src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-
-
-
- {{ t('dialog.previous_instances.header') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx b/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
deleted file mode 100644
index 24cba143..00000000
--- a/src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
-
-import DisplayName from '../../DisplayName.vue';
-import Location from '../../Location.vue';
-import { Button } from '../../ui/button';
-import { i18n } from '../../../plugin';
-import { formatDateFilter } from '../../../shared/utils';
-
-const { t } = i18n.global;
-
-const sortButton = ({ column, label, descFirst = false }) => (
-
-);
-
-const resolveBool = (maybeRef) => {
- if (maybeRef && typeof maybeRef === 'object' && 'value' in maybeRef) {
- return !!maybeRef.value;
- }
- return !!maybeRef;
-};
-
-export const createColumns = ({
- shiftHeld,
- onLaunch,
- onShowInfo,
- onDelete,
- onDeletePrompt
-}) => [
- {
- 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 }) => (
- {formatDateFilter(row.original?.created_at, 'long')}
- )
- },
- {
- id: 'world',
- accessorFn: (row) => row?.worldName ?? row?.name ?? '',
- header: ({ column }) =>
- sortButton({ column, label: t('table.previous_instances.world') }),
- meta: {
- stretch: true
- },
- cell: ({ row }) => (
-
- )
- },
- {
- id: 'creator',
- accessorFn: (row) => row?.$location?.userId ?? '',
- size: 170,
- header: () => t('table.previous_instances.instance_creator'),
- cell: ({ row }) => (
-
- )
- },
- {
- id: 'time',
- accessorFn: (row) => row?.time ?? 0,
- size: 100,
- header: ({ column }) =>
- sortButton({ column, label: t('table.previous_instances.time') }),
- cell: ({ row }) => {row.original?.timer ?? ''}
- },
- {
- id: 'actions',
- enableSorting: false,
- size: 140,
- header: () => t('table.previous_instances.action'),
- meta: {
- thClass: 'text-right',
- tdClass: 'text-right'
- },
- cell: ({ row }) => {
- const original = row.original;
- const isShiftHeld = resolveBool(shiftHeld);
-
- return (
-
-
-
-
-
-
-
- );
- }
- }
-];
diff --git a/src/localization/locales.js b/src/localization/locales.js
index 6e1df32d..b1929103 100644
--- a/src/localization/locales.js
+++ b/src/localization/locales.js
@@ -14,4 +14,4 @@ export const languageCodes = [
'vi',
'zh-CN',
'zh-TW'
-];
\ No newline at end of file
+];
diff --git a/src/stores/instance.js b/src/stores/instance.js
index 0cda3951..8edb9644 100644
--- a/src/stores/instance.js
+++ b/src/stores/instance.js
@@ -138,6 +138,12 @@ export const useInstanceStore = defineStore('Instance', () => {
}
});
+ const previousInstancesListState = ref({
+ user: { search: '', pageSize: 10, pageIndex: 0 },
+ world: { search: '', pageSize: 10, pageIndex: 0 },
+ group: { search: '', pageSize: 10, pageIndex: 0 }
+ });
+
const instanceJoinHistory = reactive(new Map());
const currentInstanceUsersData = ref([]);
@@ -1459,6 +1465,7 @@ export const useInstanceStore = defineStore('Instance', () => {
previousInstancesUserDialog,
previousInstancesWorldDialog,
previousInstancesGroupDialog,
+ previousInstancesListState,
instanceJoinHistory,
currentInstanceUsersData,