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 h-full 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">
        <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-auto" style="column-gap: .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 } 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");

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

  const response = await api.post(formData, "request-project-creation.json");
  console.log(response);
}
</script>