github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/views/FichesSanitaires.vue (about)

     1  <template>
     2    <div ref="element">
     3      <form-responsable
     4        v-model="securiteSociale"
     5        :responsable="responsable"
     6        :state="stateResponsable"
     7      ></form-responsable>
     8  
     9      <b-tabs class="my-3" fill :value="indexFromNomPrenom">
    10        <b-tab v-for="(personne, i) in personnes" :key="i">
    11          <template v-slot:title>
    12            {{ personne.nom_prenom }}
    13            <b-icon-exclamation-circle
    14              variant="fushia"
    15              v-b-tooltip.hover
    16              title="Validation nécessaire"
    17              v-if="needValidation(personne)"
    18            ></b-icon-exclamation-circle>
    19          </template>
    20  
    21          <fiche-sanitaire :personne="personne" @valid="valid"></fiche-sanitaire>
    22        </b-tab>
    23  
    24        <template v-slot:empty>
    25          <div class="text-center text-muted">
    26            Aucun participant n'est lié à votre dossier.
    27          </div>
    28        </template>
    29      </b-tabs>
    30    </div>
    31  </template>
    32  
    33  <script lang="ts">
    34  import Vue from "vue";
    35  import Component from "vue-class-component";
    36  
    37  import FormResponsable from "../components/fiche_sanitaire/forms/FormResponsable.vue";
    38  import Document from "../../../shared/Document.vue";
    39  import FormFile from "../../../shared/FormFile.vue";
    40  import FicheSanitaire from "../components/fiche_sanitaire/FicheSanitaire.vue";
    41  import { scrollToError, ValidEvent } from "../../../shared/utils";
    42  
    43  import { C } from "../logic/controller";
    44  import {
    45    Responsable,
    46    Personne,
    47    LockableFicheSanitaire
    48  } from "@/shared/logic/types";
    49  
    50  const FichesSanitairesProps = Vue.extend({
    51    props: {}
    52  });
    53  
    54  @Component({
    55    components: { FormResponsable, Document, FormFile, FicheSanitaire }
    56  })
    57  export default class FichesSanitaires extends FichesSanitairesProps {
    58    securiteSociale = this.dupliqueSecuriteSociale();
    59    shouldValidate = false;
    60  
    61    $refs!: {
    62      element: HTMLElement;
    63    };
    64  
    65    private dupliqueSecuriteSociale() {
    66      if (C.data.responsable == null) return "";
    67      return C.data.responsable.securite_sociale;
    68    }
    69  
    70    get stateResponsable(): boolean | null {
    71      return this.shouldValidate ? !!this.securiteSociale : null;
    72    }
    73  
    74    get responsable(): Responsable | null {
    75      return C.data.responsable;
    76    }
    77  
    78    get personnes() {
    79      return Object.values(C.data.personnes).sort((a, b) =>
    80        a.nom_prenom.localeCompare(b.nom_prenom)
    81      );
    82    }
    83  
    84    /** utilise le champ nom_prenom de l'url pour retrouver un participant */
    85    get indexFromNomPrenom() {
    86      const np = this.$route.query["nom_prenom"];
    87      return this.personnes.findIndex(pers => pers.nom_prenom == np);
    88    }
    89  
    90    needValidation(personne: Personne) {
    91      return C.needValidationFicheSanitaire(personne);
    92    }
    93  
    94    async valid(
    95      event: ValidEvent,
    96      fs: LockableFicheSanitaire,
    97      isValid: boolean,
    98      idPersonneCrypted: string
    99    ) {
   100      this.shouldValidate = true;
   101      // on attend que les évents soit passées
   102      Vue.nextTick(() => scrollToError(this.$refs.element));
   103      if (!(this.stateResponsable == true && isValid)) return;
   104      event.spinning = true;
   105      await C.data.updateFicheSanitaire(
   106        idPersonneCrypted,
   107        fs,
   108        this.securiteSociale
   109      );
   110      event.spinning = false;
   111    }
   112  }
   113  </script>
   114  
   115  <style scoped></style>