boussole-pluss/frontend/pages/bundle/create.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 presentation = 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);
      });
    });
    axes.value = response;
  });
});

function createBundle() {
  const newQuestions = [];
  let errors = [];
  questions.value.forEach((value, axeId) => {
    if (value.length === 0) {
      const axeNumber = axes.value.filter(a => a.id === axeId)[0].identifier;
      errors.push(`L'axe ${axeNumber} n'a pas de question.`);
    }
    value.forEach((q: Question, index)=> {
      newQuestions.push({
        axeId: axeId,
        label: q.label,
        description: q.description,
        index: index+1
      });
      if (!q.label.trim()) {
        const axeNumber = axes.value.filter(a => a.id === axeId)[0].identifier;
        errors.push(`L'une des question de l'axe ${axeNumber} contient un libellé non rempli.`);
      }
    });
  });
  if (errors.length > 0) {
    useNotificationStore().pushNotification("warn",
      {message: `La boussole contient des erreurs !`, details: errors});
  }else {
    useBundleStore()
      .create({
        label: label.value,
        presentation: presentation.value,
        questions: newQuestions
      })
      .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});
      });
  }
}

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);
}

function numberOfQuestions(axe: Axe) {
  const q = questions.value.get(axe.id)
  return q ? q.length: 0;
}

</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 maxlength="50">
      <label for="label">Présentation</label>
      <input id="label" v-model="presentation" type="text" maxlength="100">
      <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">
            <div class="axe-list__item__content-text">
              <p>{{ axe.title }}</p>
              <p>{{ numberOfQuestions(axe) }} question{{numberOfQuestions(axe) > 1? 's': ''}} configurée{{numberOfQuestions(axe) > 1? 's': ''}}</p>
            </div>
            <button class="button blue" type="button" @click="showAxeModal(axe)">
              Configurer
            </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;
      gap: $xx_small;

      &-text p + p {
       margin: $xxx_small 0;
      }
      &-text p:last-child {
        font-style: italic;
      }
    }
  }
}

</style>