47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
|
<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>
|