comments / notifications : improve abstraction

src/components/comments/Comment.vue

@@ -12,7 +12,7 @@
           <span class="comment__id">#{{ commentIndex }}</span>
           •
         </template>
-        <span class="comment__page">Page {{ comment.file.pageIndex }}</span>
+        <span class="comment__page">Page {{ comment.position.pageIndex }}</span>
         <time
           class="comment__date"
           :datetime="dayjs(comment.date).format('YYYY-MM-DD')"
@@ -55,7 +55,6 @@ import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
 import { computed } from "vue";
-import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
 

src/components/comments/Comments.vue

@@ -114,6 +114,7 @@ import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
 import Comment from "./Comment.vue";
 import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
 
 dayjs.locale("fr");
 
@@ -129,6 +130,7 @@ const newCommentPageIndex = ref(null);
 const newCommentPosition = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
+const route = useRoute();
 
 const sortedComments = computed(() => comments.value.reverse());
 const sortedReplies = ref(null);
@@ -162,8 +164,8 @@ function handleSubmit(event = null) {
   }
   const date = dayjs().format();
   const newComment = {
-    pageUri: page.uri + "/client-brief",
-    fileName: openedFile.value.name,
+    path: route.fullPath,
+    fileName: openedFile ? openedFile.value.name : false,
     userUuid: user.uuid,
     text: newCommentText.value,
     date,

src/components/project/DialogWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <PdfViewer v-if="dialog.content.id === 'clientBrief'" />
+  <PdfViewer v-if="dialog.content.slug === 'client-brief'" />
 </template>
 <script setup>
 import PdfViewer from "./client-brief/PdfViewer.vue";

src/views/Kanban.vue

@@ -5,12 +5,7 @@
     <DialogWrapper v-if="dialog.content" />
 
     <div class="kanban">
-      <ProjectStep
-        v-for="step in page.steps"
-        :key="step"
-        :step="step"
-        @update:dialog="updateDialog"
-      >
+      <ProjectStep v-for="step in page.steps" :key="step" :step="step">
       </ProjectStep>
     </div>
   </main>
@@ -37,10 +32,10 @@ if (route.query.dialog) {
 
 watch(
   () => route.query.dialog,
-  (targetStepId) => {
-    if (targetStepId) {
+  (targetStepSlug) => {
+    if (targetStepSlug) {
       const targetStep = page.value.steps.find(
-        (step) => step.id === targetStepId
+        (step) => step.slug === targetStepSlug
       );
       dialog.content = targetStep;
     } else {
@@ -49,8 +44,10 @@ watch(
   }
 );
 
-function openDialog(stepId) {
-  const targetStep = page.value.steps.find((step) => step.id === stepId);
+function openDialog(targetStepSlug) {
+  const targetStep = page.value.steps.find(
+    (step) => step.slug === targetStepSlug
+  );
   dialog.content = targetStep;
 }
 </script>

src/views/Notifications.vue

@@ -37,7 +37,7 @@
       >
         <router-link
           v-if="currentTab === 'all' || !notification.isRead"
-          :to="notification.page.uri + '?notificationId=' + notification.id"
+          :to="notification.location.href"
         >
           <article
             class="notification | bg-white rounded-lg | p-16 | flow"
@@ -55,7 +55,7 @@
                   }}</strong
                 >
                 <span class="notification__client | text-grey-700">{{
-                  notification.page.title
+                  notification.location.project.title
                 }}</span>
                 <time
                   datetime=""