[WIP] Fixes + config page

src/js/main.js

@@ -7,32 +7,32 @@ import constants from './constants';
 
 window.store = store;
 
-window.vm = {
-  content: new Vue({
-    el: '#main',
-    router,
-    store,
-    computed: {
-      state () {
-        return this.$store.state;
-      }
-    },
-    components: {
-      spinner: Spinner,
-      navbar: Navbar
-    },
-    methods: {
-      setGithubKey (githubKey) {
-        this.$store.dispatch('setGithubKey', githubKey).then(() => {
+window.vm = new Vue({
+  el: '#main',
+  router,
+  store,
+  computed: {
+    state () {
+      return this.$store.state;
+    }
+  },
+  components: {
+    spinner: Spinner,
+    navbar: Navbar
+  },
+  methods: {
+    setGithubKey (githubKey) {
+      this.$store.dispatch('setGithubKey', githubKey).then(() => {
+        if (this.$router.currentRoute.path === '/') {
           this.$router.push('/list');
-        });
-      }
-    },
-    created () {
-      const key = window.localStorage.getItem(constants.localStorageKey);
-      if (key) {
-        this.setGithubKey(key);
-      }
+        }
+      });
+    }
+  },
+  created () {
+    const key = window.localStorage.getItem(constants.localStorageKey);
+    if (key) {
+      this.setGithubKey(key);
     }
-  })
-};
+  }
+});

src/js/router.js

@@ -1,13 +1,28 @@
 import Vue from 'vue';
+import store from './store';
 import VueRouter from 'vue-router';
 import List from './views/list.vue';
+import Config from './views/config.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: '/list/:path*',
-    component: List
+    component: List,
+    beforeEnter (to, from, next) {
+      const state = store.state;
+      if (!state.github.githubKey ||
+          state.gistux.folderJSON.isEmpty()) {
+        next(false);
+      } else {
+        next();
+      }
+    }
+  },
+  {
+    path: "/config",
+    component: Config
   }
 ];
 

src/js/store/gistux.js

@@ -34,17 +34,28 @@ export default {
       return state.gistData.find((val) => {
         return Object.keys(val.files)[0] === fileName;
       });
+    },
+    folderJSONasJSON (state) {
+      return state.folderJSON.asJSON();
     }
   },
   mutations: {
     setGistData (state, data = null) {
       state.gistData = data;
     },
     setFolderJSON (state, data = null) {
-      state.folderJSON.setData(data);
+      return state.folderJSON.setData(data);
+    },
+    addFilesToFolderJSON (state, files) {
+      state.folderJSON.addFiles(files, null);
+    },
+    addFolderToFolderJSON (state, payload) {
+      const {folderName, node} = payload;
+      state.folderJSON.addFolder(folderName, node);
     },
-    addFilesToFolderJSON (state, files, node = null) {
-      state.folderJSON.addFiles(files, node);
+    folderJSONmoveFile (state, payload) {
+      const {fileNode, folder} = payload;
+      state.folderJSON.move(fileNode, folder);
     },
     setFolderJSONConfigFileID (state, id = null) {
       state.folderJSON.objectID = id;
@@ -104,7 +115,7 @@ export default {
       }
     },
     updateGistUXConfig (context) {
-      context.dispatch(
+      return context.dispatch(
         'writeGistContent',
         {
           gistID: context.state.folderJSON.objectID,

src/js/store/github.js

@@ -25,6 +25,7 @@ export default {
       state.gh = null;
       state.ghUser = null;
       state.ghUserData = null;
+      window.location.reload();
     },
     setUser (state, user) {
       state.ghUser = user;

src/js/util/string.js

@@ -0,0 +1,3 @@
+export function objectEqual (obj1, obj2) {
+  return JSON.stringify(obj1) === JSON.stringify(obj2)
+}

src/js/views/config.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="container">
+    <div class="row">
+      Please do not edit this unless you're sure of what you're doing.
+    </div>
+    <div class="row">
+      <textarea class="config-text-area" v-model="tempJSON"></textarea>
+    </div>
+    <br/>
+    <button class="btn btn-success" :disabled="jsonHasError" @click="saveState">
+      Save
+    </button>
+    <div v-if="jsonHasError">
+      Please check the JSON object. There are still errors.
+    </div>
+  </div>
+</template>
+
+<script>
+import {objectEqual} from '../util/string';
+
+module.exports = {
+  data () {
+    return {
+      tempJSON: this.$store.getters.folderJSONasJSON,
+      jsonEdited: false,
+      jsonHasError: false
+    };
+  },
+  computed: {
+    folderJSONasJSON: function () {
+      return this.$store.getters.folderJSONasJSON;
+    },
+    folderJSON: function () {
+      return this.$store.state.gistux.folderJSON;
+    }
+  },
+  watch: {
+    folderJSONasJSON: function () {
+      console.log("folderJSONChanged");
+      if (!this.jsonEdited) {
+        // If the JSON has not been user-edited, but the source JSON has changed
+        this.tempJSON = this.folderJSONasJSON;
+      }
+    },
+    tempJSON: function () {
+      this.jsonEdited = true;
+      try {
+        JSON.parse(this.tempJSON);
+        this.jsonHasError = false;
+      } catch (e) {
+        this.jsonHasError = true;
+      }
+    }
+  },
+  methods: {
+    saveState () {
+      if (this.jsonHasError) return;
+
+      const textJSON = JSON.parse(this.tempJSON);
+
+      if (!objectEqual(textJSON, this.folderJSON.root.model)) {
+        this.jsonHasError = this.$store.commit('setFolderJSON', textJSON);
+        if (!this.jsonHasError) {
+          this.jsonEdited = false;
+          this.$store.dispatch('updateGistUXConfig').then(() => {
+            this.$store.dispatch('setSuccess', 'GistUX config saved');
+          });
+        } else {
+          this.$store.dispatch('setError', 'There was a problem saving the configuration file. Please check the JSON.');
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style>
+textarea.config-text-area {
+  width: 100%;
+  height: 200px;
+  font-family: monospace;
+}
+</style>

src/js/views/folder_item.vue

@@ -9,7 +9,7 @@
           <h3 :class="['panel-title', 'form-group', {'has-error': editBoxHasError}]" v-if="showEditBox">
             <input :value="folder.model.name" @keyup.enter="updateName" @focusout="updateName" class="form-control" v-focus />
           </h3>
-          <router-link :to="getFolderUrl(folder.model.name)" v-else>
+          <router-link :to="getFolderUrl(folder.model.name)" class="pointer" v-else>
             <h3 class="panel-title">
               {{folder.model.name}}
             </h3>
@@ -18,7 +18,7 @@
         </template>
         <template v-else>
           <a @click="addFolder" class="pointer">
-            <h3 class="panel-title">New Folder</h3>
+            <h3 class="panel-title">Create New Folder</h3>
           </a>
         </template>
       </div>
@@ -55,8 +55,12 @@ module.exports = {
       return `${(this.$route.params.path || '/list')}/${key}`;
     },
     addFolder () {
-      return this.folderJSON.addFolder(null, this.currentPath);
+      const retVal = this.$store.commit('addFolderToFolderJSON', {
+        folderName: null,
+        node: this.currentPath
+      });
       this.$store.dispatch('updateGistUXConfig');
+      return retVal;
     },
     updateName (e) {
       const newFolderName = e.currentTarget.value;
@@ -94,11 +98,17 @@ module.exports = {
       const obj = JSON.parse(e.dataTransfer.getData('json'));
       const fileNode = this.folderJSON.getNode(obj.fileId, this.currentPath);
       let currentFolder = this.folder;
+      console.log(currentFolder);
       if (this.folder === 'new') {
         currentFolder = this.folderJSON.addFolder(null, this.currentPath);
       }
 
-      this.folderJSON.move(fileNode, currentFolder);
+      console.log(currentFolder);
+      this.$store.commit('folderJSONmoveFile', {
+        fileNode: fileNode,
+        folder: currentFolder
+      })
+
       this.$store.dispatch('updateGistUXConfig');
     }
   }

src/js/views/list.vue

@@ -14,6 +14,8 @@
     Please note that GistUX does not have write permissions to your gists. This tool may not have access to your private gists, and all changes made here will not be saved.
     <br/>
     Fix this by <a href="https://github.com/settings/tokens" target="_blank">regenerating your Github Token</a> and giving it the <i>gist</i> permission.
+    <br />
+    If you wish to go ahead with this, you may import/export your temporary config file from <router-link to="/config">here</router-link>
   </p>
   <h2><small>Folders</small></h2>
   <div class="row">
@@ -72,11 +74,6 @@ module.exports = {
     }
   },
   created () {
-    if (!this.state.github.githubKey ||
-        this.state.gistux.folderJSON.isEmpty()) {
-      this.$parent.$router.push('/');
-      return;
-    }
     this.updateDisplayData();
   },
   methods: {