boussole-pluss/frontend/pages/dashboard.vue

<template>
  <div class="content">
    <team-header/>
    <hr/>
    <div v-if="loading" class="center" >
      <loader/>
    </div>
      <section v-if="currentResult" class="last-quiz">
        <div class="last-quiz-header">
          <span class="date"> {{ currentResult.createdDate | formatDate }}</span>
          <nuxt-link
            class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
            + Voir le détail
          </nuxt-link>
        </div>
        <div v-if="currentResult && currentResult.scores" class="chart-area">
          <polar-area-chart :data="currentResult.scores.map(value => value.scoreAvg)"/>
          <Legend/>
        </div>
      </section>
      <section v-if="quizzes.length > 0" class="history" >
        <div v-for="q in quizzes" :key="q.id">
          <button @click="setCurrent(q)"><span>Boussole - {{ q.createdDate | formatDate }}</span><span>❯</span></button>
        </div>
      </section>
      <section v-else-if="!loading" 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 orange" to="/quiz">Nouveau</nuxt-link>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {AxiosResponse} from "axios";
import {RepositoryFactory} from "~/repositories/RepositoryFactory";
import {RestResponse} from "~/repositories/models/rest-response.model";
import {Quiz} from "~/repositories/models/quiz.model";

@Component
export default class History extends Vue {

  readonly quizRepository = RepositoryFactory.get('quiz');

  private quizzes: Quiz[] = [];
  private currentResult: Quiz | null = null;
  private loading = true;

  async mounted() {
    await this.quizRepository.findMine().then((response: AxiosResponse<RestResponse<Quiz>>) => {
      this.quizzes = response.data._embedded.quizzes;
    });
    this.currentResult = this.quizzes.length > 0 ? this.quizzes[0] : null;
    this.loading = false;
  }

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

<style lang="scss" scoped>
@import "assets/css/color";
@import "assets/css/spacing";
@import "assets/css/font";

.last-quiz {
  margin-bottom: $x_small 0;
}

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

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

  .link {
    color: $blue;
  }
}

.chart-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: $x_small 0;
}

.history {
  margin-top: $x_small;
}

.history button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 16px;
  margin: $xxx_small 0;

  background: $gray_1;
  border-radius: 8px;
  border: none;
  color: $gray_4;
  font-weight: 700;
  font-size: $tertiary-font-size;

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

.button-container {
  margin-bottom: $x_small;
}

</style>