Add OpenAPI

src/views/deck/DecksView.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="card">
+    <Carousel :value="decks" :numVisible="3" :numScroll="3">
+      <template #item="slotProps">
+        <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4 w-96 h-auto">
+          <div class="mb-4">
+            <div class="relative mx-auto">
+              <img
+                  :src="'https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg?20201122212343'"
+                  class="w-full rounded"
+                  alt="Deck"
+              />
+            </div>
+          </div>
+          <div class="flex justify-between ">
+            <p class="font-bold">
+              {{ slotProps.data.name }}
+            </p>
+            <Tag
+                value="[ARCHETYPE]"
+            />
+          </div>
+          <div class="flex justify- items-center">
+            <SplitButton
+                label="View"
+                :model="deckMenuItems"
+                @click="viewDeck(slotProps.data.id)"
+            />
+          </div>
+        </div>
+      </template>
+    </Carousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {type Deck, DeckService} from "../../api/openapi";
+import {DeckServiceKey} from "../../main.ts";
+import {inject, onMounted, ref, type Ref} from "vue";
+import {useToast} from "primevue";
+import {useRouter} from "vue-router";
+
+const toast = useToast();
+const router = useRouter();
+const deckService: DeckService = inject(DeckServiceKey) as DeckService;
+const decks: Ref<Deck[]> = ref([])
+
+const deckMenuItems = [
+  {
+    label: 'Edit',
+    command: () => {
+      toast.add({
+        severity: 'info',
+        summary: 'Not Implemented',
+        detail: 'Deck Editing isn\'t implemented yet',
+        life: 3000
+      });
+    }
+  },
+]
+
+const viewDeck = (deckId: number) => {
+  router.push(`/decks/${deckId}`);
+}
+
+onMounted(async () => {
+  const decksResponse = await deckService.getDecks()
+
+  decks.value = decksResponse.data.content
+})
+</script>
+
+<style scoped>
+
+</style>