Allow user to unmatch rom

backend/endpoints/rom.py

@@ -290,6 +290,7 @@ async def update_rom(
     rename_as_source: bool = False,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
+    unmatch_metadata: bool = False,
 ) -> DetailedRomSchema:
     """Update rom endpoint
 
@@ -298,6 +299,7 @@ async def update_rom(
         id (Rom): Rom internal id
         rename_as_source (bool, optional): Flag to rename rom file as matched IGDB game. Defaults to False.
         artwork (UploadFile, optional): Custom artork to set as cover. Defaults to File(None).
+        unmatch_metadata: Remove the metadata matches for this game. Defaults to False.
 
     Raises:
         HTTPException: If a rom already have that name when enabling the rename_as_source flag
@@ -313,6 +315,31 @@ async def update_rom(
     if not rom:
         raise RomNotFoundInDatabaseException(id)
 
+    if unmatch_metadata:
+        db_rom_handler.update_rom(
+            id,
+            {
+                "igdb_id": None,
+                "sgdb_id": None,
+                "moby_id": None,
+                "name": rom.file_name,
+                "summary": "",
+                "url_screenshots": [],
+                "path_screenshots": [],
+                "path_cover_s": "",
+                "path_cover_l": "",
+                "url_cover": "",
+                "slug": "",
+                "igdb_metadata": {},
+                "moby_metadata": {},
+                "revision": "",
+            },
+        )
+
+        return DetailedRomSchema.from_orm_with_request(
+            db_rom_handler.get_rom(id), request
+        )
+
     cleaned_data = {
         "igdb_id": data.get("igdb_id", None),
         "moby_id": data.get("moby_id", None),

frontend/src/components/Details/Info/FileInfo.vue

@@ -23,7 +23,7 @@ const romUser = ref(
     note_raw_markdown: "",
     note_is_public: false,
     is_main_sibling: false,
-  }
+  },
 );
 
 // Functions
@@ -53,7 +53,7 @@ watch(
       note_is_public: false,
       is_main_sibling: false,
     };
-  }
+  },
 );
 </script>
 <template>
@@ -117,7 +117,7 @@ watch(
             v-model="downloadStore.filesToDownload"
             :label="rom.file_name"
             item-title="file_name"
-            :items="rom.files.map(f => f.filename)"
+            :items="rom.files.map((f) => f.filename)"
             rounded="0"
             density="compact"
             variant="outlined"
@@ -137,13 +137,28 @@ watch(
           <v-chip size="small" label class="mx-1 my-1">
             Size: {{ formatBytes(rom.file_size_bytes) }}
           </v-chip>
-          <v-chip v-if="!rom.multi && rom.sha1_hash" size="small" label class="mx-1 my-1">
+          <v-chip
+            v-if="!rom.multi && rom.sha1_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
             SHA-1: {{ rom.sha1_hash }}
           </v-chip>
-          <v-chip v-if="!rom.multi && rom.md5_hash" size="small" label class="mx-1 my-1">
-            MD5: {{ rom.md5_hash  }}
+          <v-chip
+            v-if="!rom.multi && rom.md5_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
+            MD5: {{ rom.md5_hash }}
           </v-chip>
-          <v-chip v-if="!rom.multi && rom.crc_hash" size="small" label class="mx-1 my-1">
+          <v-chip
+            v-if="!rom.multi && rom.crc_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
             CRC: {{ rom.crc_hash }}
           </v-chip>
         </v-col>
@@ -180,7 +195,7 @@ watch(
         <v-col>
           <v-chip
             v-for="collection in collectionsWithoutFavourites(
-              rom.user_collections
+              rom.user_collections,
             )"
             :to="{ name: 'collection', params: { collection: collection.id } }"
             size="large"

frontend/src/components/Details/Title.vue

@@ -11,7 +11,7 @@ import { useDisplay } from "vuetify";
 const props = defineProps<{ rom: DetailedRom; platform: Platform }>();
 const { smAndDown } = useDisplay();
 const releaseDate = new Date(
-  Number(props.rom.first_release_date) * 1000
+  Number(props.rom.first_release_date) * 1000,
 ).toLocaleDateString("en-US", {
   day: "2-digit",
   month: "short",

frontend/src/components/Gallery/AppBar/Platform/Base.vue

@@ -23,7 +23,13 @@ const auth = storeAuth();
 
 <template>
   <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
-    <platform-icon v-if="currentPlatform" :slug="currentPlatform.slug" :name="currentPlatform.name":size="36" class="mx-2" />
+    <platform-icon
+      v-if="currentPlatform"
+      :slug="currentPlatform.slug"
+      :name="currentPlatform.name"
+      :size="36"
+      class="mx-2"
+    />
     <firmware-btn />
     <filter-btn />
     <filter-text-field v-if="!xs" />

frontend/src/components/Gallery/FabOverlay.vue

@@ -69,7 +69,7 @@ function resetSelection() {
 async function addToFavourites() {
   if (!favCollection.value) return;
   favCollection.value.roms = favCollection.value.roms.concat(
-    selectedRoms.value.map((r) => r.id)
+    selectedRoms.value.map((r) => r.id),
   );
   await collectionApi
     .updateCollection({ collection: favCollection.value as Collection })
@@ -98,7 +98,7 @@ async function addToFavourites() {
 async function removeFromFavourites() {
   if (!favCollection.value) return;
   favCollection.value.roms = favCollection.value.roms.filter(
-    (value) => !selectedRoms.value.map((r) => r.id).includes(value)
+    (value) => !selectedRoms.value.map((r) => r.id).includes(value),
   );
   if (romsStore.currentCollection?.name.toLowerCase() == "favourites") {
     romsStore.remove(selectedRoms.value);
@@ -210,7 +210,7 @@ function onDownload() {
             ? emitter?.emit('showAddToCollectionDialog', romsStore.selectedRoms)
             : emitter?.emit(
                 'showRemoveFromCollectionDialog',
-                romsStore.selectedRoms
+                romsStore.selectedRoms,
               )
         "
       />
@@ -259,6 +259,6 @@ function onDownload() {
   pointer-events: none;
 }
 .sticky-bottom * {
-    pointer-events: auto; /* Re-enables pointer events for all child elements */
+  pointer-events: auto; /* Re-enables pointer events for all child elements */
 }
 </style>

frontend/src/components/Management/Dialog/CreatePlatformBinding.vue

@@ -42,10 +42,10 @@ emitter?.on(
       });
     fsSlugToCreate.value = fsSlug;
     selectedPlatform.value = supportedPlatforms.value?.find(
-      (platform) => platform.slug == slug
+      (platform) => platform.slug == slug,
     );
     show.value = true;
-  }
+  },
 );
 
 // Functions
@@ -60,7 +60,7 @@ function addBindPlatform() {
       if (selectedPlatform.value) {
         configStore.addPlatformBinding(
           fsSlugToCreate.value,
-          selectedPlatform.value.slug
+          selectedPlatform.value.slug,
         );
       }
     })

frontend/src/components/Management/Dialog/CreatePlatformVersion.vue

@@ -42,10 +42,10 @@ emitter?.on(
       });
     fsSlugToCreate.value = fsSlug;
     selectedPlatform.value = supportedPlatforms.value?.find(
-      (platform) => platform.slug == slug
+      (platform) => platform.slug == slug,
     );
     show.value = true;
-  }
+  },
 );
 
 // Functions
@@ -60,7 +60,7 @@ function addVersionPlatform() {
       if (selectedPlatform.value) {
         configStore.addPlatformBinding(
           fsSlugToCreate.value,
-          selectedPlatform.value.slug
+          selectedPlatform.value.slug,
         );
       }
     })

frontend/src/components/common/Game/Dialog/EditRom.vue

@@ -6,7 +6,7 @@ import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { inject, ref } from "vue";
+import { inject, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 
@@ -55,26 +55,27 @@ async function removeArtwork() {
   removeCover.value = true;
 }
 
-async function updateRom() {
-  if (!rom.value) return;
-
-  if (!rom.value.file_name) {
-    emitter?.emit("snackbarShow", {
-      msg: "Cannot save: file name is required",
-      icon: "mdi-close-circle",
-      color: "red",
-    });
-    return;
-  }
+const noMetadataMatch = computed(() => {
+  return !rom.value?.igdb_id && !rom.value?.moby_id && !rom.value?.sgdb_id;
+});
 
+async function handleRomUpdate(
+  options: {
+    rom: UpdateRom;
+    renameAsSource?: boolean;
+    removeCover?: boolean;
+    unmatch?: boolean;
+  },
+  successMessage: string,
+) {
   show.value = false;
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await romApi
-    .updateRom({ rom: rom.value, removeCover: removeCover.value })
+    .updateRom(options)
     .then(({ data }) => {
       emitter?.emit("snackbarShow", {
-        msg: "Rom updated successfully!",
+        msg: successMessage,
         icon: "mdi-check-bold",
         color: "green",
       });
@@ -97,6 +98,30 @@ async function updateRom() {
     });
 }
 
+async function unmatchRom() {
+  if (!rom.value) return;
+  await handleRomUpdate(
+    { rom: rom.value, unmatch: true },
+    "Rom unmatched successfully",
+  );
+}
+
+async function updateRom() {
+  if (!rom.value?.file_name) {
+    emitter?.emit("snackbarShow", {
+      msg: "Cannot save: file name is required",
+      icon: "mdi-close-circle",
+      color: "red",
+    });
+    return;
+  }
+
+  await handleRomUpdate(
+    { rom: rom.value, removeCover: removeCover.value },
+    "Rom updated successfully!",
+  );
+}
+
 function closeDialog() {
   show.value = false;
   imagePreviewUrl.value = "";
@@ -164,10 +189,30 @@ function closeDialog() {
                 variant="outlined"
                 required
                 hide-details
-                @keyup.enter="updateRom()"
+                @keyup.enter="updateRom"
               />
             </v-col>
           </v-row>
+          <v-row class="justify-space-between mt-4 mb-2 mx-2" no-gutters>
+            <v-btn-group divided density="compact">
+              <v-btn
+                :disabled="noMetadataMatch"
+                :class="` ${
+                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
+                }`"
+                variant="flat"
+                @click="unmatchRom"
+              >
+                Unmatch Rom
+              </v-btn>
+            </v-btn-group>
+            <v-btn-group divided density="compact">
+              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
+                Save
+              </v-btn>
+            </v-btn-group>
+          </v-row>
         </v-col>
         <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
@@ -222,16 +267,6 @@ function closeDialog() {
         </v-col>
       </v-row>
     </template>
-    <template #append>
-      <v-row class="justify-center mt-4 mb-2" no-gutters>
-        <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-            Apply
-          </v-btn>
-        </v-btn-group>
-      </v-row>
-    </template>
   </r-dialog>
 </template>
 <style scoped>

frontend/src/components/common/Game/Dialog/SearchRom.vue

@@ -43,7 +43,7 @@ async function filterRoms() {
   } else {
     filteredRoms.value = searchedRoms.value.filter(
       (rom: { platform_name: string }) =>
-        rom.platform_name == selectedPlatform.value?.platform_name
+        rom.platform_name == selectedPlatform.value?.platform_name,
     ) as SimpleRom[];
   }
 }
@@ -73,7 +73,7 @@ async function searchRoms() {
             platform_name: rom.platform_name,
             platform_slug: rom.platform_slug,
           },
-        ])
+        ]),
       ).values(),
     ];
     filterRoms();

frontend/src/components/common/NewVersion.vue

@@ -18,7 +18,7 @@ function dismissVersionBanner() {
 }
 onMounted(async () => {
   const response = await fetch(
-    "https://api.github.com/repos/rommapp/romm/releases/latest"
+    "https://api.github.com/repos/rommapp/romm/releases/latest",
   );
   const json = await response.json();
   GITHUB_VERSION.value = json.tag_name;
@@ -72,6 +72,6 @@ onMounted(async () => {
   pointer-events: none;
 }
 .sticky-bottom * {
-    pointer-events: auto; /* Re-enables pointer events for all child elements */
+  pointer-events: auto; /* Re-enables pointer events for all child elements */
 }
 </style>