save DTL

src/App.vue

@@ -4,8 +4,11 @@
     <Menu />
     <RouterView />
   </div>
-  <DTLPanel v-if="isDTLPanelOpen" />
-  <DTLButton @click="isDTLPanelOpen = !isDTLPanelOpen" />
+  <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
+  <DTLButton
+    v-if="page?.designToLight?.length > 0"
+    @click="isDTLPanelOpen = !isDTLPanelOpen"
+  />
 </template>
 
 <script setup>

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

@@ -1,11 +1,31 @@
 <template>
-  <button v-if="page?.designToLight?.grades?.global">
-    {{ page.designToLight.grades.global.letter }}
-  </button>
+  <button :data-new="hasAlternatives ? true : undefined">{{ content }}</button>
 </template>
 <script setup>
 import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
+import { computed } from "vue";
 
 const { page } = storeToRefs(usePageStore());
+
+const hasAlternatives = computed(() => {
+  return page.value.designToLight.length > 1;
+});
+
+const content = computed(() => {
+  if (hasAlternatives.value) return "new";
+  return page.value.designToLight[0].grades.global.letter;
+});
 </script>
+
+<style scoped>
+button {
+  position: fixed;
+  min-width: 4rem;
+  min-height: 2rem;
+  right: 2rem;
+  bottom: 2rem;
+  background-color: #000;
+  color: #fff;
+}
+</style>

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

@@ -1,23 +1,29 @@
 <template>
   <aside>
-    <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
-    <p>{{ page.designToLight.stepLabel }}</p>
+    <button @click="emits('close')">X</button>
+    <ul class="tabs">
+      <li v-for="(proposal, index) in proposals">
+        <button @click="activeProposal = proposal">
+          {{ index === 0 ? "Proposition initiale" : "Alternative " + index }}
+        </button>
+      </li>
+    </ul>
+    <p>Données basées sur la proposition du {{ activeProposal.date }}</p>
+    <p>{{ activeProposal.stepLabel }}</p>
 
     <h4>Note globale</h4>
-    <p>{{ page.designToLight.grades.global.letter }}</p>
-    <p>{{ page.designToLight.grades.global.mention }}</p>
-    <input
-      type="range"
-      :value="page.designToLight.grades.global.number"
-      disabled
-    />
-    <p>{{ page.designToLight.grades.global.comment }}</p>
+    <p>{{ activeProposal.grades.global.letter }}</p>
+    <p>{{ activeProposal.grades.global.mention }}</p>
+    <input type="range" :value="activeProposal.grades.global.number" disabled />
+    <p>{{ activeProposal.grades.global.comment }}</p>
 
     <h4>Positionnement</h4>
+    {{ activeProposal.grades.position.complexity }}
+    {{ activeProposal.grades.position.weight }}
 
     <h4>Indicateur des composants impliqués</h4>
     <template
-      v-for="indicator in page.designToLight.grades.indicators"
+      v-for="indicator in activeProposal.grades.indicators"
       :key="indicator.value"
     >
       <label for="">{{ indicator.label }}</label>
@@ -33,15 +39,30 @@ import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
-import { computed } from "vue";
+import { ref, onBeforeUnmount } from "vue";
 
 dayjs.locale("fr");
 
 const { page } = storeToRefs(usePageStore());
 
-const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
-  "D/MM/YYYY"
-);
+const emits = defineEmits(["close"]);
+
+const proposals = page.value.designToLight;
+
+proposals[0].isActive = true;
+
+const activeProposal = ref(proposals[0]);
+
+window.addEventListener("keyup", closeOnEscape);
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keyup", closeOnEscape);
+});
+
+// Functions
+function closeOnEscape(event) {
+  if (event.key === "Escape") emits("close");
+}
 </script>
 
 <style scoped>
@@ -56,4 +77,8 @@ aside {
   background-color: #191919;
   color: #fff;
 }
+
+button {
+  color: #fff;
+}
 </style>