Commit 2172f79f authored by janis.streib's avatar janis.streib 🦉
Browse files

UPD: own implementation of vuex undo redo with shared mutations

parent d92b8512
......@@ -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",
......
......@@ -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": {
......
......@@ -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>
......
......@@ -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) => {
......
// 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);
}
}
});
},
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment