added reactivity to collections

backend/endpoints/collections.py

@@ -128,7 +128,7 @@ async def update_collection(
     id: int,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
-) -> MessageResponse:
+) -> CollectionSchema:
     """Update collection endpoint
 
     Args:
@@ -199,8 +199,7 @@ async def update_collection(
                 {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
             )
 
-    db_collection_handler.update_collection(id, cleaned_data)
-    return {"msg": f"Collection {cleaned_data['name']} updated successfully!"}
+    return db_collection_handler.update_collection(id, cleaned_data)
 
 
 @protected_route(router.delete, "/collections/{id}", ["collections.write"])

backend/handler/database/collections_handler.py

@@ -51,7 +51,7 @@ def update_collection(
             .values(**data)
             .execution_options(synchronize_session="evaluate")
         )
-        return self.get_collection(id)
+        return session.query(Collection).filter_by(id=id).one()
 
     @begin_session
     def delete_collection(self, id: int, session: Session = None) -> int:

frontend/src/components/common/Collection/Dialog/EditCollection.vue

@@ -3,7 +3,7 @@ import CollectionCard from "@/components/common/Collection/Card.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
-import { type Collection } from "@/stores/collections";
+import collectionStore, { type Collection } from "@/stores/collections";
 import storeHeartbeat from "@/stores/heartbeat";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -14,6 +14,7 @@ import { useDisplay, useTheme } from "vuetify";
 const theme = useTheme();
 const { mdAndUp } = useDisplay();
 const show = ref(false);
+const storeCollection = collectionStore();
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
@@ -63,6 +64,7 @@ async function editCollection() {
       collection: collection.value,
     })
     .then(({ data }) => {
+      storeCollection.update(data);
       emitter?.emit("snackbarShow", {
         msg: `Collection updated successfully!`,
         icon: "mdi-check-bold",

frontend/src/services/api/collection.ts

@@ -39,7 +39,7 @@ async function updateCollection({
 }: {
   collection: UpdatedCollection;
   removeCover?: boolean;
-}): Promise<{ data: MessageResponse }> {
+}): Promise<{ data: Collection }> {
   const formData = new FormData();
   formData.append("name", collection.name || "");
   formData.append("description", collection.description || "");

frontend/src/stores/collections.ts

@@ -31,6 +31,12 @@ export default defineStore("collections", {
       this.all.push(collection);
       this._reorder();
     },
+    update(collection: Collection) {
+      this.all = this.all.map((value) =>
+        value.id === collection.id ? collection : value,
+      );
+      this._reorder();
+    },
     exists(collection: Collection) {
       return this.all.filter((p) => p.name == collection.name).length > 0;
     },

frontend/src/views/Play/Base.vue

@@ -170,8 +170,6 @@ onMounted(async () => {
               })) ?? []
             "
           />
-          <!-- TODO: diisable selector when start playing -->
-          <!-- TODO: reset emulation to re-select -->
           <!-- <v-select
             class="my-1"
             hide-details