96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
|
|
import {type Bundle, useBundleStore} from "~/store/bundle";
|
|
|
|
const bundles = ref<Bundle[]>([]);
|
|
const loading = ref(false);
|
|
|
|
onMounted(() => {
|
|
loading.value = true;
|
|
useBundleStore().findAll().then((response: Quiz[]) => {
|
|
bundles.value = response;
|
|
}).finally(() => {
|
|
loading.value = false;
|
|
});
|
|
});
|
|
|
|
function selectBundle(bundle: Bundle) {
|
|
useBundleStore().setCurrentBundle(bundle);
|
|
navigateTo("/dashboard");
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="!loading">
|
|
<ul class="bundle-list">
|
|
<li v-for="bundle in bundles">
|
|
<article class="bundle-list__item">
|
|
<main>
|
|
<h1>{{ bundle.label }}</h1>
|
|
<dl class="bundle-list__item__attribute">
|
|
<dt>Dernière auto-évaluation réalisée</dt>
|
|
<dd>{{bundle.lastQuizzDate ? formatDate(bundle.lastQuizzDate): 'NA' }}</dd>
|
|
</dl>
|
|
<dl class="bundle-list__item__attribute">
|
|
<dt>Nombre d'auto-évaluation</dt>
|
|
<dd>{{ bundle.numberOfQuizzes || 0 }}</dd>
|
|
</dl>
|
|
</main>
|
|
<footer class="bundle-list__item__button-container">
|
|
<button class="button blue" @click="selectBundle(bundle)">Voir</button>
|
|
</footer>
|
|
</article>
|
|
</li>
|
|
</ul>
|
|
<div class="button-container">
|
|
<nuxt-link to="/bundle/create">Nouvelle boussole</nuxt-link>
|
|
</div>
|
|
</section>
|
|
<loader v-else/>
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.bundle-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
|
|
grid-gap: $x_small;
|
|
|
|
list-style: none;
|
|
margin-top: $medium;
|
|
|
|
&__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $x_small;
|
|
padding: $x_small;
|
|
|
|
border-radius: 20px;
|
|
|
|
@include border-shadow();
|
|
|
|
h1 {
|
|
margin: 0 0 $x_small 0;
|
|
}
|
|
|
|
&__attribute {
|
|
display: flex;
|
|
gap: $xxx_small;
|
|
dt {
|
|
font-weight: bold;
|
|
&:after {
|
|
content: ' :';
|
|
}
|
|
}
|
|
}
|
|
|
|
&__button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|