Nicolas Doby
b6e86f0641
- update to the latest version of Java/SpringBoot - update to the latest version NuxtJS - add account/password update - add account creation - add account password reset - add bundle to regroup questions and add default questions on user creation - add bundle creation
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>
|