DTL : optimization appointment request working

src/components/ProjectRequestDialog.vue

@@ -30,7 +30,8 @@ async function handleSubmit() {
     isDTLEnabled: isDTLEnabled.value,
   };
 
-  const response = await api.requestProjectCreation(formData);
+  const response = await api.post(formData, "request-project-creation.json");
+  console.log(response);
 }
 </script>
 

src/components/design-to-light/DTLPanel.vue

@@ -145,16 +145,20 @@
           </template>
         </div>
       </div>
-      <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
-      <footer class="p-16">
-        <button class="btn btn--white w-full">
+      <footer v-if="proposals.length > 1" class="p-16">
+        <button
+          class="btn btn--white w-full"
+          @click="isOptimizationDialogOpen = true"
+        >
           Demander une expertise d’optimisation
         </button>
       </footer>
     </section>
   </aside>
+  <OptimizationRequestDialog v-if="isOptimizationDialogOpen" />
 </template>
 <script setup>
+import OptimizationRequestDialog from "./OptimizationRequestDialog.vue";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { storeToRefs } from "pinia";
@@ -171,6 +175,8 @@ const isDialogOpen = computed(() => {
   return openedFile.value != null;
 });
 
+const isOptimizationDialogOpen = ref(false);
+
 dayjs.locale("fr");
 
 const emits = defineEmits(["close"]);
@@ -179,13 +185,13 @@ proposals[0].isActive = true;
 
 const activeProposal = ref(proposals[0]);
 
-window.addEventListener("keyup", closeOnEscape);
-window.addEventListener("click", close);
+// window.addEventListener("keyup", closeOnEscape);
+// window.addEventListener("click", close);
 
-onBeforeUnmount(() => {
-  window.removeEventListener("keyup", closeOnEscape);
-  window.removeEventListener("click", close);
-});
+// onBeforeUnmount(() => {
+//   window.removeEventListener("keyup", closeOnEscape);
+//   window.removeEventListener("click", close);
+// });
 
 // Functions
 function closeOnEscape(event) {

src/components/design-to-light/OptimizationRequestDialog.vue

@@ -1,18 +1,59 @@
 <template>
-  <form action="">
-    <select name="projects" id="projects">
-      <option v-for="project in currentProjects" :value="project.slug">
+  <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)"
+      >
         {{ project.title }}
       </option>
     </select>
-    <input type="text" value="Design to Light" />
-    <textarea placeholder="Décrivez votre demande…"> </textarea>
+    <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>
 </template>
 
 <script setup>
+import { useApiStore } from "../../stores/api";
 import { storeToRefs } from "pinia";
 import { useProjectsStore } from "../../stores/projects";
+import { ref } from "vue";
 
 const { currentProjects } = storeToRefs(useProjectsStore());
+const projectUri = ref("");
+const subject = ref("Design to Light");
+const details = ref("");
+const api = useApiStore();
+
+async function handleSubmit() {
+  const formData = {
+    projectUri: projectUri.value,
+    subject: subject.value,
+    details: details.value,
+  };
+
+  const response = await api.post(
+    formData,
+    "/request-optimization-appointment.json"
+  );
+
+  console.log(response);
+}
 </script>
+
+<style scoped>
+form {
+  position: fixed;
+  background-color: #fff;
+  z-index: 999;
+}
+</style>