DTL panel : show proposal corresponding to dialog working for virtual sample (dynamic and static)

public/site/plugins/helpers/index.php

@@ -73,59 +73,71 @@ function processDTLProposals($page) {
       $DTLProposal = null;
 
       switch ($location) {
-          case 'proposal':
+        case 'proposal':
-              $proposalPage = $page->find('proposal');
+            $proposalPage = $page->find('proposal');
-              $proposalFile = $proposal->DTLproposal()->toFile();
+            $proposalFile = $proposal->DTLproposal()->toFile();
 
-              if ($proposalPage && $proposalFile) {
+            if ($proposalPage && $proposalFile) {
-                  $index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
+                $index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
-                  $DTLProposal = [
+                $DTLProposal = [
-                      "location" => "proposal",
+                "location" => [
-                      "path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
+                        "step" => "proposal"
-                      "date" => $proposalFile->modified("d/MM/Y"),
+                    ],
-                      "stepLabel" => "Proposition commerciale",
+                "path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
-                  ];
+                "date" => $proposalFile->modified("d/MM/Y"),
-              }
+                "stepLabel" => "Proposition commerciale",
-              break;
+                ];
+            }
+        break;
 
-          case 'industrialIdeation':
+        case 'industrialIdeation':
-              $proposalPage = $page->find('industrial-ideation');
+            $proposalPage = $page->find('industrial-ideation');
-              $proposalFile = $proposal->DTLindustrialIdeation()->toFile();
+            $proposalFile = $proposal->DTLindustrialIdeation()->toFile();
 
-              if ($proposalPage && $proposalFile) {
+            if ($proposalPage && $proposalFile) {
-                  $DTLProposal = [
+                $DTLProposal = [
-                      "location" => "industrialIdeation",
+                    "location" => [
-                      "path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
+                        "step" => "industrialIdeation"
-                      "date" => $proposalFile->modified("d/MM/Y"),
+                    ],
-                      "stepLabel" => "Idéation industrielle",
+                    "path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
-                  ];
+                    "date" => $proposalFile->modified("d/MM/Y"),
-              }
+                    "stepLabel" => "Idéation industrielle",
-              break;
+                ];
+            }
+        break;
 
-          case 'virtualSampleDynamicTrack':
+        case 'virtualSampleDynamicTrack':
-              $proposalPage = $proposal->DTLVirtualSampleDynamicTrack()->toPage();
+            $proposalPage = $proposal->DTLVirtualSampleDynamicTrack()->toPage();
-              if ($proposalPage) {
+            if ($proposalPage) {
-                  $DTLProposal = [
+                $DTLProposal = [
-                      "location" => "virtualSampleDynamicTrack",
+                    "location" => [
-                      "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
+                        "step" => "virtualSample",
-                      "date" => $proposalPage->modified("d/MM/Y"),
+                        "type" => "dynamic",
-                      "stepLabel" => "Échantillon virtuel - piste dynamique",
+                        "trackSlug" => (string) $proposalPage->slug()
-                  ];
+                    ],
-              }
+                    "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
-              break;
+                    "date" => $proposalPage->modified("d/MM/Y"),
+                    "stepLabel" => "Échantillon virtuel - piste dynamique",
+                ];
+            }
+        break;
 
-          case 'virtualSampleStaticTrack':
+        case 'virtualSampleStaticTrack':
-              $proposalPage = $page->find('virtual-sample');
+            $proposalPage = $page->find('virtual-sample');
-              $proposalFile = $proposal->DTLVirtualSampleStaticTrack()->toFile();
+            $proposalFile = $proposal->DTLVirtualSampleStaticTrack()->toFile();
-              if ($proposalPage && $proposalFile) {
+            if ($proposalPage && $proposalFile) {
-                  $DTLProposal = [
+                $DTLProposal = [
-                      "location" => "virtualSampleStaticTrack",
+                    "location" => [
-                      "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
+                        "step" => "virtualSample",
-                      "date" => $proposalFile->modified("d/MM/Y"),
+                        "type" => "static",
-                      "stepLabel" => "Échantillon virtuel - piste statique",
+                        "source" => (string) $proposalFile->url()
-                  ];
+                    ],
-              }
+                    "path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
-              break;
+                    "date" => $proposalFile->modified("d/MM/Y"),
+                    "stepLabel" => "Échantillon virtuel - piste statique",
+                ];
+            }
+        break;
       }
 
       if ($DTLProposal) {            

src/components/design-to-light/DTLPanel.vue

@@ -1,8 +1,21 @@
 <template>
-  <aside id="dtl-panel" class="text-sm bg-black rounded-2xl" aria-labelledby="dtl-label" @click="preventClose($event)">
+  <aside
-    <header class="flex items-center | border-b pl-32 pr-16 py-8" data-icon="leaf" style="--column-gap:.5rem">
+    id="dtl-panel"
+    class="text-sm bg-black rounded-2xl"
+    aria-labelledby="dtl-label"
+    @click="preventClose($event)"
+  >
+    <header
+      class="flex items-center | border-b pl-32 pr-16 py-8"
+      data-icon="leaf"
+      style="--column-gap: 0.5rem"
+    >
       <h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
-      <button @click="emits('close')" class="btn btn--icon btn--transparent | ml-auto" data-icon="close">
+      <button
+        @click="emits('close')"
+        class="btn btn--icon btn--transparent | ml-auto"
+        data-icon="close"
+      >
         <span class="sr-only">Fermer</span>
       </button>
     </header>
@@ -18,18 +31,50 @@
       </button>
     </nav>
     <section class="overflow-y" tabindex="-1">
-      <div id="proposition" class="flex | bg-white-05 text-grey-200 px-32 py-16" style="--column-gap:1rem">
+      <div
+        id="proposition"
+        class="flex | bg-white-05 text-grey-200 px-32 py-16"
+        style="--column-gap: 1rem"
+      >
         <h3 class="sr-only">Proposition</h3>
-        <img v-if="activeProposal.thumb" :src="activeProposal.thumb" alt="" width="72" height="72" loading="lazy" class="bg-white rounded-sm">
+        <img
-        <p>Données basées sur la proposition <br>du {{ activeProposal.date }} <br>{{ activeProposal.stepLabel }}</p>
+          v-if="activeProposal.thumb"
+          :src="activeProposal.thumb"
+          alt=""
+          width="72"
+          height="72"
+          loading="lazy"
+          class="bg-white rounded-sm"
+        />
+        <p>
+          Données basées sur la proposition <br />du {{ activeProposal.date }}
+          <br />{{ activeProposal.stepLabel }}
+        </p>
       </div>
       <div id="note-globale" class="px-32 py-16 border-b flow">
         <h3>Note globale</h3>
-        <div class="flex" style="--column-gap:1rem">
+        <div class="flex" style="--column-gap: 1rem">
-          <p :data-grade="activeProposal.grades.global.letter"><strong class="sr-only">{{ activeProposal.grades.global.letter }}</strong></p>
+          <p :data-grade="activeProposal.grades.global.letter">
+            <strong class="sr-only">{{
+              activeProposal.grades.global.letter
+            }}</strong>
+          </p>
           <div class="flex-1">
-            <p><strong class="text-md font-medium">{{ activeProposal.grades.global.mention }}</strong> <span class="text-white-50 ml-8">{{ activeProposal.grades.global.number }}/10</span></p>
+            <p>
-            <input type="range" min="0" max="10" :value="activeProposal.grades.global.number" disabled />
+              <strong class="text-md font-medium">{{
+                activeProposal.grades.global.mention
+              }}</strong>
+              <span class="text-white-50 ml-8"
+                >{{ activeProposal.grades.global.number }}/10</span
+              >
+            </p>
+            <input
+              type="range"
+              min="0"
+              max="10"
+              :value="activeProposal.grades.global.number"
+              disabled
+            />
             <p>{{ activeProposal.grades.global.comment }}</p>
           </div>
         </div>
@@ -38,19 +83,34 @@
         <h3>Positionnement</h3>
         <dl>
           <dt id="design">Design</dt>
-          <dd><span class="sr-only">{{ activeProposal.grades.position.complexity }}</span></dd>
+          <dd>
+            <span class="sr-only">{{
+              activeProposal.grades.position.complexity
+            }}</span>
+          </dd>
           <dt id="poids">Poids</dt>
-          <dd><span class="sr-only">{{ activeProposal.grades.position.weight }}</span></dd>
+          <dd>
+            <span class="sr-only">{{
+              activeProposal.grades.position.weight
+            }}</span>
+          </dd>
         </dl>
         <button
           class="dot"
           v-for="(proposal, index) in proposals"
           @click="activeProposal = proposal"
           :aria-selected="proposal.isActive"
-          :style="'--x:'+activeProposal.grades.position.complexity+';--y:'+activeProposal.grades.position.weight"
+          :style="
+            '--x:' +
+            activeProposal.grades.position.complexity +
+            ';--y:' +
+            activeProposal.grades.position.weight
+          "
           :title="index === 0 ? 'Proposition initiale' : 'Alternative ' + index"
         >
-          <span class="sr-only">{{ index === 0 ? "Proposition initiale" : "Alternative " + index }}</span>
+          <span class="sr-only">{{
+            index === 0 ? "Proposition initiale" : "Alternative " + index
+          }}</span>
         </button>
       </div>
       <div id="indicateur" class="px-32 py-16 border-b flow">
@@ -60,16 +120,35 @@
             v-for="indicator in activeProposal.grades.indicators"
             :key="indicator.value"
           >
-            <div class="gauge" :data-value="indicator.value < 0 ? indicator.value : '+'+indicator.value">
+            <div
-              <label :for="indicator.id" :style="'--value:'+indicator.value">{{ indicator.label }}</label>
+              class="gauge"
-              <input :id="indicator.id" type="range" min="-5" max="5" orient="vertical" :value="indicator.value" disabled />
+              :data-value="
+                indicator.value < 0 ? indicator.value : '+' + indicator.value
+              "
+            >
+              <label
+                :for="indicator.id"
+                :style="'--value:' + indicator.value"
+                >{{ indicator.label }}</label
+              >
+              <input
+                :id="indicator.id"
+                type="range"
+                min="-5"
+                max="5"
+                orient="vertical"
+                :value="indicator.value"
+                disabled
+              />
             </div>
           </template>
         </div>
       </div>
       <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
       <footer class="p-16">
-        <button class="btn btn--white w-full">Demander une expertise d’optimisation</button>
+        <button class="btn btn--white w-full">
+          Demander une expertise d’optimisation
+        </button>
       </footer>
     </section>
   </aside>
@@ -81,14 +160,16 @@ import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { ref, onBeforeUnmount } from "vue";
 
+const { proposals } = defineProps({
+  proposals: Array,
+});
+
 dayjs.locale("fr");
 
 const { page } = storeToRefs(usePageStore());
 
 const emits = defineEmits(["close"]);
 
-const proposals = page.value.designToLight;
-
 proposals[0].isActive = true;
 
 const activeProposal = ref(proposals[0]);

src/components/project/DialogWrapper.vue

@@ -8,27 +8,12 @@
   />
   <VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
   <PhysicalSample v-if="dialog.content.slug === 'physical-sample'" />
-  <DTLPanel v-if="correspondingDTLProposal" />
 </template>
 <script setup>
 import TitledPdfWrapper from "./TitledPdfWrapper.vue";
 import { useDialogStore } from "../../stores/dialog";
 import VirtualSample from "./virtual-sample/VirtualSample.vue";
 import PhysicalSample from "./PhysicalSample.vue";
-import { storeToRefs } from "pinia";
-import { usePageStore } from "../../stores/page";
-import { computed } from "vue";
-import DTLPanel from "../design-to-light/DTLPanel.vue";
 
 const dialog = useDialogStore();
-const { page } = storeToRefs(usePageStore());
-
-const correspondingDTLProposal = computed(() => {
-  if (!page.value?.designToLight) return false;
-  const correspondingDTLProposal = page.value.designToLight.find((proposal) =>
-    window.location.href.includes(proposal.path)
-  );
-  if (!correspondingDTLProposal) return false;
-  return correspondingDTLProposal;
-});
 </script>

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

@@ -81,18 +81,24 @@
     </template>
     <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
   </Dialog>
+  <DTLPanel
+    v-if="correspondingDTLProposal"
+    :proposals="[correspondingDTLProposal]"
+  />
 </template>
 
 <script setup>
 import Comments from "../../comments/Comments.vue";
-import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
 import DynamicView from "./DynamicView.vue";
 import StaticView from "./StaticView.vue";
+import DTLPanel from "../../design-to-light/DTLPanel.vue";
+import { storeToRefs } from "pinia";
 import { ref, watch, computed } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
+import { usePageStore } from "../../../stores/page";
 
 const { file } = defineProps({
   file: Object,
@@ -105,10 +111,13 @@ const {
   isLoopAnimationEnabled,
   isDownloadTriggered,
 } = storeToRefs(useVirtualSampleStore());
+
+const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
+  storeToRefs(useDialogStore());
+
+const { page } = storeToRefs(usePageStore());
+
 isLoopAnimationEnabled.value = false;
-const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
-  useDialogStore()
-);
 
 // Variables
 const router = useRouter();
@@ -130,6 +139,31 @@ const downloadText = computed(() => {
   }
 });
 
+const correspondingDTLProposal = computed(() => {
+  const hasDTLProposal = page.value?.designToLight;
+  if (!hasDTLProposal) return false;
+
+  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
+    if (activeTab.value === "dynamic") {
+      return (
+        proposal.location.type === "dynamic" &&
+        activeTracks?.value?.some(
+          (activeTrack) => activeTrack.slug === proposal.location.trackSlug
+        )
+      );
+    } else {
+      return (
+        proposal.location.type === "static" &&
+        openedFile.value.source === proposal.location.source
+      );
+    }
+  });
+
+  if (!correspondingDTLProposal) return false;
+
+  return correspondingDTLProposal;
+});
+
 // Functions
 function downloadFiles() {
   isDownloadTriggered.value = true;

src/views/Kanban.vue

@@ -11,7 +11,7 @@
     <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
     <DTLButton
       v-if="page?.designToLight?.length > 0"
-      @click="openDTLPanel($event)"
+      @click="toggleDTLPanel($event)"
     />
   </main>
 </template>
@@ -61,8 +61,8 @@ function openDialog(targetStepSlug) {
   dialog.content = targetStep;
 }
 
-function openDTLPanel(event) {
+function toggleDTLPanel(event) {
-  isDTLPanelOpen.value = true;
+  isDTLPanelOpen.value = !isDTLPanelOpen.value;
   event.stopImmediatePropagation();
 }
 </script>