github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/inscrits/FichesSanitaires.vue

<template>
  <div>
    <v-dialog v-model="showDownloadOptions" max-width="400px">
      <v-card>
        <v-card-title class="headline"
          >Télécharger les fiches sanitaires</v-card-title
        >
        <v-card-text>
          <v-select
            :items="[
              {
                value: 'all',
                text: 'Archive avec fiches et vaccins'
              },
              {
                value: 'all_in_one_document',
                text: 'Document unique (sans les vaccins)'
              }
            ]"
            v-model="downloadOptions.mode"
            label="Type d'export"
          ></v-select>
          <div>
            <v-checkbox
              v-model="downloadOptions.only_mineurs"
              label="Sans les participants majeurs"
            ></v-checkbox>
          </div>
          <div v-if="downloadOptions.mode === 'all_in_one_document'">
            <v-checkbox
              v-model="downloadOptions.tri_groupe"
              label="Trier par groupe"
            ></v-checkbox>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="downloadAll()" class="green--text">Télécharger</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-card>
      <v-toolbar class="toolbar-select">
        <v-toolbar-title>Fiches sanitaires</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items>
          <v-select
            :items="filterOptions"
            v-model="filterFiches"
            label="Filtrer"
            clearable
            hide-details
          >
          </v-select>
          <v-divider vertical></v-divider>
          <tooltip-btn
            tooltip="Télécharger plusieurs fiches sanitaires et vaccins..."
            @click="showDownloadOptions = true"
            icon
          >
            <v-icon>{{ $icons["mdi-download"] }}</v-icon>
          </tooltip-btn>
        </v-toolbar-items>
      </v-toolbar>
      <v-data-table
        :headers="headers"
        :items="filteredItems"
        dense
        hide-default-footer
        :items-per-page="9999"
        fixed-header
        height="70vh"
        class="mt-2 px-1"
      >
        <template v-slot:[`item.nom_prenom`]="{ item }">{{
          fmt.nomPrenom(item)
        }}</template>
        <template v-slot:[`item.is_fiche_sanitaire_up_to_date`]="{ item }">
          <span
            :style="{
              color: colorUpTodate(item)
            }"
            >{{ fmt.bool(asI(item).is_fiche_sanitaire_up_to_date != -1) }}</span
          >
        </template>
        <template v-slot:[`item.document`]="{ item }">
          <div
            :style="{ color: colorDocument(item) }"
            v-if="hasFicheSanitaire(item) || hasVaccins(item)"
          >
            <span v-if="hasFicheSanitaire(item)">Fiche sanitaire</span>
            <span v-if="hasFicheSanitaire(item) && hasVaccins(item)">-</span>
            <span v-if="hasVaccins(item)"
              >{{ (item.vaccins || []).length }} vaccin(s)</span
            >
            <v-menu :close-on-content-click="false">
              <template v-slot:activator="{ on: menu }">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on: tooltip }">
                    <v-btn
                      width="30px"
                      height="30px"
                      v-on="{ ...menu, ...tooltip }"
                      icon
                      small
                    >
                      <v-icon>{{ $icons["mdi-view-list"] }}</v-icon>
                    </v-btn>
                  </template>
                  Télécharger un document...
                </v-tooltip>
              </template>
              <v-list>
                <v-list-item
                  v-if="hasFicheSanitaire(item)"
                  @click="downloadFicheSanitaire(item)"
                >
                  <v-list-item-content>
                    <v-list-item-title>Fiche sanitaire</v-list-item-title>
                    <v-list-item-subtitle>
                      modifiée le
                      {{ fmt.date_heure(item.fiche_sanitaire.last_modif) }}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item
                  v-for="vaccin in item.vaccins"
                  :key="vaccin.id_crypted"
                  :href="vaccin.url_download"
                >
                  <v-list-item-content>
                    <v-list-item-title
                      v-text="vaccin.nom_client"
                    ></v-list-item-title>
                    <v-list-item-subtitle>
                      modifiée le
                      {{ fmt.date_heure(vaccin.date_heure_modif) }}
                    </v-list-item-subtitle>
                  </v-list-item-content>

                  <v-list-item-avatar>
                    <v-img :src="vaccin.url_miniature"></v-img>
                  </v-list-item-avatar>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
          <span v-else :style="{ color: colorDocument(item) }"
            >Aucun document</span
          >
        </template>
        <template v-slot:[`item.lien_fiche_sanitaire`]="{ item }">
          <v-btn :href="asI(item).lien_fiche_sanitaire" icon target="_blank">
            <v-icon>{{ $icons["mdi-link"] }}</v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script lang="ts">
import { FichesSanitaires } from "./FichesSanitaires";
export default FichesSanitaires;
</script>

<style>
.toolbar-select .v-input__control {
  margin: auto;
}
.toolbar-select .v-input__slot {
  height: 100%;
}
.toolbar-select .v-input {
  height: 100%;
}
</style>