feat: Vote Functionality

nuxt/components/modal/CastVote.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { BookRecommendationStatusEnum } from '~/stores/book-recommendations'
 import { useBookRecommendationStore } from '~/stores/book-recommendations'
 
 const props = defineProps<{
   row: {
     id: number
     book_name: string
+    status: BookRecommendationStatusEnum
   }
 }>()
 
@@ -16,6 +18,10 @@ const state = reactive({
   book_recommendation_id: props.row.id,
 })
 
+watch(() => props.row, (newRow) => {
+  state.book_recommendation_id = newRow.id
+})
+
 const bookRecommendationStore = useBookRecommendationStore()
 
 const { refresh: onVote, status } = useFetch<any>(`vote`, {
@@ -39,14 +45,14 @@ const { refresh: onVote, status } = useFetch<any>(`vote`, {
 </script>
 
 <template>
-  <UButton icon="i-heroicons-star" size="sm" color="green" variant="solid" square :disabled="authStore.user.total_votes === 0" @click="isOpen = true" />
+  <UButton v-if="props.row.status === 'PENDING'" class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-star" size="sm" color="green" variant="solid" square :disabled="authStore.user.total_votes === 0" @click="isOpen = true" />
   <UDashboardModal
     v-model="isOpen"
-    title="Buch Empfehlung löschen"
-    :description="`Bist du dir sicher das du für die Buchempfehlung ${row.book_name} abstimmen möchtest?`"
+    title="Für Buch abstimmen"
+    :description="`Bist du dir sicher das du für die Buchempfehlung &quot;${row.book_name}&quot; abstimmen möchtest?`"
     icon="i-heroicons-star"
     :ui="{
-      icon: { base: 'text-green-500 dark:text-green-400' } as any,
+      icon: { base: 'text-primary-500 dark:text-primary-400' } as any,
       footer: { base: 'ml-16' } as any,
     }"
   >