108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
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>
|