mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 06:13:52 +02:00
rewrite previous instances tables
This commit is contained in:
pa
Natsumi
@@ -5,104 +5,63 @@
|
||||
:title="t('dialog.previous_instances.header')"
|
||||
width="1000px"
|
||||
append-to-body>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
|
||||
<InputGroupField
|
||||
v-model="previousInstancesGroupDialogTable.filters[0].value"
|
||||
:placeholder="t('dialog.previous_instances.search_placeholder')"
|
||||
style="width: 150px" />
|
||||
</div>
|
||||
|
||||
<DataTable :loading="loading" v-bind="previousInstancesGroupDialogTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.previous_instances.instance_name')" prop="name">
|
||||
<template #default="scope">
|
||||
<Location
|
||||
:location="scope.row.$location.tag"
|
||||
:grouphint="scope.row.groupName"
|
||||
:hint="scope.row.worldName" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
|
||||
<template #default="scope">
|
||||
<span v-text="scope.row.timer"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
|
||||
<template #default="scope">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
class="w-6 h-6 text-xs"
|
||||
variant="ghost"
|
||||
@click="showPreviousInstancesInfoDialog(scope.row.location)"
|
||||
><i class="ri-information-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="w-6 h-6 text-xs"
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c"
|
||||
@click="deleteGameLogGroupInstance(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="w-6 h-6 text-xs"
|
||||
v-else
|
||||
@click="deleteGameLogGroupInstancePrompt(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="loading"
|
||||
:table-style="tableStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems"
|
||||
:on-page-size-change="handlePageSizeChange">
|
||||
<template #toolbar>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
compareByCreatedAt,
|
||||
formatDateFilter,
|
||||
localeIncludes,
|
||||
parseLocation,
|
||||
removeFromArray,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import { useInstanceStore, useUiStore } from '../../../stores';
|
||||
import { useInstanceStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
|
||||
import { DataTableLayout } from '../../ui/data-table';
|
||||
import { createColumns } from './previousInstancesGroupColumns.jsx';
|
||||
import { database } from '../../../service/database';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const { showPreviousInstancesInfoDialog } = useInstanceStore();
|
||||
const { shiftHeld } = useUiStore();
|
||||
const { stringComparer } = storeToRefs(useSearchStore());
|
||||
const { t } = useI18n();
|
||||
|
||||
const previousInstancesGroupDialogIndex = ref(2000);
|
||||
const loading = ref(false);
|
||||
|
||||
const previousInstancesGroupDialogTable = reactive({
|
||||
data: [],
|
||||
filters: [{ prop: 'groupName', value: '' }],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: { prop: 'created_at', order: 'descending' }
|
||||
},
|
||||
pageSize: 10,
|
||||
paginationProps: { layout: 'sizes,prev,pager,next,total' }
|
||||
});
|
||||
const vrcxStore = useVrcxStore();
|
||||
const rawRows = ref([]);
|
||||
const search = ref('');
|
||||
const pageSizes = [10, 25, 50, 100];
|
||||
const pageSize = ref(10);
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const props = defineProps({
|
||||
previousInstancesGroupDialog: { type: Object, required: true }
|
||||
@@ -119,6 +78,63 @@
|
||||
}
|
||||
});
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
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(
|
||||
() => props.previousInstancesGroupDialog.openFlg,
|
||||
() => {
|
||||
@@ -142,14 +158,14 @@
|
||||
array.push(ref);
|
||||
}
|
||||
array.sort(compareByCreatedAt);
|
||||
previousInstancesGroupDialogTable.data = array;
|
||||
rawRows.value = array;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function deleteGameLogGroupInstance(row) {
|
||||
database.deleteGameLogInstanceByInstanceId({ location: row.location });
|
||||
removeFromArray(previousInstancesGroupDialogTable.data, row);
|
||||
removeFromArray(rawRows.value, row);
|
||||
}
|
||||
|
||||
function deleteGameLogGroupInstancePrompt(row) {
|
||||
|
||||
@@ -7,67 +7,41 @@
|
||||
:fullscreen="fullscreen"
|
||||
destroy-on-close
|
||||
@close="closeDialog">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<Location :location="location.tag" style="font-size: 14px" />
|
||||
<InputGroupField
|
||||
v-model="dataTable.filters[0].value"
|
||||
:placeholder="t('dialog.previous_instances.search_placeholder')"
|
||||
style="width: 150px"
|
||||
clearable />
|
||||
</div>
|
||||
<DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
|
||||
<template #default="scope">
|
||||
<TooltipWrapper side="left">
|
||||
<template #content>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row?.isFriend">
|
||||
<TooltipWrapper v-if="scope.row?.isFavorite" side="top" content="Favorite">
|
||||
<span>⭐</span>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper v-else side="top" content="Friend">
|
||||
<span>💚</span>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.display_name')" prop="displayName" sortable>
|
||||
<template #default="scope">
|
||||
<span class="x-link" @click="lookupUser(scope.row)">{{ scope.row.displayName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.timer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.count')" prop="count" width="100" sortable>
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.count }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="loading"
|
||||
:table-style="tableStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems"
|
||||
:on-page-size-change="handlePageSizeChange">
|
||||
<template #toolbar>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<Location :location="location.tag" style="font-size: 14px" />
|
||||
<InputGroupField
|
||||
v-model="search"
|
||||
:placeholder="t('dialog.previous_instances.search_placeholder')"
|
||||
style="width: 150px"
|
||||
clearable />
|
||||
</div>
|
||||
</template>
|
||||
</DataTableLayout>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { compareByCreatedAt, formatDateFilter, parseLocation, timeToText } from '../../../shared/utils';
|
||||
import { useGameLogStore, useInstanceStore, useSearchStore, useUserStore, useVrcxStore } from '../../../stores';
|
||||
import { compareByCreatedAt, localeIncludes, parseLocation, timeToText } from '../../../shared/utils';
|
||||
import { DataTableLayout } from '../../ui/data-table';
|
||||
import { InputGroupField } from '../../../components/ui/input-group';
|
||||
import { useGameLogStore, useInstanceStore, useUserStore } from '../../../stores';
|
||||
import { createColumns } from './previousInstancesInfoColumns.jsx';
|
||||
import { database } from '../../../service/database';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const { lookupUser } = useUserStore();
|
||||
const { previousInstancesInfoDialogVisible, previousInstancesInfoDialogInstanceId } =
|
||||
@@ -78,6 +52,12 @@
|
||||
const previousInstancesInfoDialogIndex = ref(2000);
|
||||
|
||||
const loading = ref(false);
|
||||
const rawRows = ref([]);
|
||||
const search = ref('');
|
||||
const pageSizes = [10, 25, 50, 100];
|
||||
const pageSize = ref(10);
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const location = ref({
|
||||
tag: '',
|
||||
isOffline: false,
|
||||
@@ -101,28 +81,58 @@
|
||||
strict: false,
|
||||
ageGate: false
|
||||
});
|
||||
const dataTable = ref({
|
||||
data: [],
|
||||
filters: [
|
||||
{
|
||||
prop: 'displayName',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: {
|
||||
prop: 'created_at',
|
||||
order: 'descending'
|
||||
}
|
||||
},
|
||||
pageSize: 10,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
const fullscreen = ref(false);
|
||||
|
||||
const { stringComparer } = storeToRefs(useSearchStore());
|
||||
const vrcxStore = useVrcxStore();
|
||||
|
||||
const displayRows = computed(() => {
|
||||
const q = String(search.value ?? '')
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
const rows = Array.isArray(rawRows.value) ? rawRows.value : [];
|
||||
if (!q) return rows;
|
||||
return rows.filter((row) => localeIncludes(row?.displayName ?? '', q, stringComparer.value));
|
||||
});
|
||||
|
||||
const columns = computed(() =>
|
||||
createColumns({
|
||||
onLookupUser: lookupUser
|
||||
})
|
||||
);
|
||||
|
||||
const { table } = useVrcxVueTable({
|
||||
persistKey: 'previousInstancesInfoDialog',
|
||||
data: displayRows,
|
||||
columns: columns.value,
|
||||
getRowId: (row) => row?.id ?? row?.userId ?? row?.displayName ?? JSON.stringify(row ?? {}),
|
||||
initialSorting: [{ id: 'created_at', desc: true }],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
}
|
||||
});
|
||||
const fullscreen = ref(false);
|
||||
|
||||
watch(
|
||||
columns,
|
||||
(next) => {
|
||||
table.setOptions((prev) => ({
|
||||
...prev,
|
||||
columns: next
|
||||
}));
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const totalItems = computed(() => {
|
||||
const length = table.getFilteredRowModel().rows.length;
|
||||
const max = vrcxStore.maxTableSize;
|
||||
return length > max && length < max + 51 ? max : length;
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
pageSize.value = size;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => previousInstancesInfoDialogVisible.value,
|
||||
@@ -152,7 +162,7 @@
|
||||
array.push(entry);
|
||||
}
|
||||
array.sort(compareByCreatedAt);
|
||||
dataTable.value.data = array;
|
||||
rawRows.value = array;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -5,75 +5,31 @@
|
||||
:title="t('dialog.previous_instances.header')"
|
||||
width="1000px"
|
||||
append-to-body>
|
||||
<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="previousInstancesWorldDialogTable.filters[0].value"
|
||||
:placeholder="t('dialog.previous_instances.search_placeholder')"
|
||||
style="display: block; width: 150px" />
|
||||
</div>
|
||||
<DataTable :loading="loading" v-bind="previousInstancesWorldDialogTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.instance_name')" prop="name">
|
||||
<template #default="scope">
|
||||
<LocationWorld
|
||||
:locationobject="scope.row.$location"
|
||||
:grouphint="scope.row.groupName"
|
||||
:currentuserid="currentUser.id" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.instance_creator')" prop="location">
|
||||
<template #default="scope">
|
||||
<DisplayName
|
||||
:userid="scope.row.$location.userId"
|
||||
:location="scope.row.$location.tag"
|
||||
:force-update-key="previousInstancesWorldDialog.forceUpdate" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
|
||||
<template #default="scope">
|
||||
<span v-text="scope.row.timer"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
|
||||
<template #default="scope">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="showPreviousInstancesInfoDialog(scope.row.location)"
|
||||
><i class="ri-information-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c"
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="deleteGameLogWorldInstance(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-else
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="deleteGameLogWorldInstancePrompt(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="loading"
|
||||
:table-style="tableStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems"
|
||||
:on-page-size-change="handlePageSizeChange">
|
||||
<template #toolbar>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -81,14 +37,17 @@
|
||||
|
||||
import {
|
||||
compareByCreatedAt,
|
||||
formatDateFilter,
|
||||
localeIncludes,
|
||||
parseLocation,
|
||||
removeFromArray,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import { useInstanceStore, useUiStore, useUserStore } from '../../../stores';
|
||||
import { useInstanceStore, useSearchStore, useUiStore, useUserStore, useVrcxStore } from '../../../stores';
|
||||
import { DataTableLayout } from '../../ui/data-table';
|
||||
import { createColumns } from './previousInstancesWorldColumns.jsx';
|
||||
import { database } from '../../../service/database';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -103,20 +62,14 @@
|
||||
const { showPreviousInstancesInfoDialog } = useInstanceStore();
|
||||
const { shiftHeld } = storeToRefs(useUiStore());
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
const { stringComparer } = storeToRefs(useSearchStore());
|
||||
|
||||
const previousInstancesWorldDialogTable = reactive({
|
||||
data: [],
|
||||
filters: [{ prop: 'groupName', value: '' }],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: { prop: 'created_at', order: 'descending' }
|
||||
},
|
||||
pageSize: 10,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
}
|
||||
});
|
||||
const vrcxStore = useVrcxStore();
|
||||
const rawRows = ref([]);
|
||||
const search = ref('');
|
||||
const pageSizes = [10, 25, 50, 100];
|
||||
const pageSize = ref(10);
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
const loading = ref(false);
|
||||
const previousInstancesWorldDialogIndex = ref(2000);
|
||||
|
||||
@@ -130,6 +83,65 @@
|
||||
}
|
||||
});
|
||||
|
||||
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: props.previousInstancesWorldDialog?.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
|
||||
}
|
||||
});
|
||||
|
||||
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 = props.previousInstancesWorldDialog;
|
||||
@@ -141,14 +153,14 @@
|
||||
array.push(ref);
|
||||
}
|
||||
array.sort(compareByCreatedAt);
|
||||
previousInstancesWorldDialogTable.data = array;
|
||||
rawRows.value = array;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function deleteGameLogWorldInstance(row) {
|
||||
database.deleteGameLogInstanceByInstanceId({ location: row.location });
|
||||
removeFromArray(previousInstancesWorldDialogTable.data, row);
|
||||
removeFromArray(rawRows.value, row);
|
||||
}
|
||||
|
||||
function deleteGameLogWorldInstancePrompt(row) {
|
||||
@@ -177,9 +189,3 @@
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-pd-0 {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
import { ArrowUpDown } 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);
|
||||
}}
|
||||
>
|
||||
<i class="ri-information-line"></i>
|
||||
</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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -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>
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,142 @@
|
||||
import { ArrowUpDown } 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);
|
||||
}}
|
||||
>
|
||||
<i class="ri-information-line"></i>
|
||||
</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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -5,79 +5,31 @@
|
||||
:title="t('dialog.previous_instances.header')"
|
||||
width="1000px"
|
||||
append-to-body>
|
||||
<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="previousInstancesUserDialogTable.filters[0].value"
|
||||
:placeholder="t('dialog.previous_instances.search_placeholder')"
|
||||
style="display: block; width: 150px" />
|
||||
</div>
|
||||
<DataTable :loading="loading" v-bind="previousInstancesUserDialogTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
|
||||
<template #default="scope">
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.world')" prop="name" sortable>
|
||||
<template #default="scope">
|
||||
<Location
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.instance_creator')" prop="location" width="170">
|
||||
<template #default="scope">
|
||||
<DisplayName :userid="scope.row.$location.userId" :location="scope.row.$location.tag" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
|
||||
<template #default="scope">
|
||||
<span v-text="scope.row.timer"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.previous_instances.action')" width="120" align="right">
|
||||
<template #default="scope">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="showLaunchDialog(scope.row.location)"
|
||||
><i class="ri-door-open-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="showPreviousInstancesInfoDialog(scope.row.location)"
|
||||
><i class="ri-information-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-if="shiftHeld"
|
||||
style="color: #f56c6c"
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="deleteGameLogUserInstance(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-else
|
||||
class="button-pd-0 w-6 h-6 text-xs"
|
||||
@click="deleteGameLogUserInstancePrompt(scope.row)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="loading"
|
||||
:table-style="tableStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems"
|
||||
:on-page-size-change="handlePageSizeChange">
|
||||
<template #toolbar>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@@ -85,14 +37,17 @@
|
||||
|
||||
import {
|
||||
compareByCreatedAt,
|
||||
formatDateFilter,
|
||||
localeIncludes,
|
||||
parseLocation,
|
||||
removeFromArray,
|
||||
timeToText
|
||||
} from '../../../shared/utils';
|
||||
import { useInstanceStore, useLaunchStore, useUiStore } from '../../../stores';
|
||||
import { useInstanceStore, useLaunchStore, useSearchStore, useUiStore, useVrcxStore } from '../../../stores';
|
||||
import { DataTableLayout } from '../../ui/data-table';
|
||||
import { createColumns } from './previousInstancesUserColumns.jsx';
|
||||
import { database } from '../../../service/database';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const props = defineProps({
|
||||
previousInstancesUserDialog: {
|
||||
@@ -114,23 +69,17 @@
|
||||
|
||||
const emit = defineEmits(['update:previous-instances-user-dialog']);
|
||||
const loading = ref(false);
|
||||
const previousInstancesUserDialogTable = reactive({
|
||||
data: [],
|
||||
filters: [{ prop: 'worldName', value: '' }],
|
||||
tableProps: {
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
defaultSort: { prop: 'created_at', order: 'descending' }
|
||||
},
|
||||
pageSize: 10,
|
||||
paginationProps: {
|
||||
layout: 'sizes,prev,pager,next,total'
|
||||
}
|
||||
});
|
||||
const rawRows = ref([]);
|
||||
const search = ref('');
|
||||
const pageSizes = [10, 25, 50, 100];
|
||||
const pageSize = ref(10);
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const { showLaunchDialog } = useLaunchStore();
|
||||
const { showPreviousInstancesInfoDialog } = useInstanceStore();
|
||||
const { shiftHeld } = storeToRefs(useUiStore());
|
||||
const { stringComparer } = storeToRefs(useSearchStore());
|
||||
const vrcxStore = useVrcxStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const previousInstancesUserDialogIndex = ref(2000);
|
||||
@@ -145,6 +94,64 @@
|
||||
}
|
||||
});
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
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(props.previousInstancesUserDialog.userRef);
|
||||
@@ -155,7 +162,7 @@
|
||||
array.push(item);
|
||||
}
|
||||
array.sort(compareByCreatedAt);
|
||||
previousInstancesUserDialogTable.data = array;
|
||||
rawRows.value = array;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
@@ -178,7 +185,7 @@
|
||||
location: row.location,
|
||||
events: row.events
|
||||
});
|
||||
removeFromArray(previousInstancesUserDialogTable.data, row);
|
||||
removeFromArray(rawRows.value, row);
|
||||
}
|
||||
|
||||
function deleteGameLogUserInstancePrompt(row) {
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import { ArrowUpDown } 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);
|
||||
}}
|
||||
>
|
||||
<i class="ri-door-open-line"></i>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="w-6 h-6 text-xs"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onShowInfo?.(original?.location);
|
||||
}}
|
||||
>
|
||||
<i class="ri-information-line"></i>
|
||||
</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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { computed, ref, useAttrs } from 'vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { Eye, EyeOff, X } from 'lucide-vue-next';
|
||||
import { computed, ref, useAttrs } from 'vue';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '.';
|
||||
|
||||
@@ -31,11 +31,45 @@
|
||||
const reveal = ref(false);
|
||||
const valueLength = computed(() => String(modelValue.value ?? '').length);
|
||||
const maxLength = computed(() => props.maxlength ?? attrs.maxlength);
|
||||
const wrapperClass = computed(() =>
|
||||
cn(props.class, attrs.class, props.size === 'sm' && 'h-8')
|
||||
);
|
||||
const wrapperClass = computed(() => cn(props.class, attrs.class, props.size === 'sm' && 'h-8', 'flex-nowrap'));
|
||||
const inputClass = computed(() => cn(props.inputClass));
|
||||
|
||||
const wrapperStyle = computed(() => {
|
||||
const raw = attrs.style;
|
||||
if (!raw) return undefined;
|
||||
if (typeof raw === 'string') {
|
||||
const filtered = raw
|
||||
.split(';')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s && !s.toLowerCase().startsWith('display:'))
|
||||
.join('; ');
|
||||
return filtered || undefined;
|
||||
}
|
||||
if (Array.isArray(raw)) {
|
||||
return raw.map((s) => {
|
||||
if (typeof s === 'string') {
|
||||
return s
|
||||
.split(';')
|
||||
.map((p) => p.trim())
|
||||
.filter((p) => p && !p.toLowerCase().startsWith('display:'))
|
||||
.join('; ');
|
||||
}
|
||||
if (s && typeof s === 'object') {
|
||||
const next = { ...s };
|
||||
delete next.display;
|
||||
return next;
|
||||
}
|
||||
return s;
|
||||
});
|
||||
}
|
||||
if (raw && typeof raw === 'object') {
|
||||
const next = { ...raw };
|
||||
delete next.display;
|
||||
return next;
|
||||
}
|
||||
return raw;
|
||||
});
|
||||
|
||||
const inputType = computed(() => {
|
||||
const rawType = props.type ?? attrs.type;
|
||||
if (props.showPassword) {
|
||||
@@ -45,15 +79,13 @@
|
||||
});
|
||||
|
||||
const inputAttrs = computed(() => {
|
||||
const {
|
||||
class: _class,
|
||||
style: _style,
|
||||
type: _type,
|
||||
maxlength: _maxlength,
|
||||
onInput: _onInput,
|
||||
onChange: _onChange,
|
||||
...rest
|
||||
} = attrs;
|
||||
const rest = { ...(attrs ?? {}) };
|
||||
delete rest.class;
|
||||
delete rest.style;
|
||||
delete rest.type;
|
||||
delete rest.maxlength;
|
||||
delete rest.onInput;
|
||||
delete rest.onChange;
|
||||
return {
|
||||
...rest,
|
||||
type: inputType.value,
|
||||
@@ -61,7 +93,7 @@
|
||||
};
|
||||
});
|
||||
|
||||
const isDisabled = computed(() => Boolean(inputAttrs.value.disabled));
|
||||
const isDisabled = computed(() => Boolean(/** @type {any} */ (inputAttrs.value)?.disabled));
|
||||
const showCount = computed(() => Boolean(maxLength.value) && props.showCount);
|
||||
|
||||
function clearValue() {
|
||||
@@ -88,7 +120,7 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InputGroup :class="wrapperClass" :style="attrs.style" :data-disabled="isDisabled ? 'true' : undefined">
|
||||
<InputGroup :class="wrapperClass" :style="wrapperStyle" :data-disabled="isDisabled ? 'true' : undefined">
|
||||
<InputGroupAddon v-if="$slots.leading" align="inline-start">
|
||||
<slot name="leading" />
|
||||
</InputGroupAddon>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import { X } from 'lucide-vue-next';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupTextarea } from '.';
|
||||
|
||||
@@ -29,8 +29,43 @@
|
||||
const textareaRef = ref(null);
|
||||
const valueLength = computed(() => String(modelValue.value ?? '').length);
|
||||
const maxLength = computed(() => props.maxlength ?? attrs.maxlength);
|
||||
const wrapperClass = computed(() => cn(props.class, attrs.class));
|
||||
const wrapperClass = computed(() => cn(props.class, attrs.class, 'flex-nowrap'));
|
||||
const inputClass = computed(() => cn(props.inputClass));
|
||||
const wrapperStyle = computed(() => {
|
||||
const raw = attrs.style;
|
||||
if (!raw) return undefined;
|
||||
if (typeof raw === 'string') {
|
||||
const filtered = raw
|
||||
.split(';')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s && !s.toLowerCase().startsWith('display:'))
|
||||
.join('; ');
|
||||
return filtered || undefined;
|
||||
}
|
||||
if (Array.isArray(raw)) {
|
||||
return raw.map((s) => {
|
||||
if (typeof s === 'string') {
|
||||
return s
|
||||
.split(';')
|
||||
.map((p) => p.trim())
|
||||
.filter((p) => p && !p.toLowerCase().startsWith('display:'))
|
||||
.join('; ');
|
||||
}
|
||||
if (s && typeof s === 'object') {
|
||||
const next = { ...s };
|
||||
delete next.display;
|
||||
return next;
|
||||
}
|
||||
return s;
|
||||
});
|
||||
}
|
||||
if (raw && typeof raw === 'object') {
|
||||
const next = { ...raw };
|
||||
delete next.display;
|
||||
return next;
|
||||
}
|
||||
return raw;
|
||||
});
|
||||
const showCount = computed(() => Boolean(maxLength.value) && props.showCount);
|
||||
const autosizeConfig = computed(() => {
|
||||
if (!props.autosize) return null;
|
||||
@@ -38,21 +73,19 @@
|
||||
});
|
||||
|
||||
const inputAttrs = computed(() => {
|
||||
const {
|
||||
class: _class,
|
||||
style: _style,
|
||||
maxlength: _maxlength,
|
||||
onInput: _onInput,
|
||||
onChange: _onChange,
|
||||
...rest
|
||||
} = attrs;
|
||||
const rest = { ...(attrs ?? {}) };
|
||||
delete rest.class;
|
||||
delete rest.style;
|
||||
delete rest.maxlength;
|
||||
delete rest.onInput;
|
||||
delete rest.onChange;
|
||||
return {
|
||||
...rest,
|
||||
maxlength: maxLength.value
|
||||
};
|
||||
});
|
||||
|
||||
const isDisabled = computed(() => Boolean(inputAttrs.value.disabled));
|
||||
const isDisabled = computed(() => Boolean(/** @type {any} */ (inputAttrs.value)?.disabled));
|
||||
|
||||
function resolveTextareaEl() {
|
||||
const instance = textareaRef.value;
|
||||
@@ -114,7 +147,7 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InputGroup :class="wrapperClass" :style="attrs.style" :data-disabled="isDisabled ? 'true' : undefined">
|
||||
<InputGroup :class="wrapperClass" :style="wrapperStyle" :data-disabled="isDisabled ? 'true' : undefined">
|
||||
<InputGroupAddon v-if="$slots.leading" align="block-start">
|
||||
<slot name="leading" />
|
||||
</InputGroupAddon>
|
||||
|
||||
Reference in New Issue
Block a user