DTL panel : open proposal corresponding to dialog working for all steps

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

@@ -12,6 +12,7 @@
     >
       <h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
       <button
+        v-if="!isDialogOpen"
         @click="emits('close')"
         class="btn btn--icon btn--transparent | ml-auto"
         data-icon="close"
@@ -154,19 +155,23 @@
   </aside>
 </template>
 <script setup>
-import { storeToRefs } from "pinia";
-import { usePageStore } from "../../stores/page";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
-import { ref, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import { ref, onBeforeUnmount, computed } from "vue";
+import { useDialogStore } from "../../stores/dialog";
 
 const { proposals } = defineProps({
   proposals: Array,
 });
 
-dayjs.locale("fr");
+const { openedFile } = storeToRefs(useDialogStore());
 
-const { page } = storeToRefs(usePageStore());
+const isDialogOpen = computed(() => {
+  return openedFile.value != null;
+});
+
+dayjs.locale("fr");
 
 const emits = defineEmits(["close"]);
 

src/components/project/TitledPdfWrapper.vue

@@ -33,16 +33,22 @@
       <PdfViewer />
     </div>
   </Dialog>
+  <DTLPanel
+    v-if="correspondingDTLProposal"
+    :proposals="[correspondingDTLProposal]"
+  />
 </template>
 
 <script setup>
 import Dialog from "primevue/dialog";
 import PdfViewer from "./PdfViewer.vue";
-import { ref, watch } from "vue";
+import DTLPanel from "../design-to-light/DTLPanel.vue";
+import { computed, ref, watch } from "vue";
 import { useDialogStore } from "../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useApiStore } from "../../stores/api";
+import { usePageStore } from "../../stores/page";
 
 const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());
 
@@ -51,6 +57,7 @@ const route = useRoute();
 
 const dialog = useDialogStore();
 const api = useApiStore();
+const { page } = storeToRefs(usePageStore());
 
 const isOpen = ref(true);
 watch(isOpen, (newValue) => {
@@ -61,6 +68,19 @@ openedFile.value = route.query.fileIndex
   ? dialog.content.files[route.query.fileIndex]
   : dialog.content.files.find((file) => file.type === "document");
 
+const correspondingDTLProposal = computed(() => {
+  const hasDTLProposal = page.value?.designToLight;
+  if (!hasDTLProposal) return false;
+
+  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
+    return openedFile.value.source === proposal.location.source;
+  });
+
+  if (!correspondingDTLProposal) return false;
+
+  return correspondingDTLProposal;
+});
+
 // Functions
 async function validate() {
   const response = await api.validateBrief(