bdlg-planner-front/src/views/Home.vue

<template>
  <div class="centered-box">
    <div>
      <h2>Bienvenue sur le gestionnaire du planning bénévoles</h2>
      <h3>
        Planning existants
        <button
          class="btn icon primary small tooltiped"
          style="margin-left: 1rem; vertical-align: bottom"
          @click="$emit('newEvenement')"
          aria-tooltip="Creer un nouvel évenement"
        >
          <i class="material-icons">edit</i>
        </button>
      </h3>
      <evenement-data-table
        :versions="savedPlanning"
        @loadVersion="loadVersion"
      ></evenement-data-table>
    </div>
  </div>
</template>

<script lang="ts">
import EvenementVersion from "@/models/EvenementVersion";
import fetchPlanningVersions from "@/mixins/fetchPlanningVersion";
import EvenementDataTable from "@/components/EvenementDataTable.vue";
import { defineComponent } from "vue";
import Toast from "@/utils/Toast";

const API_URL = process.env.VUE_APP_API_URL;

export default defineComponent({
  components: { EvenementDataTable },
  mixins: [fetchPlanningVersions],
  emits: ["newEvenement"],
  computed: {
    savedPlanning(): Array<EvenementVersion> {
      return this.$store.state.savedPlanning;
    },
  },
  methods: {
    loadVersion(version: EvenementVersion) {
      const toast = Toast({
        html: `Chargement des données du planning "${version.name}"`,
        displayLength: Infinity,
      });
      this.fetchPlanningVersions(`${API_URL}api/evenements/${version.uuid}`).then(() => {
        toast.dismiss();
        this.$router.push({ name: "Evenement" });
        Toast({
          html: `Planning "${version.name}" chargé`,
          classes: "success",
          displayLength: 5000,
        });
      });
    },
  },
});
</script>

<style scoped></style>