feat: review backend and frontend
- 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
This commit is contained in:
95
frontend/pages/bundle/index.vue
Normal file
95
frontend/pages/bundle/index.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<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">Personnaliser votre 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: $small;
|
||||
|
||||
list-style: none;
|
||||
margin-top: $x_medium;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $small;
|
||||
padding: $small;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
@include border-shadow();
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $small 0;
|
||||
}
|
||||
|
||||
&__attribute {
|
||||
display: flex;
|
||||
gap: $xxx_small;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
&:after {
|
||||
content: ' :';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user