UPD: own implementation of vuex undo redo with shared mutations

frontend/package-lock.json

@@ -15809,12 +15809,6 @@
       "resolved": "https://registry.npmjs.org/vuex-shared-mutations/-/vuex-shared-mutations-1.0.2.tgz",
       "integrity": "sha512-tu+rN4DAtZQiRAHLms6OtYdtoK60sKD0CXAP1l+N4lB1rYxJC/cDVGsjXGB/A4p7qIUVb4Mzr8C2Pg1wZlrikA=="
     },
-    "vuex-undo-redo": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/vuex-undo-redo/-/vuex-undo-redo-1.1.4.tgz",
-      "integrity": "sha512-IfuizJGwCxOa9ZDmLRuWafLBnUYXFhDbbO676oemyz9Kw3ncjo/QNH6SfEEZVOJOrZS9vdiEs5c47qBXPKrWTQ==",
-      "dev": true
-    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

frontend/package.json

@@ -48,7 +48,6 @@
     "style-loader": "^0.23.1",
     "vue-loader": "^15.9.1",
     "vue-template-compiler": "^2.6.11",
-    "vuex-undo-redo": "^1.1.4",
     "webpack-cli": "^3.3.11"
   },
   "eslintConfig": {

frontend/src/components/TransactionList.vue

@@ -3,12 +3,12 @@
         <b-button-toolbar justify>
             <b-button-group class="mx-auto">
                 <b-button-group v-b-tooltip title="Rückgängig machen">
-                    <b-button :disabled="canUndo == 0" @click="undo">
+                    <b-button :disabled="!canUndo" @click="undo">
                         <font-awesome-icon icon="undo"></font-awesome-icon>
                     </b-button>
                 </b-button-group>
                 <b-button-group v-b-tooltip title="Wiederherstellen">
-                    <b-button :disabled="canRedo == 0" @click="redo">
+                    <b-button :disabled="!canRedo" @click="redo">
                         <font-awesome-icon icon="redo"></font-awesome-icon>
                     </b-button>
                 </b-button-group>

frontend/src/main.js

@@ -14,14 +14,14 @@ import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'
 
 import './icons'
 
-import sharedMutations from 'vuex-shared-mutations';
-import VuexUndoRedo from 'vuex-undo-redo';
+import sharedMutations from 'vuex-shared-mutations'
+import vuexUndoRedo from './mixins/vuex-undo-redo'
 
 Vue.use(Vuex)
 Vue.mixin(titleMixin)
 Vue.mixin(isMobileMixin)
 Vue.use(BootstrapVue)
-Vue.use(VuexUndoRedo, {ignoreMutations: ['login', 'logout']})
+Vue.use(vuexUndoRedo, {emptyStateMutation: 'emptyState'})
 
 Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker)
 
@@ -42,13 +42,44 @@ const store = new Vuex.Store({
         user: JSON.parse(window.localStorage.getItem('user')),
         token: JSON.parse(window.localStorage.getItem('token')),
         ta_list: JSON.parse(window.localStorage.getItem('ta_list')),
-        netdb_axios_config: netdb_axios_config_tmp
+        netdb_axios_config: netdb_axios_config_tmp,
+        done: JSON.parse(window.localStorage.getItem('done')) || [],
+        undone: JSON.parse(window.localStorage.getItem('undone')) || [],
+        undo_redo_new_mutaion: JSON.parse(window.localStorage.getItem('undo_redo_new_mutation')) || true
     },
     mutations: {
         emptyState(state) {
             state.ta_list = null;
             window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))
         },
+        setUndoRedoNewMutation(state, payload) {
+            state.undo_redo_new_mutaion = payload
+            window.localStorage.setItem('undo_redo_new_mutation', JSON.stringify(state.undo_redo_new_mutaion))
+        },
+        popUndoRedoDone(state) {
+            state.done.pop()
+            window.localStorage.setItem('done', JSON.stringify(state.done))
+        },
+        popUndoRedoUndone(state) {
+            state.undone.pop()
+            window.localStorage.setItem('undone', JSON.stringify(state.undone))
+        },
+        pushUndoRedoDone(state, payload) {
+            state.done.push(payload)
+            window.localStorage.setItem('done', JSON.stringify(state.done))
+        },
+        pushUndoRedoUndone(state, payload) {
+            state.undone.push(payload)
+            window.localStorage.setItem('undone', JSON.stringify(state.undone))
+        },
+        clearUndoRedoDone(state) {
+            state.done = []
+            window.localStorage.setItem('done', JSON.stringify(state.done))
+        },
+        clearUndoRedoUndone(state) {
+            state.undone = []
+            window.localStorage.setItem('undone', JSON.stringify(state.undone))
+        },
         login(state, payload) {
             let user = payload.user
             let token = payload.token
@@ -69,6 +100,12 @@ const store = new Vuex.Store({
             state.user = null
             state.token = null
             state.ta_list = []
+            state.undo_redo_new_mutaion = true
+            state.undone = []
+            state.done = []
+            window.localStorage.removeItem('done')
+            window.localStorage.removeItem('undone')
+            window.localStorage.removeItem('undo_redo_new_mutation')
             window.localStorage.removeItem('user')
             window.localStorage.removeItem('token')
             window.localStorage.removeItem('ta_list')
@@ -106,9 +143,17 @@ const store = new Vuex.Store({
             window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))
         },
     },
-    plugins: [sharedMutations({predicate: ['login', 'logout', 'addTransactionElement', 'removeTransactionElement']})],
+    plugins: [
+        sharedMutations(
+            {
+                predicate:
+                    ['pushUndoRedoUndone', 'popUndoRedoUndone', 'clearUndoRedoUndone', 'setUndoRedoNewMutation', 'clearUndoRedoDone', 'popUndoRedoDone', 'emptyState', 'login', 'logout', 'addTransactionElement', 'removeTransactionElement']
+            }
+        )
+    ],
 })
-
+// Undo-Redo-watched mutations
+const watchedMutations = ['addTransactionElement', 'removeTransactionElement']
 
 Vue.config.errorHandler = function (err, vm, info) {
     // handle error
@@ -159,13 +204,24 @@ ColnameService.getAll().then((response) => {
                 mods_by_name[sysinfo.data.mods[i].name] = sysinfo.data.mods[i]
             }
             Vue.prototype.$sysinfo_mods_by_name = mods_by_name
-            new Vue({
+            let v = new Vue({
                 router,
                 store,
                 render: h => h(App),
                 beforeCreate: function () {
                 }
             }).$mount('#app')
+            if (v.$store) {
+                v.$store.subscribe((mutation, state) => {
+                    if (watchedMutations.indexOf(mutation.type) >= 0) {
+                        v.$store.commit('pushUndoRedoDone', mutation)
+                        if (state.undo_redo_new_mutaion) {
+                            window.console.debug("New mutation")
+                            v.$store.commit('clearUndoRedoUndone')
+                        }
+                    }
+                });
+            }
         }
     )
 }).catch((err) => {

frontend/src/mixins/vuex-undo-redo.js

+// Heavily modified version of
+// https://github.com/anthonygore/vuex-undo-redo
+
+export default {
+    install(Vue, options = {}) {
+        window.console.debug("install")
+        if (!Vue._installedPlugins.find(plugin => plugin.Store)) {
+            throw new Error("VuexUndoRedo plugin must be installed after the Vuex plugin.")
+        }
+        Vue.mixin({
+            computed: {
+                canRedo() {
+                    return this.$store.state.undone.length !== 0
+                },
+                canUndo() {
+                    return this.$store.state.done.length !== 0
+                }
+            },
+            methods: {
+                redo() {
+                    let commit = this.$store.state.undone[this.$store.state.undone.length-1];
+                    this.$store.commit('popUndoRedoUndone');
+                    this.$store.commit('setUndoRedoNewMutation', false);
+                    switch (typeof commit.payload) {
+                        case 'object':
+                            this.$store.commit(`${commit.type}`, Object.assign({}, commit.payload));
+                            break;
+                        default:
+                            this.$store.commit(`${commit.type}`, commit.payload);
+                    }
+                    this.$store.commit('setUndoRedoNewMutation', true);
+                },
+                undo() {
+                    this.$store.commit('pushUndoRedoUndone', this.$store.state.done[this.$store.state.done.length-1])
+                    this.$store.commit('popUndoRedoDone');
+                    this.$store.commit('setUndoRedoNewMutation', false);
+                    this.$store.commit(options.emptyStateMutation);
+                    this.$store.state.done.forEach(mutation => {
+                        switch (typeof mutation.payload) {
+                            case 'object':
+                                this.$store.commit(mutation.type, Object.assign({}, mutation.payload));
+                                break;
+                            default:
+                                this.$store.commit(mutation.type, mutation.payload);
+                        }
+                        this.$store.commit('popUndoRedoDone');
+                    });
+                    this.$store.commit('setUndoRedoNewMutation', true);
+                }
+            }
+        });
+    },
+}