UI upgrade

web/src/components/common/EnhancedPagination.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-pagination
+    v-model="page"
+    :length="totalPages"
+  />
+</template>
+
+<script lang="ts">
+/**
+ * Use in conjuction with `useRouteQueryPagination` composable.
+ */
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+const page = defineModel<number>({
+  required: true,
+  default: 1,
+})
+
+const perPage = defineModel<number>("perPage", {
+  default: 10,
+})
+
+const props = defineProps<{
+  totalCount: number
+}>()
+
+const totalPages = computed(() => Math.ceil(props.totalCount / perPage.value))
+</script>

web/src/components/flashcards/FlashcardCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-card class="pa-5">
+    <div
+      class="face-content text-h5 text-center"
+      v-html="renderMarkdown(flashcard.front)"
+    />
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { type Flashcard } from "@/api/flashcards-api"
+import renderMarkdown from "@/utils/render-markdown"
+
+defineProps<{ flashcard: Flashcard }>()
+</script>
+
+<style scoped>
+.face-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+</style>

web/src/pages/FlashcardsPage.vue

@@ -34,18 +34,30 @@
 
         <v-divider class="my-5" />
 
-        <v-card :border="true">
+        <v-row>
-          <FlashcardsDataTableServer
+          <v-col
-            ref="flashcardsTable"
+            v-for="flashcard in flashcards"
-            :where="{ flashcardDeckId: selectedDeck.id }"
+            :key="flashcard.id"
-          />
+            cols="12"
-        </v-card>
+            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
 }