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

<template>
  <aside
    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
        v-if="!isDialogOpen"
        @click="emits('close')"
        class="btn btn--icon btn--transparent | ml-auto"
        data-icon="close"
      >
        <span class="sr-only">Fermer</span>
      </button>
    </header>
    <nav class="tabs" role="tablist" tabindex="-1">
      <button
        v-for="(proposal, index) in proposals"
        @click="activeProposal = proposal"
        role="tab"
        :aria-selected="proposal.isActive"
        aria-controls=""
      >
        {{ index === 0 ? "Proposition initiale" : "Alternative " + index }}
      </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"
      >
        <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"
        />
        <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">
          <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>
            <input
              type="range"
              min="0"
              max="10"
              :value="activeProposal.grades.global.number"
              disabled
            />
            <p>{{ activeProposal.grades.global.comment }}</p>
          </div>
        </div>
      </div>
      <div id="positionnement" class="px-32 py-16 border-b flow">
        <h3>Positionnement</h3>
        <dl>
          <dt id="design">Design</dt>
          <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>
        </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
          "
          :title="index === 0 ? 'Proposition initiale' : 'Alternative ' + index"
        >
          <span class="sr-only">{{
            index === 0 ? "Proposition initiale" : "Alternative " + index
          }}</span>
        </button>
      </div>
      <div id="indicateur" class="px-32 py-16 border-b flow">
        <h3>Indicateur des composants impliqués</h3>
        <div class="grid">
          <template
            v-for="indicator in activeProposal.grades.indicators"
            :key="indicator.value"
          >
            <div
              class="gauge"
              :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>
      </footer>
    </section>
  </aside>
</template>
<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { storeToRefs } from "pinia";
import { ref, onBeforeUnmount, computed } from "vue";
import { useDialogStore } from "../../stores/dialog";

const { proposals } = defineProps({
  proposals: Array,
});

const { openedFile } = storeToRefs(useDialogStore());

const isDialogOpen = computed(() => {
  return openedFile.value != null;
});

dayjs.locale("fr");

const emits = defineEmits(["close"]);

proposals[0].isActive = true;

const activeProposal = ref(proposals[0]);

window.addEventListener("keyup", closeOnEscape);
window.addEventListener("click", close);

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

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

function close() {
  emits("close");
}

function preventClose(event) {
  event.stopImmediatePropagation();
}
</script>