studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

DTL dialogs : style optimization-request-dialog + fix project-request-dialog

Browse source
This commit is contained in:
Timothée Goguely 2025-01-27 19:34:18 +01:00
parent 67f41757f5
commit f92dc8ac85
3 changed files with 122 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/ProjectRequestDialog.vue
View file

@ -35,8 +35,8 @@
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"
placeholder="Détails du projet…"
class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
required
></textarea>
@ -66,7 +66,7 @@
>
</div>
<footer class="flex-columns w-full mt-auto" style="column-gap: 0.5rem">
<footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
<button class="btn btn--black-10" @click="emits('close')">
Annuler
</button>

101
src/components/design-to-light/OptimizationRequestDialog.vue
View file

@ -1,38 +1,95 @@
<template>
<form @submit.prevent="handleSubmit">
<select name="projects" id="projects" v-model="projectUri">
<option
v-for="project in currentProjects"
:key="project.uri"
:value="project.uri.substring(1)"
<Dialog
id="optimization-request-dialog"
v-model:visible="isOpen"
modal
:draggable="false"
dismissableMask="true"
header="Demander un rendez-vous"
class="dialog"
:closeOnEscape="true"
>
<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
>
{{ project.title }}
</option>
</select>
<input type="text" v-model="subject" />
<textarea
name="details"
v-model="details"
cols="30"
rows="10"
placeholder="Décrivez votre demande…"
required
></textarea>
<button type="submit">Soumettre</button>
</form>
<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 } from "vue";
import { ref, watch } from "vue";
const { currentProjects } = storeToRefs(useProjectsStore());
const projectUri = ref("");
const subject = ref("Design to Light");
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 = {