151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
||
|
||
import {type QuestionCreation, useBundleStore} from "~/store/bundle";
|
||
import {useNotificationStore} from "~/store/notification";
|
||
import type {ApiError} from "~/composables/fetch-api";
|
||
import {type Axe, useAxeStore} from "~/store/axe";
|
||
import {type Question, useQuestionStore} from "~/store/question";
|
||
|
||
const axes = ref<Axe[]>();
|
||
const label = ref();
|
||
const questions = ref<Map<number, QuestionCreation[]>>(new Map());
|
||
const questionsExample = ref<Map<number, QuestionCreation[]>>(new Map());
|
||
const modalVisible = ref(false);
|
||
const currentAxe = ref<Axe>();
|
||
const currentQuestions = ref<Question[]>();
|
||
|
||
onMounted(() => {
|
||
useAxeStore().findAxes().then(response => {
|
||
response.forEach(axe => {
|
||
useQuestionStore().findDefaults(axe.id).then(response => {
|
||
questions.value.set(axe.id, response);
|
||
});
|
||
useQuestionStore().findAll(axe.id).then(response => {
|
||
questionsExample.value.set(axe.id, response.content);
|
||
});
|
||
});
|
||
axes.value = response;
|
||
});
|
||
|
||
});
|
||
|
||
function createBundle() {
|
||
useBundleStore()
|
||
.create({
|
||
label: label.value,
|
||
questions: questions.value
|
||
})
|
||
.then(() => {
|
||
useNotificationStore().pushNotification("success",{message: "La boussole a bien été créée."});
|
||
navigateTo("/bundle");
|
||
})
|
||
.catch((apiError: ApiError) => {
|
||
let details;
|
||
if (apiError.fieldErrors) {
|
||
details = apiError.fieldErrors.map(error => `${error.fields!.join(", ")} ${error.detail}`);
|
||
}
|
||
useNotificationStore().pushNotification("warn",{message: apiError.message, details});
|
||
});
|
||
}
|
||
|
||
// const questionsInput = computed<boolean>(() => {
|
||
// let emptyAxe = 0;
|
||
// for (const [key, value] of questions.value.entries()) {
|
||
// if (value.length === 0) {
|
||
// emptyAxe += 1;
|
||
// }
|
||
// console.log(`${key}: ${value.length}`);
|
||
// }
|
||
// return emptyAxe === questions.value.keys().length;
|
||
// });
|
||
|
||
function css(axe: Axe) {
|
||
return {
|
||
'--color': axe.color
|
||
}
|
||
}
|
||
|
||
function showAxeModal(axe: Axe) {
|
||
currentAxe.value = axe;
|
||
modalVisible.value = true;
|
||
currentQuestions.value = questions.value.get(axe.id);
|
||
document.body.style.overflowY = "hidden";
|
||
}
|
||
|
||
function hideAxeModal() {
|
||
currentAxe.value = undefined;
|
||
currentQuestions.value = undefined;
|
||
modalVisible.value = false;
|
||
document.body.style.overflowY = "auto";
|
||
}
|
||
|
||
function onQuestionsChange({axeId, newQuestions}) {
|
||
questions.value.set(axeId, newQuestions);
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<h1>Créer une nouvelle boussole</h1>
|
||
<section>
|
||
<form class="form" @submit.prevent="createBundle">
|
||
<label for="label">Nom de la boussole *</label>
|
||
<input id="label" v-model="label" type="text" required>
|
||
{{ questions }}
|
||
<ul class="axe-list">
|
||
<li class="axe-list__item" v-for="axe in axes" :style="css(axe)">
|
||
<h2>{{ axe.identifier }} - {{ axe.shortTitle }}</h2>
|
||
<div class="axe-list__item__content">
|
||
<p>{{ axe.title }}</p>
|
||
<button class="button blue" type="button" @click="showAxeModal(axe)">Configurer les
|
||
questions
|
||
</button>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="button-container">
|
||
<nuxt-link class="button gray button-back" to="/bundle" aria-label="Précédent">❮</nuxt-link>
|
||
<button class="button orange">Valider</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
<bundle-axe-modal v-if="currentAxe" :visible="modalVisible"
|
||
:axe="currentAxe"
|
||
:questions="questions.get(currentAxe.id)"
|
||
:questions-example="questionsExample.get(currentAxe.id)"
|
||
@close="hideAxeModal()"
|
||
@changed="(axeId, newQuestions) => onQuestionsChange(axeId, newQuestions)"/>
|
||
</template>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
@import "assets/css/color";
|
||
@import "assets/css/spacing";
|
||
@import "assets/css/font";
|
||
|
||
.axe-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
list-style: none;
|
||
gap: $xxx_small;
|
||
margin: 0;
|
||
|
||
&__item {
|
||
padding: $xx_small 0;
|
||
border-bottom: 2px solid var(--color);
|
||
|
||
h2 {
|
||
font-size: $secondary-font-size;
|
||
margin: 0;
|
||
}
|
||
|
||
&__content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|