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

<template>
  <v-card v-if="groupe != null" :disabled="locked">
    <v-dialog v-model="showSelectAddAnimateurs" max-width="600px">
      <v-card>
        <v-card-title>Ajouter des animateurs</v-card-title>
        <v-card-text>
          <v-list class="overflow-y-auto" max-height="63vh">
            <v-list-item-group multiple v-model="animateursToAdd">
              <v-list-item
                v-for="equipier in optionsAnimateurs"
                :key="equipier.value"
                :value="equipier.value"
              >
                <template v-slot:default="{ active }">
                  <v-list-item-action>
                    <v-checkbox
                      :input-value="active"
                      color="primary"
                    ></v-checkbox>
                  </v-list-item-action>
                  <v-list-item-content>
                    {{ equipier.text }}
                  </v-list-item-content>
                </template>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="success"
            :disabled="animateursToAdd.length == 0"
            @click="addAnimateurs"
            >Ajouter</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-card-title> Animateurs du groupe {{ groupe.nom }} </v-card-title>
    <v-card-text class="pt-1 pb-1">
      <v-row>
        <v-col cols="2" class="align-self-center">Animateurs</v-col>
        <v-col
          ><v-chip
            v-for="idAnimateur in animateurs"
            :key="idAnimateur"
            close
            @click:close="deleteAnimateur(idAnimateur)"
          >
            {{ fmtAnimateur(idAnimateur) }}
          </v-chip></v-col
        >
        <v-col cols="4" class="align-self-center text-right">
          <v-btn
            color="success"
            @click="showSelectAddAnimateurs = true"
            class="mr-2"
            ><v-icon>{{ $icons["mdi-plus"] }}</v-icon> Ajouter</v-btn
          >
          <tooltip-btn
            color="secondary"
            tooltip="Répartir automatiquement les inscrits restant"
            :disabled="animateurs.length == 0 || groupeInscrits.length == 0"
            @click="autoRepartit"
            >Répartir</tooltip-btn
          >
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <an-petit-groupe
            :inscrits="groupeInscrits"
            :animateur="null"
            @updateInscrits="updateInscritsAnimateur($event, null)"
          ></an-petit-groupe>
        </v-col>
        <v-col v-for="idAnimateur in animateurs" :key="idAnimateur">
          <an-petit-groupe
            :inscrits="getListeAnimateur(idAnimateur)"
            :animateur="getAnimateur(idAnimateur)"
            @updateInscrits="updateInscritsAnimateur($event, idAnimateur)"
          ></an-petit-groupe>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import {
  Groupe,
  EquipierDirecteur,
  Role,
  ParticipantEquipiers,
  LoadGroupeAnimateursOut,
  Inscrit,
  Ids
} from "@/logic/types.ts";
import { C } from "@/logic/controller";
import Equipiers from "@/views/Equipiers.vue";
import { Formatter, nullId, optionnalId } from "@/logic/formatter";
import { Watch } from "vue-property-decorator";
import AnPetitGroupe from "./AnPetitGroupe.vue";
import TooltipBtn from "../TooltipBtn.vue";

const AnimateursProps = Vue.extend({
  props: {
    groupe: Object as () => Groupe
  }
});

@Component({
  components: { AnPetitGroupe, TooltipBtn }
})
export default class Animateurs extends AnimateursProps {
  equipiers: EquipierDirecteur[] = [];
  animateursToAdd: number[] = [];

  animateurs: number[] = [];
  animateurs_enfants: NonNullable<ParticipantEquipiers> = [];
  C = C;

  showSelectAddAnimateurs = false;

  idAnimateurOver: number | null = null;
  selectedInscrits: number[] = [];

  fmt = Formatter;

  /** on enlève les animateurs déjà présents */
  get optionsAnimateurs() {
    return this.equipiers
      .filter(eq => !this.animateurs.includes(eq.id))
      .filter(
        eq =>
          (eq.roles || []).includes(Role.RAideAnimation) ||
          (eq.roles || []).includes(Role.RAnimation)
      )
      .sort((a, b) => a.prenom.localeCompare(b.prenom))
      .map(eq => ({
        value: eq.id,
        text: Formatter.nomPrenom(eq)
      }));
  }

  /** on enlève les inscrits déjà attribués */
  get groupeInscrits() {
    const attribues = this.animateurs_enfants.map(pe => pe.id_participant);
    return C.inscrits
      .filter(
        insc => insc.id_groupe.Valid && insc.id_groupe.Int64 == this.groupe.id
      )
      .filter(insc => !attribues.includes(insc.id));
  }

  get locked() {
    return C.notifications.progress;
  }

  getAnimateur(id: number) {
    return this.equipiers.find(eq => eq.id === id);
  }

  fmtAnimateur(id: number) {
    const equi = this.getAnimateur(id);
    return equi ? Formatter.prenomN(equi) : "";
  }

  getListeAnimateur(idAnimateur: number) {
    const mapEnfants: { [key: number]: boolean } = {};
    this.animateurs_enfants
      .filter(pe => pe.id_equipier == idAnimateur)
      .forEach(pe => {
        mapEnfants[pe.id_participant] = true;
      });
    return C.inscrits
      .filter(insc => mapEnfants[insc.id])
      .sort((a, b) => b.age_debut_camp - a.age_debut_camp);
  }

  getNbGroupeAnimateur(idAnimateur: number) {
    return this.getListeAnimateur(idAnimateur).length;
  }

  async created() {
    const data = await C.getEquipiers();
    if (data === undefined) return;
    this.equipiers = data.equipe || [];
    C.notifications.progress = false;
    this.loadAnimateurs();
  }

  @Watch("groupe.id")
  private async loadAnimateurs() {
    const dataAnims = await C.getGroupeAnimateurs(this.groupe.id);
    if (dataAnims === undefined) return;
    this.applyRemoteData(dataAnims);
  }

  private applyRemoteData(data: LoadGroupeAnimateursOut) {
    this.animateurs = (data.groupe_equipiers || []).map(ge => ge.id_equipier);
    this.animateurs_enfants = data.participant_equipiers || [];
  }

  async addAnimateurs() {
    this.showSelectAddAnimateurs = false;
    const data = await C.addGroupeAnimateurs(
      this.groupe.id,
      this.animateursToAdd
    );
    if (data == undefined) return;
    this.applyRemoteData(data);
  }

  async deleteAnimateur(id: number) {
    const data = await C.deleteGroupeAnimateur(this.groupe.id, id);
    if (data == undefined) return;
    this.applyRemoteData(data);
  }

  async updateInscritsAnimateur(inscrits: Ids, idAnimateur: number | null) {
    const idAnimateurOpt =
      idAnimateur === null ? nullId() : optionnalId(idAnimateur);
    const animateurs_enfants = await C.updateInscritsAnimateur({
      id_groupe: this.groupe.id,
      id_animateur: idAnimateurOpt,
      id_inscrits: inscrits
    });
    if (animateurs_enfants === undefined) return;
    this.animateurs_enfants = animateurs_enfants || [];
  }

  async autoRepartit() {
    const animateurs_enfants = await C.autoRepartitInscritAnimateur(
      this.groupe.id
    );
    if (animateurs_enfants === undefined) return;
    this.animateurs_enfants = animateurs_enfants || [];
  }
}
</script>

<style scoped></style>