fix #138

src/components/project/PdfViewer.vue

@@ -15,21 +15,22 @@
     @click="isCommentsOpen = !isCommentsOpen"
   >
     <span class="sr-only"
-      >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
+      >{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span
     >
   </button>
   <Comments v-if="isCommentsOpen" />
 </template>
 
 <script setup>
-import Comments from "../comments/Comments.vue";
+import Comments from '../comments/Comments.vue';
-import { ref, watch } from "vue";
+import { ref, watch } from 'vue';
-import { useDialogStore } from "../../stores/dialog";
+import { useDialogStore } from '../../stores/dialog';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
-import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter } from 'vue-router';
 
-const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
+const licenseKey =
+  import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
 useLicense({ licenseKey });
 
 const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
@@ -40,14 +41,14 @@ const currentPageIndex = ref(1);
 
 // Functions
 const onPdfLoaded = () => {
-  const wrapper = document.querySelector(".vpv-pages-inner-container");
+  const wrapper = document.querySelector('.vpv-pages-inner-container');
 
   const observer = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry, index) => {
         if (entry.intersectionRatio > 0.5) {
           currentPageIndex.value = parseInt(
-            entry.target.getAttribute("aria-label").split(" ")[1]
+            entry.target.getAttribute('aria-label').split(' ')[1]
           );
         }
       });
@@ -59,7 +60,7 @@ const onPdfLoaded = () => {
   );
 
   const observePages = () => {
-    const pages = document.querySelectorAll(".vpv-page-inner-container");
+    const pages = document.querySelectorAll('.vpv-page-inner-container');
     pages.forEach((page) => {
       if (!page.__observed__) {
         observer.observe(page);
@@ -81,5 +82,5 @@ const onPdfLoaded = () => {
 </script>
 
 <style scoped>
-@import "../../assets/css/src/2.blocks.pdf-viewer.css";
+@import '../../assets/css/src/2.blocks.pdf-viewer.css';
 </style>

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

@@ -30,22 +30,22 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch } from 'vue';
-import { useVirtualSampleStore } from "../../../stores/virtualSample";
+import { useVirtualSampleStore } from '../../../stores/virtualSample';
-import PdfViewer from "../PdfViewer.vue";
+import PdfViewer from '../PdfViewer.vue';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
-import { useDialogStore } from "../../../stores/dialog";
+import { useDialogStore } from '../../../stores/dialog';
 
-const { step } = useVirtualSampleStore();
+const { step } = storeToRefs(useVirtualSampleStore());
 const { openedFile, activeTracks } = storeToRefs(useDialogStore());
-const activeTab = ref(Object.keys(step.files.static)[0]);
+const activeTab = ref(Object.keys(step.value.files.static)[0]);
 
 activeTracks.value = [];
 
 watch(
   activeTab,
   (newVal) => {
-    openedFile.value = step.files.static[newVal];
+    openedFile.value = step.value.files.static[newVal];
   },
   { immediate: true }
 );

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

@@ -122,6 +122,7 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 const { page } = storeToRefs(usePageStore());
 
 isLoopAnimationEnabled.value = false;
+activeTab.value = 'dynamic';
 
 // Variables
 const router = useRouter();

src/stores/virtualSample.js

@@ -1,15 +1,17 @@
 import { defineStore, storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { usePageStore } from './page';
 import { useDialogStore } from './dialog';
 
 export const useVirtualSampleStore = defineStore('virtual-sample', () => {
-  const { page } = usePageStore();
+  const { page } = storeToRefs(usePageStore());
   const { openedFile } = storeToRefs(useDialogStore());
-  const step = page.steps.find((step) => step.id === 'virtualSample');
+  const step = computed(() => {
+    return page.value.steps.find((step) => step.id === 'virtualSample');
+  });
   const isCompareModeEnabled = ref(false);
 
-  const activeTab = ref(step.files.dynamic ? 'dynamic' : 'static');
+  const activeTab = ref(step.value.files.dynamic ? 'dynamic' : 'static');
   const currentFile = ref(null);
   const isLoopAnimationEnabled = ref(false);
   const isDownloadTriggered = ref(false);

src/views/Kanban.vue

@@ -21,16 +21,16 @@
 </template>
 
 <script setup>
-import ProjectStep from "../components/project/ProjectStep.vue";
+import ProjectStep from '../components/project/ProjectStep.vue';
-import Header from "../components/project/Header.vue";
+import Header from '../components/project/Header.vue';
-import DialogWrapper from "../components/project/DialogWrapper.vue";
+import DialogWrapper from '../components/project/DialogWrapper.vue';
-import { usePageStore } from "../stores/page";
+import { usePageStore } from '../stores/page';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
-import { watch, ref } from "vue";
+import { watch, ref } from 'vue';
-import { useDialogStore } from "../stores/dialog";
+import { useDialogStore } from '../stores/dialog';
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router';
-import DTLButton from "../components/design-to-light/DTLButton.vue";
+import DTLButton from '../components/design-to-light/DTLButton.vue';
-import DTLPanel from "../components/design-to-light/DTLPanel.vue";
+import DTLPanel from '../components/design-to-light/DTLPanel.vue';
 
 const { page } = storeToRefs(usePageStore());
 const dialog = useDialogStore();