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

<template>
  <div>
    <v-dialog v-model="showChoixRole" max-width="600px">
      <v-card>
        <v-card-title class="headline">{{
          rattache
            ? "Rattacher à un profil connu"
            : "Créer un profil temporaire"
        }}</v-card-title>
        <v-card-text v-if="personneAjout != null">
          <span v-if="rattache"
            >Le profil connu {{ personneAjout.personne.prenom }}
            {{ personneAjout.personne.nom }} sera ajouté à votre équipe.</span
          >
          <span v-else>
            Un profil temporaire au nom de
            <b
              >{{ personneAjout.personne.nom }}
              {{ personneAjout.personne.prenom }}</b
            >
            va être crée. Il sera validé ultérieurement pour être ajouté à la
            base de données.
          </span>
          <roles-field
            v-model="rolesAjout"
            :required="true"
            label="Rôle du nouvel équipier"
          ></roles-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn class="success" :disabled="!isRolesValid" @click="valideAjout"
            >Ajouter</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>

    <form-equipier
      :withButtons="false"
      :withDetails="false"
      @dataChanged="launchSearch"
      ref="formEquipier"
    >
      <template v-slot:title="{ tmpEquipier }">
        <v-container fluid pa-1 ma-0>
          <v-layout row mx-0>
            <v-flex xs="6" md="4">
              <span class="headline">Ajouter un équipier</span>
            </v-flex>
            <v-flex xs="6" md="8">
              <div class="text-right">
                <v-btn @click="creeEquipier(tmpEquipier)">
                  <v-icon class="mr-1" color="success">{{
                    $icons["mdi-plus-circle"]
                  }}</v-icon
                  >Vers un nouveau profil
                </v-btn>
              </div>
            </v-flex>
          </v-layout>
          <v-layout row mt-2 mb-0>
            <v-flex>
              <v-alert class="ma-0" type="error" :value="!!errorEmptyNomPrenom"
                >{{ errorEmptyNomPrenom }}
              </v-alert>
            </v-flex>
          </v-layout>
        </v-container>
      </template>
    </form-equipier>
    <results-equipier
      :items="searchResults"
      class="m-5"
      @rattache="rattacheEquipier"
    ></results-equipier>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import FormEquipier from "./FormEquipier.vue";
import ResultsEquipier from "./ResultsEquipier.vue";
import { C } from "../../logic/controller";
import {
  PatternsSimilarite,
  ResultatRecherche,
  EquipierDirecteur,
  CreateEquipierIn,
  Role,
  Sexe,
  Roles
} from "../../logic/types";
import { EditFields, NullDate } from "@/logic/formatter";
import RolesField from "./RolesField.vue";

const DEBOUNCE = 300; // ms

// typesafe data
type CreateData =
  | { mode: "rattache"; personne: ResultatRecherche }
  | { mode: "cree"; personne: PatternsSimilarite };

function nullPatterns(): PatternsSimilarite {
  return {
    nom: "",
    prenom: "",
    sexe: Sexe.SAucun,
    date_naissance: NullDate,
    mail: "",
    nom_jeune_fille: ""
  };
}

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

@Component({
  components: { FormEquipier, ResultsEquipier, RolesField }
})
export default class AddEquipier extends AddEquipierProps {
  errorEmptyNomPrenom = "";
  searchResults: ResultatRecherche[] = [];
  timerLaunchSearch: number | null = null;
  rolesAjout: NonNullable<Roles> = [];

  personneAjout: CreateData = { mode: "cree", personne: nullPatterns() };
  showChoixRole = false;

  $refs!: {
    formEquipier: FormEquipier;
  };

  get rattache() {
    return this.personneAjout.mode == "rattache";
  }

  launchSearch(dataSearch: PatternsSimilarite) {
    if (this.timerLaunchSearch != null) {
      clearTimeout(this.timerLaunchSearch);
      this.timerLaunchSearch = null;
    }

    this.timerLaunchSearch = setTimeout(() => {
      this.doSearch(dataSearch);
    }, DEBOUNCE);
  }

  async doSearch(dataSearch: PatternsSimilarite) {
    const data = await C.rechercheProfil(dataSearch);
    if (data == undefined) return;
    this.searchResults = data.propositions || [];
    C.notifications.progress = false;
  }

  rattacheEquipier(personne: ResultatRecherche) {
    this.personneAjout = { mode: "rattache", personne };
    this.showChoixRole = true;
  }
  creeEquipier(tmpEquipier: EquipierDirecteur) {
    if (!tmpEquipier.nom || !tmpEquipier.prenom) {
      this.errorEmptyNomPrenom =
        "Merci de préciser au moins le nom et le prénom du nouvel équipier.";
      setTimeout(() => {
        this.errorEmptyNomPrenom = "";
      }, 3000);
      return;
    }
    this.personneAjout = {
      mode: "cree",
      personne: JSON.parse(JSON.stringify(tmpEquipier))
    };

    this.showChoixRole = true;
  }

  get isRolesValid() {
    return this.rolesAjout && this.rolesAjout.length > 0;
  }

  valideAjout() {
    if (!this.isRolesValid || this.personneAjout == null) return;
    this.showChoixRole = false;
    const params: CreateEquipierIn = {
      rattache: this.personneAjout.mode == "rattache",
      roles: this.rolesAjout,
      personne: nullPatterns(),
      id_personne: 0
    };
    if (this.personneAjout.mode == "rattache") {
      params.id_personne = this.personneAjout.personne.id;
    } else {
      params.personne = this.personneAjout.personne;
    }
    this.$emit("ajoute-equipier", params);
    this.$refs.formEquipier.reset();
    this.searchResults = [];
  }
}
</script>

<style>
v-dialog {
  height: 90%;
}
</style>