Config seems to be working fine. Moved folderJSON to window from vuex…

…. Added store entries for mutations + hack for mutation return value

src/js/store/folder_model.js → src/js/folder_model.js

@@ -101,6 +101,25 @@ class FolderModel {
     });
   }
 
+  folderNames (node) {
+    return this.getFolders(node.parent).map((folder) => {
+      if (folder.model === node.model)
+        return null;
+      return folder.model.name;
+    });
+  }
+
+  updateFolderName (node, name) {
+    if (!this.isFolder(node))
+      return false;
+
+    if (this.folderNames(node).includes(name))
+      return false;
+
+    node.model.name = name;
+    return true;
+  }
+
   setData (jsonData) {
     if (this.validate(jsonData)) {
       this.root = this.treeObject.parse(jsonData);
@@ -130,6 +149,4 @@ class FolderModel {
   }
 }
 
-window.f = FolderModel;
-
 export default FolderModel;

src/js/main.js

@@ -4,9 +4,12 @@ import Spinner from './views/spinner.vue';
 import Navbar from './views/navbar.vue';
 import store from './store';
 import constants from './constants';
+import FolderModel from './folder_model';
 
 window.store = store;
 
+window.folderJSON = new FolderModel();
+
 window.vm = new Vue({
   el: '#main',
   router,

src/js/router.js

@@ -13,7 +13,7 @@ const routes = [
     beforeEnter (to, from, next) {
       const state = store.state;
       if (!state.github.githubKey ||
-          state.gistux.folderJSON.isEmpty()) {
+          window.folderJSON.isEmpty()) {
         next(false);
       } else {
         next();

src/js/store.js

@@ -9,8 +9,7 @@ const store = new Vuex.Store({
     github: require('./store/github.js').default,
     spinner: require('./store/spinner.js').default,
     banner: require('./store/banner.js').default,
-    gistux: require('./store/gistux.js').default,
-    list: require('./store/list.js').default
+    gistux: require('./store/gistux.js').default
   }
 });
 

src/js/store/gistux.js

@@ -1,5 +1,3 @@
-import FolderModel from './folder_model';
-
 function NotLoggedInException () {
   this.message = 'No signed in user.';
   this.name = 'NotLoggedInException';
@@ -10,8 +8,9 @@ const gistUXDescription = '';
 export default {
   state: {
     gistData: [],
-    folderJSON: new FolderModel(),
-    gistUXFileName: null
+    gistUXFileName: null,
+    mutationReturnValue: null,
+    folderJSONChanged: false
   },
   getters: {
     gistUXFileName (state, getters, rootState) {
@@ -34,31 +33,39 @@ 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;
     },
+    folderJSONChanged (state) {
+      state.folderJSONChanged = true;
+    },
+    folderJSONChangeConsumed (state) {
+      state.folderJSONChanged = false;
+    },
     setFolderJSON (state, data = null) {
-      return state.folderJSON.setData(data);
+      window.folderJSON.setData(data);
+      state.folderJSONChanged = true;
     },
     addFilesToFolderJSON (state, files) {
-      state.folderJSON.addFiles(files, null);
+      window.folderJSON.addFiles(files, null);
+      state.folderJSONChanged = true;
     },
     addFolderToFolderJSON (state, payload) {
       const {folderName, node} = payload;
-      state.folderJSON.addFolder(folderName, node);
+      let response = window.folderJSON.addFolder(folderName, node);
+      state.folderJSONChanged = true;
+      state.mutationReturnValue = response;
     },
     folderJSONmoveFile (state, payload) {
       const {fileNode, folder} = payload;
-      state.folderJSON.move(fileNode, folder);
+      window.folderJSON.move(fileNode, folder);
+      state.folderJSONChanged = true;
     },
     setFolderJSONConfigFileID (state, id = null) {
-      state.folderJSON.objectID = id;
+      window.folderJSON.objectID = id;
     }
   },
   actions: {
@@ -68,7 +75,7 @@ export default {
       if (context.getters.gistUXFileName === null)
         throw new NotLoggedInException();
 
-      if (context.state.folderJSON.isEmpty()) {
+      if (window.folderJSON.isEmpty()) {
         const folderJSONConfigFile = context.getters.folderJSONConfigFile;
 
         if (folderJSONConfigFile) {
@@ -118,13 +125,13 @@ export default {
       return context.dispatch(
         'writeGistContent',
         {
-          gistID: context.state.folderJSON.objectID,
+          gistID: window.folderJSON.objectID,
           content: {
             description: gistUXDescription,
             public: false,
             files: {
               [context.getters.gistUXFileName]: {
-                content: context.state.folderJSON.asJSON()
+                content: window.folderJSON.asJSON()
               }
             }
           }

src/js/views/config.vue

@@ -22,26 +22,29 @@ import {objectEqual} from '../util/string';
 module.exports = {
   data () {
     return {
-      tempJSON: this.$store.getters.folderJSONasJSON,
+      tempJSON: window.folderJSON.asJSON(),
       jsonEdited: false,
       jsonHasError: false
     };
   },
   computed: {
-    folderJSONasJSON: function () {
-      return this.$store.getters.folderJSONasJSON;
-    },
     folderJSON: function () {
-      return this.$store.state.gistux.folderJSON;
+      return window.folderJSON;
+    },
+    folderJSONChanged: function () {
+      return this.$store.state.gistux.folderJSONChanged;
     }
   },
   watch: {
-    folderJSONasJSON: function () {
-      console.log("folderJSONChanged");
+    folderJSONChanged: function () {
+      if (!this.folderJSONChanged) return;
+
       if (!this.jsonEdited) {
         // If the JSON has not been user-edited, but the source JSON has changed
-        this.tempJSON = this.folderJSONasJSON;
+        this.tempJSON = this.folderJSON.asJSON();
       }
+
+      this.$store.commit('folderJSONChangeConsumed');
     },
     tempJSON: function () {
       this.jsonEdited = true;

src/js/views/file_item.vue

@@ -47,11 +47,7 @@ module.exports = {
   },
   computed: {
     canShowFiles () {
-      if (Object.keys(this.fileObject.files).length <= 1) {
-        return false;
-      }
-
-      return true;
+      return !(Object.keys(this.fileObject.files).length <= 1);
     },
     fileObject () {
       return this.$store.getters.idObjectMapping.get(this.fileId);

src/js/views/folder_item.vue

@@ -37,7 +37,7 @@ module.exports = {
   },
   computed: {
     folderJSON () {
-      return this.$store.state.gistux.folderJSON;
+      return window.folderJSON;
     }
   },
   directives: {
@@ -55,10 +55,11 @@ module.exports = {
       return `${(this.$route.params.path || '/list')}/${key}`;
     },
     addFolder () {
-      const retVal = this.$store.commit('addFolderToFolderJSON', {
+      this.$store.commit('addFolderToFolderJSON', {
         folderName: null,
         node: this.currentPath
       });
+      const retVal = this.$store.state.gistux.mutationReturnValue;
       this.$store.dispatch('updateGistUXConfig');
       return retVal;
     },
@@ -69,22 +70,11 @@ module.exports = {
         return;
       }
 
-      // TODO: Move this to FolderModel
-      const folderNames = this.folderJSON.
-        getFolders(this.folder.parent).
-        map((folder) => {
-          // To ensure that the same filename isn't rejected
-          if (folder.model === this.folder.model)
-            return null;
-          return folder.model.name;
-        });
-
-      if (folderNames.includes(newFolderName)) {
-        this.editBoxHasError = true;
-      } else {
-        this.folder.model.name = newFolderName;
+      if (this.folderJSON.updateFolderName(this.folder, newFolderName)) {
         this.$store.dispatch('updateGistUXConfig');
         this.closeEditBox();
+      } else {
+        this.editBoxHasError = true;
       }
     },
     openEditBox () {
@@ -97,13 +87,12 @@ module.exports = {
     drop (e) {
       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);
+        currentFolder = this.addFolder();
       }
 
-      console.log(currentFolder);
       this.$store.commit('folderJSONmoveFile', {
         fileNode: fileNode,
         folder: currentFolder

src/js/views/list.vue

@@ -19,7 +19,7 @@
   </p>
   <h2><small>Folders</small></h2>
   <div class="row">
-    <template v-for="(node, index) in tree.getFolders(currentPath)">
+    <template v-for="(node, index) in folderJSON.getFolders(currentPath)">
       <div class="col-xs-12 visible-xs-block visible-sm-block clearfix" v-if="index % 2 == 0"></div>
       <div class="col-md-12 visible-md-block visible-lg-block clearfix" v-if="index % 3 == 0"></div>
       <folder-item :key="index" :folder="node" :current-path="currentPath"></folder-item>
@@ -35,7 +35,7 @@
     </div>
   </div>
   <div class="row">
-    <template v-for="(item, index) in tree.getFiles(currentPath)">
+    <template v-for="(item, index) in folderJSON.getFiles(currentPath)">
       <div class="col-xs-12 visible-xs-block visible-sm-block clearfix" v-if="index % 2 == 0"></div>
       <div class="col-md-12 visible-md-block visible-lg-block clearfix" v-if="index % 3 == 0"></div>
       <file-item :key="item.model.uuid" :fileId="item.model.uuid"></file-item>
@@ -69,8 +69,8 @@ module.exports = {
     state () {
       return this.$store.state;
     },
-    tree () {
-      return this.$store.state.gistux.folderJSON;
+    folderJSON () {
+      return window.folderJSON;
     }
   },
   created () {
@@ -82,13 +82,12 @@ module.exports = {
       this.currentPath = null;
 
       const folderPath = this.$route.params.path;
-      const tree = this.$store.state.gistux.folderJSON;
-      let root = this.$store.state.gistux.folderJSON.root;
+      let root = this.folderJSON.root;
       let path = '/';
 
       if (folderPath) {
         for (let key of folderPath.split('/')) {
-          const child = tree.getChild(root, key);
+          const child = this.folderJSON.getChild(root, key);
           if (child) {
             root = child;
             path += key;