using a kebab options for deck tree node

2026-06-28 23:25:44 -07:00
parent 9777a4229a
commit f94aeca4cc
4 changed files with 271 additions and 26 deletions
@@ -0,0 +1,239 @@
+<template>
+  <v-menu>
+    <template #activator="{ props: menuProps }">
+      <v-btn
+        icon
+        variant="text"
+        density="comfortable"
+        size="default"
+        v-bind="menuProps"
+      >
+        <v-icon icon="mdi-dots-vertical" />
+      </v-btn>
+    </template>
+    <v-list density="compact">
+      <v-list-item
+        prepend-icon="mdi-folder-plus-outline"
+        title="Add subdeck"
+        @click="openAddSubdeck"
+      />
+      <v-list-item
+        prepend-icon="mdi-pencil-outline"
+        title="Edit deck"
+        @click="openEdit"
+      />
+      <v-list-item
+        prepend-icon="mdi-delete-outline"
+        title="Delete this deck"
+        class="text-error"
+        @click="openDelete"
+      />
+    </v-list>
+  </v-menu>
+
+  <v-dialog
+    v-model="showAddSubdeck"
+    width="400"
+  >
+    <v-form
+      ref="addFormRef"
+      @submit.prevent="createSubdeck"
+    >
+      <v-card>
+        <v-card-title>Add Sub-Deck</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="newDeckName"
+            label="Name"
+            autofocus
+            :rules="[required]"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            text="Cancel"
+            @click="showAddSubdeck = false"
+          />
+          <v-btn
+            type="submit"
+            color="primary"
+            variant="flat"
+            :loading="isSubmitting"
+            text="Create"
+          />
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </v-dialog>
+
+  <v-dialog
+    v-model="showEdit"
+    width="400"
+  >
+    <v-form
+      ref="editFormRef"
+      @submit.prevent="updateDeck"
+    >
+      <v-card>
+        <v-card-title>Edit Deck</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="editName"
+            label="Name"
+            autofocus
+            :rules="[required]"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            text="Cancel"
+            @click="showEdit = false"
+          />
+          <v-btn
+            type="submit"
+            color="primary"
+            variant="flat"
+            :loading="isSubmitting"
+            text="Save"
+          />
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </v-dialog>
+
+  <v-dialog
+    v-model="showDelete"
+    width="400"
+  >
+    <v-card>
+      <v-card-title>Delete Deck</v-card-title>
+      <v-card-text>Are you sure you want to delete this deck?</v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          text="Cancel"
+          @click="showDelete = false"
+        />
+        <v-btn
+          color="error"
+          variant="flat"
+          :loading="isSubmitting"
+          text="Delete"
+          @click="deleteDeck"
+        />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { VForm } from "vuetify/components"
+
+import { required } from "@/utils/validators"
+import flashcardDecksApi from "@/api/flashcard-decks-api"
+import useSnack from "@/use/use-snack"
+
+const props = defineProps<{
+  flashcardDeckId: number
+}>()
+
+const emit = defineEmits<{
+  created: [flashcardDeckId: number]
+  updated: [flashcardDeckId: number]
+  deleted: [flashcardDeckId: number]
+}>()
+
+const snack = useSnack()
+const isSubmitting = ref(false)
+
+// Add subdeck
+const showAddSubdeck = ref(false)
+const newDeckName = ref("")
+const addFormRef = ref<InstanceType<typeof VForm> | null>(null)
+
+function openAddSubdeck() {
+  newDeckName.value = ""
+  showAddSubdeck.value = true
+}
+
+async function createSubdeck() {
+  if (!addFormRef.value) return
+  const { valid } = await addFormRef.value.validate()
+  if (!valid) return
+
+  try {
+    isSubmitting.value = true
+    const { flashcardDeck } = await flashcardDecksApi.create({
+      name: newDeckName.value,
+      parentDeckId: props.flashcardDeckId,
+    })
+    emit("created", flashcardDeck.id)
+    showAddSubdeck.value = false
+    snack.success("Sub-deck created")
+  } catch {
+    snack.error("Failed to create sub-deck")
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Edit deck
+const showEdit = ref(false)
+const editName = ref("")
+const editFormRef = ref<InstanceType<typeof VForm> | null>(null)
+
+async function openEdit() {
+  try {
+    const { flashcardDeck } = await flashcardDecksApi.get(props.flashcardDeckId)
+    editName.value = flashcardDeck.name
+    showEdit.value = true
+  } catch {
+    snack.error("Failed to load deck")
+  }
+}
+
+async function updateDeck() {
+  if (!editFormRef.value) return
+  const { valid } = await editFormRef.value.validate()
+  if (!valid) return
+
+  try {
+    isSubmitting.value = true
+    await flashcardDecksApi.update(props.flashcardDeckId, { name: editName.value })
+    emit("updated", props.flashcardDeckId)
+    showEdit.value = false
+    snack.success("Deck updated")
+  } catch {
+    snack.error("Failed to update deck")
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Delete deck
+const showDelete = ref(false)
+
+function openDelete() {
+  showDelete.value = true
+}
+
+async function deleteDeck() {
+  try {
+    isSubmitting.value = true
+    await flashcardDecksApi.delete(props.flashcardDeckId)
+    emit("deleted", props.flashcardDeckId)
+    showDelete.value = false
+    snack.success("Deck deleted")
+  } catch {
+    snack.error("Failed to delete deck")
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>