github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/equipier/App.vue

<template>
  <base-app :title="title">
    <success
      v-if="output"
      :output="output"
      :position="successPosition"
    ></success>
    <error v-if="output" :output="output"></error>

    <b-modal
      v-model="showCharte"
      size="xl"
      title="Charte d’engagement bénévole"
      scrollable
      header-bg-variant="secondary"
      footer-bg-variant="secondary"
    >
      <charte :sexe="equipier ? equipier.sexe : 'M'"></charte>
      <template v-slot:modal-footer>
        <btn variant="success" @click="updateCharte($event, true)"
          >J'approuve cette charte</btn
        >
        <btn
          variant="warning"
          class="text-right"
          @click="updateCharte($event, false)"
          >J'émets des réserves</btn
        >
      </template>
    </b-modal>

    <b-modal
      title="Documents manquants"
      v-model="showPiecesManquantes"
      hide-footer
      size="lg"
    >
      Merci d'ajouter les documents manquants (<span
        v-html="piecesManquantes.join(', ')"
      ></span
      >) !
    </b-modal>

    <b-container class="my-2 mb-4">
      <transition name="fade" mode="out-in" duration="400">
        <b-row
          style="min-height: 50vh;"
          v-if="initialLoading || serverData == null"
        >
          <b-col class="align-self-center">
            <b-progress
              :value="100"
              variant="secondary"
              :animated="serverData != null"
              class="mt-3"
            ></b-progress>
          </b-col>
        </b-row>
        <div v-else>
          <b-alert variant="info" show>
            Bienvenu{{ equipier && equipier.sexe == "F" ? "e" : "" }}
            <b>{{ equipier ? equipier.prenom : "" }}</b
            >, et merci pour ton engagement avec l'ACVE !<br />
            Ce formulaire te permet de remplir directement les informations et
            documents nécessaires à Jeunesse et Sport.
            <br />
            Merci de vérifier que tout est à jour...
          </b-alert>

          <b-alert :show="showJoomeo">
            Tu peux retrouver les
            <b-link :href="joomeo.space_url">photos du séjour sur Joomeo</b-link
            >, en utilisant ces identifiants :
            <b-row class="my-2">
              <b-col class="text-center"
                >Identifiant : <b>{{ joomeo.login }}</b>
              </b-col>
              <b-col class="text-center"
                >Mot de passe : <b>{{ joomeo.password }}</b>
              </b-col>
            </b-row>
          </b-alert>

          <form-equipier
            v-model="equipier"
            :camp="camp"
            ref="formEquipier"
          ></form-equipier>

          <documents></documents>

          <b-row>
            <b-col>
              <b-button variant="info" @click="showCharte = true"
                >Afficher la charte d'engagement</b-button
              >
            </b-col>
            <b-col></b-col>
            <b-col>
              <btn block variant="accent" @click="save"
                >Enregistrer mon profil</btn
              >
            </b-col>
          </b-row>
        </div>
      </transition>
    </b-container>
  </base-app>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import BaseApp from "../../BaseApp.vue";
import Success from "../../shared/notifications/Success.vue";
import Error from "../../shared/notifications/Error.vue";
import FormEquipier from "./FormEquipier.vue";
import Charte from "./Charte.vue";
import Documents from "./Documents.vue";
import Btn from "../../shared/Btn.vue";

import {
  NotificationContent,
  EquipierEquipier,
  DataEquipier,
  PublicDocument,
  OptionnalBool,
  DatasJoomeo
} from "@/shared/logic/types";
import Cookies from "js-cookie";

import {
  BaseController,
  UrlServerBase,
  devMode
} from "../../shared/logic/controller";
import axios, { AxiosResponse } from "axios";
import { ControllerDocument } from "../../shared/logic/controller";
import { scrollToError, ValidEvent } from "../../shared/utils";
import { HACCP, DOCUMENTS } from "../../shared/logic/enums";
import { C } from "./controller";
import { SuccesPosition } from "@/shared/utils";

@Component({
  components: { BaseApp, Error, Success, FormEquipier, Documents, Btn, Charte }
})
export default class App extends Vue {
  output = C.notifications;
  controller: ControllerDocument = C;
  showPiecesManquantes = false;
  initialLoading = true;

  successPosition = SuccesPosition.TopRight;

  showCharte = false;

  joomeo: DatasJoomeo = {
    space_url: "",
    login: "",
    password: ""
  };

  $refs!: {
    formEquipier: FormEquipier;
  };

  C = C;
  get serverData(): DataEquipier | null {
    return C.data;
  }

  get showJoomeo() {
    return !!this.joomeo.login;
  }

  get title() {
    if (this.serverData == null) return "Equipier";
    return "Equipier - " + this.serverData.camp.label;
  }

  get equipier() {
    if (this.serverData == null) return null;
    return this.serverData.equipier;
  }

  get camp() {
    if (this.serverData == null) return null;
    return this.serverData.camp;
  }

  get piecesManquantes(): string[] {
    return C.pieces
      .filter(p => !p.optionnel) // contraintes bloquantes uniquement
      .filter(p => (p.docs || []).length == 0) // doc nons remplis
      .map(p => `<b>${p.contrainte.nom}</b>`);
  }

  async mounted() {
    // on lance la requête Joomeo séparément
    C.loadJoomeo().then(v => {
      if (v === undefined) return;
      this.joomeo = v;
    });
    await C.loadDatas();
    this.initialLoading = false;
  }

  async save(event: ValidEvent) {
    const isValid = await this.$refs.formEquipier.validate();
    if (!isValid) return;
    if (this.piecesManquantes.length > 0) {
      this.showPiecesManquantes = true;
      return;
    }
    await C.saveEquipier(event);
    let showCharte = true;
    // on n'affiche pas la charte si elle a déjà été remplie
    if (C.data != null && C.data.equipier.charte != OptionnalBool.OBPeutEtre) {
      showCharte = false;
    }
    this.showCharte = showCharte;
  }

  async updateCharte(event: ValidEvent, accepte: boolean) {
    await C.updateCharte(
      event,
      accepte ? OptionnalBool.OBOui : OptionnalBool.OBNon
    );
    this.showCharte = false;
  }
}
</script>

<style></style>