bdlg-planner-front/src/views/CompetenceManager.vue

<template>
  <div class="page">
    <data-table
      class="data-table"
      title="Liste des contraintes"
      :data="data"
      :clickable="true"
      :loadingAnimation="loading"
      locale="fr"
      @row-click="onRowClick"
    ></data-table>
    <editeur-contrainte
      :competence="currentCompetence"
      @create="createCompetence"
      @delete="deleteCompetence"
    />
  </div>
</template>

<script lang="ts">
import Competence from "@/models/Competence";
import EditeurContrainte from "@/components/EditeurCompetence.vue";
import DataTable, { DataTableData, DataTableObject } from "@/components/DataTable.vue";
import { defineComponent } from "vue";
import { MutationTypes } from "@/store/Mutations";

export default defineComponent({
  name: "CompetenceManager",
  components: { "data-table": DataTable, EditeurContrainte },
  data: () => ({
    columns: [
      {
        label: "Id",
        field: "id",
        numeric: true,
        html: false,
        class: "fitwidth",
      },
      {
        label: "Nom",
        field: "name",
        numeric: false,
        html: false,
        class: "overflow-cell",
      },
      {
        label: "Description",
        field: "overflowDescription",
        numeric: false,
        html: true,
        class: "overflow-cell",
      },
      {
        label: "Preference",
        field: "renderPreference",
        numeric: false,
        html: true,
        class: "fitwidth",
        export: "isPreference",
      },
      {
        label: "Apprenable",
        field: "renderTeachable",
        numeric: false,
        html: true,
        class: "fitwidth",
        export: "isTeachable",
      },
    ],
    currentCompetence: undefined as Competence | undefined,
    loading: true,
  }),
  computed: {
    competenceList(): Array<Competence> {
      return this.$store.state.competenceList;
    },
    data(): DataTableData<DataTableObject> {
      return {
        items: this.competenceList.map((c) => {
          return {
            id: c.id,
            name: c.name,
            overflowDescription: c.overflowDescription,
            renderPreference: c.renderPreference,
            isPreference: c.isPreference.toString(),
            renderTeachable: c.renderTeachable,
            isTeachable: c.isTeachable.toString(),
          };
        }),
        columns: this.columns,
      };
    },
  },
  methods: {
    createCompetence() {
      const comp = Competence.fromObject({ name: "Nouvelle contrainte", description: "" });
      this.$store.commit(MutationTypes.addConstraint, comp);
    },
    deleteCompetence(payload: Competence) {
      this.$store.commit(MutationTypes.removeConstraint, payload);
      this.currentCompetence = undefined;
    },
    onRowClick(row: { id: number }) {
      this.currentCompetence = this.$store.getters.getCompetenceById(row.id);
    },
  },
  mounted() {
    this.loading = false;
  },
});
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  gap: 16px;
}
.data-table {
  width: 100%;
  height: min-content;
}
@media (min-width: 600px) {
  .page {
    flex-direction: row;
    margin-top: 32px;
  }
  .data-table {
    width: calc(100% - 432px);
  }
}
@media (min-width: 1200px) {
  .page {
    margin-top: 32px;
  }
}
</style>