Skip to content

Commit f763d14

Browse files
Revilo0509Revilo0509
committed
work
1 parent 106308f commit f763d14

9 files changed

Lines changed: 1165 additions & 53 deletions

File tree

‎app/components/SidebarComponent.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
<script setup lang="ts">
2+
const { locales, setLocale, locale } = useI18n();
3+
4+
const items = computed(() =>
5+
locales.value.map((l) => ({
6+
label: l.name ?? l.code,
7+
value: l.code,
8+
})),
9+
);
10+
11+
const selected = computed({
12+
get: () => locale.value,
13+
set: async (val) => {
14+
if (!val) return;
15+
await setLocale(val);
16+
},
17+
});
18+
</script>
19+
120
<template>
221
<USidebar
322
side="right"
@@ -6,5 +25,21 @@
625
}"
726
>
827
<div id="sidebar" />
28+
29+
<template #footer>
30+
<UModal title="Settings">
31+
<UButton label="Settings" color="neutral" variant="subtle" />
32+
33+
<template #body>
34+
Language:
35+
<USelect
36+
v-model="selected"
37+
:items="items"
38+
value-key="value"
39+
label-key="label"
40+
/>
41+
</template>
42+
</UModal>
43+
</template>
944
</USidebar>
1045
</template>

‎app/pages/index.vue‎

Lines changed: 34 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,23 @@
11
<script setup lang="ts">
2-
import type { TableColumn } from "#ui/types";
3-
import { useApi } from "~/composables/useApi";
4-
import { useDataTable } from "~/composables/useDataTable";
5-
import { createUuidTransformer } from "~/utils/dataTransformers";
6-
2+
const { t } = useI18n();
73
const api = useApi();
84
const transformer = useTransformerStore();
9-
transformer.loadCategories();
105
11-
const categoriesResponse = await api.categories();
12-
const categories = [...categoriesResponse.data];
13-
categories.splice(0, 0, { id: -1, name: "None" });
14-
const selectedCategory = ref(
15-
categories.find((p: { name: string }) => p.name === "None") ?? null,
16-
);
6+
void transformer.loadCategories();
7+
8+
const [categoriesRes, itemsRes, playersRes] = await Promise.all([
9+
api.categories(),
10+
api.items(),
11+
api.players(),
12+
]);
1713
18-
const itemsResponse = await api.items();
19-
const items = [...itemsResponse.data];
20-
items.splice(0, 0, { id: -1, name: "None" });
21-
const selectedItem = ref(
22-
items.find((p: { name: string }) => p.name === "None") ?? null,
23-
);
14+
const categories = withNoneOption(categoriesRes.data);
15+
const items = withNoneOption(itemsRes.data);
16+
const players = withNoneOption(playersRes.data);
2417
25-
const playersResponse = await api.players();
26-
const players = [...playersResponse.data];
27-
players.splice(0, 0, { name: "None", playerUuid: "None" });
28-
const selectedPlayer = ref(
29-
players.find((p: { name: string }) => p.name === "None") ?? null,
30-
);
18+
const selectedCategory = ref(getDefaultNone(categories));
19+
const selectedItem = ref(getDefaultNone(items));
20+
const selectedPlayer = ref(getDefaultNone(players));
3121
3222
const { data, page, maxPage, isLoading, error, filters } = useDataTable({
3323
filters: [
@@ -53,52 +43,43 @@ const { data, page, maxPage, isLoading, error, filters } = useDataTable({
5343
modelValue: selectedItem,
5444
},
5545
],
56-
onFetch: async (filterValues, pageNum) => {
57-
const category = filterValues.category as { name: string } | undefined;
58-
const item = filterValues.item as { name: string } | null | undefined;
59-
const player = filterValues.player as
60-
| { name: string; playerUuid: string }
61-
| null
62-
| undefined;
6346
64-
const categoryName =
65-
category && category.name !== "None" ? category.name : undefined;
66-
const itemName = item && item.name !== "None" ? item.name : undefined;
67-
const playerUuid =
68-
player && player.name !== "None" ? player.playerUuid : undefined;
47+
onFetch: async (filterValues, pageNum) => {
48+
const { category, item, player_uuid } = normalizeStatsFilters(filterValues);
6949
7050
const response = await api.stats({
71-
item: itemName,
72-
category: categoryName,
73-
player_uuid: playerUuid,
51+
category,
52+
item,
53+
player_uuid,
7454
limit: 25,
7555
page: pageNum,
7656
});
57+
7758
return { data: response.data as any };
7859
},
79-
onTransform: createUuidTransformer("playerName") as any,
60+
61+
onTransform: createUuidTransformer("playerName"),
8062
});
8163
82-
const columns: TableColumn<Record<string, unknown>>[] = [
64+
const columns = computed(() => [
8365
{
8466
accessorKey: "playerName",
85-
header: "Player",
67+
header: t("stats.player"),
8668
},
8769
{
88-
accessorFn: (row) => {
89-
return transformer.getCategoryNameById(row.statCategoriesId as number);
90-
},
91-
header: "Category",
70+
accessorFn: (row) =>
71+
transformer.getCategoryNameById(row.statCategoriesId as number),
72+
header: t("stats.category"),
9273
},
9374
{
9475
accessorKey: "statName",
95-
header: "Type",
76+
header: t("stats.type"),
9677
},
9778
{
9879
accessorKey: "value",
99-
header: "Value",
80+
header: t("stats.value"),
10081
},
101-
];
82+
]);
10283
10384
function handlePageUpdate(newPage: number) {
10485
page.value = newPage;
@@ -108,7 +89,7 @@ function handlePageUpdate(newPage: number) {
10889
<template>
10990
<div>
11091
<UContainer>
111-
<TableHeader title="Statistics" />
92+
<TableHeader :title="t('stats.title')" />
11293

11394
<DynamicTable
11495
:data="data as any"
@@ -127,7 +108,9 @@ function handlePageUpdate(newPage: number) {
127108
</template>
128109

129110
<template #value-cell="{ cell }">
130-
<span class="font-mono font-semibold">{{ cell.getValue() }}</span>
111+
<span class="font-mono font-semibold">
112+
{{ cell.getValue() }}
113+
</span>
131114
</template>
132115
</DynamicTable>
133116
</UContainer>

‎app/utils/normalizeStatsFilters.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
type AnyFilter = {
2+
id: number;
3+
name: string;
4+
playerUuid?: string;
5+
};
6+
7+
function isNone(v: { id: number }) {
8+
return v.id === -1;
9+
}
10+
11+
export function normalizeStatsFilters(filters: Record<string, any>) {
12+
const category = filters.category as AnyFilter | undefined;
13+
const item = filters.item as AnyFilter | undefined;
14+
const player = filters.player as AnyFilter | undefined;
15+
16+
return {
17+
category: category && !isNone(category) ? category.name : undefined,
18+
item: item && !isNone(item) ? item.name : undefined,
19+
player_uuid: player && !isNone(player) ? player.playerUuid : undefined,
20+
};
21+
}

‎app/utils/selectWithNone.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function withNoneOption<T extends { name: string }>(items: T[]) {
2+
return [{ id: -1, name: "None" } as unknown as T, ...items];
3+
}
4+
5+
export function getDefaultNone<T extends { name: string }>(items: T[]) {
6+
return items.find((i) => i.name === "None") ?? null;
7+
}

‎i18n/locales/en.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"stats": {
3+
"title": "Statistics",
4+
"player": "Player",
5+
"category": "Category",
6+
"type": "Type",
7+
"value": "Value"
8+
}
9+
}

‎i18n/locales/sv.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"stats": {
3+
"title": "Statistik",
4+
"player": "Spelare",
5+
"category": "Kategori",
6+
"type": "Typ",
7+
"value": "Värde"
8+
}
9+
}

‎nuxt.config.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// https://nuxt.com/docs/api/configuration/nuxt-config
22
export default defineNuxtConfig({
3-
modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
3+
modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt", "@nuxtjs/i18n"],
44
ssr: false,
55
devtools: {
66
enabled: true,
@@ -23,4 +23,12 @@ export default defineNuxtConfig({
2323
},
2424
},
2525
},
26+
27+
i18n: {
28+
defaultLocale: "en",
29+
locales: [
30+
{ code: "en", name: "English", file: "en.json" },
31+
{ code: "sv", name: "Svenska", file: "sv.json" },
32+
],
33+
},
2634
});

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@iconify-json/lucide": "^1.2.101",
1717
"@iconify-json/simple-icons": "^1.2.77",
1818
"@nuxt/ui": "^4.6.1",
19+
"@nuxtjs/i18n": "10.3.0",
1920
"@pinia/nuxt": "0.11.3",
2021
"nuxt": "^4.4.2",
2122
"tailwindcss": "^4.2.2"

0 commit comments

Comments
 (0)