Fix add folder to collections being broken when logged in (#1299)

* Moved add folder modal logic out

* Pass around folder paths for collections to fix folder not applying on
logged in users

* Remove unwanted use of folder value for addFolder store mutation

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

components/collections/add-folder.vue

@@ -53,6 +53,7 @@ export default {
   props: {
     show: Boolean,
     folder: Object,
+    folderPath: String,
     collectionIndex: Number,
   },
   data() {
@@ -61,20 +62,12 @@ export default {
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
-        }
-      }
-    },
     addFolder() {
-      this.$store.commit("postwoman/addFolder", {
+      this.$emit("add-folder", {
-        name: this.$data.name,
+        name: this.name,
-        folder: this.$props.folder,
+        folder: this.folder,
+        path: this.folderPath || `${this.collectionIndex}`,
       })
-      this.hideModal()
-      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/collection.vue

@@ -32,7 +32,7 @@
             <div>
               <button
                 class="icon"
-                @click="$emit('add-folder', { folder: collection })"
+                @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
                 v-close-popover
               >
                 <i class="material-icons">create_new_folder</i>
@@ -66,6 +66,7 @@
           <folder
             :folder="folder"
             :folder-index="index"
+            :folder-path="`${collectionIndex}/${index}`"
             :collection-index="collectionIndex"
             :doc="doc"
             :isFiltered="isFiltered"

components/collections/folder.vue

@@ -23,7 +23,11 @@
         </button>
         <template slot="popover">
           <div>
-            <button class="icon" @click="$emit('add-folder', { folder })" v-close-popover>
+            <button
+              class="icon"
+              @click="$emit('add-folder', { folder, path: folderPath })"
+              v-close-popover
+            >
               <i class="material-icons">create_new_folder</i>
               <span>{{ $t("new_folder") }}</span>
             </button>
@@ -73,6 +77,7 @@
             :folder-index="subFolderIndex"
             :collection-index="collectionIndex"
             :doc="doc"
+            :folder-path="`${folderPath}/${subFolderIndex}`"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
@@ -94,6 +99,7 @@ export default {
     folder: Object,
     folderIndex: Number,
     collectionIndex: Number,
+    folderPath: String,
     doc: Boolean,
     isFiltered: Boolean,
   },

components/collections/index.vue

@@ -21,6 +21,8 @@ TODO:
     <add-folder
       :show="showModalAddFolder"
       :folder="editingFolder"
+      :folder-path="editingFolderPath"
+      @add-folder="onAddFolder($event)"
       @hide-modal="displayModalAddFolder(false)"
     />
     <edit-folder
@@ -121,6 +123,7 @@ export default {
       editingFolder: undefined,
       editingFolderName: undefined,
       editingFolderIndex: undefined,
+      editingFolderPath: undefined,
       editingRequest: undefined,
       editingRequestIndex: undefined,
       filterText: "",
@@ -213,12 +216,21 @@ export default {
       this.displayModalEdit(true)
       this.syncCollections()
     },
-    addFolder(payload) {
+    onAddFolder({ name, path }) {
-      const { folder } = payload
+      this.$store.commit("postwoman/addFolder", {
-      this.$data.editingFolder = folder
+        name,
-      this.displayModalAddFolder(true)
+        path,
+      })
+
+      this.displayModalAddFolder(false)
       this.syncCollections()
     },
+    addFolder(payload) {
+      const { folder, path } = payload
+      this.$data.editingFolder = folder
+      this.$data.editingFolderPath = path
+      this.displayModalAddFolder(true)
+    },
     editFolder(payload) {
       const { collectionIndex, folder, folderIndex } = payload
       this.$data.editingCollectionIndex = collectionIndex

store/postwoman.js

@@ -206,14 +206,21 @@ export const mutations = {
   },
 
   addFolder({ collections }, payload) {
-    const { name, folder } = payload
+    const { name, path } = payload
 
     const newFolder = {
       name: name,
       requests: [],
       folders: [],
     }
-    folder.folders.push(newFolder)
+
+    // Walk from collections to destination with the path
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    let target = collections[indexPaths.shift()]
+    while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
+
+    target.folders.push(newFolder)
   },
 
   editFolder({ collections }, payload) {