DTL : optimization appointment request working

public/site/blueprints/tabs/design-to-light.yml

@@ -3,6 +3,15 @@ label: Design to Light
 icon: leaf
 
 fields:
+  hasOptimizationRequest:
+    type: hidden
+    default: "false"
+  optimizationRequestDetails:
+    label: Demande de rendez-vous
+    type: textarea
+    disabled: true
+    when:
+      hasOptimizationRequest: "true"
   isDTLEnabled:
     label: Actif
     type: toggle

public/site/config/config.php

@@ -29,6 +29,7 @@ return [
     require(__DIR__ . '/routes/upload-pdf.php'),
     require(__DIR__ . '/routes/validate-brief.php'),
     require(__DIR__ . '/routes/request-project-creation.php'),
+    require(__DIR__ . '/routes/request-optimization-appointment.php'),
   ],
   'hooks' => [
     'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'),

public/site/config/routes/request-optimization-appointment.php

@@ -0,0 +1,52 @@
+<?php
+
+return [
+  'pattern' => 'request-optimization-appointment.json',
+  'method' => 'POST',
+  'action' => function () {
+    $json = file_get_contents('php://input');
+    $data = json_decode($json);
+
+    $user = kirby()->user();    
+    $project = page($data->projectUri);
+
+    try {
+      $newProject = $project->update([
+        "hasOptimizationRequest" => "true",
+        "optimizationRequestDetails" => esc("De la part de " . kirby()->user()->name() . " (" . kirby()->user()->email() . ") : \n\n" . "Objet : " . $data->subject . "\n" . $data->details)
+      ]);
+    } catch (\Throwable $th) {
+      return [
+        "status" => "error",
+        "message" => "Can't update project " . $project->title()->value() . ". " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
+      ];
+    }
+
+    try {
+      $date = new DateTime();
+      $formattedDate = $date->format(DateTime::ISO8601);
+
+      $notificationData = [
+        "location" => [
+          "page" => $newProject
+        ],
+        "date" => (string) $formattedDate,
+        "text" => nl2br(esc($data->details)),
+        "author" => $user,
+        "id" => Str::uuid(),
+        "type" => "appointment-request",
+      ];
+
+      $newProject->createNotification($notificationData);
+
+      return [
+        "status" => "success",
+      ];
+    } catch (\Throwable $th) {
+      return [
+        "status" => "error",
+        "message" => "Can't create notification. " . $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine()
+      ];
+    }
+  }
+];

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>

src/stores/api.js

@@ -75,24 +75,21 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  async function requestProjectCreation(data) {
+  async function post(data, route) {
     const headers = {
       method: "POST",
       body: JSON.stringify(data),
     };
 
     try {
-      const response = await fetch("/request-project-creation.json", headers);
+      const response = await fetch(route, headers);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       const data = await response.json();
-      console.log(data);
+      return data;
     } catch (error) {
-      console.error(
-        "Une erreur s'est produite lors de l'ajout du commentaire :",
-        error
-      );
+      console.error("Une erreur s'est produite :", error);
       throw error;
     }
   }
@@ -249,6 +246,6 @@ export const useApiStore = defineStore("api", () => {
     readNotification,
     readAllNotifications,
     validateBrief,
-    requestProjectCreation,
+    post,
   };
 });

src/views/DesignToLight.vue

@@ -27,7 +27,7 @@
   </article>
 
   <OptimizationRequestDialog
-    v-if="isDialogOpen"
+    v-if="isOptimizationDialogOpen"
     @close="isDialogOpen = false"
   />
 </template>
@@ -39,5 +39,5 @@ import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
 
-const isDialogOpen = ref(false);
+const isOptimizationDialogOpen = ref(false);
 </script>