bdlg-planner-front/src/PlanningPage.vue

<template>
  <c-header title="BDLG Planner" titleTo="/planner" />
  <div class="main-container">
    <div v-if="isLoading" class="loading">Chargement en cours <br /><dots /></div>
    <template v-else-if="hasData">
      <h1 style="text-align: center">{{ title }}</h1>
      <auto-complete-input
        id="benevole-selection-input"
        label="Entrée votre nom"
        :autocompleteList="autocompleteData"
        :strictAutocomplete="true"
        v-model="benevoleId"
      />
      <planning :benevoleId="benevoleId" />
    </template>
    <div class="no-info" v-else>
      <i class="material-icons">travel_explore</i>
      <div>Planning introuvable<br />Veuillez vérifier votre lien</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Planning from "@/views/PlanningPersonnel.vue";
import AutoCompleteInput from "@/components/AutoCompleteInput.vue";

import Dots from "@/components/Dots.vue";
import cHeader from "@/components/Header.vue";
import importJsonState from "@/mixins/ImportJsonState";
import Toast from "./utils/Toast";
import Benevole from "./models/Benevole";
import AutocompleteValues from "./models/AutocompleteOptions";

const API_URL = process.env.VUE_APP_API_URL;
const uuidv4check = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;

export default defineComponent({
  mixins: [importJsonState],
  components: { Planning, Dots, cHeader, AutoCompleteInput },
  data() {
    return { isLoading: true, hasData: false, benevoleValue: "" };
  },
  computed: {
    title(): string {
      return this.$store.state.evenement.name;
    },
    benevoleId(): number {
      return parseInt(this.benevoleValue) ?? -1;
    },
    benevoleList(): Array<Benevole> {
      return this.$store.state.benevoleList;
    },
    autocompleteData(): Array<AutocompleteValues> {
      return this.benevoleList.map((o) => {
        return { id: o.id.toString(), name: o.fullname };
      });
    },
  },
  mounted() {
    Toast({ html: "Bienvenue" });
    const uuid = document.location.pathname.split("/").reverse()[0];
    if (uuidv4check.test(uuid)) {
      const url = `${API_URL}api/evenements/${uuid}`;
      fetch(url)
        .then((res) => {
          if (res.status == 200) {
            return res.json();
          } else {
            throw Error(res.statusText);
          }
        })

        .then((data) => {
          this.hasData = true;
          this.isLoading = false;
          this.importJsonState(data);
        })
        .catch((reason) => {
          this.isLoading = false;
          Toast({ html: reason });
        });
    } else {
      this.isLoading = false;
    }
  },
});
</script>

<style scoped>
.no-info {
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  margin: 16px;
}
.no-info > .material-icons {
  font-size: 9em;
  line-height: 1.1em;
  text-align: center;
  color: var(--color-neutral-800);
}
.no-info > div {
  text-align: center;
  line-height: 1.5em;

  color: var(--color-neutral-200);
}
.loading {
  text-align: center;
  font-size: 30px;
  margin: 40px 8px;
}

@media (min-width: 600px) {
  .no-info {
    font-size: 2em;
  }
  .loading {
    margin-top: 60px;
    font-size: 40px;
  }
}
</style>