cineclub-site/front/components/movieCard/listPerMonth.vue

45 lines
1 KiB
Vue

<template>
<div v-if="filmsByMonth" class="film-list block">
<section
v-for="({ projectionMonth, films }, index) in filmsByMonth"
:key="index"
class="columns"
>
<div class="column is-one-fifth">
<h2 class="title is-5 month-label">{{ projectionMonth }}</h2>
</div>
<div class="column">
<MovieCardFull
v-for="film of films"
:key="film.id"
:film="film"
class="block"
/>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { FilmsByMonth } from "~/composables/types"
const props = defineProps({
past: { type: Boolean, default: false },
})
const filmsByMonth = ref<FilmsByMonth[]>()
filmsByMonth.value = (
await apiGet<FilmsByMonth[]>(`films/calendar/`, {
period: props.past ? "past" : "future",
})
).data.value
</script>
<style scoped lang="sass">
.film-list
position: relative
.month-label
background-color: $white-bis
width: 100%
position: sticky
top: 2rem
</style>