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

<template>
  <v-card>
    <v-toolbar>
      <v-toolbar-title>Accès aux formulaires des équipiers</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-menu left>
          <template v-slot:activator="{ on: menu }">
            <v-tooltip bottom>
              <template v-slot:activator="{ on: tooltip }">
                <v-btn icon v-on="{ ...tooltip, ...menu }">
                  <v-icon>{{ $icons["mdi-send"] }}</v-icon>
                </v-btn>
              </template>
              Inviter plusieurs équipiers...
            </v-tooltip>
          </template>
          <v-list>
            <v-list-item
              @click="inviteAll(true)"
              :disabled="notInvited.length == 0"
            >
              Ne pas ré-inviter les équipiers déjà contactés
            </v-list-item>
            <v-list-item
              @click="inviteAll(false)"
              :disabled="notAnswered.length == 0"
            >
              Inviter les équipiers n'ayant pas répondu
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-toolbar>
    <v-data-table
      :items="value"
      :headers="headers"
      hide-default-footer
      dense
      :items-per-page="9999"
      fixed-header
      height="75vh"
    >
      <template #item.nom_prenom="{item}">
        {{ fmt.nomPrenom(item) }}
      </template>
      <template #item.invitation_equipier="{item}">
        <span :style="{ color: renderInvitationColor(item) }">
          {{ renderInvitation(item) }}
        </span>
      </template>
      <template #item.charte="{item}">
        <span :style="{ color: renderCharteColor(item) }">
          {{ renderCharte(item) }}
        </span>
      </template>
      <template #item.invite="{item}">
        <tooltip-btn
          :tooltip="`Envoyer un <b>mail d'invitation</b> à` + item.prenom"
          v-if="isEmailValid(item.mail) === true"
          icon
          small
          @click="invite(item)"
        >
          <v-icon>{{ $icons["mdi-email"] }}</v-icon>
        </tooltip-btn>
        <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-link"] }}</v-icon>
                </v-btn>
              </template>
              Afficher le lien vers le formulaire de {{ item.prenom }}
            </v-tooltip>
          </template>
          <v-card max-width="400px">
            <v-card-title>Lien</v-card-title>
            <v-card-text>
              <a :href="item.lien_formulaire" target="_blank">{{
                item.lien_formulaire
              }}</a>
            </v-card-text>
          </v-card>
        </v-menu>
      </template>
    </v-data-table>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { EquipierDirecteur, OptionnalBool } from "../../logic/types";
import { C } from "../../logic/controller";
import { Formatter, isEmailValid } from "@/logic/formatter";
import TooltipBtn from "@/components/TooltipBtn.vue";

const FormulairesProps = Vue.extend({
  props: {
    value: Array as () => EquipierDirecteur[]
  }
});

@Component({
  components: { TooltipBtn }
})
export default class Formulaires extends FormulairesProps {
  headers = [
    { text: "Equipier", value: "nom_prenom", sortable: false },
    { text: "Invitation", value: "invitation_equipier", align: "center" },
    { text: "Charte", value: "charte", align: "center" },
    { text: "", value: "invite", align: "center" }
  ];

  fmt = Formatter;
  isEmailValid = isEmailValid;

  get notInvited() {
    return this.value.filter(item => item.invitation_equipier == 0);
  }
  get notAnswered() {
    return this.value.filter(item => item.invitation_equipier <= 1);
  }

  renderInvitation(item: EquipierDirecteur) {
    switch (item.invitation_equipier) {
      case 1:
        return "En attente de réponse";
      case 2:
        return "Formulaire rempli";
      default:
        return "Non envoyée";
    }
  }
  renderInvitationColor(item: EquipierDirecteur) {
    switch (item.invitation_equipier) {
      case 1:
        return "orange";
      case 2:
        return "green";
      default:
        return "";
    }
  }

  renderCharte(item: EquipierDirecteur) {
    switch (item.charte as OptionnalBool) {
      case OptionnalBool.OBOui:
        return "Acceptée";
      case OptionnalBool.OBNon:
        return "Refusée";
      default:
        return "Non vue";
    }
  }
  renderCharteColor(item: EquipierDirecteur) {
    switch (item.charte as OptionnalBool) {
      case OptionnalBool.OBOui:
        return "green";
      case OptionnalBool.OBNon:
        return "red";
      default:
        return "";
    }
  }

  async invite(item: EquipierDirecteur) {
    const data = await C.inviteFormulaireEquipier("one", item.id);
    if (data === undefined) return;
    this.$emit("input", data.equipe);
    C.notifications.success = "Un mail d'invitation a bien été envoyé.";
  }

  async inviteAll(onlyNew: boolean) {
    const data = await C.inviteFormulaireEquipier(onlyNew ? "new" : "all", -1);
    if (data === undefined) return;
    this.$emit("input", data.equipe);
    C.notifications.success = "Les invitations ont bien été envoyées.";
  }
}
</script>

<style scoped></style>