From d80df8c9b616a2ae2b4e68f2e0edd9d5ab3494ae Mon Sep 17 00:00:00 2001
From: Sam Goodger <sam@goodger.nz>
Date: Fri, 11 Sep 2020 23:08:08 +1000
Subject: [PATCH 1/2] Install and configure history plugin

---
 package-lock.json              |  9 +++++++++
 package.json                   |  3 ++-
 src/components/Editor/Meta.vue |  5 ++---
 src/store.js                   | 14 ++++++++++++++
 src/util/vuexMultiHistory.js   | 14 ++++++++++++++
 src/views/Editor.vue           | 21 +++++++++++++++------
 6 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 src/util/vuexMultiHistory.js

diff --git a/package-lock.json b/package-lock.json
index 2941c37e..c29cc33b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16342,6 +16342,15 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
       "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
     },
+    "vuex-multi-history": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/vuex-multi-history/-/vuex-multi-history-3.0.2.tgz",
+      "integrity": "sha512-eUAXuto5ee3dc2Hn0L0LigJZaFde8VQ0U5IVMd4X1hmAeL4IcP+ve3I8eT9E/f2TgqplsA3g8iyIfBF9pLEqUg==",
+      "requires": {
+        "vue": "^2.6.10",
+        "vuex": "^3.1.1"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index ae4472a8..e8149927 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,8 @@
     "vue-router": "^3.1.4",
     "vue-virtual-scroll-list": "^2.3.0",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "vuex-multi-history": "^3.0.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
diff --git a/src/components/Editor/Meta.vue b/src/components/Editor/Meta.vue
index e189b5de..fd8912bc 100644
--- a/src/components/Editor/Meta.vue
+++ b/src/components/Editor/Meta.vue
@@ -125,9 +125,6 @@ export default {
       padding: 0;
       list-style: none;
       display: flex;
-      flex-direction: column;
-      max-height: 40vh;
-      overflow-y: auto;
 
       li {
         margin-right: .5em;
@@ -169,6 +166,8 @@ export default {
         flex-direction: column;
         z-index: 100;
         box-shadow: 0 .2rem 1rem rgba(0,0,0,.2);
+        max-height: 40vh;
+        overflow-y: auto;
 
         li {
           padding: .25rem 1rem;
diff --git a/src/store.js b/src/store.js
index 6cdec569..8b66637c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';
 import { compareVersions } from './util/version';
+import { editorHistory } from '@/util/vuexMultiHistory';
 
 const uuid = require('uuid/v4');
 const config = require('../config');
@@ -9,6 +10,9 @@ const config = require('../config');
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  plugins: [
+    editorHistory.plugin
+  ],
   state: {
     version: null,
     config: null,
@@ -28,6 +32,7 @@ export default new Vuex.Store({
     patreonCount: null,
     editor: {
       sessionId: null,
+      historyEnabled: false,
     },
     verbose: {
       status: 0,
@@ -107,6 +112,8 @@ export default new Vuex.Store({
 
       return compareVersions(state.version, state.editor.metaData.pluginVersion);
     },
+
+    editorHistoryEnabled: state => state.editor.historyEnabled,
   },
 
 
@@ -137,6 +144,7 @@ export default new Vuex.Store({
 
     initEditorData(state, sessionId) {
       state.editor = {
+        ...state.editor,
         sessionId,
         sessions: {},
         sessionList: [],
@@ -398,6 +406,10 @@ export default new Vuex.Store({
       state.editor.save.key = key;
     },
 
+    setEditorHistoryState(state, value) {
+      state.editor.historyEnabled = value;
+    },
+
     setVerboseData(state, { data, status }) {
       state.verbose.status = status;
       if (!data) return;
@@ -486,6 +498,8 @@ export default new Vuex.Store({
       commit('setKnownPermissions', data.knownPermissions);
       commit('setPotentialContexts', data.potentialContexts);
       commit('setTracks', data.tracks);
+
+      commit('setEditorHistoryState', true);
     },
 
     addKnownPermission({ commit }, permission) {
diff --git a/src/util/vuexMultiHistory.js b/src/util/vuexMultiHistory.js
new file mode 100644
index 00000000..24f933d4
--- /dev/null
+++ b/src/util/vuexMultiHistory.js
@@ -0,0 +1,14 @@
+import { VuexMultiHistory } from 'vuex-multi-history';
+
+export const editorHistory = new VuexMultiHistory({
+  debug: true,
+  filter({ type }) {
+    if (!this.store.getters.editorHistoryEnabled) return false;
+    console.log(type);
+    const historyTypes = [
+      'addEditorNode',
+      'addEditorSession'
+    ];
+    return historyTypes.includes(type);
+  },
+});
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index e1ccc3ff..656e7582 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -74,12 +74,12 @@
                 Web Permissions Editor
               </div>
               <div class="buttons">
-<!--                <button>-->
-<!--                  <font-awesome icon="undo" />-->
-<!--                </button>-->
-<!--                <button>-->
-<!--                  <font-awesome icon="redo" />-->
-<!--                </button>-->
+                <button @click="undo" :disabled="!canUndo">
+                  <font-awesome icon="undo" />
+                </button>
+                <button>
+                  <font-awesome icon="redo" />
+                </button>
                 <button @click="saveData" title="Save and generate code">
                   <span v-if="saveStatus !== 'saving'">
                     <font-awesome icon="save" fixed-width />
@@ -214,6 +214,12 @@ export default {
     userVersion() {
       return this.$store.getters.metaData.pluginVersion;
     },
+    history() {
+      return this.$store.history();
+    },
+    canUndo() {
+      return this.history.canUndo();
+    }
   },
 
   created() {
@@ -246,6 +252,9 @@ export default {
     checkVersion(version) {
       return checkVersion(version, this.userVersion);
     },
+    undo() {
+      if (this.canUndo) this.history.undo();
+    }
   },
 };
 </script>

From adee5d4091278c9bc6fd777d9d09a8427408eb13 Mon Sep 17 00:00:00 2001
From: Sam Goodger <sam@goodger.nz>
Date: Sat, 12 Sep 2020 01:04:00 +1000
Subject: [PATCH 2/2] Setup history plugin for Editor undo/redo buttons

---
 src/store.js                 | 13 ++++++-----
 src/util/vuexMultiHistory.js | 24 ++++++++++++++++----
 src/views/Editor.vue         | 44 +++++++++++++++++++++++++++---------
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/store.js b/src/store.js
index 8b66637c..b2679a57 100644
--- a/src/store.js
+++ b/src/store.js
@@ -443,12 +443,12 @@ export default new Vuex.Store({
     getAppData: async ({ commit, dispatch }) => {
       commit('setConfig', config);
       try {
-        const appData = await axios.get(`${config.api_url}/data/all`);
-        commit('setVersion', appData.data.version);
-        commit('setDownloads', appData.data.downloads);
-        commit('setExtensions', appData.data.extensions);
-        commit('setDiscordUserCount', appData.data.discordUserCount);
-        commit('setPatreonCount', appData.data.patreonCount);
+        const { data } = await axios.get(`${config.api_url}/data/all`);
+        commit('setVersion', data.version);
+        commit('setDownloads', data.downloads);
+        commit('setExtensions', data.extensions);
+        commit('setDiscordUserCount', data.discordUserCount);
+        commit('setPatreonCount', data.patreonCount);
       } catch (error) {
         console.error('Error getting data, trying again in 10 seconds...');
         setTimeout(async () => {
@@ -500,6 +500,7 @@ export default new Vuex.Store({
       commit('setTracks', data.tracks);
 
       commit('setEditorHistoryState', true);
+      this.history('editor').clearHistory();
     },
 
     addKnownPermission({ commit }, permission) {
diff --git a/src/util/vuexMultiHistory.js b/src/util/vuexMultiHistory.js
index 24f933d4..0f0f93d4 100644
--- a/src/util/vuexMultiHistory.js
+++ b/src/util/vuexMultiHistory.js
@@ -2,13 +2,29 @@ import { VuexMultiHistory } from 'vuex-multi-history';
 
 export const editorHistory = new VuexMultiHistory({
   debug: true,
-  filter({ type }) {
+  histories: {
+    keys: ['editor'],
+    resolve: () => ['editor'],
+  },
+  filter(mutation) {
     if (!this.store.getters.editorHistoryEnabled) return false;
-    console.log(type);
     const historyTypes = [
       'addEditorNode',
-      'addEditorSession'
+      'addEditorSession',
+      'toggleNodeValue',
+      'updateNode',
+      'updateNodeContext',
+      'deleteNode',
+      'addTrack',
+      'updateTrack',
+      'deleteTrack',
+      'updateTrackOrder',
+      'deleteSession',
+      'bulkUpdateNode',
+      'addNodeToSession',
     ];
-    return historyTypes.includes(type);
+    const result = historyTypes.includes(mutation.type);
+    console.log(mutation, result);
+    return result;
   },
 });
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 656e7582..704cee41 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -74,13 +74,23 @@
                 Web Permissions Editor
               </div>
               <div class="buttons">
-                <button @click="undo" :disabled="!canUndo">
+                <button
+                  @click="undo"
+                  :disabled="!canUndo"
+                  class="history undo"
+                  title="Undo last action"
+                >
                   <font-awesome icon="undo" />
                 </button>
-                <button>
+                <button
+                  @click="redo"
+                  :disabled="!canRedo"
+                  class="history redo"
+                  title="Redo last action"
+                >
                   <font-awesome icon="redo" />
                 </button>
-                <button @click="saveData" title="Save and generate code">
+                <button @click="saveData" class="save-button" title="Save and generate code">
                   <span v-if="saveStatus !== 'saving'">
                     <font-awesome icon="save" fixed-width />
                     Save
@@ -215,11 +225,14 @@ export default {
       return this.$store.getters.metaData.pluginVersion;
     },
     history() {
-      return this.$store.history();
+      return this.$store.history('editor');
     },
     canUndo() {
       return this.history.canUndo();
-    }
+    },
+    canRedo() {
+      return this.history.canRedo();
+    },
   },
 
   created() {
@@ -254,7 +267,10 @@ export default {
     },
     undo() {
       if (this.canUndo) this.history.undo();
-    }
+    },
+    redo() {
+      if (this.canRedo) this.history.redo();
+    },
   },
 };
 </script>
@@ -325,18 +341,24 @@ main.editor {
 
           .buttons {
             button {
-              background: $brand-color;
-              color: $navy;
               font: inherit;
               font-size: 1rem;
               font-weight: bold;
               padding: .25rem .5rem;
               border:0;
               margin-left: .5rem;
-              cursor: pointer;
 
-              &:hover {
-                opacity: .8;
+              &:not([disabled]) {
+                cursor: pointer;
+              }
+
+              &.save-button {
+                background: $brand-color;
+                color: $navy;
+              }
+
+              &:not([disabled]):hover {
+                filter: brightness(1.25);
               }
             }
           }