#128 - add position check

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>