119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<Dialog
|
|
id="optimization-request-dialog"
|
|
v-model:visible="isOpen"
|
|
modal
|
|
:draggable="false"
|
|
dismissableMask="true"
|
|
header="Demander un rendez-vous"
|
|
class="dialog"
|
|
:closeOnEscape="true"
|
|
style="z-index: 9999"
|
|
>
|
|
<template #header>
|
|
<h2 class="font-serif text-lg">Demander un rendez-vous</h2>
|
|
<p class="flex justify-center text-sm" data-icon="leaf">
|
|
Design to Light
|
|
</p>
|
|
</template>
|
|
|
|
<form
|
|
@submit.prevent="handleSubmit"
|
|
class="w-full p-16 flex flex-col"
|
|
style="--row-gap: 1rem"
|
|
>
|
|
<label for="projects" class="sr-only">Projet</label>
|
|
<select
|
|
name="projects"
|
|
id="projects"
|
|
v-model="projectUri"
|
|
class="w-full rounded-md border border-grey-200 px-16 py-12"
|
|
required
|
|
>
|
|
<option value="">Sélectionnez le projet</option>
|
|
<option
|
|
v-for="project in currentProjects"
|
|
:key="project.uri"
|
|
:value="project.uri.substring(1)"
|
|
>
|
|
{{ project.title }}
|
|
</option>
|
|
</select>
|
|
|
|
<label for="appointment-subject" class="sr-only"
|
|
>Objet du rendez-vous</label
|
|
>
|
|
<input
|
|
type="text"
|
|
v-model="subject"
|
|
id="appointment-subject"
|
|
placeholder="Objet du rendez-vous"
|
|
class="w-full rounded-md border border-grey-200 px-16 py-12"
|
|
required
|
|
/>
|
|
|
|
<label for="appointment-details" class="sr-only">Détails du projet</label>
|
|
<textarea
|
|
id="appointment-details"
|
|
name="details"
|
|
v-model="details"
|
|
cols="30"
|
|
rows="10"
|
|
placeholder="Décrivez votre demande…"
|
|
class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
|
|
required
|
|
></textarea>
|
|
|
|
<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 { useApiStore } from "../../stores/api";
|
|
import { storeToRefs } from "pinia";
|
|
import { useProjectsStore } from "../../stores/projects";
|
|
import { ref, watch } from "vue";
|
|
|
|
const { currentProjects } = storeToRefs(useProjectsStore());
|
|
const projectUri = ref("");
|
|
const subject = ref("");
|
|
const details = ref("");
|
|
const api = useApiStore();
|
|
const isOpen = ref(true);
|
|
const emits = defineEmits("close");
|
|
|
|
watch(isOpen, (newValue) => {
|
|
if (!newValue) {
|
|
emits("close");
|
|
}
|
|
});
|
|
|
|
async function handleSubmit() {
|
|
const formData = {
|
|
projectUri: projectUri.value,
|
|
subject: subject.value,
|
|
details: details.value,
|
|
};
|
|
|
|
const response = await api.post(
|
|
formData,
|
|
"/request-optimization-appointment.json"
|
|
);
|
|
isOpen.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
form {
|
|
position: fixed;
|
|
background-color: #fff;
|
|
z-index: 999;
|
|
}
|
|
</style>
|