appointment request notification working

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

@@ -31,7 +31,7 @@ return [
           "page" => $newProject
         ],
         "date" => (string) $formattedDate,
-        "text" => nl2br(esc($data->details)),
+        "text" => nl2br("Objet : " . $data->subject . "\n" .  esc($data->details)),
         "author" => $user,
         "id" => Str::uuid(),
         "type" => "appointment-request",

src/components/notifications/AppointmentRequest.vue

@@ -0,0 +1,59 @@
+<template>
+  <article
+    @click="read()"
+    v-if="useUserStore.role !== 'client'"
+    class="notification | bg-white rounded-lg | p-16 | flow"
+    data-type="appointment-request"
+  >
+    <header>
+      <p class="flex">
+        <strong
+          class="notification__type | font-medium text-primary"
+          data-icon="comment"
+          >Demande de rendez-vous</strong
+        >
+        <span class="notification__client | text-grey-700"
+          >{{ notification.project.title }}
+          {{
+            notification.project.status === "draft" ? "(brouillon)" : ""
+          }}</span
+        >
+        <time
+          datetime=""
+          class="notification__date | text-grey-700 | ml-auto"
+          >{{ formatDate(notification) }}</time
+        >
+      </p>
+    </header>
+    <p
+      v-if="notification.type"
+      class="notification__body | text-md font-medium | line-clamp"
+      v-html="
+        'Auteur : ' +
+        (notification.author.name
+          ? notification.author.name + ' (' + notification.author.email + ')'
+          : notification.author.email) +
+        ' : <br>' +
+        notification.text
+      "
+    ></p>
+  </article>
+</template>
+
+<script setup>
+import { useNotificationsStore } from "../../stores/notifications";
+import { useUserStore } from "../../stores/user";
+import { useApiStore } from "../../stores/api";
+
+const { notification } = defineProps({ notification: Object });
+const { formatDate } = useNotificationsStore();
+const { user } = useUserStore();
+const api = useApiStore();
+
+async function read() {
+  const response = await api.readNotification(
+    notification.id,
+    notification.project.uri
+  );
+}
+</script>

src/components/notifications/ProjectRequest.vue

@@ -13,7 +13,10 @@
           >Demande de création de projet</strong
         >
         <span class="notification__client | text-grey-700"
-          >{{ notification.project.title }} (brouillon)</span
+          >{{ notification.project.title }}
+          {{
+            notification.project.status === "draft" ? "(brouillon)" : ""
+          }}</span
         >
         <time
           datetime=""
@@ -26,11 +29,11 @@
       v-if="notification.type"
       class="notification__body | text-md font-medium | line-clamp"
       v-html="
-        'Auteur de la demande : ' +
+        'De la part de ' +
         (notification.author.name
           ? notification.author.name + ' (' + notification.author.email + ')'
           : notification.author.email) +
-        '<br>Demande : ' +
+        ' : <br>' +
         notification.text
       "
     ></p>

src/views/Notifications.vue

@@ -65,6 +65,7 @@ import Reply from "../components/notifications/Reply.vue";
 import Content from "../components/notifications/Content.vue";
 import { useRouter } from "vue-router";
 import ProjectRequest from "../components/notifications/ProjectRequest.vue";
+import AppointmentRequest from "../components/notifications/AppointmentRequest.vue";
 
 dayjs.locale("fr");
 
@@ -97,6 +98,7 @@ const notificationComponents = {
   "comment-reply": Reply,
   content: Content,
   "project-request": ProjectRequest,
+  "appointment-request": AppointmentRequest,
 };
 
 const sortedNotifications = computed(() => {