diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue index 57cdf4950..5a9db81ca 100644 --- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue +++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue @@ -23,11 +23,12 @@ const removeCover = ref(false); const emitter = inject>("emitter"); emitter?.on("showCreateCollectionDialog", () => { show.value = true; + removeCover.value = false; }); emitter?.on("updateUrlCover", (url_cover) => { if (!collection.value) return; collection.value.url_cover = url_cover; - imagePreviewUrl.value = url_cover; + setArtwork(url_cover); }); // Functions @@ -42,13 +43,19 @@ function previewImage(event: Event) { const reader = new FileReader(); reader.onload = () => { - imagePreviewUrl.value = reader.result?.toString(); + setArtwork(reader.result?.toString() || ""); }; if (input.files[0]) { reader.readAsDataURL(input.files[0]); } } +function setArtwork(imageUrl: string) { + if (!imageUrl) return; + imagePreviewUrl.value = imageUrl; + removeCover.value = false; +} + async function removeArtwork() { imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`; removeCover.value = true; diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue index c45b55e81..4cf904eb5 100644 --- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue +++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue @@ -23,11 +23,12 @@ const emitter = inject>("emitter"); emitter?.on("showEditCollectionDialog", (collectionToEdit: Collection) => { collection.value = collectionToEdit; show.value = true; + removeCover.value = false; }); emitter?.on("updateUrlCover", (url_cover) => { if (!collection.value) return; collection.value.url_cover = url_cover; - imagePreviewUrl.value = url_cover; + setArtwork(url_cover); }); // Functions @@ -42,13 +43,19 @@ function previewImage(event: Event) { const reader = new FileReader(); reader.onload = () => { - imagePreviewUrl.value = reader.result?.toString(); + setArtwork(reader.result?.toString() || ""); }; if (input.files[0]) { reader.readAsDataURL(input.files[0]); } } +function setArtwork(imageUrl: string) { + if (!imageUrl) return; + imagePreviewUrl.value = imageUrl; + removeCover.value = false; +} + async function removeArtwork() { imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_collection.png`; removeCover.value = true; @@ -62,6 +69,7 @@ async function editCollection() { await collectionApi .updateCollection({ collection: collection.value, + removeCover: removeCover.value, }) .then(({ data }) => { storeCollection.update(data); diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue index 0606c2073..0a20160c7 100644 --- a/frontend/src/components/common/Game/Dialog/EditRom.vue +++ b/frontend/src/components/common/Game/Dialog/EditRom.vue @@ -24,11 +24,12 @@ const emitter = inject>("emitter"); emitter?.on("showEditRomDialog", (romToEdit: UpdateRom | undefined) => { show.value = true; rom.value = romToEdit; + removeCover.value = false; }); emitter?.on("updateUrlCover", (url_cover) => { if (!rom.value) return; rom.value.url_cover = url_cover; - imagePreviewUrl.value = url_cover; + setArtwork(url_cover); }); // Functions @@ -43,13 +44,19 @@ function previewImage(event: Event) { const reader = new FileReader(); reader.onload = () => { - imagePreviewUrl.value = reader.result?.toString(); + setArtwork(reader.result?.toString() || ""); }; if (input.files[0]) { reader.readAsDataURL(input.files[0]); } } +function setArtwork(imageUrl: string) { + if (!imageUrl) return; + imagePreviewUrl.value = imageUrl; + removeCover.value = false; +} + async function removeArtwork() { imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`; removeCover.value = true;