designtopack/src/components/ProjectRequestDialog.vue

<template>
  <Dialog
    id="project-request-dialog"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    :dismissableMask="true"
    header="Demander la création d’un projet"
    class="dialog"
    :closeOnEscape="true"
  >
    <template #header>
      <h2 class="font-serif text-lg">Demander la création d’un projet</h2>
    </template>

    <form
      @submit.prevent="handleSubmit"
      class="w-full h-full p-16 flex flex-col"
      style="--row-gap: 1rem"
    >
      <label for="project-title" class="sr-only">Nom du projet</label>
      <input
        type="text"
        v-model="title"
        id="project-title"
        placeholder="Nom du projet"
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      />

      <label for="project-details" class="sr-only">Détails du projet</label>
      <textarea
        id="project-details"
        name="details"
        v-model="details"
        cols="30"
        rows="10"
        placeholder="Détails du projet…"
        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
        required
      ></textarea>

      <div
        id="project-dtl"
        class="w-full text-left rounded-md border border-grey-200 text-grey-800 p-12"
        style="align-self: flex-start"
        :class="{ selected: isDTLEnabled }"
      >
        <input id="dtl" type="checkbox" v-model="isDTLEnabled" />
        <label
          for="dtl"
          class="flex font-medium mt-4"
          style="--column-gap: var(--space-4)"
        >
          Créer avec
          <span class="flex justify-center text-sm" data-icon="leaf"
            >Design to Light</span
          >
        </label>
        <p class="text-sm mt-8 mb-4">
          Découvrez la note environnementale de votre projet et allégez l’impact
          de votre projet grâce à nos expertises d’optimisation du poids de
          flacon.
        </p>
        <router-link to="/design-to-light" class="text-sm font-medium"
          >En savoir plus</router-link
        >
      </div>

      <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
        <button class="btn btn--black-10" @click="emits('close')">
          Annuler
        </button>
        <button class="btn" type="submit">Soumettre</button>
      </footer>
    </form>
  </Dialog>
</template>

<script setup>
import Dialog from 'primevue/dialog';
import { ref, watch } from 'vue';
import { useApiStore } from '../stores/api';

const title = ref('');
const details = ref('');
const isDTLEnabled = ref(false);
const api = useApiStore();
const isOpen = ref(true);
const emits = defineEmits('close');

watch(isOpen, (newValue) => {
  if (!newValue) {
    emits('close');
  }
});

async function handleSubmit() {
  const formData = {
    title: title.value,
    details: details.value,
    isDTLEnabled: isDTLEnabled.value,
  };

  const response = await api.post(formData, 'request-project-creation.json');
  isOpen.value = false;
}
</script>