From 669190d2bac5686c58ba16e45e2e35d563a3385b Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <georges.antoine.assi@gmail.com>
Date: Tue, 2 Jan 2024 19:34:30 -0500
Subject: [PATCH] Complete components

---
 frontend/src/components/Drawer/Base.vue       |  4 +-
 .../components/Gallery/AppBar/FilterBar.vue   |  4 +-
 .../src/components/Gallery/FabMenu/Base.vue   |  4 +-
 frontend/src/components/Game/Card/Base.vue    |  2 +-
 frontend/src/components/Game/Card/Cover.vue   | 14 +++----
 .../src/components/Game/DataTable/Base.vue    | 42 ++++++++++---------
 .../Settings/Config/PlatformBindingCard.vue   |  6 +--
 .../General/Interface/InterfaceOptions.vue    |  2 +-
 .../Settings/General/Theme/ThemeCard.vue      |  6 +--
 frontend/src/stores/auth.ts                   |  2 +-
 frontend/src/stores/heartbeat.ts              |  7 ++++
 frontend/tsconfig.json                        |  2 +-
 12 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/Drawer/Base.vue b/frontend/src/components/Drawer/Base.vue
index c3379cd36..aadd38eaf 100644
--- a/frontend/src/components/Drawer/Base.vue
+++ b/frontend/src/components/Drawer/Base.vue
@@ -12,7 +12,7 @@ import RailFooter from "@/components/Drawer/Footer.vue";
 // Props
 const platforms = storePlatforms();
 const auth = storeAuth();
-const drawer = ref(undefined);
+const drawer = ref(false);
 const open = ref(["Platforms", "Library", "Settings"]);
 const rail = ref(localStorage.getItem("rail") == "true");
 
@@ -23,7 +23,7 @@ emitter?.on("toggleDrawer", () => {
 });
 emitter?.on("toggleDrawerRail", () => {
   rail.value = !rail.value;
-  localStorage.setItem("rail", rail.value);
+  localStorage.setItem("rail", rail.value.toString());
 });
 </script>
 
diff --git a/frontend/src/components/Gallery/AppBar/FilterBar.vue b/frontend/src/components/Gallery/AppBar/FilterBar.vue
index 82b9153fb..3080fb334 100644
--- a/frontend/src/components/Gallery/AppBar/FilterBar.vue
+++ b/frontend/src/components/Gallery/AppBar/FilterBar.vue
@@ -18,12 +18,12 @@ onMounted(() => {
 
 function clearFilter() {
   galleryFilter.set("");
-  emitter?.emit("filter");
+  emitter?.emit("filter", null);
 }
 
 const filterRoms = debounce(() => {
   galleryFilter.set(filterValue.value);
-  emitter?.emit("filter");
+  emitter?.emit("filter", null);
 }, 500);
 </script>
 
diff --git a/frontend/src/components/Gallery/FabMenu/Base.vue b/frontend/src/components/Gallery/FabMenu/Base.vue
index a845ecb6d..870ec8cc4 100644
--- a/frontend/src/components/Gallery/FabMenu/Base.vue
+++ b/frontend/src/components/Gallery/FabMenu/Base.vue
@@ -21,7 +21,7 @@ const route = useRoute();
 
 socket.on("scan:scanning_rom", ({ id }) => {
   const rom = romsStore.selectedRoms.find((r) => r.id === id);
-  romsStore.removeFromSelection(rom);
+  if (rom) romsStore.removeFromSelection(rom);
 });
 
 socket.on("scan:done", () => {
@@ -34,7 +34,7 @@ socket.on("scan:done", () => {
   socket.disconnect();
 });
 
-socket.on("scan:done_ko", (msg) => {
+socket.on("scan:done_ko", (msg: string) => {
   scanning.set(false);
   emitter?.emit("snackbarShow", {
     msg: `Scan couldn't be completed. Something went wrong: ${msg}`,
diff --git a/frontend/src/components/Game/Card/Base.vue b/frontend/src/components/Game/Card/Base.vue
index 3a626a957..0174d3658 100644
--- a/frontend/src/components/Game/Card/Base.vue
+++ b/frontend/src/components/Game/Card/Base.vue
@@ -9,7 +9,7 @@ const emit = defineEmits(["selectRom"]);
 const romsStore = storeRoms();
 
 // Functions
-function selectRom(event) {
+function selectRom(event: MouseEvent) {
   if (!props.selected) {
     romsStore.addToSelection(props.rom);
   } else {
diff --git a/frontend/src/components/Game/Card/Cover.vue b/frontend/src/components/Game/Card/Cover.vue
index c4fb9ac6d..32bf9e1a0 100644
--- a/frontend/src/components/Game/Card/Cover.vue
+++ b/frontend/src/components/Game/Card/Cover.vue
@@ -17,17 +17,17 @@ const downloadStore = storeDownload();
 const romsStore = storeRoms();
 const card = ref();
 
-let timeout;
+let timeout: ReturnType<typeof setTimeout>;
 
 // Functions
-function onSelectRom(event) {
+function onSelectRom(event: MouseEvent) {
   if (!event.ctrlKey && !event.shiftKey) {
     event.preventDefault();
     emit("selectRom", event);
   }
 }
 
-function onNavigate(event) {
+function onNavigate(event: MouseEvent) {
   if (
     event.ctrlKey ||
     event.shiftKey ||
@@ -39,8 +39,8 @@ function onNavigate(event) {
   }
 }
 
-function onTouchStart(event) {
-  card.value.$el.addEventListener("contextmenu", (event) => {
+function onTouchStart(event: TouchEvent) {
+  card.value.$el.addEventListener("contextmenu", (event: Event) => {
     event.preventDefault();
   });
   romsStore.isTouchScreen(true);
@@ -103,7 +103,7 @@ function onTouchEnd() {
         </v-expand-transition>
         <v-chip-group class="ml-2 pt-0 text-shadow position-absolute flags">
           <v-chip
-            v-if="rom.regions.filter((i) => i).length > 0"
+            v-if="rom.regions.filter((i: string) => i).length > 0"
             :title="`Regions: ${rom.regions.join(', ')}`"
             class="bg-chip px-2 py-3"
             density="compact"
@@ -113,7 +113,7 @@ function onTouchEnd() {
             </span>
           </v-chip>
           <v-chip
-            v-if="rom.languages.filter((i) => i).length > 0"
+            v-if="rom.languages.filter((i: string) => i).length > 0"
             :title="`Languages: ${rom.languages.join(', ')}`"
             class="bg-chip px-2 py-3"
             density="compact"
diff --git a/frontend/src/components/Game/DataTable/Base.vue b/frontend/src/components/Game/DataTable/Base.vue
index 999186694..403abae3e 100644
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, inject } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { VDataTable } from "vuetify/labs/VDataTable";
+
 import api from "@/services/api";
 import storeDownload from "@/stores/download";
-import storeRoms from "@/stores/roms";
+import storeRoms, { type Rom } from "@/stores/roms";
 import storeAuth from "@/stores/auth";
-import { VDataTable } from "vuetify/labs/VDataTable";
 import AdminMenu from "@/components/AdminMenu/Base.vue";
 import { regionToEmoji, languageToEmoji } from "@/utils";
 
@@ -52,11 +53,12 @@ const HEADERS = [
     sortable: true,
     key: "revision",
   },
-  { align: "end", key: "actions", sortable: false },
-];
+  { title: "", align: "end", key: "actions", sortable: false },
+] as const;
+
 const PER_PAGE_OPTIONS = [
   { value: -1, title: "$vuetify.dataFooter.itemsPerPageAll" },
-];
+] as const;
 
 // Props
 const location = window.location.origin;
@@ -68,9 +70,9 @@ const auth = storeAuth();
 const romsPerPage = ref(-1);
 
 // Functions
-function rowClick(_, row) {
+function rowClick(_: Event, row: any) {
   router.push(
-    `/platform/${row.item.selectable.platform_slug}/${row.item.selectable.id}`
+    `/platform/${row.item.value.platform_slug}/${row.item.value.id}`
   );
 }
 </script>
@@ -91,40 +93,40 @@ function rowClick(_, row) {
       <v-avatar :rounded="0">
         <v-progress-linear
           color="romm-accent-1"
-          :active="downloadStore.value.includes(item.selectable.id)"
+          :active="downloadStore.value.includes(item.value.id)"
           :indeterminate="true"
           absolute
         />
         <v-img
-          :src="`/assets/romm/resources/${item.selectable.path_cover_s}`"
-          :lazy-src="`/assets/romm/resources/${item.selectable.path_cover_s}`"
+          :src="`/assets/romm/resources/${item.value.path_cover_s}`"
+          :lazy-src="`/assets/romm/resources/${item.value.path_cover_s}`"
           min-height="150"
         />
       </v-avatar>
     </template>
     <template v-slot:item.file_size_bytes="{ item }">
       <span>
-        {{ item.selectable.file_size }}
-        {{ item.selectable.file_size_units }}
+        {{ item.value.file_size }}
+        {{ item.value.file_size_units }}
       </span>
     </template>
     <template v-slot:item.regions="{ item }">
-      <span class="px-1" v-for="region in item.selectable.regions">
+      <span class="px-1" v-for="region in item.value.regions">
         {{ regionToEmoji(region) }}
       </span>
     </template>
     <template v-slot:item.languages="{ item }">
-      <span class="px-1" v-for="language in item.selectable.languages">
+      <span class="px-1" v-for="language in item.value.languages">
         {{ languageToEmoji(language) }}
       </span>
     </template>
     <template v-slot:item.actions="{ item }">
-      <template v-if="item.selectable.multi">
+      <template v-if="item.value.multi">
         <v-btn
           class="my-1"
           rounded="0"
-          @click.stop="api.downloadRom({ rom: item.selectable })"
-          :disabled="downloadStore.value.includes(item.selectable.id)"
+          @click.stop="api.downloadRom({ rom: item.value })"
+          :disabled="downloadStore.value.includes(item.value.id)"
           download
           size="small"
           variant="text"
@@ -136,7 +138,7 @@ function rowClick(_, row) {
           class="my-1"
           rounded="0"
           @click.stop=""
-          :href="`${location}${item.selectable.download_path}`"
+          :href="`${location}${item.value.download_path}`"
           download
           size="small"
           variant="text"
@@ -163,7 +165,7 @@ function rowClick(_, row) {
             ><v-icon>mdi-dots-vertical</v-icon></v-btn
           >
         </template>
-        <admin-menu :rom="item.selectable" />
+        <admin-menu :rom="item.value" />
       </v-menu>
     </template>
   </v-data-table>
diff --git a/frontend/src/components/Settings/Config/PlatformBindingCard.vue b/frontend/src/components/Settings/Config/PlatformBindingCard.vue
index 296c28c16..98e5f93d6 100644
--- a/frontend/src/components/Settings/Config/PlatformBindingCard.vue
+++ b/frontend/src/components/Settings/Config/PlatformBindingCard.vue
@@ -34,7 +34,7 @@ const platformsBinding = heartbeat.data.CONFIG.PLATFORMS_BINDING;
 
     <v-card-text class="pa-1">
       <v-row no-gutters>
-        <v-col cols="6" sm="3" md="2" lg="2" v-for="(platform, fs_platform) in platformsBinding">
+        <v-col cols="6" sm="3" md="2" lg="2" v-for="platform in Object.keys(platformsBinding)">
           <v-card-text class="bg-terciary ma-1 py-1 pl-1 pr-3">
             <v-row class="align-center" no-gutters>
               <v-col cols="5" sm="4" md="5" lg="4">
@@ -43,8 +43,8 @@ const platformsBinding = heartbeat.data.CONFIG.PLATFORMS_BINDING;
                 </v-avatar>
               </v-col>
               <v-col cols="7" sm="8" md="7" lg="8">
-                <div class="bg-primary pa-2 text-caption text-truncate" :title="fs_platform">
-                  <span clas="pa-1">{{ fs_platform }}</span>
+                <div class="bg-primary pa-2 text-caption text-truncate" :title="platformsBinding[platform]">
+                  <span clas="pa-1">{{ platformsBinding[platform] }}</span>
                 </div>
               </v-col>
             </v-row>
diff --git a/frontend/src/components/Settings/General/Interface/InterfaceOptions.vue b/frontend/src/components/Settings/General/Interface/InterfaceOptions.vue
index beaa15cab..4503b0f18 100644
--- a/frontend/src/components/Settings/General/Interface/InterfaceOptions.vue
+++ b/frontend/src/components/Settings/General/Interface/InterfaceOptions.vue
@@ -7,7 +7,7 @@ const groupRoms = ref(isUndefined(storedGroupRoms) ? true : storedGroupRoms ===
 
 // Functions
 function toggleGroupRoms() {
-  localStorage.setItem("settings.groupRoms", groupRoms.value);
+  localStorage.setItem("settings.groupRoms", groupRoms.value.toString());
 }
 </script>
 
diff --git a/frontend/src/components/Settings/General/Theme/ThemeCard.vue b/frontend/src/components/Settings/General/Theme/ThemeCard.vue
index 8e768caf6..695fa238f 100644
--- a/frontend/src/components/Settings/General/Theme/ThemeCard.vue
+++ b/frontend/src/components/Settings/General/Theme/ThemeCard.vue
@@ -5,17 +5,17 @@ import { themes, autoThemeKey } from "@/styles/themes";
 import ThemeOption from "@/components/Settings/General/Theme/ThemeOption.vue";
 
 const theme = useTheme();
-const storedTheme = parseInt(localStorage.getItem("settings.theme"));
+const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
 const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
 
 // Functions
 function toggleTheme() {
-  localStorage.setItem("settings.theme", selectedTheme.value);
+  localStorage.setItem("settings.theme", selectedTheme.value.toString());
 
   const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
   if (selectedTheme.value === autoThemeKey) {
     theme.global.name.value = mediaMatch.matches ? "dark" : "light";
-  } else {
+  } else if (isKeyof(selectedTheme.value, themes)) {
     theme.global.name.value = themes[selectedTheme.value];
   }
 }
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 0ccd19348..9404f35cc 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -25,7 +25,7 @@ export default defineStore("auth", {
   },
 
   actions: {
-    setUser(user: User) {
+    setUser(user: User | null) {
       this.user = user;
     },
     setEnabled(enabled: boolean) {
diff --git a/frontend/src/stores/heartbeat.ts b/frontend/src/stores/heartbeat.ts
index a96f4e940..1b4322ba3 100644
--- a/frontend/src/stores/heartbeat.ts
+++ b/frontend/src/stores/heartbeat.ts
@@ -27,6 +27,13 @@ export type Heartbeat = {
   CONFIG: {
     EXCLUDED_MULTI_FILES: string[];
     EXCLUDED_SINGLE_EXT: string[];
+    EXCLUDED_SINGLE_FILES: string[];
+    EXCLUDED_MULTI_PARTS_FILES: string[];
+    EXCLUDED_MULTI_PARTS_EXT: string[];
+    EXCLUDED_PLATFORMS: string[];
+    PLATFORMS_BINDING: {
+      [key: string]: string;
+    };
   };
 };
 
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 11aacc7d9..862803058 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -3,7 +3,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
-  "types": ["node", "file-saver"],
+  "types": ["node", "file-saver", "lodash", "js-cookie"],
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",