feat: Multiple Systems

nuxt/components/book-recommendations/BookRecommendationTable.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useBookRecommendationStore } from '~/stores/book-recommendations'
+import DeleteBookRecommendation from '~/components/modal/DeleteBookRecommendation.vue'
+import EditBookRecommendation from '~/components/modal/EditBookRecommendation.vue'
+import NewBookRecommendation from '~/components/modal/NewBookRecommendation.vue'
+import CastVote from '~/components/modal/CastVote.vue'
+
+const dayjs = useDayjs()
+
+const bookRecommendationStore = useBookRecommendationStore()
+bookRecommendationStore.fetchRecommendations()
+
+const columns = [
+  {
+    key: 'book_name',
+    label: 'Name',
+  },
+  {
+    key: 'author',
+    label: 'Autor',
+  },
+  {
+    key: 'description',
+    label: 'Beschreibung',
+  },
+  {
+    key: 'pages',
+    label: 'Seiten',
+  },
+  {
+    key: 'recommender.name',
+    label: 'Empfohlen von',
+  },
+  {
+    key: 'created_at',
+    label: 'Erstellt am',
+  },
+  {
+    key: 'status',
+    label: 'Status',
+  },
+  {
+    key: 'votes',
+    label: 'Votes',
+  },
+  {
+    key: 'actions',
+    label: '',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <NewBookRecommendation />
+    <UTable :loading="bookRecommendationStore.fetchRecommendationsStatus === 'pending'" :columns="columns" :rows="bookRecommendationStore.recommendations">
+      <template #created_at-data="{ row }">
+        <div>{{ dayjs(row.created_at).format('DD.MM.YYYY') }}</div>
+      </template>
+      <template #description-data="{ row }">
+        {{ `${row.description.substring(0, 50)}...` }}
+      </template>
+      <template #votes-data="{ row }">
+        {{ row.votes.length }}
+      </template>
+      <template #actions-data="{ row }">
+        <div class="flex space-x-2">
+          <CastVote :row="row" />
+          <EditBookRecommendation :row="row" />
+          <DeleteBookRecommendation :row="row" />
+        </div>
+      </template>
+    </UTable>
+  </div>
+</template>