fix #131

src/components/project/virtual-sample/DynamicView.vue

@@ -7,6 +7,7 @@
           class="btn btn--image"
           :aria-pressed="activeTracks.includes(track) ? true : false"
           :aria-controls="track.slug"
+          :id="track.slug"
           :style="`--btn-image: url(${getFrontViewUrl(track)});`"
           @click="selectTrack(track)"
           :data-comments="getCommentsCount(track)"
@@ -48,12 +49,15 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import Interactive360 from './Interactive360.vue';
 import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
@@ -61,6 +65,24 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
+onBeforeMount(() => {
+  if (route.hash.length > 0) {
+    const trackToOpen = tracks.value.find(
+      (track) => track.slug === route.hash.substring(1)
+    );
+    activeTracks.value = [trackToOpen];
+  } else {
+    activeTracks.value = [tracks.value[0]];
+  }
+});
+
+onMounted(() => {
+  if (route.hash.length > 0) {
+    const targetBtn = document.querySelector(route.hash);
+    targetBtn.scrollIntoView();
+  }
+});
+
 const tracks = computed(
   () =>
     page.value.steps.find((step) => step.slug === 'virtual-sample').files
@@ -101,8 +123,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-activeTracks.value = [tracks.value[0]];
-
 function getFrontViewUrl(track) {
   if (track.files.length > 1) {
     return track.files[7].url;

src/views/Notifications.vue

@@ -53,52 +53,53 @@
 </template>
 
 <script setup>
-import dayjs from "dayjs";
-import "dayjs/locale/fr";
-import Tabs from "../components/Tabs.vue";
-import { useUserStore } from "../stores/user";
-import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useApiStore } from "../stores/api";
-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";
-import AppointmentRequest from "../components/notifications/AppointmentRequest.vue";
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import slugify from 'slugify';
+import Tabs from '../components/Tabs.vue';
+import { useUserStore } from '../stores/user';
+import { ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useApiStore } from '../stores/api';
+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';
+import AppointmentRequest from '../components/notifications/AppointmentRequest.vue';
 
-dayjs.locale("fr");
+dayjs.locale('fr');
 
 const userStore = useUserStore();
 const router = useRouter();
 const { notifications } = storeToRefs(useUserStore());
 const api = useApiStore();
-const currentTab = ref("all");
+const currentTab = ref('all');
 const tabs = computed(() => {
   return [
     {
-      label: "Tout",
-      id: "all",
+      label: 'Tout',
+      id: 'all',
       icon: null,
       count: null,
-      isActive: currentTab.value === "all",
+      isActive: currentTab.value === 'all',
     },
     {
-      label: "Non lu",
-      id: "unread",
+      label: 'Non lu',
+      id: 'unread',
       icon: null,
       count: null,
-      isActive: currentTab.value === "unread",
+      isActive: currentTab.value === 'unread',
     },
   ];
 });
 
 const notificationComponents = {
   comment: Comment,
-  "comment-reply": Reply,
+  'comment-reply': Reply,
   content: Content,
-  "project-request": ProjectRequest,
-  "appointment-request": AppointmentRequest,
+  'project-request': ProjectRequest,
+  'appointment-request': AppointmentRequest,
 };
 
 const sortedNotifications = computed(() => {
@@ -106,9 +107,9 @@ const sortedNotifications = computed(() => {
     return dayjs(b.date).diff(dayjs(a.date));
   });
 
-  if (currentTab.value === "unread") {
+  if (currentTab.value === 'unread') {
     return sortedNotifications.filter(
-      (notification) => notification.isread !== "true"
+      (notification) => notification.isread !== 'true'
     );
   }
   return sortedNotifications;
@@ -122,19 +123,19 @@ function readAll() {
   try {
     api.readAllNotifications();
   } catch (error) {
-    console.log("Could not read all notifications : ", error);
+    console.log('Could not read all notifications : ', error);
   }
 }
 
 // Functions
 function handleNotificationClick(notification) {
   const href =
-    notification.type === "appointment-request"
-      ? getHref(notification) + "?tab=designToLight"
+    notification.type === 'appointment-request'
+      ? getHref(notification) + '?tab=designToLight'
       : getHref(notification);
 
-  if (href.startsWith("http")) {
-    window.open(href, "_blank");
+  if (href.startsWith('http')) {
+    window.open(href, '_blank');
   } else {
     router.push(href);
   }
@@ -143,15 +144,20 @@ function getHref(notification) {
   const uri = notification.location.page.uri;
 
   const isDocumentBrief =
-    notification.location.page.template === "client-brief" &&
-    notification.location?.file?.type === "document";
+    notification.location.page.template === 'client-brief' &&
+    notification.location?.file?.type === 'document';
 
   if (isDocumentBrief) {
-    return notification.project.uri + "?dialog=client-brief&comments=true";
+    return notification.project.uri + '?dialog=client-brief&comments=true';
   }
 
-  if (notification.location.page.template === "track") {
-    return notification.project.uri + "?dialog=virtual-sample&comments=true";
+  if (notification.location.page.template === 'track') {
+    const anchor = notification.location.page.title
+      ? '#' + slugify(notification?.location?.page?.title, { lower: true })
+      : '';
+    return (
+      notification.project.uri + '?dialog=virtual-sample&comments=true' + anchor
+    );
   }
 
   if (notification.location.page.panelurl) {
@@ -170,7 +176,7 @@ main {
 main > header {
   flex-wrap: nowrap;
 }
-main > header [role="tablist"] {
+main > header [role='tablist'] {
   margin-left: 0;
 }
 </style>