flashcards in the frontend!!!

2026-06-26 01:25:25 -07:00
parent f83d4d579c
commit cb60ec8480
14 changed files with 1134 additions and 3 deletions
@@ -0,0 +1,88 @@
+<template>
+  <v-row class="fill-height">
+    <v-col
+      cols="12"
+      md="3"
+    >
+      <v-card
+        height="100%"
+        class="pa-2"
+      >
+        <FlashcardDeckTree
+          ref="deckTree"
+          @select="onDeckSelected"
+        />
+      </v-card>
+    </v-col>
+
+    <v-col
+      cols="12"
+      md="9"
+    >
+      <template v-if="selectedDeck">
+        <div class="d-flex align-center justify-space-between mb-4">
+          <v-spacer />
+          <v-btn
+            color="primary"
+            variant="tonal"
+            prepend-icon="mdi-plus"
+            text="Add Flashcard"
+            @click="openFlashcardCreateDialog"
+          />
+          <FlashcardDeckStartReviewBtn :flashcard-deck-id="selectedDeck.id" />
+        </div>
+
+        <v-divider class="my-5" />
+
+        <v-card :border="true">
+          <FlashcardsDataTableServer
+            ref="flashcardsTable"
+            :where="{ flashcardDeckId: selectedDeck.id }"
+          />
+        </v-card>
+
+        <FlashcardCreateDialog
+          v-if="selectedDeck"
+          ref="flashcardCreateDialog"
+          :flashcard-deck-id="selectedDeck.id"
+          @created="flashcardsTable?.refresh()"
+        />
+      </template>
+
+      <div
+        v-else
+        class="d-flex align-center justify-center h-100 text-medium-emphasis"
+      >
+        Select a deck to view its flashcards
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
+import FlashcardDeckTree, {
+  type DeckNode,
+} from "@/components/flashcard-decks/FlashcardDeckTree.vue"
+import FlashcardsDataTableServer from "@/components/flashcards/FlashcardsDataTableServer.vue"
+import FlashcardCreateDialog from "@/components/flashcards/FlashcardCreateDialog.vue"
+import FlashcardDeckStartReviewBtn from "@/components/flashcard-decks/FlashcardDeckStartReviewBtn.vue"
+
+const deckTree = ref<InstanceType<typeof FlashcardDeckTree> | null>(null)
+const selectedDeck = ref<DeckNode | null>(null)
+const flashcardsTable = ref<InstanceType<typeof FlashcardsDataTableServer> | null>(null)
+const flashcardCreateDialog = ref<InstanceType<typeof FlashcardCreateDialog> | null>(null)
+
+function onDeckSelected(deck: DeckNode) {
+  selectedDeck.value = deck
+}
+
+function openFlashcardCreateDialog() {
+  flashcardCreateDialog.value?.show()
+}
+
+useBreadcrumbs("Study")
+</script>