Destory deck helper

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()
 }