boussole-pluss/frontend/pages/dashboard.vue

<script lang="ts" setup>

import {type Quiz, useQuizStore} from "~/store/quiz";
import {useBundleStore} from "~/store/bundle";

const quizzes = ref<Quiz[]>([]);
const currentResult = ref<Quiz>();

onMounted(() => {
  useQuizStore().findQuizzes(useBundleStore().selectedBundle.id).then((response: Page<Quiz>) => {
    quizzes.value = response.content;
    currentResult.value = quizzes.value.length > 0 ? quizzes.value[0] : null;
  });
});


function setCurrent(quiz: Quiz) {
  currentResult.value = quiz;
}
</script>

<template>
  <section v-if="currentResult" class="last-quiz">
    <div class="last-quiz-header">
      <span class="date"> {{ formatDateTime(currentResult.createdDate) }}</span>
      <nuxt-link
        class="button blue" :to="{ path: '/details', query: { quiz: currentResult.id }}">
        + Voir le détail
      </nuxt-link>
    </div>
    <div v-if="currentResult && currentResult.axes" class="chart-area">
      <polar-area-chart :data="currentResult.axes.map(value => value.average)"/>
      <Legend/>
    </div>
  </section>
  <section v-if="quizzes.length > 0">
    <ul class="history">
      <li class="history__item" v-for="q in quizzes">
        <input :id="q.id" type="radio" @change="setCurrent(q)" :checked="q === currentResult" name="quiz"/>
        <label :for="q.id">
          <span>{{useBundleStore().selectedBundle.label }} - {{ formatDateTime(q.createdDate) }}</span>
        </label>
      </li>
    </ul>
  </section>
  <section v-else class="center">
    Aucune auto-évaluation n'a été faite. Veuillez en réaliser une première.
  </section>
  <div class="button-container">
    <nuxt-link class="button gray button-back" to="/bundle" aria-label="Retour à la page précédente">❮</nuxt-link>
    <nuxt-link class="button orange" to="/quiz">S'évaluer</nuxt-link>
  </div>
</template>


<style lang="scss" scoped>
.last-quiz {
  margin: $small 0;
}

.last-quiz-header {
  display: flex;
  justify-content: space-between;
  font-size: $tertiary-font-size;

  .date {
    color: $gray_4;
    font-weight: 700;
  }
}

.chart-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: $small;
}

.history {
  margin-top: $small;
  display: flex;
  flex-direction: column;
  gap: $xxx_small;
  list-style: none;

  .history__item {

    input {
      position: absolute;
      opacity: 0;

      &:checked + label {
        outline: 3px solid $gray_4;
      }
    }

    label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: $gray_1;
      border-radius: 8px;
      color: $gray_4;
      font-weight: 700;
      font-size: $tertiary-font-size;

      &:hover {
        text-decoration: none;
        cursor: pointer;
        background: $gray_3;
        color: $gray_1;
      }
    }
  }
}
</style>