feat [front]: calendar page

front/components/movieCard/listPerMonth.vue

@@ -0,0 +1,45 @@
+<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>

front/composables/types.ts

@@ -33,3 +33,8 @@ export type ShortFilm = {
   title: string
   director?: string
 }
+
+export type FilmsByMonth = {
+  projectionMonth: string
+  films: Film[]
+}

front/css/app.sass

@@ -8,6 +8,7 @@
 @import "bulma/sass/components/card"
 @import "bulma/sass/components/modal"
 @import "bulma/sass/components/navbar"
+@import "bulma/sass/components/tabs"
 @import "bulma/sass/elements/button"
 @import "bulma/sass/elements/container"
 @import "bulma/sass/elements/image"

front/pages/calendrier.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="section">
+    <header class="is-flex mb-6">
+      <h1 class="title is-2 mr-5 mb-0">Calendrier</h1>
+      <span class="mr-3">Séances</span>
+      <div class="tabs is-toggle is-small">
+        <ul>
+          <li :class="isPast ? 'is-active' : undefined">
+            <a @click="view = 'past'">
+              <span>passées</span>
+            </a>
+          </li>
+          <li :class="isPast ? undefined : 'is-active'">
+            <a @click="view = 'future'">
+              <span>à venir</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </header>
+    <KeepAlive>
+      <MovieCardListPerMonth v-if="isPast" past />
+    </KeepAlive>
+    <KeepAlive>
+      <MovieCardListPerMonth v-if="!isPast" />
+    </KeepAlive>
+  </section>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const route = useRoute()
+
+const view = computed<string>({
+  get: () => (route.query?.view as string) || "future",
+  set(value) {
+    router.replace({ query: { ...route.query, view: value } })
+  },
+})
+const isPast = computed<boolean>(() => view.value === "past")
+</script>
+
+<style scoped lang="sass">
+header
+  align-items: center
+</style>