cineclub-site/front/pages/admin/index.vue

65 lines
1.8 KiB
Vue
Raw Normal View History

<template>
2022-12-04 00:34:34 +01:00
<main class="section">
2022-08-27 16:53:52 +02:00
<h1 class="title">Liste des séances</h1>
<ul class="list has-visible-pointer-controls">
<li v-for="film of films" :key="film.id" class="list-item">
<nuxt-link :to="`/admin/${film.id}`" class="list-item-content">
2022-12-30 22:28:55 +01:00
<time v-if="film.projectionDate" :datetime="film.projectionDate">
{{ new Date(film.projectionDate).toLocaleString() }}
</time>
<template v-else>À planifier</template>
2022-08-27 20:03:01 +02:00
- {{ film.title }}
2022-08-27 16:53:52 +02:00
<template v-if="film.director"> de {{ film.director }}</template>
</nuxt-link>
2022-08-27 16:53:52 +02:00
<div class="list-item-controls">
<nuxt-link :to="`/admin/${film.id}/edition`" class="button">
<span>Éditer</span>
</nuxt-link>
</div>
</li>
</ul>
<Pagination
:model-value="currentPage"
:max="totalPages"
@update:model-value="changePage"
/>
2022-08-27 16:53:52 +02:00
</main>
</template>
2022-04-09 02:52:50 +02:00
<script setup lang="ts">
import { ShortFilm, PaginatedResponse } from "~/composables/types"
2022-04-09 02:52:50 +02:00
2022-12-30 22:27:11 +01:00
definePageMeta({ layout: "admin" })
useHead({ title: "Liste des séances" })
const route = useRoute()
const router = useRouter()
const currentPage = ref<number>(parseInt(route.query?.page as string) || 1)
const totalPages = ref<number>(1)
const films = reactive<ShortFilm[]>([])
async function changePage(newPage: number) {
await loadFilms(newPage)
router.replace({ query: { ...route.query, page: currentPage.value } })
}
await loadFilms(currentPage.value)
async function loadFilms(page = 1) {
const res = (
await apiGet<PaginatedResponse<ShortFilm>>(`admin/films/`, {
page: page,
})
).data.value
Object.assign(films, res?.results || [])
totalPages.value = res?.totalPages || 1
currentPage.value = res?.currentPage || 1
}
</script>
2022-12-30 22:28:55 +01:00
<style lang="sass">
.list-item-content
display: block
</style>