Adding move modal. Minor refactoring

src/js/folder_model.js

@@ -37,9 +37,50 @@ class FolderModel {
     }).map((node) => node.model.uuid);
   }
 
+  getNodeFromPath (folderPath) {
+    let node = this.root;
+    let path = folderPath;
+
+    if (path == null) {
+      return node;
+    }
+
+    if (typeof path === "string") {
+      path = path.split('/');
+    }
+
+    for (let key of path) {
+      const child = this.getChild(node, key);
+      if (child) {
+        node = child;
+      } else {
+        return null;
+      }
+    }
+
+    return node;
+  }
+
+  getPathFolders (node) {
+    return node.getPath().map((e) => e.model.name);
+  }
+
+  getPathBreadcrumb (node) {
+    let path = '';
+    let folders =  this.getPathFolders(node);
+    folders.shift(); // Removing root element
+    return folders.map((elem) => {
+      path += '/' + elem;
+      return {
+        name: elem,
+        path
+      };
+    })
+  }
+
   objectEqual (node1, node2) {
-    const path1 = node1.getPath().map((e) => e.model.name);
-    const path2 = node2.getPath().map((e) => e.model.name);
+    const path1 = this.getPathFolders(node1);
+    const path2 = this.getPathFolders(node2);
     return (objectEqual(path1, path2) && objectEqual(node1.model, node2.model));
   }
 

src/js/views/file_item.vue

@@ -33,6 +33,12 @@
           <span v-if="showFiles">Hide Files</span>
           <span v-else>Show Files</span>
         </a>
+        <a class="pull-right" @click="toggleMove">
+          Move
+        </a>
+      </div>
+      <div class="panel-footer" v-if="showMove">
+        <move-modal :fileNode="node"></move-modal>
       </div>
     </div>
     <div v-else-if="errored" class="panel panel-default">
@@ -56,10 +62,13 @@
 
 <script>
 import Spinner from './spinner.vue';
+import MoveModal from './move_modal.vue';
+
 module.exports = {
-  props: ['fileId'],
+  props: ['node'],
   data () {
     return {
+      fileId: this.node.model.uuid,
       loading: false,
       errored: false,
       showFiles: false,
@@ -108,7 +117,8 @@ module.exports = {
     }
   },
   components: {
-    'spinner': Spinner
+    'spinner': Spinner,
+    'move-modal': MoveModal
   }
 };
 </script>

src/js/views/list.vue

@@ -38,7 +38,7 @@
     <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>
+      <file-item :key="item.model.uuid" :node="item"></file-item>
     </template>
   </div>
 </div>
@@ -78,30 +78,11 @@ module.exports = {
   },
   methods: {
     updateDisplayData () {
-      this.route = [];
-      this.currentPath = null;
-
       const folderPath = this.$route.params.path;
-      let root = this.folderJSON.root;
-      let path = '';
-
-      // TODO: Move to folder_model
-      if (folderPath) {
-        for (let key of folderPath.split('/')) {
-          const child = this.folderJSON.getChild(root, key);
-          if (child) {
-            root = child;
-            path += '/' + key;
-            this.route.push({
-              name: key,
-              path
-            });
-          } else {
-            return;
-          }
-        }
+      this.currentPath = this.folderJSON.getNodeFromPath(folderPath);
+      if (this.currentPath != null) {
+        this.route = this.folderJSON.getPathBreadcrumb(this.currentPath);
       }
-      this.currentPath = root;
     }
   },
   watch: {

src/js/views/move_modal.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="list-group move-list-group">
+    <a class="list-group-item active">
+      {{folderPath}}
+      <span class="badge" @click="moveItem">Move Here</span>
+    </a>
+    <a v-for="folder in folders" @click="updatePath(folder)" class="list-group-item">
+      {{folder}}
+    </a>
+    <div class="list-group-item">
+      <a @click="removePath">Back</a>
+      <a class="pull-right" @click="createFolder">New Folder</a>
+    </div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: ['fileNode'],
+  data () {
+    return {
+      currentPath: []
+    };
+  },
+  computed: {
+    currentFolder () {
+      return window.folderJSON.getNodeFromPath(this.currentPath);
+    },
+    folders () {
+      return window.folderJSON.getFolders(this.currentFolder).map((e) => e.model.name);
+    },
+    folderPath () {
+      if (this.currentPath.length > 0) {
+        return `GistUX / ${this.currentPath.join(' / ')}`;
+      }
+
+      return 'GistUX';
+    }
+  },
+  methods: {
+    updatePath (val) {
+      this.currentPath.push(val);
+    },
+    removePath () {
+      this.currentPath.pop();
+    },
+    createFolder () {
+      this.$store.commit('addFolderToFolderJSON', {
+        folderName: null,
+        node: this.currentFolder
+      });
+      this.$store.dispatch('updateGistUXConfig');
+    },
+    moveItem () {
+      window.folderJSON.move(this.fileNode, this.currentFolder);
+      this.$store.dispatch('updateGistUXConfig');
+    }
+  }
+};
+</script>
+
+<style>
+.move-list-group {
+  margin-bottom: 0;
+}
+</style>