Category Names

Author: Revilo0509

app/components/DynamicTable.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { FilterConfig } from "~/composables/useDataTable";
 
+const { t } = useI18n();
+
 defineProps<{
   filters: FilterConfig[];
   maxPage?: number;
@@ -23,7 +25,7 @@ function emitPageUpdate(value: number) {
       <label
         class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block"
       >
-        Page
+        {{ t("filters.page") }}
       </label>
       <UInputNumber
         v-model="pageValue"
@@ -50,7 +52,7 @@ function emitPageUpdate(value: number) {
       <UInput
         v-else-if="filter.type === 'input'"
         v-model="filter.modelValue.value as string"
-        placeholder="Enter value..."
+        :placeholder="t('filters.enterValue')"
       />
     </div>
   </div>

app/components/FilterPanel.vue

@@ -11,33 +11,33 @@ const [categoriesRes, itemsRes, playersRes] = await Promise.all([
   api.players(),
 ]);
 
-const categories = withNoneOption(categoriesRes.data);
-const items = withNoneOption(itemsRes.data);
-const players = withNoneOption(playersRes.data);
+const categories = withNoneOption(categoriesRes.data, t("common.none"));
+const items = withNoneOption(itemsRes.data, t("common.none"));
+const players = withNoneOption(playersRes.data, t("common.none"));
 
-const selectedCategory = ref(getDefaultNone(categories));
-const selectedItem = ref(getDefaultNone(items));
-const selectedPlayer = ref(getDefaultNone(players));
+const selectedCategory = ref(getDefaultNone(categories, t("common.none")));
+const selectedItem = ref(getDefaultNone(items, t("common.none")));
+const selectedPlayer = ref(getDefaultNone(players, t("common.none")));
 
-const { data, page, maxPage, isLoading, error, filters } = useDataTable({
+const { data, page, maxPage, filters } = useDataTable({
   filters: [
     {
       key: "player",
-      label: "Player",
+      label: t("filters.player"),
       type: "select",
       items: players,
       modelValue: selectedPlayer,
     },
     {
       key: "category",
-      label: "Category",
+      label: t("filters.category"),
       type: "select",
       items: categories,
       modelValue: selectedCategory,
     },
     {
       key: "item",
-      label: "Item",
+      label: t("filters.item"),
       type: "select",
       items: items,
       modelValue: selectedItem,
@@ -67,8 +67,13 @@ const columns = computed(() => [
     header: t("stats.player"),
   },
   {
-    accessorFn: (row) =>
-      transformer.getCategoryNameById(row.statCategoriesId as number),
+    accessorFn: (row) => {
+      const categoryName = transformer.getCategoryNameById(
+        row.statCategoriesId as number,
+      );
+      const translated = t(`categories.${categoryName}`) || categoryName;
+      return translated;
+    },
     header: t("stats.category"),
   },
   {
@@ -91,12 +96,7 @@ function handlePageUpdate(newPage: number) {
     <UContainer>
       <TableHeader :title="t('stats.title')" />
 
-      <DynamicTable
-        :data="data as any"
-        :columns="columns"
-        :is-loading="isLoading"
-        :error="error"
-      >
+      <UTable :data="data" :columns="columns">
         <template #playerName-cell="{ cell }">
           <div class="flex items-center gap-3">
             <img
@@ -106,13 +106,7 @@ function handlePageUpdate(newPage: number) {
             <span>{{ cell.getValue() }}</span>
           </div>
         </template>
-
-        <template #value-cell="{ cell }">
-          <span class="font-mono font-semibold">
-            {{ cell.getValue() }}
-          </span>
-        </template>
-      </DynamicTable>
+      </UTable>
     </UContainer>
 
     <ClientOnly>

app/pages/index.vue

@@ -1,7 +1,13 @@
-export function withNoneOption<T extends { name: string }>(items: T[]) {
-  return [{ id: -1, name: "None" } as unknown as T, ...items];
+export function withNoneOption<T extends { name: string }>(
+  items: T[],
+  noneLabel: string,
+) {
+  return [{ id: -1, name: noneLabel } as unknown as T, ...items];
 }
 
-export function getDefaultNone<T extends { name: string }>(items: T[]) {
-  return items.find((i) => i.name === "None") ?? null;
+export function getDefaultNone<T extends { name: string }>(
+  items: T[],
+  noneLabel: string,
+) {
+  return items.find((i) => i.name === noneLabel) ?? null;
 }

app/utils/selectWithNone.ts

@@ -8,8 +8,6 @@ services:
     environment:
       - HOST=0.0.0.0
       - PORT=3000
-      - NITRO_HOST=0.0.0.0
-      - NITRO_PORT=3000
       - NUXT_PUBLIC_API_URL=http://0.0.0.0:2456
     restart: unless-stopped
     depends_on:

docker-compose.yaml

@@ -5,5 +5,29 @@
     "category": "Category",
     "type": "Type",
     "value": "Value"
+  },
+  "filters": {
+    "player": "Player",
+    "category": "Category",
+    "item": "Item",
+    "page": "Page",
+    "enterValue": "Enter value..."
+  },
+  "common": {
+    "none": "None"
+  },
+  "errors": {
+    "fetchFailed": "Failed to fetch data"
+  },
+  "categories": {
+    "minecraft:picked_up": "Picked up",
+    "minecraft:custom": "Other",
+    "minecraft:broken": "Broken",
+    "minecraft:mined": "Mined",
+    "minecraft:dropped": "Dropped",
+    "minecraft:crafted": "Crafted",
+    "minecraft:killed_by": "Killed By",
+    "minecraft:killed": "Killed",
+    "minecraft:used": "Used"
   }
 }

i18n/locales/en.json

@@ -5,5 +5,29 @@
     "category": "Kategori",
     "type": "Typ",
     "value": "Värde"
+  },
+  "filters": {
+    "player": "Spelare",
+    "category": "Kategori",
+    "item": "Föremål",
+    "page": "Sida",
+    "enterValue": "Ange värde..."
+  },
+  "common": {
+    "none": "Ingen"
+  },
+  "errors": {
+    "fetchFailed": "Misslyckades hämta data"
+  },
+  "categories": {
+    "minecraft:picked_up": "Plockat upp",
+    "minecraft:custom": "Annat",
+    "minecraft:broken": "Använt sönder",
+    "minecraft:mined": "Brutit",
+    "minecraft:dropped": "Kastat",
+    "minecraft:crafted": "Tillverkat",
+    "minecraft:killed_by": "Dödats av",
+    "minecraft:killed": "Dödat",
+    "minecraft:used": "Använt"
   }
 }