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

<template>
  <div class="editor-panel">
    <h3>Modifier une compétence ou préférence</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="competence === undefined"
        v-on:click="emitDeleteOrder"
      >
        <i class="material-icons">delete_forever</i>Supprimer
      </button>
    </div>
    <div class="empty" v-if="competence === 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="competence.id"
        disabled
      />
      <styled-input
        class="s9"
        label="Titre"
        id="name"
        type="text"
        :modelValue="competence.name"
        @input="inputListener($event, 'name')"
      />
      <styled-input
        label="Description"
        id="competence_description"
        type="textarea"
        :modelValue="competence.description"
        @input="inputListener($event, 'description')"
      />
      <h4 style="margin-top: 0.8rem">Propriétés</h4>
      <checkbox
        id="competence_isPreference"
        label="Préference"
        :modelValue="competence.isPreference"
        @input="checkboxListener($event, 'isPreference')"
      />
      <checkbox
        id="competence_isTeachable"
        label="Apprenable"
        :modelValue="competence.isTeachable"
        @input="checkboxListener($event, 'isTeachable')"
      />
    </div>
  </div>
</template>

<script lang="ts">
import Competence from "@/models/Competence";
import styledInput from "./input.vue";
import checkbox from "./checkBox.vue";
import { defineComponent, PropType } from "vue";
import { MutationTypes } from "@/store/Mutations";
import "@/assets/css/editor-panel.css";

export default defineComponent({
  name: "EditeurCompetence",
  components: { styledInput, checkbox },
  props: { competence: { type: Object as PropType<Competence> } },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    inputListener(event: any, field: keyof Competence) {
      this.updateCompetence(field, event.target.value);
    },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    checkboxListener(event: any, field: keyof Competence) {
      this.updateCompetence(field, event.target.checked);
    },
    updateCompetence<K extends keyof Competence>(k: K, value: Competence[K]) {
      if (this.competence) {
        this.$store.commit(MutationTypes.editConstraint, {
          id: this.competence.id,
          field: k,
          value: value,
        });
      }
    },
    emitCreationOrder: function () {
      this.$emit("create");
    },
    emitDeleteOrder: function () {
      this.$emit("delete", this.competence);
    },
  },
});
</script>

<style scoped></style>