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

<template>
  <v-container fluid>
    <v-dialog v-model="showInfo" max-width="800px">
      <v-card>
        <v-card-title>Message du participant</v-card-title>
        <v-card-text>
          {{ info }}
        </v-card-text>
      </v-card>
    </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>{{ nbInscrits }}</b> inscrit(s)
            <br />
            <span :style="{ color: COULEUR_ATTENTE }">
              <b>{{ nbAttente }}</b> en liste d'attente
            </span>
            <br />
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <span v-on="on" :style="{ color: COULEUR_ANNIVERSAIRE }">
                  <b>{{ anniversaires.length }}</b> anniversaire(s) pendant le
                  séjour
                </span>
              </template>
              {{ anniversaires.join(", ") }}
            </v-tooltip>
            <br />
            <span :style="{ color: COULEUR_INFO }">
              <b>{{ nbInfos }}</b> information(s) particulière(s)
            </span>
          </v-card-text>
        </v-card>
      </v-menu>
      <v-toolbar-title>Inscrits</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <tooltip-btn
          tooltip="Export au format Excel des inscrits..."
          @click="downloadListe"
          text
          small
        >
          <v-icon class="mr-1">{{ $icons["mdi-download"] }}</v-icon>
          Exporter
        </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 aux inscrits...
            </v-tooltip>
          </template>
          <v-list>
            <v-list-item>
              <v-list-item-content>
                <a :href="mailToInscrits"
                  >Mail aux inscrits (sans liste d'attente)</a
                >
              </v-list-item-content>
              <v-list-item-action>
                <tooltip-btn
                  tooltip="Copier les adresses"
                  @click="copyMailsToClipboard()"
                  icon
                >
                  <v-icon>{{ $icons["mdi-content-copy"] }} </v-icon>
                </tooltip-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-toolbar>
    <v-data-table
      dense
      :items="items"
      :headers="headers"
      hide-default-footer
      fixed-header
      height="68vh"
      :items-per-page="9999"
      class="mt-2"
    >
      <template v-slot:[`item.info`]="{ item }">
        <tooltip-btn
          tooltip="Afficher les informations du participant"
          small
          icon
          v-if="asI(item).info != ''"
          :color="COULEUR_INFO"
          @click="
            info = asI(item).info;
            showInfo = true;
          "
        >
          <v-icon>{{ $icons["mdi-email"] }}</v-icon>
        </tooltip-btn>
      </template>

      <template v-slot:[`item.nom`]="{ item }">
        <span
          :style="{
            color: asI(item).is_attente ? COULEUR_ATTENTE : ''
          }"
        >
          {{ asI(item).nom }}
        </span>
      </template>
      <template v-slot:[`item.prenom`]="{ item }">
        <span
          :style="{
            color: asI(item).is_attente ? COULEUR_ATTENTE : ''
          }"
        >
          {{ asI(item).prenom }}
        </span>
      </template>

      <template v-slot:[`item.date_naissance`]="{ item }">
        <v-tooltip bottom :disabled="!asI(item).has_anniversaire">
          <template v-slot:activator="{ on }">
            <span
              v-on="on"
              :style="{
                color: asI(item).has_anniversaire ? COULEUR_ANNIVERSAIRE : '',
                fontWeight: asI(item).has_anniversaire ? 'bold' : ''
              }"
            >
              {{ fmt.date(asI(item).date_naissance) }}
            </span>
          </template>
          {{ asI(item).prenom }} a son <b>anniversaire</b> pendant le séjour.
        </v-tooltip>
      </template>

      <template v-slot:[`item.sexe`]="{ item }">
        {{ fmt.sexe(asI(item).sexe) }}
      </template>
    </v-data-table>
  </v-container>
</template>

<script lang="ts">
import Component from "vue-class-component";
import TooltipBtn from "@/components/TooltipBtn.vue";
import { C } from "@/logic/controller";

import { BaseInscrits } from "@/views/inscrits";
import { Inscrit } from "../logic/types";

@Component({
  components: { TooltipBtn }
})
export default class InscritsSimples extends BaseInscrits {
  showInfo = false;
  info = "";

  headers: {
    text: string;
    value: keyof Inscrit;
    sortable?: boolean;
    width?: string;
  }[] = [
    {
      text: "",
      value: "info",
      sortable: false,
      width: "30px"
    },
    { text: "Nom", value: "nom" },
    { text: "Prénom", value: "prenom" },
    { text: "Sexe", value: "sexe" },
    { text: "Date de naissance", value: "date_naissance" },
    { text: "Mail", value: "mail" }
  ];

  get items(): Inscrit[] {
    return C.inscrits;
  }

  created() {
    C.getInscrits();
  }

  async downloadListe() {
    const name = await C.export("inscrits", {});
    if (name !== undefined) {
      C.notifications.success = "Liste téléchargée avec succès.";
    }
  }
}
</script>

<style scoped></style>