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

<template>
  <aside>
    <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>{{ 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 activeProposal.grades.indicators"
      :key="indicator.value"
    >
      <label for="">{{ indicator.label }}</label>
      <input type="range" :value="indicator.value" min="-5" max="+5" disabled />
    </template>

    <!-- 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 -->
    <button>Demander une expertise d'optimisation</button>
  </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";

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]);

window.addEventListener("keyup", closeOnEscape);

onBeforeUnmount(() => {
  window.removeEventListener("keyup", closeOnEscape);
});

// Functions
function closeOnEscape(event) {
  if (event.key === "Escape") emits("close");
}
</script>

<style scoped>
aside {
  position: fixed;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  padding: 0.7rem;
  width: 30vw;
  border-radius: 1rem;
  background-color: #191919;
  color: #fff;
}

button {
  color: #fff;
}
</style>