replaced rom id for rom object in store

frontend/src/components/Dialog/Rom/BulkDeleteRom.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { ref, inject } from "vue";
+import { useDisplay } from "vuetify";
+import { deleteRomsApi } from "@/services/api.js";
+
+const { xs, mdAndDown, lgAndUp } = useDisplay();
+const show = ref(false);
+const roms = ref([]);
+const deleteFromFs = ref(false);
+
+const emitter = inject("emitter");
+emitter.on("showBulkDeleteRomDialog", (romsToDelete) => {
+  roms.value = romsToDelete;
+  show.value = true;
+});
+
+async function deleteRoms() {
+  await deleteRomsApi(roms.value, deleteFromFs.value)
+    .then((response) => {
+      emitter.emit("snackbarShow", {
+        msg: response.data.msg,
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    });
+  emitter.emit("refreshView");
+  emitter.emit("refreshDrawer");
+  show.value = false;
+}
+</script>
+
+<template>
+  <v-dialog
+    :modelValue="show"
+    width="auto"
+    @click:outside="show = false"
+    @keydown.esc="show = false"
+    no-click-animation
+    persistent
+  >
+    <v-card
+      rounded="0"
+      :class="{
+        'delete-content': lgAndUp,
+        'delete-content-tablet': mdAndDown,
+        'delete-content-mobile': xs,
+      }"
+    >
+      <v-toolbar density="compact" class="bg-terciary">
+        <v-row class="align-center" no-gutters>
+          <v-col cols="9" xs="9" sm="10" md="10" lg="11">
+            <v-icon icon="mdi-delete" class="ml-5" />
+          </v-col>
+          <v-col>
+            <v-btn
+              @click="show = false"
+              class="bg-terciary"
+              rounded="0"
+              variant="text"
+              icon="mdi-close"
+              block
+            />
+          </v-col>
+        </v-row>
+      </v-toolbar>
+      <v-divider class="border-opacity-25" :thickness="1" />
+      <v-card-text>
+        <v-row class="justify-center pa-2" no-gutters>
+          <span>Deleting the following games. Do you confirm?</span>
+        </v-row>
+      </v-card-text>
+      <v-card-text class="scroll bg-terciary py-0">
+        <v-row class="justify-center pa-2" no-gutters>
+          <v-list class="bg-terciary py-0">
+            <v-list-item v-for="rom in roms" class="justify-center bg-terciary"
+              >{{ rom.r_name }} - [
+              <span class="text-romm-accent-1">{{ rom.file_name }}</span>
+              ]</v-list-item
+            >
+          </v-list>
+        </v-row>
+      </v-card-text>
+      <v-card-text>
+        <v-row class="justify-center pa-2" no-gutters>
+          <v-btn @click="show = false" class="bg-terciary">Cancel</v-btn>
+          <v-btn @click="deleteRoms()" class="text-romm-red bg-terciary ml-5"
+            >Confirm</v-btn
+          >
+        </v-row>
+      </v-card-text>
+
+      <v-divider class="border-opacity-25" :thickness="1" />
+      <v-toolbar class="bg-terciary" density="compact">
+        <v-checkbox
+          v-model="deleteFromFs"
+          label="Remove from filesystem"
+          class="ml-3"
+          hide-details
+        />
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.delete-content {
+  width: 900px;
+  max-height: 600px;
+}
+
+.delete-content-tablet {
+  width: 570px;
+  max-height: 600px;
+}
+
+.delete-content-mobile {
+  width: 85vw;
+  max-height: 600px;
+}
+.scroll {
+  overflow-y: scroll;
+}
+</style>

frontend/src/components/Game/Card/Base.vue

@@ -11,15 +11,17 @@ const selected = ref();
 function selectRom() {
   selected.value = !selected.value;
   if (selected.value) {
-    romsStore.addSelectedRoms(props.rom.id);
+    romsStore.addSelectedRoms(props.rom);
   } else {
-    romsStore.removeSelectedRoms(props.rom.id);
+    romsStore.removeSelectedRoms(props.rom);
   }
 }
 
 const emitter = inject("emitter");
 emitter.on("refreshSelected", () => {
-  selected.value = romsStore.selected.includes(props.rom.id);
+  selected.value = romsStore.selected
+    .map((rom) => rom.id)
+    .includes(props.rom.id);
 });
 </script>
 

frontend/src/components/Game/DataTable/Base.vue

@@ -72,7 +72,7 @@ function rowClick(_, row) {
     :items-per-page-options="PER_PAGE_OPTIONS"
     items-per-page-text=""
     :headers="HEADERS"
-    item-value="id"
+    :item-value="item => item"
     :items="filteredRoms"
     @click:row="rowClick"
     show-select

frontend/src/services/api.js

@@ -92,6 +92,13 @@ export async function deleteRomApi(rom, deleteFromFs) {
   );
 }
 
+export async function deleteRomsApi(roms, deleteFromFs) {
+  return axios.delete(
+    `/api/platforms/${roms[0].p_slug}/roms?filesystem=${deleteFromFs}`,
+    { data: { roms: roms.map((r) => r.id) } }
+  );
+}
+
 export async function searchRomIGDBApi(searchTerm, searchBy, rom) {
   return api.put(
     `/search/roms/igdb?search_term=${searchTerm}&search_by=${searchBy}`,

frontend/src/stores/roms.js

@@ -12,7 +12,7 @@ export default defineStore("roms", {
     },
     removeSelectedRoms(rom) {
       this.selected = this.selected.filter(function (value) {
-        return value != rom;
+        return value.id != rom.id;
       });
     },
   },

frontend/src/views/Gallery/Base.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from "vue";
+import { ref, inject, onMounted, onBeforeUnmount } from "vue";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
 import { fetchRomsApi } from "@/services/api.js";
 import socket from "@/services/socket.js";
@@ -15,6 +15,7 @@ import GameDataTable from "@/components/Game/DataTable/Base.vue";
 import SearchRomDialog from "@/components/Dialog/Rom/SearchRom.vue";
 import EditRomDialog from "@/components/Dialog/Rom/EditRom.vue";
 import DeleteRomDialog from "@/components/Dialog/Rom/DeleteRom.vue";
+import BulkDeleteRomDialog from "@/components/Dialog/Rom/BulkDeleteRom.vue";
 import LoadingDialog from "@/components/Dialog/Loading.vue";
 
 // Props
@@ -154,14 +155,14 @@ function toTop() {
 function selectAllRoms() {
   if (
     compareArrays(
-      filteredRoms.value.map((value) => value.id),
-      romsStore.selected
+      filteredRoms.value.map((rom) => rom.id),
+      romsStore.selected.map((rom) => rom.id)
     )
   ) {
     romsStore.updateSelectedRoms([]);
     openedBulkMenu.value = false;
   } else {
-    romsStore.updateSelectedRoms(filteredRoms.value.map((value) => value.id));
+    romsStore.updateSelectedRoms(filteredRoms.value);
   }
   emitter.emit("refreshSelected");
 }
@@ -170,6 +171,12 @@ onMounted(async () => {
   fetchRoms(route.params.platform);
 });
 
+onBeforeUnmount(() => {
+  socket.off("scan:scanning_rom");
+  socket.off("scan:done");
+  socket.off("scan:done_ko");
+});
+
 onBeforeRouteUpdate(async (to, _) => {
   cursor.value = "";
   searchCursor.value = "";
@@ -263,7 +270,6 @@ onBeforeRouteUpdate(async (to, _) => {
               elevation="8"
               icon
               size="large"
-              @click=""
               >{{ romsStore.selected.length }}</v-btn
             >
           </v-fab-transition>
@@ -274,8 +280,8 @@ onBeforeRouteUpdate(async (to, _) => {
           elevation="8"
           :icon="
             compareArrays(
-              filteredRoms.map((value) => value.id),
-              romsStore.selected
+              filteredRoms.map((rom) => rom.id),
+              romsStore.selected.map((rom) => rom.id)
             )
               ? 'mdi-select'
               : 'mdi-select-all'
@@ -291,7 +297,7 @@ onBeforeRouteUpdate(async (to, _) => {
           icon
           size="large"
           class="mb-2"
-          @click=""
+          @click="emitter.emit('showBulkDeleteRomDialog', romsStore.selected)"
           ><v-icon color="romm-red">mdi-delete</v-icon></v-btn
         >
       </v-menu>
@@ -301,6 +307,7 @@ onBeforeRouteUpdate(async (to, _) => {
   <search-rom-dialog />
   <edit-rom-dialog />
   <delete-rom-dialog />
+  <bulk-delete-rom-dialog />
   <loading-dialog />
 </template>