merged delete rom dialogs/endpoints

backend/endpoints/rom.py

@@ -171,39 +171,15 @@ async def update_rom(request: Request, p_slug: str, id: int) -> dict:
     }
 
 
-@protected_route(router.delete, "/platforms/{p_slug}/roms/{id}", ["roms.write"])
-def delete_rom(
-    request: Request, p_slug: str, id: int, filesystem: bool = False
-) -> dict:
-    """Detele rom from database [and filesystem]"""
-
-    rom: Rom = dbh.get_rom(id)
-    log.info(f"Deleting {rom.file_name} from database")
-    dbh.delete_rom(id)
-    dbh.update_n_roms(p_slug)
-
-    if filesystem:
-        log.info(f"Deleting {rom.file_name} from filesystem")
-        try:
-            platform: Platform = dbh.get_platform(p_slug)
-            fs.remove_rom(platform.fs_slug, rom.file_name)
-        except RomNotFoundError as e:
-            error = f"Couldn't delete from filesystem: {str(e)}"
-            log.error(error)
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=error)
-
-    return {"msg": f"{rom.file_name} deleted successfully!"}
-
-
-@router.delete("/platforms/{p_slug}/roms", status_code=200)
-async def bulk_delete_roms(
-    req: Request,
+@protected_route(router.delete, "/platforms/{p_slug}/roms", ["roms.write"])
+async def delete_roms(
+    request: Request,
     p_slug: str,
     filesystem: bool = False,
 ) -> dict:
     """Detele roms from database [and filesystem]"""
 
-    data: dict = await req.json()
+    data: dict = await request.json()
     roms_ids: list = data["roms"]
 
     for rom_id in roms_ids:

frontend/src/components/AdminMenu/Base.vue

@@ -27,7 +27,7 @@ const emitter = inject("emitter");
     </v-list-item>
     <v-divider class="border-opacity-25" />
     <v-list-item
-      @click="emitter.emit('showDeleteRomDialog', rom)"
+      @click="emitter.emit('showDeleteRomDialog', [rom])"
       class="py-4 pr-5 text-red"
     >
       <v-list-item-title class="d-flex"

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

@@ -1,135 +0,0 @@
-<script setup>
-import { ref, inject } from "vue";
-import { useDisplay } from "vuetify";
-import { deleteRomsApi } from "@/services/api.js";
-import useRomsStore from "@/stores/roms.js";
-
-const { xs, mdAndDown, lgAndUp } = useDisplay();
-const show = ref(false);
-const romsStore = useRomsStore();
-const deleteFromFs = ref(false);
-
-const emitter = inject("emitter");
-emitter.on("showBulkDeleteRomDialog", () => {
-  show.value = true;
-});
-
-async function deleteRoms() {
-  await deleteRomsApi(romsStore.selected, deleteFromFs.value)
-    .then((response) => {
-      emitter.emit("snackbarShow", {
-        msg: response.data.msg,
-        icon: "mdi-check-bold",
-        color: "green",
-      });
-      romsStore.updateSelectedRoms([]);
-    })
-    .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 romsStore.selected"
-              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/Dialog/Rom/DeleteRom.vue

@@ -2,22 +2,22 @@
 import { ref, inject } from "vue";
 import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
-import { deleteRomApi } from "@/services/api";
+import { deleteRomsApi } from "@/services/api.js";
 
 const { xs, mdAndDown, lgAndUp } = useDisplay();
 const router = useRouter();
 const show = ref(false);
-const rom = ref();
+const roms = ref();
 const deleteFromFs = ref(false);
 
 const emitter = inject("emitter");
-emitter.on("showDeleteRomDialog", (romToDelete) => {
-  rom.value = romToDelete;
+emitter.on("showDeleteRomDialog", (romsToDelete) => {
+  roms.value = romsToDelete;
   show.value = true;
 });
 
-async function deleteRom() {
-  await deleteRomApi(rom.value, deleteFromFs.value)
+async function deleteRoms() {
+  await deleteRomsApi(roms.value, deleteFromFs.value)
     .then((response) => {
       emitter.emit("snackbarShow", {
         msg: response.data.msg,
@@ -36,7 +36,7 @@ async function deleteRom() {
     });
   await router.push({
     name: "platform",
-    params: { platform: rom.value.p_slug },
+    params: { platform: roms.value[0].p_slug },
   });
   emitter.emit("refreshView");
   emitter.emit("refreshDrawer");
@@ -79,16 +79,28 @@ async function deleteRom() {
         </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 class="mr-1">Deleting</span>
-          <span class="text-romm-accent-1">{{ rom.file_name }}</span
-          >.<span class="ml-1">Do you confirm?</span>
+          <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="deleteRom()" class="text-romm-red bg-terciary ml-5"
+          <v-btn @click="deleteRoms()" class="text-romm-red bg-terciary ml-5"
             >Confirm</v-btn
           >
         </v-row>
@@ -110,13 +122,19 @@ async function deleteRom() {
 <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/views/Gallery/Base.vue

@@ -17,7 +17,6 @@ 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";
 
 
@@ -303,7 +302,7 @@ onBeforeRouteUpdate(async (to, _) => {
           icon
           size="large"
           class="mb-2"
-          @click="emitter.emit('showBulkDeleteRomDialog', romsStore.selected)"
+          @click="emitter.emit('showDeleteRomDialog', romsStore.selected)"
           ><v-icon color="romm-red">mdi-delete</v-icon></v-btn
         >
       </v-menu>
@@ -313,7 +312,6 @@ onBeforeRouteUpdate(async (to, _) => {
   <search-rom-dialog />
   <edit-rom-dialog />
   <delete-rom-dialog />
-  <bulk-delete-rom-dialog />
   <loading-dialog />
 </template>