github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/views/Equipiers.vue

<template>
  <v-container fluid>
    <v-dialog
      v-model="showAddEquipier"
      max-width="1200px"
      @keydown.esc="showAddEquipier = false"
    >
      <add-equipier @ajoute-equipier="ajouteEquipier"></add-equipier>
    </v-dialog>

    <v-dialog v-model="showEditDialog" max-width="1200px" persistent>
      <form-equipier
        :equipier="editEquipier"
        withButtons
        withDetails
        @reject="showEditDialog = false"
        @accept="updateEquipier"
      ></form-equipier>
    </v-dialog>

    <v-dialog v-model="confirmeSupprime" max-width="400px">
      <v-card v-if="equipierSupprime != null">
        <v-card-title class="headline">Suppression d'un équipier</v-card-title>
        <v-card-text>
          Etes vous sur de retirer
          <b>{{ equipierSupprime.prenom }} {{ equipierSupprime.nom }}</b> de
          votre équipe ?
        </v-card-text>
        <v-card-actions>
          <v-btn @click="confirmeSupprime = false">Annuler</v-btn>
          <v-spacer></v-spacer>
          <v-btn @click="supprimeEquipier" class="error--text">
            Retirer de l'équipe
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="showDocuments" eager>
      <documents ref="documents"></documents>
    </v-dialog>

    <v-dialog v-model="showInviteFormulaires">
      <formulaires v-model="items"></formulaires>
    </v-dialog>

    <v-toolbar dense>
      <v-menu open-on-hover bottom offset-y>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" icon>
            <v-icon>{{ $icons["mdi-information-outline"] }}</v-icon>
          </v-btn>
        </template>
        <v-card>
          <v-card-text>
            <b>{{ nbMembres }}</b> équipier(s)
            <br />
            <b>{{ nbAnims }}</b> animateur(s)
          </v-card-text>
        </v-card>
      </v-menu>
      <v-toolbar-title>Liste des équipiers </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <tooltip-btn
          tooltip="Rechercher et déclarer un nouvel équipier"
          @click="showAddEquipier = true"
          text
          small
        >
          <v-icon class="mr-1" color="success">{{ $icons["mdi-plus"] }}</v-icon
          >Ajouter un équipier
        </tooltip-btn>
        <v-divider vertical></v-divider>
        <tooltip-btn
          tooltip="Inviter les équipiers à remplir leur formulaire..."
          @click="showInviteFormulaires = true"
          text
          small
        >
          <v-icon class="mr-1">{{ $icons["mdi-account-details"] }}</v-icon
          >Formulaires
        </tooltip-btn>
        <!-- Export rapides des mails -->
        <v-menu>
          <template v-slot:activator="{ on: menu }">
            <v-tooltip bottom>
              <template v-slot:activator="{ on: tooltip }">
                <v-btn v-on="{ ...tooltip, ...menu }" depressed>Mails</v-btn>
              </template>
              Envoyer un mail à l'équipe...
            </v-tooltip>
          </template>
          <v-list>
            <v-list-item>
              <v-list-item-content>
                <a :href="mailtoEquipe"> Mail à toute l'équipe</a>
              </v-list-item-content>
              <v-list-item-action>
                <tooltip-btn
                  tooltip="Copier les adresses"
                  @click="copyMailsToClipboard(false)"
                  icon
                >
                  <v-icon>{{ $icons["mdi-content-copy"] }} </v-icon>
                </tooltip-btn>
              </v-list-item-action>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>
                <a :href="mailtoAnims">
                  Mail à l'équipe d'animation
                </a>
              </v-list-item-content>
              <v-list-item-action>
                <tooltip-btn
                  tooltip="Copier les adresses"
                  @click="copyMailsToClipboard(true)"
                  icon
                >
                  <v-icon>{{ $icons["mdi-content-copy"] }} </v-icon>
                </tooltip-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-menu>
        <v-divider vertical></v-divider>
        <tooltip-btn
          tooltip="Télécharger une liste au format Excel"
          @click="exportListe()"
          text
          small
        >
          <v-icon class="mr-1">{{ $icons["mdi-download"] }}</v-icon
          >Exporter
        </tooltip-btn>
        <tooltip-btn
          tooltip="Afficher les pièces justificatives des membres de l'équipe"
          text
          small
          @click="loadAndShowDocuments"
        >
          <v-icon class="mr-1">{{ $icons["mdi-folder"] }}</v-icon
          >Documents
        </tooltip-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-data-table
      :headers="header"
      :items="items"
      hide-default-footer
      class="mt-2"
      fixed-header
      height="72vh"
      dense
      :items-per-page="9999"
      id="equipiers"
      @click:row="
        item => {
          editEquipier = item;
          showEditDialog = true;
        }
      "
    >
      <template v-slot:no-data>
        <v-alert :value="true" type="warning">
          Aucun membre de l'équipe n'est déclaré pour le moment.
          <br />
          <i>(Vous pouvez ajouter un équipier avec le bouton "Ajouter".)</i>
        </v-alert>
      </template>

      <template v-slot:[`item.delete`]="{ item }">
        <tooltip-btn
          :tooltip="'Enlever ' + item.prenom + ' ' + item.nom + ` de l'équipe`"
          icon
          small
          class="mr-2"
          color="red"
          @click.stop="
            () => {
              equipierSupprime = item;
              confirmeSupprime = true;
            }
          "
        >
          <v-icon>
            {{ $icons["mdi-delete"] }}
          </v-icon>
        </tooltip-btn>
      </template>
      <template v-slot:[`item.nom`]="{ item }">
        <div style="width: 100px;">
          {{ item.nom }}
        </div>
      </template>
      <template v-slot:[`item.prenom`]="{ item }">
        <div style="width: 100px;">
          {{ item.prenom }}
        </div>
      </template>
      <template v-slot:[`item.date_naissance`]="{ item }">
        <div style="width: 120px;">
          {{ fmt.date(item.date_naissance) }}
        </div>
      </template>
      <template v-slot:[`item.roles`]="{ item }">
        {{ fmt.roles(item.roles) }}
      </template>
      <template v-slot:[`item.diplome`]="{ item }">
        {{ fmt.diplome(item.diplome) }}
      </template>
      <template v-slot:[`item.appro`]="{ item }">
        {{ fmt.approfondissement(item.appro) }}
      </template>
      <template v-slot:[`item.sexe`]="{ item }">
        {{ fmt.sexe(item.sexe) }}
      </template>
      <template v-slot:[`item.ville`]="{ item }">
        <div style="width: 150px;">
          {{ item.ville }}
        </div>
      </template>
      <template v-slot:[`item.departement_naissance`]="{ item }">
        <div style="width: 120px;">
          {{ fmt.departement(item.departement_naissance) }}
        </div>
      </template>
      <template v-slot:[`item.tels`]="{ item }">
        {{ fmt.telephones(item.tels) }}
      </template>
      <template v-slot:[`item.etudiant`]="{ item }">
        {{ fmt.bool(item.etudiant) }}
      </template>
      <template v-slot:[`item.fonctionnaire`]="{ item }">
        {{ fmt.bool(item.fonctionnaire) }}
      </template>
    </v-data-table>
  </v-container>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import AddEquipier from "@/components/equipiers/AddEquipier.vue";
import { C } from "../logic/controller";
import { CreateEquipierIn, EquipierDirecteur, Role } from "../logic/types";
import FormEquipier from "../components/equipiers/FormEquipier.vue";
import { Formatter } from "@/logic/formatter";
import Documents from "../components/equipiers/Documents.vue";
import Formulaires from "../components/equipiers/Formulaires.vue";
import TooltipBtn from "@/components/TooltipBtn.vue";

const EquipiersProps = Vue.extend({
  props: {}
});

@Component({
  components: { AddEquipier, FormEquipier, Documents, Formulaires, TooltipBtn }
})
export default class Equipiers extends EquipiersProps {
  showAddEquipier = false;
  items: EquipierDirecteur[] = [];

  confirmeSupprime = false;
  equipierSupprime: EquipierDirecteur | null = null;
  showEditDialog = false;
  editEquipier: EquipierDirecteur | null = null;
  showDocuments = false;
  showInviteFormulaires = false;
  header = [
    { text: "", value: "delete", sortable: false },
    { text: "Nom", value: "nom", align: "center", sortable: true },
    {
      text: "Prénom",
      value: "prenom",
      align: "center",
      sortable: true
    },
    { text: "Rôle", value: "roles", sortable: true },
    { text: "Diplôme", value: "diplome", sortable: true, width: "180px" },
    { text: "Approfondissement", value: "appro", sortable: true },
    {
      text: "Sexe",
      value: "sexe",
      sortable: true
    },
    {
      text: "Nom de jeune fille",
      value: "nom_jeune_fille",
      sortable: true
    },
    {
      text: "Date de naissance",
      value: "date_naissance",
      sortable: true,
      align: "center",
      width: "120px"
    },
    {
      text: "Département de naissance",
      value: "departement_naissance",
      sortable: true,
      width: "40%"
    },
    {
      text: "Ville de naissance",
      value: "ville_naissance",
      sortable: true,
      width: "180px"
    },
    { text: "Mail", value: "mail", sortable: true },
    { text: "Téléphone(s)", value: "tels", sortable: true },
    {
      text: "Adresse postale",
      value: "adresse",
      sortable: true,
      width: "200px"
    },
    { text: "Code postal", value: "code_postal", sortable: true },
    { text: "Ville", value: "ville", sortable: true },
    {
      text: "Sécurité sociale",
      value: "securite_sociale",
      sortable: true,
      width: "180px"
    },
    { text: "Profession", value: "profession", sortable: true, width: "180px" },
    { text: "Etudiant", value: "etudiant", sortable: true },
    {
      text: "Fonctionnaire",
      value: "fonctionnaire",
      sortable: true
    }
  ];

  fmt = Formatter;

  $refs!: {
    documents: Documents;
  };

  get nbMembres() {
    return this.items.length;
  }
  get nbAnims() {
    return this.items.filter(r => {
      return (
        (r.roles || []).includes(Role.RAnimation) ||
        (r.roles || []).includes(Role.RAideAnimation)
      );
    }).length;
  }

  private getMails(restrictToAnims: boolean) {
    const filtered = restrictToAnims
      ? this.items.filter(eq => {
          const roles = eq.roles || [];
          return (
            roles.includes(Role.RDirecteur) ||
            roles.includes(Role.RAdjoint) ||
            roles.includes(Role.RAnimation) ||
            roles.includes(Role.RAideAnimation)
          );
        })
      : this.items;
    return filtered
      .map(eq => eq.mail.trim())
      .filter(m => m != "")
      .join(",");
  }

  get mailtoEquipe() {
    return "mailto:" + this.getMails(false);
  }

  get mailtoAnims() {
    return "mailto:" + this.getMails(true);
  }

  async copyMailsToClipboard(restrictToAnims: boolean) {
    C.exportMailsToClipboard(this.getMails(restrictToAnims));
  }

  async created() {
    const data = await C.getEquipiers();
    if (data == undefined) return;
    this.items = data.equipe || [];
    C.notifications.success = "Equipe chargée";
  }

  async ajouteEquipier(params: CreateEquipierIn) {
    const data = await C.ajouteEquier(params);
    if (data == undefined) return;
    this.items = data.equipe || [];
    C.notifications.success = "Equipier ajouté avec succès.";
  }

  async updateEquipier(item: EquipierDirecteur) {
    this.showEditDialog = false;
    const data = await C.updateEquipier(item);
    if (data == undefined) return;
    this.items = data.equipe || [];
    C.notifications.success = "Equipier modifié avec succès.";
  }

  async supprimeEquipier() {
    if (this.equipierSupprime == null) return;
    // confirmation déjà demandée
    this.confirmeSupprime = false;
    const data = await C.deleteEquipier(this.equipierSupprime.id);
    if (data == undefined) return;
    this.items = data.equipe || [];
    C.notifications.success = "Equipier supprimé avec succès.";
  }

  async exportListe() {
    const fn = await C.export("equipe", {});
    if (fn == undefined) return;
    C.notifications.success = "Liste des équipiers téléchargée avec succès.";
  }

  loadAndShowDocuments() {
    this.showDocuments = true;
    this.$refs.documents.refresh(false);
  }
}
</script>

<style>
#equipiers tr:hover {
  cursor: pointer;
}
</style>