Destory deck helper

api/src/services/flashcard-decks/destroy-service.ts

@@ -1,5 +1,5 @@
 import db from "@/db/db-client"
-import { FlashcardDeck } from "@/models"
+import { Flashcard, FlashcardDeck } from "@/models"
 import BaseService from "@/services/base-service"
 
 export class DestroyService extends BaseService {
@@ -8,12 +8,19 @@ export class DestroyService extends BaseService {
   }
 
   async perform(): Promise<void> {
-    await db.transaction(async (transaction) => {
+    await db.transaction(async () => {
       await FlashcardDeck.update(
         { parentDeckId: null },
-        { where: { parentDeckId: this.flashcardDeck.id }, transaction }
+        { where: { parentDeckId: this.flashcardDeck.id } }
       )
-      await this.flashcardDeck.destroy({ transaction })
+
+      await Flashcard.destroy({
+        where: {
+          flashcardDeckId: this.flashcardDeck.id,
+        },
+      })
+
+      await this.flashcardDeck.destroy()
     })
   }
 }

web/src/components/flashcard-decks/FlashcardDeckTree.vue

@@ -36,8 +36,8 @@
             @select="onSelect"
             @move="handleMove"
             @created="fetch()"
-            @updated="fetch()"
-            @deleted="fetch()"
+            @updated="onDeckUpdated"
+            @deleted="onDeckDeleted"
           />
         </template>
       </draggable>
@@ -142,13 +142,27 @@ watch(
 // --- Selection ---
 
 const selectedId = ref<number | null>(null)
-const emit = defineEmits<{ select: [deck: DeckNode] }>()
+const emit = defineEmits<{
+  select: [deck: DeckNode]
+  updated: [flashcardDeckId: number]
+  deleted: [flashcardDeckId: number]
+}>()
 
 function onSelect(deck: DeckNode) {
   selectedId.value = deck.id
   emit("select", deck)
 }
 
+async function onDeckUpdated(flashcardDeckId: number) {
+  await fetch()
+  emit("updated", flashcardDeckId)
+}
+
+async function onDeckDeleted(flashcardDeckId: number) {
+  await fetch()
+  emit("deleted", flashcardDeckId)
+}
+
 // --- Drag & Drop ---
 
 const snack = useSnack()

web/src/pages/FlashcardsPage.vue

@@ -11,6 +11,8 @@
         <FlashcardDeckTree
           ref="deckTree"
           @select="onDeckSelected"
+          @updated="onDeckUpdated"
+          @deleted="onDeckDeleted"
         />
       </v-card>
     </v-col>
@@ -85,6 +87,7 @@ import useBreadcrumbs from "@/use/use-breadcrumbs"
 import useFlashcards from "@/use/use-flashcards"
 import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
 
+import flashcardDecksApi from "@/api/flashcard-decks-api"
 import FlashcardDeckTree, {
   type DeckNode,
 } from "@/components/flashcard-decks/FlashcardDeckTree.vue"
@@ -117,6 +120,23 @@ function onDeckSelected(deck: DeckNode) {
   selectedDeck.value = deck
 }
 
+function onDeckDeleted(flashcardDeckId: number) {
+  if (selectedDeck.value?.id !== flashcardDeckId) {
+    return
+  }
+
+  selectedDeck.value = null
+}
+
+async function onDeckUpdated(flashcardDeckId: number) {
+  if (selectedDeck.value?.id !== flashcardDeckId) {
+    return
+  }
+
+  const { flashcardDeck } = await flashcardDecksApi.get(flashcardDeckId)
+  selectedDeck.value = { ...selectedDeck.value, ...flashcardDeck }
+}
+
 function openFlashcardCreateDialog() {
   flashcardCreateDialog.value?.show()
 }