generated from Flycro/laravel-nuxt
122 lines
3.2 KiB
Vue
122 lines
3.2 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 { $echo } = useNuxtApp()
|
|
const authStore = useAuthStore()
|
|
|
|
const bookRecommendationStore = useBookRecommendationStore()
|
|
bookRecommendationStore.fetchRecommendations()
|
|
|
|
const columns = [
|
|
{
|
|
key: 'book_name',
|
|
label: 'Name',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'author',
|
|
label: 'Autor',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'published_at',
|
|
label: 'Erstveröffentlichung',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'description',
|
|
label: 'Beschreibung',
|
|
},
|
|
{
|
|
key: 'pages',
|
|
label: 'Seiten',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'recommender.name',
|
|
label: 'Empfohlen von',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'created_at',
|
|
label: 'Erstellt am',
|
|
sortable: true,
|
|
},
|
|
{
|
|
key: 'status',
|
|
label: 'Status',
|
|
sortable: true,
|
|
},
|
|
{
|
|
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)
|
|
}
|
|
|
|
onMounted(() => {
|
|
$echo.private(`BookRecommendation`)
|
|
.listen('.BookRecommendationUpdated', (e) => {
|
|
bookRecommendationStore.updateRecommendationWS(e.bookRecommendation)
|
|
})
|
|
.listen('.BookRecommendationDeleted', (e) => {
|
|
bookRecommendationStore.deleteRecommendationWS(e.bookRecommendation)
|
|
})
|
|
.listen('.BookRecommendationCreated', (e) => {
|
|
bookRecommendationStore.createRecommendationWS(e.bookRecommendation)
|
|
})
|
|
authStore.socketId = $echo.socketId()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<NewBookRecommendation />
|
|
<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 }">
|
|
<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" />
|
|
<EditBookRecommendation :row="row" />
|
|
<DeleteBookRecommendation :row="row" />
|
|
</div>
|
|
</template>
|
|
</UTable>
|
|
</div>
|
|
</template>
|