127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
|
|||
|
|
import {type Bundle, useBundleStore} from "~/store/bundle";
|
|||
|
|
|
|||
|
|
const showModal = ref(false);
|
|||
|
|
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 navigateToDashboard(bundle: Bundle) {
|
|||
|
|
useBundleStore().setCurrentBundle(bundle);
|
|||
|
|
navigateTo("/dashboard");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function navigateToQuiz(bundle: Bundle) {
|
|||
|
|
useBundleStore().setCurrentBundle(bundle);
|
|||
|
|
navigateTo("/quiz");
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section v-if="!loading" class="section">
|
|||
|
|
<h1>Bienvenue sur votre espace d’auto-évaluation Boussole !</h1>
|
|||
|
|
<p>Vous allez pouvoir dès maintenant évaluer votre projet de Production Locale Utile Solidaire et Soutenable au
|
|||
|
|
regard des <button class="button-link" @click="showModal = true">10 balises du référentiel</button>.
|
|||
|
|
</p>
|
|||
|
|
<p>Cliquez ci-dessous sur la <strong>Boussole de référence</strong>, pour évaluer votre projet sur des questions
|
|||
|
|
déjà configurées. Pour configurez vous-même vos questions, cliquez sur <strong>Personnaliser votre Boussole</strong>.</p>
|
|||
|
|
<p>Ce tableau de bord vous permet de suivre vos différentes auto-évaluations sur tous vos projets !</p>
|
|||
|
|
<ul class="bundle-list">
|
|||
|
|
<li v-for="bundle in bundles">
|
|||
|
|
<article class="bundle-list__item">
|
|||
|
|
<main>
|
|||
|
|
<h1>{{ bundle.label }}</h1>
|
|||
|
|
<p>{{ bundle.presentation }}</p>
|
|||
|
|
<dl class="bundle-list__item__attribute">
|
|||
|
|
<dt>Dernière auto-évaluation réalisée</dt>
|
|||
|
|
<dd>{{ bundle.lastQuizzDate ? formatDate(bundle.lastQuizzDate) : 'NA' }}</dd>
|
|||
|
|
<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="navigateToDashboard(bundle)">Voir mes évaluations</button>
|
|||
|
|
<button class="button orange" @click="navigateToQuiz(bundle)">S'évaluer</button>
|
|||
|
|
</footer>
|
|||
|
|
</article>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="button-container">
|
|||
|
|
<nuxt-link to="/bundle/create">Personnaliser votre Boussole</nuxt-link>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<loader v-else/>
|
|||
|
|
<axe-definition-modal :visible="showModal" @close="showModal=false" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
margin-block: $medium;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bundle-list {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
|
|||
|
|
grid-gap: $small;
|
|||
|
|
|
|||
|
|
list-style: none;
|
|||
|
|
margin-top: $x_medium;
|
|||
|
|
|
|||
|
|
&__item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
gap: $small;
|
|||
|
|
padding: $small;
|
|||
|
|
|
|||
|
|
border-radius: 20px;
|
|||
|
|
|
|||
|
|
@include border-shadow();
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: $title-font-size;
|
|||
|
|
margin: 0 0 $xxx_small 0;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
margin: 0 0 $xxx_small 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__attribute {
|
|||
|
|
dt {
|
|||
|
|
font-weight: bold;
|
|||
|
|
float: left;
|
|||
|
|
clear: left;
|
|||
|
|
|
|||
|
|
&:after {
|
|||
|
|
content: ' :';
|
|||
|
|
margin-right: $xxxx_small;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
dd {
|
|||
|
|
padding-bottom: $xxxx_small;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__button-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: $xxx_small;
|
|||
|
|
margin-top: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|