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

improve dashboard widget

Browse Source
This commit is contained in:
pa
2026-03-13 21:08:34 +09:00
parent 94000a5cc4
commit 9ac18ac79e
8 changed files with 287 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/localization/en.json
View File

@@ -101,7 +101,6 @@
},
"panel": {
"not_selected": "No Panel Selected",
"replace": "Replace Panel",
"select": "Select Panel",
"not_configured": "Panel Not Configured"
},
@@ -118,7 +117,7 @@
"config": {
"filters": "Event Types",
"columns": "Columns",
"show_detail": "Show Detail",
"detail": "Detail",
"show_type": "Show Type"
},
"no_data": "No data",

16
src/views/Dashboard/Dashboard.vue
View File

@@ -12,7 +12,11 @@
<ResizablePanelGroup direction="vertical" :auto-save-id="`dashboard-${id}`" class="flex-1 min-h-0">
<template v-for="(row, rowIndex) in displayRows" :key="rowIndex">
<ResizablePanel :default-size="100 / displayRows.length" :min-size="10">
<DashboardRow :row="row" :row-index="rowIndex" :dashboard-id="id" />
<DashboardRow
:row="row"
:row-index="rowIndex"
:dashboard-id="id"
@update-panel="handleLiveUpdatePanel" />
</ResizablePanel>
<ResizableHandle v-if="rowIndex < displayRows.length - 1" />
</template>
@@ -179,10 +183,16 @@
editRows.value[rowIndex].panels[panelIndex] = panelValue;
};
const handleLiveUpdatePanel = async (rowIndex, panelIndex, panelValue) => {
if (!dashboard.value?.rows?.[rowIndex]?.panels) return;
const rows = JSON.parse(JSON.stringify(dashboard.value.rows));
rows[rowIndex].panels[panelIndex] = panelValue;
await dashboardStore.updateDashboard(props.id, { rows });
};
const handleSave = async () => {
const isFirstSave =
dashboardStore.dashboards.length === 1 &&
(!dashboard.value?.rows || dashboard.value.rows.length === 0);
dashboardStore.dashboards.length === 1 && (!dashboard.value?.rows || dashboard.value.rows.length === 0);
await dashboardStore.updateDashboard(props.id, {
name: editName.value.trim() || dashboard.value?.name || 'Dashboard',

163
src/views/Dashboard/components/DashboardPanel.vue
View File

@@ -9,71 +9,22 @@
@click="emit('remove')">
<X class="size-4" />
</Button>
<div class="flex w-full min-h-0 flex-col gap-2 p-3">
<div class="flex flex-1 items-center justify-center gap-2 text-base text-muted-foreground">
<i v-if="panelIcon" :class="panelIcon" class="text-base" />
<span>{{ panelLabel || t('dashboard.panel.not_selected') }}</span>
</div>
<!-- Widget config section -->
<div v-if="isWidget && panelKey" class="border-t border-border/50 py-1">
<!-- Feed/GameLog: event type filters -->
<template v-if="widgetType === 'feed' || widgetType === 'game-log'">
<span class="text-xs text-muted-foreground">{{ t('dashboard.widget.config.filters') }}</span>
<div class="flex flex-wrap gap-1.5 mt-1">
<label
v-for="filterType in availableFilters"
:key="filterType"
class="flex items-center gap-1 text-xs cursor-pointer">
<input
type="checkbox"
:checked="isFilterActive(filterType)"
@change="toggleFilter(filterType)" />
{{ filterType }}
</label>
</div>
<div class="mt-2">
<label
v-if="widgetType === 'game-log'"
class="flex items-center gap-1 text-xs cursor-pointer">
<input
type="checkbox"
:checked="panelConfig.showDetail || false"
@change="toggleBooleanConfig('showDetail')" />
{{ t('dashboard.widget.config.show_detail') }}
</label>
<label v-if="widgetType === 'feed'" class="flex items-center gap-1 text-xs cursor-pointer">
<input
type="checkbox"
:checked="panelConfig.showType || false"
@change="toggleBooleanConfig('showType')" />
{{ t('dashboard.widget.config.show_type') }}
</label>
</div>
</template>
<!-- Instance: column visibility -->
<template v-if="widgetType === 'instance'">
<span class="text-xs text-muted-foreground">{{ t('dashboard.widget.config.columns') }}</span>
<div class="flex flex-wrap gap-1.5 mt-1">
<label
v-for="col in availableColumns"
:key="col"
class="flex items-center gap-1 text-xs cursor-pointer">
<input
type="checkbox"
:checked="isColumnActive(col)"
:disabled="col === 'displayName'"
@change="toggleColumn(col)" />
{{ t(`table.playerList.${col}`) }}
</label>
</div>
</template>
</div>
<Button variant="outline" class="w-full" @click="openSelector">
{{ panelKey ? t('dashboard.panel.replace') : t('dashboard.panel.select') }}
</Button>
<div class="flex w-full min-h-0 flex-col items-center justify-center gap-2 p-3">
<template v-if="panelKey">
<div class="flex items-center gap-2 text-base text-muted-foreground">
<i v-if="panelIcon" :class="panelIcon" class="text-base" />
<span>{{ panelLabel }}</span>
<Button variant="ghost" size="icon-sm" @click="clearPanel">
<Trash2 class="size-3.5" />
</Button>
</div>
</template>
<template v-else>
<span class="text-base text-muted-foreground">{{ t('dashboard.panel.not_selected') }}</span>
<Button variant="outline" @click="openSelector">
{{ t('dashboard.panel.select') }}
</Button>
</template>
</div>
</template>
@@ -97,7 +48,7 @@
<script setup>
import { computed, ref } from 'vue';
import { X } from 'lucide-vue-next';
import { Trash2, X } from 'lucide-vue-next';
import { useI18n } from 'vue-i18n';
import { Button } from '@/components/ui/button';
@@ -106,18 +57,6 @@
import PanelSelector from './PanelSelector.vue';
import { panelComponentMap } from './panelRegistry';
const FEED_TYPES = ['GPS', 'Online', 'Offline', 'Status', 'Avatar', 'Bio'];
const GAMELOG_TYPES = [
'Location',
'OnPlayerJoined',
'OnPlayerLeft',
'VideoPlay',
'PortalSpawn',
'Event',
'External'
];
const INSTANCE_COLUMNS = ['icon', 'displayName', 'rank', 'timer', 'platform', 'language', 'status'];
const props = defineProps({
panelData: {
type: [String, Object],
@@ -153,11 +92,6 @@
return panelKey.value && panelKey.value.startsWith('widget:');
});
const widgetType = computed(() => {
if (!isWidget.value) return null;
return panelKey.value.replace('widget:', '');
});
const panelComponent = computed(() => {
if (!panelKey.value) return null;
return panelComponentMap[panelKey.value] || null;
@@ -165,7 +99,10 @@
const widgetProps = computed(() => {
if (!isWidget.value) return {};
return { config: panelConfig.value };
return {
config: panelConfig.value,
configUpdater: (newConfig) => emitConfigUpdate(newConfig)
};
});
const widgetDefs = {
@@ -187,60 +124,6 @@
const panelIcon = computed(() => panelOption.value?.icon || '');
// Filter config helpers
const availableFilters = computed(() => {
if (widgetType.value === 'feed') return FEED_TYPES;
if (widgetType.value === 'game-log') return GAMELOG_TYPES;
return [];
});
function isFilterActive(filterType) {
const filters = panelConfig.value.filters;
if (!filters || !Array.isArray(filters) || filters.length === 0) return true;
return filters.includes(filterType);
}
function toggleFilter(filterType) {
const currentFilters = panelConfig.value.filters;
let filters;
if (!currentFilters || !Array.isArray(currentFilters) || currentFilters.length === 0) {
filters = availableFilters.value.filter((f) => f !== filterType);
} else if (currentFilters.includes(filterType)) {
filters = currentFilters.filter((f) => f !== filterType);
if (filters.length === 0) filters = [];
} else {
filters = [...currentFilters, filterType];
if (filters.length === availableFilters.value.length) filters = [];
}
emitConfigUpdate({ ...panelConfig.value, filters });
}
const availableColumns = computed(() => INSTANCE_COLUMNS);
function isColumnActive(col) {
const columns = panelConfig.value.columns;
if (!columns || !Array.isArray(columns) || columns.length === 0) {
return ['icon', 'displayName', 'timer'].includes(col);
}
return columns.includes(col);
}
function toggleColumn(col) {
if (col === 'displayName') return; // Always visible
const currentColumns = panelConfig.value.columns || ['icon', 'displayName', 'timer'];
let columns;
if (currentColumns.includes(col)) {
columns = currentColumns.filter((c) => c !== col);
} else {
columns = [...currentColumns, col];
}
emitConfigUpdate({ ...panelConfig.value, columns });
}
function toggleBooleanConfig(key) {
emitConfigUpdate({ ...panelConfig.value, [key]: !panelConfig.value[key] });
}
function emitConfigUpdate(newConfig) {
emit('select', { key: panelKey.value, config: newConfig });
}
@@ -249,6 +132,10 @@
selectorOpen.value = true;
};
const clearPanel = () => {
emit('select', null);
};
const handleSelect = (value) => {
emit('select', value);
selectorOpen.value = false;

20
src/views/Dashboard/components/DashboardRow.vue
View File

@@ -1,9 +1,6 @@
<template>
<div class="relative h-full min-h-[180px]">
<div
v-if="isEditing"
class="flex h-full gap-2"
:class="isVertical ? 'flex-col' : 'flex-row'">
<div v-if="isEditing" class="flex h-full gap-2" :class="isVertical ? 'flex-col' : 'flex-row'">
<DashboardPanel
v-for="(panelItem, panelIndex) in row.panels"
:key="panelIndex"
@@ -21,16 +18,25 @@
:auto-save-id="`dashboard-${dashboardId}-row-${rowIndex}`"
class="h-full min-h-[180px]">
<ResizablePanel :default-size="50" :min-size="20">
<DashboardPanel :panel-data="row.panels[0]" class="h-full" />
<DashboardPanel
:panel-data="row.panels[0]"
class="h-full"
@select="(value) => emit('update-panel', rowIndex, 0, value)" />
</ResizablePanel>
<ResizableHandle />
<ResizablePanel :default-size="50" :min-size="20">
<DashboardPanel :panel-data="row.panels[1]" class="h-full" />
<DashboardPanel
:panel-data="row.panels[1]"
class="h-full"
@select="(value) => emit('update-panel', rowIndex, 1, value)" />
</ResizablePanel>
</ResizablePanelGroup>
<div v-else class="h-full">
<DashboardPanel :panel-data="row.panels[0]" class="h-full" />
<DashboardPanel
:panel-data="row.panels[0]"
class="h-full"
@select="(value) => emit('update-panel', rowIndex, 0, value)" />
</div>
</div>
</template>

124
src/views/Dashboard/widgets/FeedWidget.vue
View File

@@ -1,6 +1,31 @@
<template>
<div class="flex h-full min-h-0 flex-col">
<WidgetHeader :title="t('dashboard.widget.feed')" icon="ri-rss-line" route-name="feed" />
<WidgetHeader :title="t('dashboard.widget.feed')" icon="ri-rss-line" route-name="feed">
<DropdownMenu v-if="configUpdater">
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon-sm">
<Settings class="size-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-48">
<DropdownMenuCheckboxItem
v-for="filterType in FEED_TYPES"
:key="filterType"
:model-value="isFilterActive(filterType)"
@select.prevent
@update:modelValue="toggleFilter(filterType)">
{{ t(`view.feed.filters.${filterType}`) }}
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
:model-value="config.showType || false"
@select.prevent
@update:modelValue="toggleBooleanConfig('showType')">
{{ t('dashboard.widget.config.show_type') }}
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</WidgetHeader>
<div class="min-h-0 flex-1 overflow-y-auto" ref="listRef">
<Table v-if="filteredData.length" class="is-compact-table">
@@ -21,11 +46,9 @@
<TableCell class="truncate">
<template v-if="item.type === 'GPS'">
<MapPin class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="text-muted-foreground"> → </span>
<Location
class="inline [&>div]:inline-flex"
@@ -36,11 +59,9 @@
</template>
<template v-else-if="item.type === 'Online'">
<i class="x-user-status online mr-1"></i>
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<template v-if="item.location">
<span class="text-muted-foreground"> → </span>
<Location
@@ -53,45 +74,35 @@
</template>
<template v-else-if="item.type === 'Offline'">
<i class="x-user-status mr-1"></i>
<span
class="cursor-pointer font-medium text-muted-foreground/70 hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
</template>
<template v-else-if="item.type === 'Status'">
<i class="x-user-status mr-1" :class="statusClass(item.status)"></i>
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="text-muted-foreground"> {{ item.statusDescription }}</span>
</template>
<template v-else-if="item.type === 'Avatar'">
<Box class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="text-muted-foreground"> → {{ item.avatarName }}</span>
</template>
<template v-else-if="item.type === 'Bio'">
<Pencil class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="ml-1 text-muted-foreground">{{ t('dashboard.widget.feed_bio') }}</span>
</template>
<template v-else>
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="text-muted-foreground"> {{ item.type }}</span>
</template>
</TableCell>
@@ -108,13 +119,21 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Box, MapPin, Pencil } from 'lucide-vue-next';
import { Box, MapPin, Pencil, Settings } from 'lucide-vue-next';
import { statusClass } from '@/shared/utils/user';
import { formatDateFilter } from '@/shared/utils';
import { showUserDialog } from '@/coordinators/userCoordinator';
import { useFeedStore } from '@/stores';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import Location from '@/components/Location.vue';
import { TooltipWrapper } from '@/components/ui/tooltip';
import WidgetHeader from './WidgetHeader.vue';
@@ -126,6 +145,10 @@
config: {
type: Object,
default: () => ({})
},
configUpdater: {
type: Function,
default: null
}
});
@@ -140,6 +163,33 @@
return FEED_TYPES;
});
function isFilterActive(filterType) {
const filters = props.config.filters;
if (!filters || !Array.isArray(filters) || filters.length === 0) return true;
return filters.includes(filterType);
}
function toggleFilter(filterType) {
if (!props.configUpdater) return;
const currentFilters = props.config.filters;
let filters;
if (!currentFilters || !Array.isArray(currentFilters) || currentFilters.length === 0) {
filters = FEED_TYPES.filter((f) => f !== filterType);
} else if (currentFilters.includes(filterType)) {
filters = currentFilters.filter((f) => f !== filterType);
if (filters.length === 0) filters = [];
} else {
filters = [...currentFilters, filterType];
if (filters.length === FEED_TYPES.length) filters = [];
}
props.configUpdater({ ...props.config, filters });
}
function toggleBooleanConfig(key) {
if (!props.configUpdater) return;
props.configUpdater({ ...props.config, [key]: !props.config[key] });
}
const showType = computed(() => {
return props.config.showType || false;
});

112
src/views/Dashboard/widgets/GameLogWidget.vue
View File

@@ -1,6 +1,31 @@
<template>
<div class="flex h-full min-h-0 flex-col">
<WidgetHeader :title="t('dashboard.widget.game_log')" icon="ri-history-line" route-name="game-log" />
<WidgetHeader :title="t('dashboard.widget.game_log')" icon="ri-history-line" route-name="game-log">
<DropdownMenu v-if="configUpdater">
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon-sm">
<Settings class="size-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-48">
<DropdownMenuCheckboxItem
v-for="filterType in GAMELOG_TYPES"
:key="filterType"
:model-value="isFilterActive(filterType)"
@select.prevent
@update:modelValue="toggleFilter(filterType)">
{{ t(`view.game_log.filters.${filterType}`) }}
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
:model-value="config.showDetail || false"
@select.prevent
@update:modelValue="toggleBooleanConfig('showDetail')">
{{ t('dashboard.widget.config.detail') }}
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</WidgetHeader>
<div class="min-h-0 flex-1 overflow-y-auto">
<Table v-if="filteredData.length" class="is-compact-table">
@@ -8,7 +33,7 @@
<TableRow
v-for="(item, index) in filteredData"
:key="`${item.type}-${item.created_at}-${index}`"
class="cursor-default"
class="cursor-default hover:bg-transparent"
:class="{ 'border-l-2 border-l-chart-4': item.isFavorite }">
<TableCell class="w-28 text-[11px] tabular-nums text-muted-foreground">
<TooltipWrapper :content="formatExactTime(item.created_at)" side="top">
@@ -22,37 +47,57 @@
class="inline [&>div]:inline-flex"
:location="item.location"
:hint="item.worldName"
:grouphint="item.groupName"
disable-tooltip />
</template>
<template v-else-if="item.type === 'OnPlayerJoined'">
<LogIn class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium hover:underline"
class="cursor-pointer"
:style="item.tagColour ? { color: item.tagColour } : null"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span v-if="item.isFriend">{{ item.isFavorite ? '⭐' : '💚' }}</span>
</template>
<template v-else-if="item.type === 'OnPlayerLeft'">
<LogOut class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium text-muted-foreground/70 hover:underline"
class="cursor-pointer text-muted-foreground/70 hover:underline"
:style="item.tagColour ? { color: item.tagColour } : null"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span v-if="item.isFriend">{{ item.isFavorite ? '⭐' : '💚' }}</span>
</template>
<template v-else-if="item.type === 'VideoPlay'">
<Video class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span class="text-muted-foreground">{{ item.videoName || item.videoUrl }}</span>
<TooltipWrapper
:content="
item.videoId
? `${item.videoId}: ${item.videoName || item.videoUrl}`
: item.videoName || item.videoUrl
"
side="top">
<span>
<span v-if="item.videoId" class="mr-1 text-muted-foreground"
>{{ item.videoId }}:</span
>
<span
v-if="item.videoId !== 'LSMedia' && item.videoId !== 'PopcornPalace'"
class="cursor-pointer text-muted-foreground hover:underline"
@click="openExternalLink(item.videoUrl)"
>{{ item.videoName || item.videoUrl }}</span
>
<span v-else class="text-muted-foreground">{{ item.videoName }}</span>
</span>
</TooltipWrapper>
</template>
<template v-else-if="item.type === 'PortalSpawn'">
<Waypoints class="mr-1 inline-block h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span
class="cursor-pointer font-medium hover:underline"
@click="openUser(item.userId)"
>{{ item.displayName }}</span
>
<span class="cursor-pointer hover:underline" @click="openUser(item.userId)">{{
item.displayName
}}</span>
<span class="text-muted-foreground"> → </span>
<Location
v-if="item.location"
@@ -68,12 +113,12 @@
:content="item.data || item.message || ''"
side="top">
<span>
<span class="font-medium">{{ item.displayName }}</span>
<span>{{ item.displayName }}</span>
<span class="text-muted-foreground"> {{ item.type }}</span>
</span>
</TooltipWrapper>
<template v-else>
<span class="font-medium">{{ item.displayName }}</span>
<span>{{ item.displayName }}</span>
<span class="text-muted-foreground"> {{ item.type }}</span>
<span v-if="item.data || item.message" class="ml-1 text-muted-foreground"
>— {{ item.data || item.message }}</span
@@ -94,14 +139,22 @@
<script setup>
import { computed, onMounted, shallowRef, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { LogIn, LogOut, MapPin, Video, Waypoints } from 'lucide-vue-next';
import { LogIn, LogOut, MapPin, Settings, Video, Waypoints } from 'lucide-vue-next';
import { database } from '@/services/database';
import { showUserDialog } from '@/coordinators/userCoordinator';
import { useFriendStore, useGameLogStore } from '@/stores';
import { formatDateFilter } from '@/shared/utils';
import { formatDateFilter, openExternalLink } from '@/shared/utils';
import { watchState } from '@/services/watchState';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import Location from '@/components/Location.vue';
import { TooltipWrapper } from '@/components/ui/tooltip';
import WidgetHeader from './WidgetHeader.vue';
@@ -121,6 +174,10 @@
config: {
type: Object,
default: () => ({})
},
configUpdater: {
type: Function,
default: null
}
});
@@ -138,6 +195,33 @@
return GAMELOG_TYPES;
});
function isFilterActive(filterType) {
const filters = props.config.filters;
if (!filters || !Array.isArray(filters) || filters.length === 0) return true;
return filters.includes(filterType);
}
function toggleFilter(filterType) {
if (!props.configUpdater) return;
const currentFilters = props.config.filters;
let filters;
if (!currentFilters || !Array.isArray(currentFilters) || currentFilters.length === 0) {
filters = GAMELOG_TYPES.filter((f) => f !== filterType);
} else if (currentFilters.includes(filterType)) {
filters = currentFilters.filter((f) => f !== filterType);
if (filters.length === 0) filters = [];
} else {
filters = [...currentFilters, filterType];
if (filters.length === GAMELOG_TYPES.length) filters = [];
}
props.configUpdater({ ...props.config, filters });
}
function toggleBooleanConfig(key) {
if (!props.configUpdater) return;
props.configUpdater({ ...props.config, [key]: !props.config[key] });
}
const showDetail = computed(() => {
return props.config.showDetail || false;
});

46
src/views/Dashboard/widgets/InstanceWidget.vue
View File

@@ -1,6 +1,25 @@
<template>
<div class="flex h-full min-h-0 flex-col">
<WidgetHeader :title="t('dashboard.widget.instance')" icon="ri-group-3-line" route-name="player-list" />
<WidgetHeader :title="t('dashboard.widget.instance')" icon="ri-group-3-line" route-name="player-list">
<DropdownMenu v-if="configUpdater">
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon-sm">
<Settings class="size-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-48">
<DropdownMenuCheckboxItem
v-for="col in ALL_COLUMNS"
:key="col"
:model-value="isColumnVisible(col)"
:disabled="col === 'displayName'"
@select.prevent
@update:modelValue="toggleColumn(col)">
{{ t(`table.playerList.${col}`) }}
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</WidgetHeader>
<template v-if="hasPlayers">
<!-- Info bar -->
@@ -85,7 +104,7 @@
<script setup>
import { computed, onActivated, onMounted } from 'vue';
import { Apple, IdCard, Monitor, Smartphone } from 'lucide-vue-next';
import { Apple, IdCard, Monitor, Settings, Smartphone } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -94,6 +113,13 @@
import { showUserDialog, lookupUser } from '@/coordinators/userCoordinator';
import { displayLocation } from '@/shared/utils/locationParser';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import Timer from '@/components/Timer.vue';
import WidgetHeader from './WidgetHeader.vue';
import { Table, TableBody, TableRow, TableCell } from '@/components/ui/table';
@@ -105,6 +131,10 @@
config: {
type: Object,
default: () => ({})
},
configUpdater: {
type: Function,
default: null
}
});
@@ -124,6 +154,18 @@
return activeColumns.value.includes(col);
}
function toggleColumn(col) {
if (!props.configUpdater || col === 'displayName') return;
const currentColumns = props.config.columns || DEFAULT_COLUMNS;
let columns;
if (currentColumns.includes(col)) {
columns = currentColumns.filter((c) => c !== col);
} else {
columns = [...currentColumns, col];
}
props.configUpdater({ ...props.config, columns });
}
const hasPlayers = computed(() => {
return lastLocation.value.playerList && lastLocation.value.playerList.size > 0;
});

9
src/views/Dashboard/widgets/WidgetHeader.vue
View File

@@ -1,11 +1,14 @@
<template>
<div class="flex shrink-0 items-center justify-between border-b px-2.5 py-1.5">
<div class="group/header flex shrink-0 items-center justify-between border-b px-2.5 py-1.5">
<div
class="group flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
class="flex cursor-pointer items-center gap-1.5 text-xs font-semibold text-muted-foreground transition-colors hover:text-foreground"
@click="navigateToPage">
<i :class="icon" class="text-sm"></i>
<span>{{ title }}</span>
<ExternalLink class="size-3 opacity-0 transition-opacity group-hover:opacity-100" />
<ExternalLink class="size-3 opacity-0 transition-opacity group-hover/header:opacity-100" />
</div>
<div class="opacity-0 transition-opacity group-hover/header:opacity-100">
<slot />
</div>
</div>
</template>