MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-14 04:13:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

merge previous instances dialog

Browse Source
This commit is contained in:
pa
2026-01-22 20:51:45 +09:00
parent 3c37071011
commit ba7ffa5497
12 changed files with 596 additions and 1036 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/dialogs/MainDialogContainer.vue
View File

@@ -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 @@
<template>
<Dialog v-model:open="isOpen">
<DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
<DialogContent
:class="dialogClass"
style="top: 10vh"
:show-close-button="false">
<Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
<BreadcrumbList>
<template v-if="shouldCollapseBreadcrumbs">
@@ -274,9 +291,7 @@
</BreadcrumbList>
</Breadcrumb>
<KeepAlive :include="keepAliveInclude">
<component :is="activeComponent" v-if="activeComponent" />
</KeepAlive>
<component :is="activeComponent" v-if="activeComponent" v-bind="activeComponentProps" :key="activeType" />
</DialogContent>
</Dialog>
</template>

181
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue
View File

@@ -1,181 +0,0 @@
<template>
<div>
<DialogHeader>
<DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
</DialogHeader>
<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="previousInstancesGroupDialog.groupRef.name"></span>
<InputGroupField
class="w-1/3"
v-model="search"
:placeholder="t('dialog.previous_instances.search_placeholder')"
clearable />
</div>
</template>
</DataTableLayout>
</div>
</template>
<script setup>
defineOptions({ name: 'PreviousInstancesGroupDialog' });
import { computed, ref, watch } from 'vue';
import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { InputGroupField } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
compareByCreatedAt,
localeIncludes,
parseLocation,
removeFromArray,
timeToText
} from '../../../shared/utils';
import { useInstanceStore, useModalStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
import { DataTableLayout } from '../../ui/data-table';
import { createColumns } from './previousInstancesGroupColumns.jsx';
import { database } from '../../../service/database';
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
const instanceStore = useInstanceStore();
const { showPreviousInstancesInfoDialog } = instanceStore;
const { previousInstancesGroupDialog } = storeToRefs(instanceStore);
const { shiftHeld } = useUiStore();
const { stringComparer } = storeToRefs(useSearchStore());
const { t } = useI18n();
const loading = ref(false);
const modalStore = useModalStore();
const vrcxStore = useVrcxStore();
const rawRows = ref([]);
const pageSizes = [10, 25, 50, 100];
const pageSize = ref(10);
const tableStyle = { maxHeight: '400px' };
const search = ref('');
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,
onShowInfo: showPreviousInstancesInfoDialog,
onDelete: deleteGameLogGroupInstance,
onDeletePrompt: deleteGameLogGroupInstancePrompt
})
);
const { table } = useVrcxVueTable({
persistKey: 'previousInstancesGroupDialog',
data: displayRows,
columns: columns.value,
getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
initialSorting: [{ id: 'created_at', desc: true }],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
},
tableOptions: {
autoResetPageIndex: false
}
});
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;
};
watch(
() => previousInstancesGroupDialog.value.visible,
(visible) => {
if (visible) {
refreshPreviousInstancesGroupTable();
}
},
{ immediate: true }
);
watch(
() => previousInstancesGroupDialog.value.openFlg,
() => {
if (previousInstancesGroupDialog.value.visible) {
refreshPreviousInstancesGroupTable();
}
}
);
function refreshPreviousInstancesGroupTable() {
loading.value = true;
const D = previousInstancesGroupDialog.value;
database.getPreviousInstancesByGroupId(D.groupRef.id).then((data) => {
const array = [];
for (const ref of data.values()) {
ref.$location = parseLocation(ref.location);
ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
array.push(ref);
}
array.sort(compareByCreatedAt);
rawRows.value = array;
loading.value = false;
});
}
function deleteGameLogGroupInstance(row) {
database.deleteGameLogInstanceByInstanceId({ location: row.location });
removeFromArray(rawRows.value, row);
}
function deleteGameLogGroupInstancePrompt(row) {
modalStore
.confirm({
description: 'Continue? Delete GameLog Instance',
title: 'Confirm'
})
.then(({ ok }) => {
if (!ok) return;
deleteGameLogGroupInstance(row);
})
.catch(() => {});
}
</script>

1
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
View File

@@ -77,7 +77,6 @@
strict: false,
ageGate: false
});
const fullscreen = ref(false);
const { stringComparer } = storeToRefs(useSearchStore());
const vrcxStore = useVrcxStore();

299
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue Normal file
View File

@@ -0,0 +1,299 @@
<template>
<div>
<DialogHeader>
<DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
</DialogHeader>
<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"
:on-page-change="handlePageChange">
<template #toolbar>
<div style="display: flex; align-items: center; justify-content: space-between">
<span style="font-size: 14px" v-text="headerText"></span>
<InputGroupField
v-model="search"
:placeholder="t('dialog.previous_instances.search_placeholder')"
clearable
class="w-1/3"
style="display: block" />
</div>
</template>
</DataTableLayout>
</div>
</template>
<script setup>
defineOptions({ name: 'PreviousInstancesListDialog' });
import { computed, ref, watch } from 'vue';
import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { InputGroupField } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
useInstanceStore,
useLaunchStore,
useModalStore,
useSearchStore,
useUiStore,
useUserStore,
useVrcxStore
} from '../../../stores';
import {
compareByCreatedAt,
localeIncludes,
parseLocation,
removeFromArray,
timeToText
} from '../../../shared/utils';
import { DataTableLayout } from '../../ui/data-table';
import { createPreviousInstancesColumns } from './previousInstancesColumns.jsx';
import { database } from '../../../service/database';
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
const props = defineProps({
variant: {
type: String,
required: true,
validator: (value) => ['user', 'world', 'group'].includes(value)
}
});
const instanceStore = useInstanceStore();
const { showPreviousInstancesInfoDialog } = instanceStore;
const {
previousInstancesInfoDialogVisible,
previousInstancesInfoDialogInstanceId,
previousInstancesListState,
previousInstancesUserDialog,
previousInstancesWorldDialog,
previousInstancesGroupDialog
} = storeToRefs(instanceStore);
const { shiftHeld } = storeToRefs(useUiStore());
const { stringComparer } = storeToRefs(useSearchStore());
const { currentUser } = storeToRefs(useUserStore());
const { showLaunchDialog } = useLaunchStore();
const modalStore = useModalStore();
const vrcxStore = useVrcxStore();
const { t } = useI18n();
const dialogState = computed(() => {
if (props.variant === 'user') return previousInstancesUserDialog.value;
if (props.variant === 'world') return previousInstancesWorldDialog.value;
return previousInstancesGroupDialog.value;
});
const getListState = () => {
const state = previousInstancesListState.value[props.variant];
if (state) {
return state;
}
previousInstancesListState.value[props.variant] = {
search: '',
pageSize: 10,
pageIndex: 0
};
return previousInstancesListState.value[props.variant];
};
const loading = ref(false);
const rawRows = ref([]);
const pageSizes = [10, 25, 50, 100];
const pageSize = computed({
get: () => getListState().pageSize,
set: (value) => {
getListState().pageSize = value;
}
});
const tableStyle = { maxHeight: '400px' };
const search = computed({
get: () => getListState().search,
set: (value) => {
getListState().search = value;
}
});
const headerText = computed(() => {
const state = dialogState.value;
if (props.variant === 'user') return state?.userRef?.displayName ?? '';
if (props.variant === 'world') return state?.worldRef?.name ?? '';
return state?.groupRef?.name ?? '';
});
const persistKey = computed(() => {
if (props.variant === 'user') return 'previousInstancesUserDialog';
if (props.variant === 'world') return 'previousInstancesWorldDialog';
return 'previousInstancesGroupDialog';
});
const pageIndex = computed({
get: () => getListState().pageIndex,
set: (value) => {
getListState().pageIndex = value;
}
});
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)
);
});
});
function deleteGameLogInstance(row) {
if (props.variant === 'user') {
database.deleteGameLogInstance({
id: previousInstancesUserDialog.value.userRef.id,
displayName: previousInstancesUserDialog.value.userRef.displayName,
location: row.location,
events: row.events
});
} else {
database.deleteGameLogInstanceByInstanceId({ location: row.location });
}
removeFromArray(rawRows.value, row);
}
function deleteGameLogInstancePrompt(row) {
const description =
props.variant === 'user'
? 'Continue? Delete User From GameLog Instance'
: 'Continue? Delete GameLog Instance';
modalStore
.confirm({
description,
title: 'Confirm'
})
.then(({ ok }) => {
if (!ok) return;
deleteGameLogInstance(row);
})
.catch(() => {});
}
const handleShowInfo = (location) => {
const instanceId = location ?? '';
showPreviousInstancesInfoDialog(instanceId);
};
const columns = computed(() =>
createPreviousInstancesColumns(props.variant, {
shiftHeld,
currentUserId: currentUser.value?.id,
forceUpdateKey: previousInstancesWorldDialog.value?.forceUpdate,
onLaunch: showLaunchDialog,
onShowInfo: handleShowInfo,
onDelete: deleteGameLogInstance,
onDeletePrompt: deleteGameLogInstancePrompt
})
);
const { table } = useVrcxVueTable({
persistKey: persistKey.value,
data: displayRows,
columns: columns.value,
getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
initialSorting: [{ id: 'created_at', desc: true }],
initialPagination: {
pageIndex: pageIndex.value,
pageSize: pageSize.value
},
tableOptions: {
autoResetPageIndex: false
}
});
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;
};
const handlePageChange = (page) => {
pageIndex.value = Math.max(0, page - 1);
};
const refreshTable = async () => {
loading.value = true;
const array = [];
try {
if (props.variant === 'user') {
const data = await database.getPreviousInstancesByUserId(previousInstancesUserDialog.value.userRef);
for (const item of data.values()) {
item.$location = parseLocation(item.location);
item.timer = item.time > 0 ? timeToText(item.time) : '';
array.push(item);
}
} else if (props.variant === 'world') {
const D = previousInstancesWorldDialog.value;
const data = await database.getPreviousInstancesByWorldId(D.worldRef);
for (const ref of data.values()) {
ref.$location = parseLocation(ref.location);
ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
array.push(ref);
}
} else {
const D = previousInstancesGroupDialog.value;
const data = await database.getPreviousInstancesByGroupId(D.groupRef.id);
for (const ref of data.values()) {
ref.$location = parseLocation(ref.location);
ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
array.push(ref);
}
}
array.sort(compareByCreatedAt);
rawRows.value = array;
} finally {
loading.value = false;
}
};
watch(
() => dialogState.value?.visible,
(visible) => {
if (visible) {
refreshTable();
}
},
{ immediate: true }
);
watch(
() => dialogState.value?.openFlg,
() => {
if (dialogState.value?.visible) {
refreshTable();
}
}
);
</script>

192
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue
View File

@@ -1,192 +0,0 @@
<template>
<div>
<DialogHeader>
<DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
</DialogHeader>
<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>
</div>
</template>
<script setup>
defineOptions({ name: 'PreviousInstancesWorldDialog' });
import { computed, ref, watch } from 'vue';
import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { InputGroupField } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
useInstanceStore,
useModalStore,
useSearchStore,
useUiStore,
useUserStore,
useVrcxStore
} from '../../../stores';
import {
compareByCreatedAt,
localeIncludes,
parseLocation,
removeFromArray,
timeToText
} from '../../../shared/utils';
import { DataTableLayout } from '../../ui/data-table';
import { createColumns } from './previousInstancesWorldColumns.jsx';
import { database } from '../../../service/database';
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
const { t } = useI18n();
const modalStore = useModalStore();
const instanceStore = useInstanceStore();
const { showPreviousInstancesInfoDialog } = instanceStore;
const { previousInstancesWorldDialog } = storeToRefs(instanceStore);
const { shiftHeld } = storeToRefs(useUiStore());
const { currentUser } = storeToRefs(useUserStore());
const { stringComparer } = storeToRefs(useSearchStore());
const vrcxStore = useVrcxStore();
const rawRows = ref([]);
const pageSizes = [10, 25, 50, 100];
const pageSize = ref(10);
const tableStyle = { maxHeight: '400px' };
const loading = ref(false);
const search = ref('');
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: previousInstancesWorldDialog.value?.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
},
tableOptions: {
autoResetPageIndex: false
}
});
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 = previousInstancesWorldDialog.value;
database.getPreviousInstancesByWorldId(D.worldRef).then((data) => {
const array = [];
for (const ref of data.values()) {
ref.$location = parseLocation(ref.location);
ref.timer = ref.time > 0 ? timeToText(ref.time) : '';
array.push(ref);
}
array.sort(compareByCreatedAt);
rawRows.value = array;
loading.value = false;
});
}
function deleteGameLogWorldInstance(row) {
database.deleteGameLogInstanceByInstanceId({ location: row.location });
removeFromArray(rawRows.value, row);
}
function deleteGameLogWorldInstancePrompt(row) {
modalStore
.confirm({
description: 'Continue? Delete GameLog Instance',
title: 'Confirm'
})
.then(({ ok }) => {
if (!ok) return;
deleteGameLogWorldInstance(row);
})
.catch(() => {});
}
watch(
() => previousInstancesWorldDialog.value.visible,
(visible) => {
if (visible) {
refreshPreviousInstancesWorldTable();
}
},
{ immediate: true }
);
watch(
() => previousInstancesWorldDialog.value.openFlg,
() => {
if (previousInstancesWorldDialog.value.visible) {
refreshPreviousInstancesWorldTable();
}
}
);
</script>

229
src/components/dialogs/PreviousInstancesDialog/previousInstancesColumns.jsx Normal file
View File

@@ -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 }) => (
<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>
);
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 }) => <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
});
const timeColumn = () => ({
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>
});
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 (
<div class="inline-flex items-center justify-end gap-1">
{onLaunch ? (
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onLaunch?.(original?.location);
}}
>
<LogIn class="h-4 w-4" />
</Button>
) : null}
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onShowInfo?.(original?.$location?.tag);
}}
>
<Info class="h-4 w-4" />
</Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
style={isShiftHeld ? { color: '#f56c6c' } : undefined}
onClick={(event) => {
event.stopPropagation();
if (isShiftHeld) {
onDelete?.(original);
} else {
onDeletePrompt?.(original);
}
}}
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
);
}
});
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 }) => (
<Location
location={row.original?.location}
hint={row.original?.worldName}
grouphint={row.original?.groupName}
/>
)
},
{
id: 'creator',
accessorFn: (row) => row?.$location?.userId ?? '',
size: 170,
header: () => t('table.previous_instances.instance_creator'),
cell: ({ row }) => (
<DisplayName
userid={row.original?.$location?.userId}
location={row.original?.$location?.tag}
/>
)
},
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 }) => (
<LocationWorld
locationobject={row.original?.$location}
grouphint={row.original?.groupName}
currentuserid={config.currentUserId}
/>
)
},
{
id: 'creator',
accessorFn: (row) => row?.$location?.userId ?? '',
size: 170,
header: () => t('table.previous_instances.instance_creator'),
cell: ({ row }) => (
<DisplayName
userid={row.original?.$location?.userId}
location={row.original?.$location?.tag}
forceUpdateKey={config.forceUpdateKey}
/>
)
},
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 }) => (
<Location
location={row.original?.$location?.tag ?? row.original?.location}
grouphint={row.original?.groupName}
hint={row.original?.worldName}
/>
)
},
timeColumn(),
actionsColumn({
shiftHeld: config.shiftHeld,
onShowInfo: config.onShowInfo,
onDelete: config.onDelete,
onDeletePrompt: config.onDeletePrompt
})
];
};

123
src/components/dialogs/PreviousInstancesDialog/previousInstancesGroupColumns.jsx
View File

@@ -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 }) => (
<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>
);
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 }) => (
<span>{formatDateFilter(row.original?.created_at, 'long')}</span>
)
},
{
id: 'instance',
accessorFn: (row) => row?.worldName ?? row?.name ?? '',
header: () => t('table.previous_instances.instance_name'),
meta: {
stretch: true
},
cell: ({ row }) => (
<Location
location={
row.original?.$location?.tag ?? row.original?.location
}
grouphint={row.original?.groupName}
hint={row.original?.worldName}
/>
)
},
{
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: '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 (
<div class="inline-flex items-center justify-end gap-1">
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onShowInfo?.(original?.location);
}}
>
<Info class="h-4 w-4" />
</Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
style={isShiftHeld ? { color: '#f56c6c' } : undefined}
onClick={(event) => {
event.stopPropagation();
if (isShiftHeld) {
onDelete?.(original);
} else {
onDeletePrompt?.(original);
}
}}
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
);
}
}
];

142
src/components/dialogs/PreviousInstancesDialog/previousInstancesWorldColumns.jsx
View File

@@ -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 }) => (
<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>
);
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 }) => (
<span>{formatDateFilter(row.original?.created_at, 'long')}</span>
)
},
{
id: 'instance',
accessorFn: (row) => row?.$location?.tag ?? row?.location ?? '',
header: () => t('table.previous_instances.instance_name'),
meta: {
stretch: true
},
cell: ({ row }) => (
<LocationWorld
locationobject={row.original?.$location}
grouphint={row.original?.groupName}
currentuserid={currentUserId}
/>
)
},
{
id: 'creator',
accessorFn: (row) => row?.$location?.userId ?? '',
size: 170,
header: () => t('table.previous_instances.instance_creator'),
cell: ({ row }) => (
<DisplayName
userid={row.original?.$location?.userId}
location={row.original?.$location?.tag}
forceUpdateKey={forceUpdateKey}
/>
)
},
{
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: '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 (
<div class="inline-flex items-center justify-end gap-1">
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onShowInfo?.(original?.location);
}}
>
<Info class="h-4 w-4" />
</Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
style={isShiftHeld ? { color: '#f56c6c' } : undefined}
onClick={(event) => {
event.stopPropagation();
if (isShiftHeld) {
onDelete?.(original);
} else {
onDeletePrompt?.(original);
}
}}
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
);
}
}
];

198
src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue
View File

@@ -1,198 +0,0 @@
<template>
<div>
<DialogHeader>
<DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
</DialogHeader>
<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="previousInstancesUserDialog.userRef.displayName"></span>
<InputGroupField
v-model="search"
:placeholder="t('dialog.previous_instances.search_placeholder')"
clearable
class="w-1/3"
style="display: block" />
</div>
</template>
</DataTableLayout>
</div>
</template>
<script setup>
defineOptions({ name: 'PreviousInstancesUserDialog' });
import { computed, ref, watch } from 'vue';
import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { InputGroupField } from '@/components/ui/input-group';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import {
useInstanceStore,
useLaunchStore,
useModalStore,
useSearchStore,
useUiStore,
useVrcxStore
} from '../../../stores';
import {
compareByCreatedAt,
localeIncludes,
parseLocation,
removeFromArray,
timeToText
} from '../../../shared/utils';
import { DataTableLayout } from '../../ui/data-table';
import { createColumns } from './previousInstancesUserColumns.jsx';
import { database } from '../../../service/database';
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
const modalStore = useModalStore();
const loading = ref(false);
const rawRows = ref([]);
const pageSizes = [10, 25, 50, 100];
const pageSize = ref(10);
const tableStyle = { maxHeight: '400px' };
const { showLaunchDialog } = useLaunchStore();
const instanceStore = useInstanceStore();
const { showPreviousInstancesInfoDialog } = instanceStore;
const { previousInstancesUserDialog } = storeToRefs(instanceStore);
const { shiftHeld } = storeToRefs(useUiStore());
const { stringComparer } = storeToRefs(useSearchStore());
const vrcxStore = useVrcxStore();
const { t } = useI18n();
const search = ref('');
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,
onLaunch: showLaunchDialog,
onShowInfo: showPreviousInstancesInfoDialog,
onDelete: deleteGameLogUserInstance,
onDeletePrompt: deleteGameLogUserInstancePrompt
})
);
const { table } = useVrcxVueTable({
persistKey: 'previousInstancesUserDialog',
data: displayRows,
columns: columns.value,
getRowId: (row) => `${row?.location ?? ''}:${row?.created_at ?? ''}`,
initialSorting: [{ id: 'created_at', desc: true }],
initialPagination: {
pageIndex: 0,
pageSize: pageSize.value
},
tableOptions: {
autoResetPageIndex: 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;
};
const refreshPreviousInstancesUserTable = async () => {
loading.value = true;
const data = await database.getPreviousInstancesByUserId(previousInstancesUserDialog.value.userRef);
const array = [];
for (const item of data.values()) {
item.$location = parseLocation(item.location);
item.timer = item.time > 0 ? timeToText(item.time) : '';
array.push(item);
}
array.sort(compareByCreatedAt);
rawRows.value = array;
loading.value = false;
};
watch(
() => previousInstancesUserDialog.value.visible,
(visible) => {
if (visible) {
refreshPreviousInstancesUserTable();
}
},
{ immediate: true }
);
watch(
() => previousInstancesUserDialog.value.openFlg,
() => {
if (previousInstancesUserDialog.value.visible) {
refreshPreviousInstancesUserTable();
}
}
);
function deleteGameLogUserInstance(row) {
database.deleteGameLogInstance({
id: previousInstancesUserDialog.value.userRef.id,
displayName: previousInstancesUserDialog.value.userRef.displayName,
location: row.location,
events: row.events
});
removeFromArray(rawRows.value, row);
}
function deleteGameLogUserInstancePrompt(row) {
modalStore
.confirm({
description: 'Continue? Delete User From GameLog Instance',
title: 'Confirm'
})
.then(({ ok }) => {
if (!ok) return;
deleteGameLogUserInstance(row);
})
.catch(() => {});
}
</script>
<style scoped>
.button-pd-0 {
padding: 0;
}
</style>

153
src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
View File

@@ -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 }) => (
<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>
);
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 }) => (
<span>{formatDateFilter(row.original?.created_at, 'long')}</span>
)
},
{
id: 'world',
accessorFn: (row) => row?.worldName ?? row?.name ?? '',
header: ({ column }) =>
sortButton({ column, label: t('table.previous_instances.world') }),
meta: {
stretch: true
},
cell: ({ row }) => (
<Location
location={row.original?.location}
hint={row.original?.worldName}
grouphint={row.original?.groupName}
/>
)
},
{
id: 'creator',
accessorFn: (row) => row?.$location?.userId ?? '',
size: 170,
header: () => t('table.previous_instances.instance_creator'),
cell: ({ row }) => (
<DisplayName
userid={row.original?.$location?.userId}
location={row.original?.$location?.tag}
/>
)
},
{
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: '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 (
<div class="inline-flex items-center justify-end gap-1">
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onLaunch?.(original?.location);
}}
>
<LogIn class="h-4 w-4" />
</Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
onClick={(event) => {
event.stopPropagation();
onShowInfo?.(original?.location);
}}
>
<Info class="h-4 w-4" />
</Button>
<Button
size="icon-sm"
variant="ghost"
class="w-6 h-6 text-xs"
style={isShiftHeld ? { color: '#f56c6c' } : undefined}
onClick={(event) => {
event.stopPropagation();
if (isShiftHeld) {
onDelete?.(original);
} else {
onDeletePrompt?.(original);
}
}}
>
<Trash2 class="h-4 w-4" />
</Button>
</div>
);
}
}
];

2
src/localization/locales.js
View File

@@ -14,4 +14,4 @@ export const languageCodes = [
'vi',
'zh-CN',
'zh-TW'
];
];

7
src/stores/instance.js
View File

@@ -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,