bdlg-planner-front/src/components/EditeurBenevole.vue

<template>
  <div class="editor-panel">
    <h3>Modifier les informations sur les bénévoles</h3>
    <div class="actions">
      <button class="btn small primary" v-on:click="emitCreationOrder">
        <i class="material-icons">create</i>Nouveau
      </button>
      <button
        class="btn small error"
        :disabled="benevole === undefined"
        v-on:click="emitDeleteOrder"
      >
        <i class="material-icons">delete_forever</i>Supprimer
      </button>
    </div>
    <div class="empty" v-if="benevole === undefined">
      Veuillez selectioner une ligne du tableau.
    </div>
    <div class="editor-body" v-else>
      <styled-input
        class="s3"
        label="Identifiant"
        id="competence_id"
        type="text"
        :modelValue="benevole.id"
        disabled
        v-show="false"
      />
      <styled-input
        class="s6"
        label="Prénom"
        id="last_name"
        type="text"
        :modelValue="benevole.name"
        @input="inputListener($event, 'name')"
      />
      <styled-input
        class="s6"
        label="Nom"
        id="family_name"
        type="text"
        :modelValue="benevole.surname"
        @input="inputListener($event, 'surname')"
      />
      <styled-input
        class="s6"
        label="Email"
        id="email"
        type="email"
        :modelValue="benevole.email"
        @input="inputListener($event, 'email')"
      />
      <styled-input
        label="Telephone"
        class="s6"
        id="phone"
        type="text"
        :modelValue="benevole.phone"
        @input="inputListener($event, 'phone')"
      />
      <styled-input
        label="Commentaire"
        id="comment"
        type="textarea"
        :modelValue="benevole.comment"
        @input="inputListener($event, 'comment')"
      />
      <checkbox
        label="Ne pas ajouter de créneau"
        :modelValue="benevole.isFixed"
        help="Indique au solveur de ne pas changer les affectations de ce bénévole"
        @input="checkboxListener($event, 'isFixed')"
      />
      <h3 style="padding-bottom: 0.8rem">Propriétés</h3>
      <chips-input
        label="Préference & compétences"
        id="preference_selection"
        placeholder="Choisir un élément"
        secondary-placeholder="+ élément"
        :autocompleteList="autocompleteList"
        :strict-autocomplete="true"
        v-model="competenceIdList"
      ></chips-input>
    </div>
  </div>
</template>

<script lang="ts">
import Benevole from "@/models/Benevole";
import Competence from "@/models/Competence";
import styledInput from "@/components/Form/Input.vue";
import chipsInput from "@/components/Form/SelectChipInput.vue";
import checkbox from "@/components/Form/checkBox.vue";
import { defineComponent, PropType } from "vue";
import { MutationTypes } from "@/store/Mutations";
import AutocompleteOptions from "@/models/AutocompleteOptions";

export default defineComponent({
  name: "EditeurBenevole",
  components: { styledInput, chipsInput, checkbox },
  props: { benevole: { type: Object as PropType<Benevole> } },
  data: function () {
    return {
      refreshFrom: null,
      competenceIdList: [] as Array<string>,
    };
  },
  watch: {
    benevole(b: Benevole) {
      this.competenceIdList = b.competenceIdList.map((s) => s.toString());
    },
    competenceIdList(val: Array<string>) {
      const new_arr = val.map((s) => parseInt(s));
      const old_arr = this.benevole?.competenceIdList;
      if (
        new_arr.length !== old_arr?.length ||
        new_arr.reduce((acc: boolean, n: number) => acc && old_arr.includes(n), true)
      ) {
        this.updateBenevole("competenceIdList", new_arr);
      }
    },
  },
  computed: {
    autocompleteList(): Array<AutocompleteOptions> {
      return this.competenceList.map((contraint) => {
        return { id: contraint.id.toString(), name: contraint.fullname };
      });
    },
    competenceList(): Array<Competence> {
      return this.$store.state.competenceList;
    },
  },
  methods: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    inputListener(event: any, field: keyof Benevole) {
      this.updateBenevole(field, event.target.value);
    },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    checkboxListener(event: any, field: keyof Benevole) {
      this.updateBenevole(field, event.target.checked);
    },
    updateBenevole<K extends keyof Benevole>(k: K, value: Benevole[K]) {
      if (this.benevole) {
        this.$store.commit(MutationTypes.editBenevole, {
          id: this.benevole.id,
          field: k,
          value: value,
        });
      }
    },
    emitCreationOrder: function () {
      this.$emit("create");
    },
    emitDeleteOrder: function () {
      this.$emit("delete", this.benevole);
    },
  },
});
</script>

<style scoped></style>