project creation request notification working

src/components/notifications/ProjectRequest.vue

@@ -0,0 +1,46 @@
+<template>
+  <article
+    v-if="useUserStore.role !== 'client'"
+    class="notification | bg-white rounded-lg | p-16 | flow"
+    data-type="project-request"
+  >
+    <header>
+      <p class="flex">
+        <strong
+          class="notification__type | font-medium text-primary"
+          data-icon="comment"
+          >Demande de création de projet</strong
+        >
+        <span class="notification__client | text-grey-700"
+          >{{ notification.project.title }} (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 de la demande : ' +
+        (notification.author.name
+          ? notification.author.name + ' (' + notification.author.email + ')'
+          : notification.author.email) +
+        '<br>Demande : ' +
+        notification.text
+      "
+    ></p>
+  </article>
+</template>
+
+<script setup>
+import { useNotificationsStore } from "../../stores/notifications";
+import { useUserStore } from "../../stores/user";
+
+const { notification } = defineProps({ notification: Object });
+const { formatDate } = useNotificationsStore();
+const { user } = useUserStore();
+</script>

src/stores/projects.js

@@ -8,6 +8,9 @@ export const useProjectsStore = defineStore("projects", () => {
   const currentProjects = computed(() => {
     return projects.value.filter((project) => project.status === "listed");
   });
+  const draftProjects = computed(() => {
+    return projects.value.filter((project) => project.status === "draft");
+  });
   const archivedProjects = computed(() => {
     return projects.value.filter((project) => project.status === "unlisted");
   });
@@ -23,5 +26,11 @@ export const useProjectsStore = defineStore("projects", () => {
     return project;
   }
 
-  return { projects, currentProjects, archivedProjects, getProjectByUuid };
+  return {
+    projects,
+    currentProjects,
+    archivedProjects,
+    draftProjects,
+    getProjectByUuid,
+  };
 });

src/views/Notifications.vue

@@ -45,7 +45,7 @@
           :is="notificationComponents[notification.type]"
           :notification="notification"
           :data-status="notification.isRead ? 'read' : 'unread'"
-          @click="router.push(getHref(notification))"
+          @click="handleNotificationClick(notification)"
         />
       </template>
     </section>
@@ -64,6 +64,7 @@ import Comment from "../components/notifications/Comment.vue";
 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";
 
 dayjs.locale("fr");
 
@@ -95,6 +96,7 @@ const notificationComponents = {
   comment: Comment,
   "comment-reply": Reply,
   content: Content,
+  "project-request": ProjectRequest,
 };
 
 const sortedNotifications = computed(() => {
@@ -123,6 +125,14 @@ function readAll() {
 }
 
 // Functions
+function handleNotificationClick(notification) {
+  const href = getHref(notification);
+  if (href.startsWith("http")) {
+    window.open(href, "_blank");
+  } else {
+    router.push(href);
+  }
+}
 function getHref(notification) {
   const uri = notification.location.page.uri;
 
@@ -138,6 +148,10 @@ function getHref(notification) {
     return notification.project.uri + "?dialog=virtual-sample&comments=true";
   }
 
+  if (notification.location.page.panelurl) {
+    return notification.location.page.panelurl;
+  }
+
   return uri;
 }
 </script>