move mutations and implement supercommit

src/PlannerApp.vue

@@ -52,7 +52,7 @@ import {
 } from "@/models/SolverInput";
 import updatePlanningVersions from "@/mixins/updatePlanningVersions";
 import importJsonState from "@/mixins/ImportJsonState";
-import { MutationTypes } from "@/views/Mutations";
+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";
@@ -73,7 +73,6 @@ export default defineComponent({
   mixins: [updatePlanningVersions, importJsonState],
   data() {
     return {
-      stompClient: Stomp.over(new SockJS("/ws")),
       optimisationInProgress: false,
       explanation: "",
       showExplanation: false,
@@ -82,6 +81,9 @@ export default defineComponent({
     };
   },
   computed: {
+    stompClient(): Stomp.Client | null {
+      return this.$store.state.stompClient;
+    },
     showFooter(): boolean {
       return this.$route.name != "Planning";
     },
@@ -94,19 +96,20 @@ export default defineComponent({
   },
   watch: {
     uuid(val: string, old: string) {
-      if (old && this.stompClient.connected) this.stompClient.unsubscribe("/planning/" + old);
+      if (old && this.stompClient?.connected) this.stompClient.unsubscribe("/planning/" + old);
       this.subscribe(val);
     },
   },
   beforeMount() {
-    this.stompClient.connect(
+    this.$store.commit(MutationTypes.setStompClient, Stomp.over(new SockJS("/ws")));
+    this.stompClient?.connect(
       {},
       () => {
-        this.stompClient.subscribe("/toast", (msg) => {
+        this.stompClient?.subscribe("/toast", (msg) => {
           var content = JSON.parse(msg.body) as { text: string; type: string };
           toast({ html: content.text, classes: content.type });
         });
-        this.stompClient.subscribe("/user/queue/query", this.handleStompQuery);
+        this.stompClient?.subscribe("/user/queue/query", this.handleStompQuery);
         this.subscribe(this.uuid);
       },
       (error) => {
@@ -155,7 +158,7 @@ export default defineComponent({
   },
   methods: {
     subscribe(uuid: string) {
-      if (uuid && this.stompClient.connected) {
+      if (uuid && this.stompClient?.connected) {
         this.stompClient.subscribe("/planning/" + uuid, (msg) => this.handlePlanningChange(msg));
         this.stompClient.send(
           "/app/notify",
@@ -188,7 +191,7 @@ export default defineComponent({
           destination: content.destination,
           payload: zipEncode(JSON.stringify(this.$store.getters.getJSONEvenementState)),
         };
-        this.stompClient.send("/app/response", {}, JSON.stringify(response));
+        this.stompClient?.send("/app/response", {}, JSON.stringify(response));
       }
       if (content.type == "planningData" && content.uuid == this.uuid) {
         const payload = JSON.parse(decodeUnzip(content.payload)) as EvenementStateJSON;

src/components/EditeurBenevole.vue

@@ -92,7 +92,7 @@ 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 "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
 
 export default defineComponent({

src/components/EditeurCompetence.vue

@@ -64,7 +64,7 @@ import Competence from "@/models/Competence";
 import styledInput from "./Form/Input.vue";
 import checkbox from "./Form/checkBox.vue";
 import { defineComponent, PropType } from "vue";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import "@/assets/css/editor-panel.css";
 
 export default defineComponent({

src/components/EditeurCreneau.vue

@@ -155,7 +155,7 @@ import checkbox from "./Form/checkBox.vue";
 import dayjs from "dayjs";
 
 import "@/assets/css/editor-panel.css";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import Benevole from "@/models/Benevole";
 import Competence from "@/models/Competence";
 

src/components/Utils/ManageRegistration.vue

@@ -62,7 +62,7 @@ import Benevole, { BenevoleJSON } from "@/models/Benevole";
 import { defineComponent } from "vue";
 
 import dots from "@/components/Utils/Dots.vue";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 
 const API_URL = process.env.VUE_APP_API_URL;
 

src/mixins/ImportJsonState.ts

@@ -2,7 +2,7 @@ import Benevole from "@/models/Benevole";
 import Competence from "@/models/Competence";
 import Creneau from "@/models/Creneau";
 import Evenement from "@/models/Evenement";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import { EvenementStateJSON } from "@/store/State";
 import { Ressource } from "jc-timeline";
 import { defineComponent } from "vue";

src/mixins/updatePlanningVersions.ts

@@ -1,4 +1,4 @@
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import { defineComponent } from "vue";
 
 const API_URL = process.env.VUE_APP_API_URL;

src/models/messages/PlanningUpdateMessage.ts

@@ -1,4 +1,4 @@
-import { Mutations } from "@/views/Mutations";
+import { Mutations } from "@/store/Mutations";
 
 export type PlanningUpdateMessage = {
   uuid: string;

src/store/Actions.ts

@@ -1,10 +1,13 @@
 import { ActionTree, ActionContext } from "vuex";
 import { State } from "./State";
-import { Mutations, MutationTypes } from "../views/Mutations";
+import { Mutations, MutationTypes } from "./Mutations";
 import Creneau, { ICreneau } from "@/models/Creneau";
+import SockJS from "sockjs-client";
+import Stomp from "stompjs";
+import PlanningUpdateMessage from "@/models/messages/PlanningUpdateMessage";
 
 export enum ActionTypes {
-  NEW_CRENEAU = "NEW_CRENEAU",
+  superCommit = "superComit",
 }
 
 type AugmentedActionContext = {
@@ -15,11 +18,24 @@ type AugmentedActionContext = {
 } & Omit<ActionContext<State, State>, "commit">;
 
 export interface Actions {
-  [ActionTypes.NEW_CRENEAU]({ commit }: AugmentedActionContext, payload: ICreneau): void;
+  [ActionTypes.superCommit]<K extends keyof Mutations>(
+    context: AugmentedActionContext,
+    payload: { mutation: K; payload: Parameters<Mutations[K]>[1] }
+  ): void;
 }
 
 export const actions: ActionTree<State, State> & Actions = {
-  [ActionTypes.NEW_CRENEAU]({ commit }, payload) {
-    commit(MutationTypes.addCreneau, new Creneau(payload));
+  [ActionTypes.superCommit](context, payload) {
+    context.commit(payload.mutation, payload.payload);
+    const client = context.state.stompClient;
+    if (client?.connected) {
+      const body: PlanningUpdateMessage = {
+        method: payload.mutation,
+        user: context.state.username,
+        uuid: context.state.evenement.uuid,
+        payload: JSON.stringify(payload.payload),
+      };
+      client.send("/app/notify", {}, JSON.stringify(body));
+    }
   },
 };

src/views/Mutations.ts → src/store/Mutations.ts

@@ -5,7 +5,9 @@ import Evenement from "@/models/Evenement";
 import EvenementVersion from "@/models/EvenementVersion";
 import { Ressource } from "jc-timeline";
 import { MutationTree } from "vuex";
-import { State } from "../store/State";
+
+import { Client } from "stompjs";
+import { State } from "./State";
 
 export enum MutationTypes {
   resetState = "resetState",
@@ -39,6 +41,7 @@ export enum MutationTypes {
   refreshSavedPlanning = "refreshSavedPlanning",
 
   setUsername = "setUsername",
+  setStompClient = "setStompClient",
 }
 interface CreneauPairing {
   creneauId: string;
@@ -93,6 +96,8 @@ export type Mutations<S = State> = {
   [MutationTypes.refreshSavedPlanning](state: S, payload: Array<EvenementVersion>): void;
 
   [MutationTypes.setUsername](state: S, payload: string): void;
+
+  [MutationTypes.setStompClient](state: S, payload: Client): void;
 };
 export const mutations: MutationTree<State> & Mutations = {
   [MutationTypes.resetState](state): void {
@@ -237,4 +242,7 @@ export const mutations: MutationTree<State> & Mutations = {
   [MutationTypes.setUsername](state, payload) {
     state.username = payload;
   },
+  [MutationTypes.setStompClient](state, payload) {
+    state.stompClient = payload;
+  },
 };

src/store/State.ts

@@ -1,5 +1,6 @@
 import Evenement, { IEvenement } from "@/models/Evenement";
 import EvenementVersion from "@/models/EvenementVersion";
+import Stomp from "stompjs";
 import { Ressource, RessourceJSON } from "jc-timeline";
 import Benevole, { BenevoleJSON } from "../models/Benevole";
 import Competence, { ICompetence } from "../models/Competence";
@@ -22,5 +23,6 @@ export const state = {
   history: [] as Array<EvenementVersion>,
   savedPlanning: [] as Array<EvenementVersion>,
   username: "",
+  stompClient: null as null | Stomp.Client,
 };
 export type State = typeof state;

src/store/Store.ts

@@ -1,7 +1,7 @@
 import { createStore, Store as VuexStore, CommitOptions, DispatchOptions } from "vuex";
 import { State, state } from "./State";
 import { Getters, getters } from "./Getters";
-import { Mutations, mutations } from "../views/Mutations";
+import { Mutations, mutations } from "./Mutations";
 import { Actions, actions } from "./Actions";
 
 export const store = createStore({

src/views/BenevoleManager.vue

@@ -48,7 +48,7 @@ import DataTable, {
   DataTableData,
 } from "@/components/Utils/DataTable.vue";
 import { defineComponent } from "vue";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import Benevole from "@/models/Benevole";
 import csv from "@/utils/csv";
 import dayjs from "dayjs";

src/views/CompetenceManager.vue

@@ -22,7 +22,7 @@ import Competence from "@/models/Competence";
 import EditeurContrainte from "@/components/EditeurCompetence.vue";
 import DataTable, { DataTableData, DataTableColumn } from "@/components/Utils/DataTable.vue";
 import { defineComponent } from "vue";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 
 type CompetenceTableObject = {
   id: number;

src/views/Evenement.vue

@@ -110,7 +110,7 @@
 import { Dayjs } from "dayjs";
 import { v4 as uuidv4 } from "uuid";
 import { defineComponent } from "vue";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import Evenement from "@/models/Evenement";
 import EvenementVersion from "@/models/EvenementVersion";
 import styledInput from "@/components/Form/Input.vue";

src/views/Planning.vue

@@ -68,7 +68,7 @@ import EditeurCreneau from "@/components/EditeurCreneau.vue";
 import EditeurLigne from "@/components/EditeurCreneauGroup.vue";
 
 import Creneau from "@/models/Creneau";
-import { MutationTypes } from "@/views/Mutations";
+import { MutationTypes } from "@/store/Mutations";
 import toast from "@/utils/Toast";
 
 import dayjs from "dayjs";