45 lines
1,014 B
Vue
45 lines
1,014 B
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/`, {
|
|
past: props.past,
|
|
})
|
|
).data.value
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.film-list
|
|
position: relative
|
|
.month-label
|
|
background-color: $white-bis
|
|
width: 100%
|
|
position: sticky
|
|
top: 2rem
|
|
</style>
|