UI upgrade

web/src/pages/FlashcardsPage.vue

@@ -34,18 +34,30 @@
 
         <v-divider class="my-5" />
 
-        <v-card :border="true">
-          <FlashcardsDataTableServer
-            ref="flashcardsTable"
-            :where="{ flashcardDeckId: selectedDeck.id }"
-          />
-        </v-card>
+        <v-row>
+          <v-col
+            v-for="flashcard in flashcards"
+            :key="flashcard.id"
+            cols="12"
+            md="6"
+            lg="4"
+          >
+            <FlashcardCard :flashcard="flashcard" />
+          </v-col>
+        </v-row>
+
+        <EnhancedPagination
+          v-model="page"
+          v-model:per-page="perPage"
+          :total-count="totalCount"
+          class="mt-4"
+        />
 
         <FlashcardCreateDialog
           v-if="selectedDeck"
           ref="flashcardCreateDialog"
           :flashcard-deck-id="selectedDeck.id"
-          @created="flashcardsTable?.refresh()"
+          @created="refreshFlashcards"
         />
       </template>
 
@@ -60,22 +72,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, ref } from "vue"
 
 import useBreadcrumbs from "@/use/use-breadcrumbs"
+import useFlashcards from "@/use/use-flashcards"
+import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
 
 import FlashcardDeckTree, {
   type DeckNode,
 } from "@/components/flashcard-decks/FlashcardDeckTree.vue"
-import FlashcardsDataTableServer from "@/components/flashcards/FlashcardsDataTableServer.vue"
+import FlashcardCard from "@/components/flashcards/FlashcardCard.vue"
 import FlashcardCreateDialog from "@/components/flashcards/FlashcardCreateDialog.vue"
 import FlashcardDeckStartReviewBtn from "@/components/flashcard-decks/FlashcardDeckStartReviewBtn.vue"
+import EnhancedPagination from "@/components/common/EnhancedPagination.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)
 
+const { page, perPage } = useRouteQueryPagination({ perPage: 4 })
+
+const flashcardsQueryOptions = computed(() => ({
+  where: { flashcardDeckId: selectedDeck.value?.id },
+  page: page.value,
+  perPage: perPage.value,
+}))
+
+const {
+  flashcards,
+  totalCount,
+  refresh: refreshFlashcards,
+} = useFlashcards(flashcardsQueryOptions, {
+  skipWatchIf: () => selectedDeck.value === null,
+})
+
 function onDeckSelected(deck: DeckNode) {
   selectedDeck.value = deck
 }