feat: BR Overview + Modal for New Recommendations

nuxt/components/book-recommendations/BookRecommendationTable.vue

@@ -19,6 +19,10 @@ const columns = [
     key: 'author',
     label: 'Autor',
   },
+  {
+    key: 'published_at',
+    label: 'Erstveröffentlichung',
+  },
   {
     key: 'description',
     label: 'Beschreibung',
@@ -42,27 +46,46 @@ const columns = [
   {
     key: 'votes',
     label: 'Votes',
+    sortable: true,
   },
   {
     key: 'actions',
     label: '',
   },
 ]
+const sort = ref({
+  column: 'votes',
+  direction: 'desc',
+})
+
+function resolveStatus(status: string) {
+  return bookRecommendationStore.statusOptions.find(option => option.value === status)
+}
 </script>
 
 <template>
   <div>
     <NewBookRecommendation />
-    <UTable :loading="bookRecommendationStore.fetchRecommendationsStatus === 'pending'" :columns="columns" :rows="bookRecommendationStore.recommendations">
+    <UTable :sort="sort" :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 #published_at-data="{ row }">
+        <div>{{ dayjs(row.published_at).format('DD.MM.YYYY') }}</div>
+      </template>
       <template #description-data="{ row }">
-        {{ `${row.description.substring(0, 50)}...` }}
+        <div v-if="row.description">
+          {{ `${row.description.substring(0, 50)}...` }}
+        </div>
       </template>
       <template #votes-data="{ row }">
         {{ row.votes.length }}
       </template>
+      <template #status-data="{ row }">
+        <UBadge :color="resolveStatus(row.status)?.color">
+          {{ resolveStatus(row.status)?.name }}
+        </UBadge>
+      </template>
       <template #actions-data="{ row }">
         <div class="flex space-x-2">
           <CastVote :row="row" />