refactor Datatable usage

src/components/DataTable.vue

@@ -155,7 +155,7 @@ export interface CustomButton {
   hide: boolean;
   onclick: (e: MouseEvent) => void;
 }
-interface DataTableColumn<T> {
+export interface DataTableColumn<T> {
   label: string; // Column name
   field: keyof T; // Field name from row
   numeric: boolean; // Affects sorting

src/views/BenevoleManager.vue

@@ -44,6 +44,7 @@ import ManageRegistration from "@/components/ManageRegistration.vue";
 import Navigation from "@/components/NavigationPanel.vue";
 import DataTable, {
   CustomButton,
+  DataTableColumn,
   DataTableData,
   DataTableObject,
 } from "@/components/DataTable.vue";
@@ -72,6 +73,45 @@ type filterObject = {
   id: number;
   competenceIdList: Array<string>;
 };
+type BenevoleTableObject = {
+  id: number;
+  name: string;
+  surname: string;
+  fanfare: string;
+  creneauLength: number;
+};
+const columns: Array<DataTableColumn<BenevoleTableObject>> = [
+  {
+    label: "Prénom",
+    field: "name",
+    numeric: false,
+    html: false,
+    class: "overflow-cell",
+  },
+  {
+    label: "Nom",
+    field: "surname",
+    numeric: false,
+    html: false,
+    class: "overflow-cell",
+  },
+  {
+    label: "Fanfare",
+    field: "fanfare",
+    numeric: false,
+    html: false,
+    class: "fitwidth",
+    export: "fanfare",
+  },
+  {
+    label: "Duree créneau(h)",
+    field: "creneauLength",
+    numeric: true,
+    html: false,
+    class: "fitwidth",
+    export: "creneauLength",
+  },
+];
 export default defineComponent({
   name: "EditeurCreneau",
   components: {
@@ -85,45 +125,7 @@ export default defineComponent({
   data: () => ({
     navOption,
     show: "benevole",
-    columns: [
-      {
-        label: "Id",
-        field: "id",
-        numeric: true,
-        html: false,
-        class: "fitwidth",
-      },
-      {
-        label: "Prénom",
-        field: "name",
-        numeric: false,
-        html: false,
-        class: "overflow-cell",
-      },
-      {
-        label: "Nom",
-        field: "surname",
-        numeric: false,
-        html: false,
-        class: "overflow-cell",
-      },
-      {
-        label: "Fanfare",
-        field: "fanfare",
-        numeric: false,
-        html: false,
-        class: "fitwidth",
-        export: "fanfare",
-      },
-      {
-        label: "Duree créneau(h)",
-        field: "creneauLength",
-        numeric: true,
-        html: false,
-        class: "fitwidth",
-        export: "creneauLength",
-      },
-    ],
+    columns,
     currentBenevole: undefined as Benevole | undefined,
     loading: true,
     customButton: [] as Array<CustomButton>,
@@ -156,7 +158,7 @@ export default defineComponent({
         };
       });
     },
-    data(): DataTableData<DataTableObject> {
+    data(): DataTableData<BenevoleTableObject> {
       return {
         items: this.benevoleList.map((b) => {
           return {

src/views/CompetenceManager.vue

@@ -20,53 +20,56 @@
 <script lang="ts">
 import Competence from "@/models/Competence";
 import EditeurContrainte from "@/components/EditeurCompetence.vue";
-import DataTable, { DataTableData, DataTableObject } from "@/components/DataTable.vue";
+import DataTable, { DataTableData, DataTableColumn } from "@/components/DataTable.vue";
 import { defineComponent } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 
+type CompetenceTableObject = {
+  id: number;
+  name: string;
+  overflowDescription: string;
+  renderPreference: string;
+  isPreference: string;
+  renderTeachable: string;
+  isTeachable: string;
+};
+const columns: Array<DataTableColumn<CompetenceTableObject>> = [
+  {
+    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",
+  },
+];
 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",
-      },
-    ],
+    columns,
     currentCompetence: undefined as Competence | undefined,
     loading: true,
   }),
@@ -74,7 +77,7 @@ export default defineComponent({
     competenceList(): Array<Competence> {
       return this.$store.state.competenceList;
     },
-    data(): DataTableData<DataTableObject> {
+    data(): DataTableData<CompetenceTableObject> {
       return {
         items: this.competenceList.map((c) => {
           return {