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

     1  <template>
     2    <b-card class="my-1">
     3      <template v-slot:header>
     4        <b-row>
     5          <b-col class="align-self-center py-2" md="12" lg="4">
     6            <h5 class="my-auto">Participants</h5>
     7          </b-col>
     8          <b-col class="text-right" md="12" lg="8">
     9            <b-row>
    10              <b-col class="align-self-center">
    11                <b-button
    12                  v-if="destinatairesOptionnels.length <= 1"
    13                  :href="urlDownload(0)"
    14                  @click="afterDownload"
    15                  target="_blank"
    16                  :disabled="!isCampsFinis"
    17                  :variant="isCampsFinis ? 'secondary' : 'light'"
    18                  v-b-tooltip.top
    19                  title="Télécharger une attestation de présence au format PDF"
    20                >
    21                  <b-icon-download></b-icon-download>
    22                  Attestation de présence
    23                </b-button>
    24                <b-dropdown
    25                  right
    26                  :disabled="!isCampsFinis"
    27                  :variant="isCampsFinis ? 'secondary' : 'light'"
    28                  size="sm"
    29                  v-else
    30                >
    31                  <template v-slot:button-content>
    32                    <b-button
    33                      :variant="isCampsFinis ? 'secondary' : 'light'"
    34                      v-b-tooltip.top
    35                      title="Télécharger une attestation de présence au format PDF"
    36                      class="py-1"
    37                    >
    38                      <b-icon-download></b-icon-download>
    39                      Attestation de présence
    40                    </b-button>
    41                  </template>
    42                  <b-dropdown-item
    43                    v-for="(dest, i) in destinatairesOptionnels"
    44                    :key="i"
    45                    :href="urlDownload(i)"
    46                    target="_blank"
    47                    @click="afterDownload"
    48                  >
    49                    Adressée à : {{ dest.nom_prenom }} - {{ dest.ville }}
    50                  </b-dropdown-item>
    51                </b-dropdown>
    52              </b-col>
    53              <b-col class="align-self-center">
    54                <btn
    55                  label="Enregistrer les modifications"
    56                  :variant="disabledValid ? 'outline-accent' : 'accent'"
    57                  :disabled="disabledValid"
    58                  @click="valid"
    59                >
    60                  <b-icon-check></b-icon-check>
    61                </btn>
    62              </b-col>
    63            </b-row>
    64          </b-col>
    65        </b-row>
    66      </template>
    67      <div class="card-body">
    68        <details-participant
    69          v-for="(_, i) in innerParticipants"
    70          :key="i"
    71          v-model="innerParticipants[i]"
    72          class="my-1"
    73        ></details-participant>
    74      </div>
    75    </b-card>
    76  </template>
    77  
    78  <script lang="ts">
    79  import Vue from "vue";
    80  import Component from "vue-class-component";
    81  import Btn from "@/shared/Btn.vue";
    82  import DetailsParticipant from "../components/participants/DetailsParticipant.vue";
    83  
    84  import { Participant, StatutAttente } from "@/shared/logic/types";
    85  import { Watch } from "vue-property-decorator";
    86  import { C } from "../logic/controller";
    87  import { ValidEvent } from "@/shared/utils";
    88  
    89  const ParticipantsProps = Vue.extend({
    90    props: {}
    91  });
    92  
    93  @Component({
    94    components: { Btn, DetailsParticipant }
    95  })
    96  export default class Participants extends ParticipantsProps {
    97    C = C;
    98  
    99    innerParticipants: Participant[] = [];
   100  
   101    private duplique() {
   102      return JSON.parse(JSON.stringify(this.participants));
   103    }
   104  
   105    mounted() {
   106      this.innerParticipants = this.duplique();
   107    }
   108  
   109    @Watch("participants")
   110    onChange() {
   111      this.innerParticipants = this.duplique();
   112    }
   113  
   114    get participants() {
   115      return C.data.participants || [];
   116    }
   117  
   118    // aucune modification
   119    get disabledValid() {
   120      return (
   121        JSON.stringify(this.innerParticipants) ==
   122        JSON.stringify(this.participants)
   123      );
   124    }
   125  
   126    async valid(event: ValidEvent) {
   127      const modifs = this.innerParticipants.filter(
   128        p => !C.isModificationLocked(p)
   129      );
   130      if (modifs.length == 0) return;
   131      event.spinning = true;
   132      await C.data.updateParticipants(modifs);
   133      event.spinning = false;
   134    }
   135  
   136    get isCampsFinis() {
   137      for (const part of C.data.participants.filter(
   138        part => part.liste_attente.statut == StatutAttente.Inscrit
   139      )) {
   140        const camp = C.getCamp(part);
   141        if (!camp) continue;
   142        if (new Date().valueOf() < new Date(camp.date_fin).valueOf()) {
   143          return false;
   144        }
   145      }
   146      return true;
   147    }
   148  
   149    urlDownload(index: number) {
   150      return C.data.urlAttestationPresence + `?index-destinataire=${index}`;
   151    }
   152  
   153    get destinatairesOptionnels() {
   154      if (C.data.responsable == null) return [];
   155      return C.data.responsable.destinataires_optionnels || [];
   156    }
   157  
   158    afterDownload() {
   159      // le téléchargement d'une facture modifie les messages
   160      window.setTimeout(() => C.data.loadData(), 1000);
   161    }
   162  }
   163  </script>
   164  
   165  <style scoped></style>