redo/undo button completed

Author: keliphan

src/App.vue

@@ -93,7 +93,7 @@ let redoMixin = {
       if (undone !== undefined) {
         this.undoneAction.push(undone)
         if (undone.type === 'setActiveComponent') {
-          console.log('We did something useless!')
+          // console.log('We did something useless!')
           do {
             this.undoneAction.push(this.doneAction.pop())
           }
@@ -110,9 +110,8 @@ let redoMixin = {
         store: this.$store
       }
       this.$store.commit('EMPTY_STATE', payload)
-      console.log(this.$store)
       this.doneAction.forEach(action => {
-        console.log('In the loop', this.$store)
+        // console.log('In the loop', this.$store)
         // this.$store.commit(`${mutation.type}`, mutation.payload);
         this.$store.dispatch(action.type, cloneDeep(action.payload))
         this.doneAction.pop()

src/layouts/MyLayout.vue

@@ -9,9 +9,17 @@
           <!-- <q-avatar></q-avatar> -->
           OverVue
         </q-toolbar-title>
+        <div>
+        <!-- <i class="fa fa-undo" aria-hidden="true"></i> -->
+        <!-- <i class="fas fa fa-repeat" aria-hidden="true"></i> -->
+        <i v-if='this.$router.app.$children[0].doneAction.length' class="fa fa-backward" aria-hidden="true" @click="undo"></i>
+        <i v-else class="fa fa-backward" id="unavailable" aria-hidden="true"></i>
+        <i v-if='this.$router.app.$children[0].undoneAction.length' class="fa fa-forward" aria-hidden="true" @click="redo"></i>
+        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i>
         <OpenProjectComponent />
         <SaveProjectComponent />
         <ExportProjectComponent />
+        </div>
       </q-toolbar>
     </q-header>
 
@@ -55,11 +63,42 @@ export default {
     SaveProjectComponent,
     OpenProjectComponent,
     UploadImage
+  },
+  methods: {
+    undo () {
+      console.log('UNDO FROM BUTTON')
+      console.log('look at me ', this.$router.app.$children[0].doneAction)
+      this.$router.app.$children[0].undo()
+    },
+    redo () {
+      console.log('REDO FROM BUTTON')
+      this.$router.app.$children[0].redo()
+    }
   }
 }
 </script>
 
 <style lang="stylus">
+
+.fa-backward, .fa-forward {
+  padding: 0 5px
+}
+
+.fa-backward:hover, .fa-forward:hover {
+  cursor: pointer;
+  color: #00ffff
+}
+
+#unavailable {
+  color: grey;
+  cursor: default
+}
+
+.fa-backward:active, .fa-forward:active {
+  box-shadow: 0 1px inherit;
+  transform: translateY(1px);
+}
+
 .q-layout {
   transition-timing-function: ease-in;
 }