cineclub-site/front/pages/calendrier.vue

47 lines
1.2 KiB
Vue
Raw Normal View History

2022-07-14 06:03:55 +02:00
<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>