generated from Flycro/laravel-nuxt
76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<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>
|