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 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>