#128 - add position check

public/site/plugins/comments/routes/create.php

@@ -20,7 +20,13 @@ return [
       $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());
 
       foreach ($comments as $existingComment) {
-          if ($existingComment['author']['email'] === $user->email() && $existingComment['text'] === $data->text) {
+          if
+          (
+              $existingComment['author']['email'] == $user->email() &&
+              $existingComment['text'] == $data->text &&
+              $existingComment['position']['x'] == $data->position->x &&
+              $existingComment['position']['y'] == $data->position->y
+          ) {
               return json_encode(null);
           }
       }

public/site/templates/project.json.php

@@ -11,6 +11,7 @@ $project = [
     'steps'                  => $page->getSteps(),
     'designToLight'          => $page->isDTLEnabled()->isTrue() ? processDTLProposals($page) : null,
     'hasOptimizationRequest' => $page->hasOptimizationRequest()->isTrue(),
+    'notifications'          => $page->notifications()->yaml(),
 ];
 
 $pageData = array_merge($genericData, $project);

src/components/project/ProjectStep.vue

@@ -7,23 +7,28 @@
     <h2 :id="step.id">
       <span :data-icon="step.id">{{ step.label }}</span>
     </h2>
-    <div ref="cards-node" class="cards | flow">
+    <div
+      ref="cards-node"
+      class="cards | flow"
+      :class="{ new: hasUnreadNotifications }"
+    >
       <component :is="cardsMap[step.id]" :step="step" />
     </div>
   </section>
 </template>
 
 <script setup>
-import dayjs from "dayjs";
-import "dayjs/locale/fr";
-import { usePageStore } from "../../stores/page";
-import { onMounted, useTemplateRef } from "vue";
-import { useProjectStore } from "../../stores/project";
-import ClientBrief from "./cards/ClientBrief.vue";
-import MultipleDocuments from "./cards/MultipleDocuments.vue";
-import SimpleDocument from "./cards/SimpleDocument.vue";
-import VirtualSample from "./cards/VirtualSample.vue";
-import PhysicalSample from "./cards/PhysicalSample.vue";
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import { usePageStore } from '../../stores/page';
+import { computed, onMounted, useTemplateRef } from 'vue';
+import { useProjectStore } from '../../stores/project';
+import ClientBrief from './cards/ClientBrief.vue';
+import MultipleDocuments from './cards/MultipleDocuments.vue';
+import SimpleDocument from './cards/SimpleDocument.vue';
+import VirtualSample from './cards/VirtualSample.vue';
+import PhysicalSample from './cards/PhysicalSample.vue';
+import { useUserStore } from '../../stores/user';
 
 const { step } = defineProps({
   step: Object,
@@ -38,21 +43,36 @@ const cardsMap = {
   physicalSample: PhysicalSample,
 };
 
-dayjs.locale("fr");
+dayjs.locale('fr');
 
 const { page } = usePageStore();
 const { setStatus } = useProjectStore();
-const cardsNode = useTemplateRef("cards-node");
+const cardsNode = useTemplateRef('cards-node');
+const { user } = useUserStore();
 
 // Hooks
 onMounted(() => {
   if (step.id === page.content.currentstep) {
     cardsNode.value.scrollIntoView({
-      behavior: "smooth",
-      inline: "center",
+      behavior: 'smooth',
+      inline: 'center',
     });
   }
 });
+
+const correspondingNotifications = computed(() => {
+  return page.notifications.filter((notification) =>
+    notification.location.page.uri.includes(step.slug)
+  );
+});
+
+const hasUnreadNotifications = computed(() => {
+  return correspondingNotifications.value.some(
+    (notification) =>
+      !notification.readby.includes(user.uuid) &&
+      notification.author.uuid !== user.uuid
+  );
+});
 </script>
 
 <style scoped>