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