DTL : optimization appointment request working

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>