github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/fiche_sanitaire/FicheSanitaire.vue

<template>
  <div>
    <b-card :title="personne.nom_prenom">
      <b-card-body class="p-1">
        <b-alert :show="personne.is_temporaire" variant="info">
          Ce profil n'a pas encore été validé par le centre d'inscription.
          <br />
          En conséquence, la modification de la fiche sanitaire est
          temporairement désactivée.
        </b-alert>

        <b-alert
          class="my-1"
          variant="success"
          :show="showForm && !needValidation && !isMajeur"
        >
          <span v-if="hasVaccins">
            Votre fiche sanitaire est à jour. Merci !
          </span>
          <span v-else>
            Votre fiche sanitaire est à jour, mais vous n'avez déposé aucun
            vaccins...
          </span>
        </b-alert>

        <b-alert class="my-1" variant="info" :show="isMajeur && showForm">
          Puisque {{ personne.prenom }} est majeur{{ sexeE }}, les
          renseignements ci-dessous ne sont plus nécessaires. Ils sont affichés
          à titre informatif.
        </b-alert>

        <b-alert
          class="my-1"
          variant="warning"
          :show="needValidation && showForm"
        >
          Merci de bien vouloir vérifier que les données ci-dessous sont à jour
          et les valider.
          <br />Nous avons besoin de votre consentement, décrit dans l'encart
          <b>Validation</b> (en bas de page).
        </b-alert>

        <b-alert
          class="my-1"
          variant="warning"
          :show="personne.fiche_sanitaire.locked"
        >
          Votre adresse mail n'est pas reconnu dans notre logiciel comme celle
          du responsable de cette fiche sanitaire. Elle est actuellement liée
          {{ hasManyMails ? "aux adresses" : "à l'adresse" }}
          <b>{{ textMails }}</b
          >.
          <br />

          Afin de protéger vos données, vous devez demander à leur propriétaire
          de vous transmettre les droits de lecture et d'écriture. Un mail
          contenant un lien de transfert va être envoyé
          {{ hasManyMails ? "aux adresses" : "à l'adresse" }}
          <i>({{ textMails }})</i>.
          <btn
            variant="outline-success"
            label="Demander le transfert de la fiche sanitaire"
            @click="transfertFicheSanitaire"
            block
            class="mt-2"
          >
            <b-icon-unlock></b-icon-unlock>
          </btn>
        </b-alert>
      </b-card-body>
      <template v-slot:footer class="text-muted p-2">
        <small>
          Dernière modification :
          <i>{{ lastModif }}</i> / Propriétaire(s) :
          <i>{{ textMails }}</i>
        </small>
      </template>
    </b-card>

    <div v-if="showForm">
      <vaccins :idPersonneCrypted="personne.id_crypted" class="mt-2"></vaccins>

      <fiche-sanitaire-form
        :value="personne.fiche_sanitaire"
        :nomPrenom="personne.nom_prenom"
        :completion="completion"
        :tag="personne.id_crypted"
        @valid="(ev, fs, v) => $emit('valid', ev, fs, v, personne.id_crypted)"
      ></fiche-sanitaire-form>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import Btn from "../../../../shared/Btn.vue";
import FicheSanitaireForm from "./forms/FicheSanitaireForm.vue";
import Vaccins from "./Vaccins.vue";

import { C } from "../../logic/controller";
import { age, formatDateTime } from "../../../../shared/logic/utils";
import { Personne, Sexe } from "@/shared/logic/types";
import { ValidEvent } from "../../../../shared/utils";

const FicheSanitaireProps = Vue.extend({
  props: {
    personne: Object as () => Personne
  }
});

@Component({
  components: { Btn, FicheSanitaireForm, Vaccins }
})
export default class FicheSanitaire extends FicheSanitaireProps {
  get sexeE() {
    return this.personne.sexe == Sexe.SFemme ? "e" : "";
  }

  get isMajeur() {
    return C.isPersonneMajeur(this.personne);
  }

  get needValidation() {
    return C.needValidationFicheSanitaire(this.personne);
  }

  get isFsUpToDate() {
    return C.isFsUpToDate(this.personne.id_crypted);
  }

  get hasManyMails() {
    return (
      this.personne.fiche_sanitaire.mails &&
      this.personne.fiche_sanitaire.mails.length > 1
    );
  }

  get textMails() {
    const mails = this.personne.fiche_sanitaire.mails || [];
    return mails.join(", ") || " - ";
  }

  get lastModif() {
    if (!this.personne.fiche_sanitaire.last_modif) return "";
    return formatDateTime(this.personne.fiche_sanitaire.last_modif);
  }

  get hasVaccins() {
    return this.personne.vaccins && this.personne.vaccins.length > 0;
  }

  get completion() {
    return C.hintsFichesSanitaires();
  }

  get showForm() {
    return (
      !this.personne.fiche_sanitaire.locked && !this.personne.is_temporaire
    );
  }

  async transfertFicheSanitaire(event: ValidEvent) {
    event.spinning = true;
    await C.data.transfertFicheSanitaire(this.personne.id_crypted);
    event.spinning = false;
  }
}
</script>

<style scoped></style>