implement two side edition

package-lock.json

@@ -5535,9 +5535,9 @@
       }
     },
     "core-js": {
-      "version": "3.15.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.1.tgz",
-      "integrity": "sha512-h8VbZYnc9pDzueiS2610IULDkpFFPunHwIpl8yRwFahAEEdSpHlTy3h3z3rKq5h11CaUdBEeRViu9AYvbxiMeg=="
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
+      "integrity": "sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -9613,7 +9613,7 @@
       "dev": true
     },
     "jc-timeline": {
-      "version": "git+http://gitlab.jaquin.fr/clovis/jc-timeline.git#c45e5a9aa49e073855420055c7204d5f9cd718b7",
+      "version": "git+http://gitlab.jaquin.fr/clovis/jc-timeline.git#e4207956fdb15b2050a2b1d5379d3c99c8cfbe0c",
       "from": "git+http://gitlab.jaquin.fr/clovis/jc-timeline.git",
       "requires": {
         "dayjs": "^1.10.4",
@@ -17006,9 +17006,9 @@
       }
     },
     "simplebar": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.3.4.tgz",
-      "integrity": "sha512-2mCaVdiroCKmXuD+Qfy+QSE32m5BMuZ4ssHvRD1QEPYH95Re/kox7j/Wy0Hje8Uo7LY7O6JK3XSNJmesGlsP8Q==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-5.3.5.tgz",
+      "integrity": "sha512-mcTlXEiva8pSMdNEzeV3C1KyBHk7Sn2Pe46U1Uwo53dCuQqdJIK0bEJrIPs8W4/RqJquKIsC8Y1h7+aqOl8ccA==",
       "requires": {
         "@juggle/resize-observer": "^3.3.1",
         "can-use-dom": "^0.1.0",

src/PlannerApp.vue

@@ -56,6 +56,7 @@ import { MutationTypes } from "@/store/Mutations";
 import { EvenementStateJSON } from "@/store/State";
 import Header, { HeaderLink } from "@/components/Utils/Header.vue";
 import cFooter from "@/components/Utils/Footer.vue";
+import { ActionTypes } from "./store/Actions";
 
 const API_URL = process.env.VUE_APP_API_URL;
 
@@ -178,7 +179,7 @@ export default defineComponent({
         if (content.method === "toast") {
           toast({ html: content.payload });
         } else {
-          this.$store.commit(content.method, JSON.parse(content.payload));
+          this.$store.dispatch(ActionTypes.commitRemote, content);
         }
       }
     },
@@ -353,12 +354,18 @@ export default defineComponent({
       this.displayExplanation(data.explanation);
 
       // Remove previous timeslot assignement
-      this.$store.commit(MutationTypes.clearBenevole2Creneau, undefined);
+      this.$store.dispatch(ActionTypes.superCommit, {
+        mutation: MutationTypes.clearBenevole2Creneau,
+        payload: undefined,
+      });
       // Add new timeslot assignement
       for (const pair of data.assignements) {
-        this.$store.commit(MutationTypes.addBenevole2Creneau, {
-          creneauId: pair.slotId,
-          benevoleId: pair.volonteerId,
+        this.$store.dispatch(ActionTypes.superCommit, {
+          mutation: MutationTypes.addBenevole2Creneau,
+          payload: {
+            creneauId: pair.slotId,
+            benevoleId: pair.volonteerId,
+          },
         });
       }
     },

src/components/EditeurBenevole.vue

@@ -94,6 +94,7 @@ import checkbox from "@/components/Form/checkBox.vue";
 import { defineComponent, PropType } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
+import { ActionTypes } from "@/store/Actions";
 
 export default defineComponent({
   name: "EditeurBenevole",
@@ -141,10 +142,13 @@ export default defineComponent({
     },
     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,
+        this.$store.dispatch(ActionTypes.superCommit, {
+          mutation: MutationTypes.editBenevole,
+          payload: {
+            id: this.benevole.id,
+            field: k,
+            value: value,
+          },
         });
       }
     },

src/components/EditeurCompetence.vue

@@ -66,6 +66,7 @@ import checkbox from "./Form/checkBox.vue";
 import { defineComponent, PropType } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import "@/assets/css/editor-panel.css";
+import { ActionTypes } from "@/store/Actions";
 
 export default defineComponent({
   name: "EditeurCompetence",
@@ -74,8 +75,6 @@ export default defineComponent({
   data() {
     return {};
   },
-  watch: {},
-  computed: {},
   methods: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     inputListener(event: any, field: keyof Competence) {
@@ -87,10 +86,13 @@ export default defineComponent({
     },
     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,
+        this.$store.dispatch(ActionTypes.superCommit, {
+          mutation: MutationTypes.editConstraint,
+          payload: {
+            id: this.competence.id,
+            field: k,
+            value: value,
+          },
         });
       }
     },

src/components/EditeurCreneau.vue

@@ -153,7 +153,7 @@ import chipsInput from "@/components/Form/SelectChipInput.vue";
 import DatePicker from "@/components/Form/date-picker.vue";
 import checkbox from "./Form/checkBox.vue";
 import dayjs from "dayjs";
-
+import commit from "@/mixins/commit";
 import "@/assets/css/editor-panel.css";
 import { MutationTypes } from "@/store/Mutations";
 import Benevole from "@/models/Benevole";
@@ -168,6 +168,7 @@ export default defineComponent({
       type: Object as PropType<Creneau>,
     },
   },
+  mixins: [commit],
   data: function () {
     return {
       jour: "",
@@ -345,7 +346,7 @@ export default defineComponent({
         return false;
       }
     },
-    updateDates: function (): void {
+    updateDates(): void {
       if (this.creneau && this.validDuree && this.validStart) {
         if (Math.abs(this.startDate.getTime() - this.creneau.start.getTime()) > 1000)
           this.updateCreneau("start", this.startDate);
@@ -365,14 +366,14 @@ export default defineComponent({
     },
     addBenevole2Creneau(id: number) {
       if (this.creneau)
-        this.$store.commit(MutationTypes.addBenevole2Creneau, {
+        this.commit(MutationTypes.addBenevole2Creneau, {
           creneauId: this.creneau.id,
           benevoleId: id,
         });
     },
     removeBenevole2Creneau(id: number) {
       if (this.creneau)
-        this.$store.commit(MutationTypes.removeBenevole2Creneau, {
+        this.commit(MutationTypes.removeBenevole2Creneau, {
           creneauId: this.creneau.id,
           benevoleId: id,
         });

src/components/Utils/ManageRegistration.vue

@@ -63,11 +63,13 @@ import { defineComponent } from "vue";
 
 import dots from "@/components/Utils/Dots.vue";
 import { MutationTypes } from "@/store/Mutations";
+import commit from "@/mixins/commit";
 
 const API_URL = process.env.VUE_APP_API_URL;
 
 export default defineComponent({
   components: { dots },
+  mixins: [commit],
   data() {
     return {
       inscriptions: [] as Array<BenevoleJSON>,
@@ -98,10 +100,7 @@ export default defineComponent({
     },
     importSelected() {
       for (const benevole of this.selectedInscriptions) {
-        this.$store.commit(
-          MutationTypes.addBenevole,
-          Benevole.fromJSON({ ...benevole, id: undefined })
-        );
+        this.commit(MutationTypes.addBenevole, Benevole.fromJSON({ ...benevole, id: undefined }));
       }
       this.deleteSelected();
     },

src/mixins/ImportJsonState.ts

@@ -2,7 +2,8 @@ import Benevole from "@/models/Benevole";
 import Competence from "@/models/Competence";
 import Creneau from "@/models/Creneau";
 import Evenement from "@/models/Evenement";
-import { MutationTypes } from "@/store/Mutations";
+import { ActionTypes } from "@/store/Actions";
+import { Mutations, MutationTypes } from "@/store/Mutations";
 import { EvenementStateJSON } from "@/store/State";
 import { Ressource } from "jc-timeline";
 import { defineComponent } from "vue";
@@ -11,13 +12,16 @@ const keyofEvent: Array<keyof Evenement> = ["name", "uuid", "start", "end"];
 
 export default defineComponent({
   methods: {
+    commit<K extends keyof Mutations>(key: K, payload: Parameters<Mutations[K]>[1]): void {
+      this.$store.dispatch(ActionTypes.superCommit, { mutation: key, payload });
+    },
     importJsonState(obj: EvenementStateJSON, preserve = false) {
       // Remove previous content and load the main event title
       if (preserve == false) {
-        this.$store.commit(MutationTypes.resetState, undefined);
+        this.commit(MutationTypes.resetState, undefined);
         const e = Evenement.fromJSON(obj.evenement);
         for (const k of keyofEvent) {
-          this.$store.commit(MutationTypes.editEvenement, {
+          this.commit(MutationTypes.editEvenement, {
             field: k,
             value: e[k],
           });
@@ -25,11 +29,11 @@ export default defineComponent({
       }
       // Import constraint
       obj.competences.forEach((c) => {
-        this.$store.commit(MutationTypes.addConstraint, Competence.fromJSON(c));
+        this.commit(MutationTypes.addConstraint, Competence.fromJSON(c));
       });
       // Import Benevoles
       obj.benevoles.forEach((b) => {
-        this.$store.commit(MutationTypes.addBenevole, Benevole.fromJSON(b));
+        this.commit(MutationTypes.addBenevole, Benevole.fromJSON(b));
       });
       // Import creneau group
       const dict: { [k: string]: Ressource } = {};
@@ -51,18 +55,18 @@ export default defineComponent({
       });
       // Push the items to the store
       creneauGroups.forEach((r, pos) => {
-        this.$store.commit(MutationTypes.addCreneauGroupAt, { r, pos });
+        this.commit(MutationTypes.addCreneauGroupAt, { r, pos });
       });
 
       // Import Creneau
       for (const c of obj.creneaux) {
         const creneau = Creneau.fromJSON(c);
-        this.$store.commit(MutationTypes.addCreneau, creneau);
+        this.commit(MutationTypes.addCreneau, creneau);
         // add the creneau to the corresponding benevole
         for (const id of creneau.benevoleIdList) {
           const b = this.$store.getters.getBenevoleById(id);
           if (b) {
-            this.$store.commit(MutationTypes.editBenevole, {
+            this.commit(MutationTypes.editBenevole, {
               id: id,
               field: "creneauIdList",
               value: Array.from(new Set([...b.creneauIdList, creneau.id])),

src/mixins/commit.ts

@@ -0,0 +1,11 @@
+import { ActionTypes } from "@/store/Actions";
+import { Mutations } from "@/store/Mutations";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  methods: {
+    commit<K extends keyof Mutations>(key: K, payload: Parameters<Mutations[K]>[1]): void {
+      this.$store.dispatch(ActionTypes.superCommit, { mutation: key, payload });
+    },
+  },
+});

src/store/Actions.ts

@@ -1,15 +1,38 @@
 import { ActionTree, ActionContext } from "vuex";
 import { State } from "./State";
 import { Mutations, MutationTypes } from "./Mutations";
-import Creneau, { ICreneau } from "@/models/Creneau";
-import SockJS from "sockjs-client";
-import Stomp from "stompjs";
+import Creneau from "@/models/Creneau";
 import PlanningUpdateMessage from "@/models/messages/PlanningUpdateMessage";
+import Benevole from "@/models/Benevole";
+import Competence from "@/models/Competence";
+import { IRessource, Ressource } from "jc-timeline";
 
 export enum ActionTypes {
   superCommit = "superComit",
+  commitRemote = "commitRemote",
 }
 
+const RAW_PAYLOAD = [
+  MutationTypes.addBenevole2Creneau,
+  MutationTypes.removeBenevole2Creneau,
+  MutationTypes.reorderCreneauGroup,
+  MutationTypes.removeBenevole,
+  MutationTypes.removeConstraint,
+  MutationTypes.removeCreneau,
+  MutationTypes.removeCreneauGroup,
+  MutationTypes.editBenevole,
+  MutationTypes.editConstraint,
+  MutationTypes.editCreneau,
+  MutationTypes.editCreneauGroup,
+  MutationTypes.editEvenement,
+];
+const JSON_PAYLOAD = [
+  MutationTypes.addBenevole,
+  MutationTypes.addConstraint,
+  MutationTypes.addCreneau,
+  MutationTypes.addCreneauGroup,
+];
+
 type AugmentedActionContext = {
   commit<K extends keyof Mutations>(
     key: K,
@@ -22,6 +45,7 @@ export interface Actions {
     context: AugmentedActionContext,
     payload: { mutation: K; payload: Parameters<Mutations[K]>[1] }
   ): void;
+  [ActionTypes.commitRemote](context: AugmentedActionContext, payload: PlanningUpdateMessage): void;
 }
 
 export const actions: ActionTree<State, State> & Actions = {
@@ -33,9 +57,49 @@ export const actions: ActionTree<State, State> & Actions = {
         method: payload.mutation,
         user: context.state.username,
         uuid: context.state.evenement.uuid,
-        payload: JSON.stringify(payload.payload),
+        payload: "",
       };
-      client.send("/app/notify", {}, JSON.stringify(body));
+      if (RAW_PAYLOAD.includes(payload.mutation)) {
+        body.payload = JSON.stringify(payload.payload);
+      }
+      if (JSON_PAYLOAD.includes(payload.mutation)) {
+        const content = payload.payload as Benevole | Competence | Creneau | Ressource;
+        body.payload = JSON.stringify(content.toJSON());
+      }
+      if (payload.mutation == MutationTypes.addCreneauGroupAt) {
+        const content = payload.payload as { r: Ressource; pos: number };
+        body.payload = JSON.stringify({ r: content.r.toJSON(), pos: content.pos });
+      }
+      if (body.payload != "") client.send("/app/notify", {}, JSON.stringify(body));
+    }
+  },
+  [ActionTypes.commitRemote](context, data) {
+    if (data.method != "toast" && data.uuid == context.state.evenement.uuid) {
+      // Handle mutations that have dedicated JSON parser
+      if (data.method == MutationTypes.addBenevole)
+        context.commit(data.method, Benevole.fromJSON(JSON.parse(data.payload)));
+      if (data.method == MutationTypes.addConstraint)
+        context.commit(data.method, Competence.fromJSON(JSON.parse(data.payload)));
+      if (data.method == MutationTypes.addCreneau)
+        context.commit(data.method, Creneau.fromJSON(JSON.parse(data.payload)));
+      if (data.method == MutationTypes.addCreneauGroup)
+        context.commit(data.method, new Ressource(JSON.parse(data.payload)));
+      if (data.method == MutationTypes.addCreneauGroupAt) {
+        const obj: { r: IRessource; pos: number } = JSON.parse(data.payload);
+        context.commit(data.method, { r: new Ressource(obj.r), pos: obj.pos });
+      }
+      // Handle Mutation that manipulate Dates
+      if ([MutationTypes.editCreneau, MutationTypes.editEvenement].includes(data.method)) {
+        const content: Parameters<
+          Mutations[MutationTypes.editEvenement | MutationTypes.editCreneau]
+        >[1] = JSON.parse(data.payload);
+        if (content.field == "end" || content.field == "start") {
+          content.value = new Date(content.value as string);
+        }
+        context.commit(data.method, content);
+      } else if (RAW_PAYLOAD.includes(data.method)) {
+        context.commit(data.method, JSON.parse(data.payload));
+      }
     }
   },
 };

src/views/BenevoleManager.vue

@@ -53,6 +53,7 @@ import Benevole from "@/models/Benevole";
 import csv from "@/utils/csv";
 import dayjs from "dayjs";
 import Toast from "@/utils/Toast";
+import commit from "@/mixins/commit";
 
 const csvDefaultcolumn = "id,prenom,nom,telephone,email,commentaire";
 const navOption = [
@@ -113,6 +114,7 @@ const columns: Array<DataTableColumn<BenevoleTableObject>> = [
 ];
 export default defineComponent({
   name: "EditeurCreneau",
+  mixins: [commit],
   components: {
     DataTable,
     EditeurBenevole,
@@ -204,11 +206,11 @@ export default defineComponent({
     },
     createBenevole() {
       const temp = Benevole.fromObject({ name: "Benevole i", surname: "" });
-      this.$store.commit(MutationTypes.addBenevole, temp);
+      this.commit(MutationTypes.addBenevole, temp);
       this.currentBenevole = temp;
     },
     deleteBenevole(payload: Benevole) {
-      this.$store.commit(MutationTypes.removeBenevole, payload.id);
+      this.commit(MutationTypes.removeBenevole, payload.id);
       this.currentBenevole = undefined;
     },
     onRowClick(row: { id: number }) {
@@ -254,7 +256,7 @@ export default defineComponent({
               if (c == undefined) {
                 Toast({ html: "Compétence inconnue: " + key, classes: "warning" });
                 c = Competence.fromObject({ name: key, description: "" });
-                this.$store.commit(MutationTypes.addConstraint, c);
+                this.commit(MutationTypes.addConstraint, c);
               }
               if (c) {
                 competencesMap[key] = c;
@@ -276,7 +278,7 @@ export default defineComponent({
                 email: item.email,
                 comment: item.commentaire,
               });
-              this.$store.commit(MutationTypes.addBenevole, b);
+              this.commit(MutationTypes.addBenevole, b);
             } else {
               let map: Array<{ k: string; v: keyof Benevole }> = [
                 { k: "prenom", v: "name" },
@@ -286,7 +288,7 @@ export default defineComponent({
                 { k: "email", v: "email" },
               ];
               map.forEach((o) =>
-                this.$store.commit(MutationTypes.editBenevole, {
+                this.commit(MutationTypes.editBenevole, {
                   id: (b as Benevole).id,
                   field: o.v,
                   value: item[o.k],
@@ -299,7 +301,7 @@ export default defineComponent({
                 competenceIdList.push(competencesMap[key].id);
               }
             }
-            this.$store.commit(MutationTypes.editBenevole, {
+            this.commit(MutationTypes.editBenevole, {
               id: b.id,
               field: "competenceIdList",
               value: competenceIdList,

src/views/CompetenceManager.vue

@@ -23,6 +23,7 @@ import EditeurContrainte from "@/components/EditeurCompetence.vue";
 import DataTable, { DataTableData, DataTableColumn } from "@/components/Utils/DataTable.vue";
 import { defineComponent } from "vue";
 import { MutationTypes } from "@/store/Mutations";
+import commit from "@/mixins/commit";
 
 type CompetenceTableObject = {
   id: number;
@@ -68,6 +69,7 @@ const columns: Array<DataTableColumn<CompetenceTableObject>> = [
 export default defineComponent({
   name: "CompetenceManager",
   components: { "data-table": DataTable, EditeurContrainte },
+  mixins: [commit],
   data: () => ({
     columns,
     currentCompetence: undefined as Competence | undefined,
@@ -97,11 +99,11 @@ export default defineComponent({
   methods: {
     createCompetence() {
       const comp = Competence.fromObject({ name: "Nouvelle contrainte", description: "" });
-      this.$store.commit(MutationTypes.addConstraint, comp);
+      this.commit(MutationTypes.addConstraint, comp);
       this.currentCompetence = comp;
     },
     deleteCompetence(payload: Competence) {
-      this.$store.commit(MutationTypes.removeConstraint, payload.id);
+      this.commit(MutationTypes.removeConstraint, payload.id);
       this.currentCompetence = undefined;
     },
     onRowClick(row: { id: number }) {

src/views/Evenement.vue

@@ -119,11 +119,12 @@ import EvenementDataTable from "@/components/EvenementDataTable.vue";
 import updatePlanningVersions from "@/mixins/updatePlanningVersions";
 import fetchPlanningVersion from "@/mixins/fetchPlanningVersion";
 import Toast from "@/utils/Toast";
+import commit from "@/mixins/commit";
 
 const API_URL = process.env.VUE_APP_API_URL;
 
 export default defineComponent({
-  mixins: [updatePlanningVersions, fetchPlanningVersion],
+  mixins: [updatePlanningVersions, fetchPlanningVersion, commit],
   components: { styledInput, datepicker, EvenementDataTable },
   data() {
     return {
@@ -135,7 +136,7 @@ export default defineComponent({
   watch: {
     start(val: Dayjs, oldval) {
       if (oldval && !val.isSame(this.evenement.startingDate)) {
-        this.$store.commit(MutationTypes.editEvenement, {
+        this.commit(MutationTypes.editEvenement, {
           field: "start",
           value: val.toDate(),
         });
@@ -143,7 +144,7 @@ export default defineComponent({
     },
     end(val: Dayjs, oldval) {
       if (oldval && !val.isSame(this.evenement.endingDate, "minutes")) {
-        this.$store.commit(MutationTypes.editEvenement, {
+        this.commit(MutationTypes.editEvenement, {
           field: "end",
           value: val.subtract(1, "h").endOf("h").toDate(),
         });
@@ -193,8 +194,8 @@ export default defineComponent({
             this.evenement.name
         )
       ) {
-        this.$store.commit(MutationTypes.editEvenement, { field: "uuid", value: uuidv4() });
-        this.$store.commit(MutationTypes.editEvenement, {
+        this.commit(MutationTypes.editEvenement, { field: "uuid", value: uuidv4() });
+        this.commit(MutationTypes.editEvenement, {
           field: "name",
           value: "Copie de " + this.evenement.name,
         });
@@ -209,7 +210,7 @@ export default defineComponent({
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     inputListener(event: any, field: keyof Evenement) {
-      this.$store.commit(MutationTypes.editEvenement, {
+      this.commit(MutationTypes.editEvenement, {
         field: field,
         value: event.target.value,
       });
@@ -241,7 +242,7 @@ export default defineComponent({
       const toBeRemoved = this.$store.state.creneauList.filter((c) => max < c.start || c.end < min);
 
       for (let elt of toBeRemoved) {
-        this.$store.commit(MutationTypes.removeCreneau, elt.id);
+        this.commit(MutationTypes.removeCreneau, elt.id);
       }
     },
   },

src/views/Planning.vue

@@ -74,6 +74,7 @@ import toast from "@/utils/Toast";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import ContextMenu, { MenuAction } from "@/components/Utils/ContextMenu.vue";
+import commit from "@/mixins/commit";
 dayjs.locale("fr");
 
 type changePayload = {
@@ -87,6 +88,7 @@ export default defineComponent({
     EditeurLigne,
     ContextMenu,
   },
+  mixins: [commit],
   data() {
     return {
       contextActions: [] as Array<MenuAction>,
@@ -149,7 +151,7 @@ export default defineComponent({
           isMeal: false,
           fixedAttendee: false,
         });
-        this.$store.commit(MutationTypes.addCreneau, creneau);
+        this.commit(MutationTypes.addCreneau, creneau);
 
         this.currentCreneau = this.$store.getters.getCreneauById(creneau.id);
         this.currentCreneauGroup = undefined;
@@ -167,7 +169,7 @@ export default defineComponent({
       this.currentCreneauGroup = this.timeline.addRessource(ressource, pos);
       this.currentCreneauGroup.selected = true;
 
-      this.$store.commit(MutationTypes.addCreneauGroupAt, {
+      this.commit(MutationTypes.addCreneauGroupAt, {
         pos: this.timeline.getRessources().indexOf(this.currentCreneauGroup),
         r: this.currentCreneauGroup,
       });
@@ -179,7 +181,7 @@ export default defineComponent({
       });
       newCreneau.title = "Copie de " + newCreneau.title;
       this.timeline.addEvent(newCreneau.event);
-      this.$store.commit(MutationTypes.addCreneau, newCreneau);
+      this.commit(MutationTypes.addCreneau, newCreneau);
       this.currentCreneau = newCreneau;
     },
     duplicateCurrentRessource() {
@@ -196,12 +198,10 @@ export default defineComponent({
     },
     deleteRessource(ressource: Ressource): void {
       const contentRemoved = this.timeline.removeRessourceById(ressource.id);
-      contentRemoved.ressources.map((r) =>
-        this.$store.commit(MutationTypes.removeCreneauGroup, r.id)
-      );
+      contentRemoved.ressources.map((r) => this.commit(MutationTypes.removeCreneauGroup, r.id));
       contentRemoved.items.map((e) => {
         const crenenau = this.$store.getters.getCreneauById(e.id);
-        if (crenenau) this.$store.commit(MutationTypes.removeCreneau, crenenau.id);
+        if (crenenau) this.commit(MutationTypes.removeCreneau, crenenau.id);
       });
     },
     deleteCurrentRessource(): void {
@@ -209,7 +209,7 @@ export default defineComponent({
     },
     deleteCreneau(creneau: Creneau) {
       this.timeline.removeEventById(creneau.id);
-      this.$store.commit(MutationTypes.removeCreneau, creneau.id);
+      this.commit(MutationTypes.removeCreneau, creneau.id);
     },
     deleteCurrentCreneau(): void {
       if (this.currentCreneau) this.deleteCreneau(this.currentCreneau);
@@ -238,17 +238,17 @@ export default defineComponent({
 
       for (let index = 0; index < jcEvents.length; index++) {
         const element = jcEvents[index];
-        this.$store.commit(MutationTypes.editCreneau, {
+        this.commit(MutationTypes.editCreneau, {
           id: element.id,
           field: "start",
           value: element.start,
         });
-        this.$store.commit(MutationTypes.editCreneau, {
+        this.commit(MutationTypes.editCreneau, {
           id: element.id,
           field: "end",
           value: element.end,
         });
-        this.$store.commit(MutationTypes.editCreneau, {
+        this.commit(MutationTypes.editCreneau, {
           id: element.id,
           field: "ressourceId",
           value: element.ressourceId,
@@ -257,7 +257,7 @@ export default defineComponent({
       }
     },
     ressourceChangeHandler(ev: CustomEvent<{ ressources: Array<Ressource> }>) {
-      this.$store.commit(
+      this.commit(
         MutationTypes.reorderCreneauGroup,
         ev.detail.ressources.map((o) => o.id)
       );
@@ -273,11 +273,11 @@ export default defineComponent({
         if (r) {
           payload.value = r[payload.field];
         }
-        this.$store.commit(MutationTypes.editCreneauGroup, payload);
+        this.commit(MutationTypes.editCreneauGroup, payload);
       }
     },
     updateCreneau<K extends keyof Creneau>(payload: { id: string; field: K; value: Creneau[K] }) {
-      this.$store.commit(MutationTypes.editCreneau, payload);
+      this.commit(MutationTypes.editCreneau, payload);
       const creneau = this.$store.getters.getCreneauById(payload.id);
       if (creneau) {
         this.timeline.removeEventById(payload.id);
@@ -410,7 +410,7 @@ export default defineComponent({
     this.timeline.setAttribute("start", this.start.toISOString());
     this.timeline.setAttribute("end", this.end.toISOString());
     this.timeline.addRessources(this.creneauGroupList);
-    this.$store.commit(
+    this.commit(
       MutationTypes.reorderCreneauGroup,
       this.timeline.getRessources().map((o) => o.id)
     );