Fix SaveRequest modal selection

components/collections/SaveRequest.vue

@@ -16,8 +16,10 @@
       <label for="selectLabel">Select location</label>
       <!-- <input readonly :value="path" /> -->
       <Collections
-        @select-folder="changeRequestDetails($event)"
+        @select="onSelect"
         @update-collection="collectionsType.type = $event"
+        @update-coll-type="onUpdateCollType"
+        :picked="picked"
         :saveRequest="true"
       />
     </div>
@@ -61,6 +63,7 @@ export default {
         type: "my-collections",
         selectedTeam: undefined,
       },
+      picked: null,
     }
   },
   subscriptions() {
@@ -123,14 +126,11 @@ export default {
     },
   },
   methods: {
-    changeRequestDetails(data) {
+    onUpdateCollType(newCollType) {
-      this.$data.requestData.folderName = data.folderName.split("/").slice(-2)[0]
+      this.collectionsType = newCollType
-      this.$data.path = data.folderName
+    },
-      this.$data.requestData.collectionIndex = data.collectionIndex
+    onSelect({ picked }) {
-      this.$data.requestData.requestIndex = data.reqIdx
+      this.picked = picked
-      if (data.collectionsType.type !== "my-collections") {
-        this.$data.collectionsType = data.collectionsType
-      }
     },
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -141,8 +141,7 @@ export default {
       }
     },
     saveRequestAs() {
-      const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
+      if (this.picked == null) {
-      if (userDidntSpecifyCollection) {
         this.$toast.error(this.$t("select_collection"), {
           icon: "error",
         })
@@ -161,32 +160,56 @@ export default {
         collection: this.$data.requestData.collectionIndex,
       }
 
-      if (this.$data.collectionsType.type === "my-collections") {
+      if (this.picked.pickedType === "my-request") {
         this.$store.commit("postwoman/saveRequestAs", {
           request: requestUpdated,
-          collectionIndex: this.$data.requestData.collectionIndex,
+          collectionIndex: this.picked.collectionIndex,
-          folderName: this.$data.requestData.folderName,
+          folderName: this.picked.folderName,
-          requestIndex: this.$data.requestData.requestIndex,
+          requestIndex: this.picked.requestIndex,
           flag: "rest",
         })
+
         this.syncCollections()
-      } else {
+      } else if (this.picked.pickedType === "my-folder") {
-        if (this.$data.requestData.requestIndex) {
+        this.$store.commit("postwoman/saveRequestAs", {
-          team_utils.overwriteRequestTeams(
+          request: requestUpdated,
-            this.$apollo,
+          collectionIndex: this.picked.collectionIndex,
-            JSON.stringify(requestUpdated),
+          folderName: this.picked.folderName,
-            requestUpdated.name,
+          flag: "rest",
-            this.$data.requestData.requestIndex
+        })
-          )
+
-        } else {
+        this.syncCollections()
-          team_utils.saveRequestAsTeams(
+      } else if (this.picked.pickedType === "my-collection") {
-            this.$apollo,
+        this.$store.commit("postwoman/saveRequestAs", {
-            JSON.stringify(requestUpdated),
+          request: requestUpdated,
-            requestUpdated.name,
+          collectionIndex: this.picked.collectionIndex,
-            this.$data.collectionsType.selectedTeam.id,
+          flag: "rest",
-            this.$data.requestData.collectionIndex
+        })
-          )
+
-        }
+        this.syncCollections()
+      } else if (this.picked.pickedType === "teams-request") {
+        team_utils.overwriteRequestTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.picked.requestID
+        )
+      } else if (this.picked.pickedType === "teams-folder") {
+        team_utils.saveRequestAsTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.collectionsType.selectedTeam.id,
+          this.picked.folderID
+        )
+      } else if (this.picked.pickedType === "teams-collection") {
+        team_utils.saveRequestAsTeams(
+          this.$apollo,
+          JSON.stringify(requestUpdated),
+          requestUpdated.name,
+          this.collectionsType.selectedTeam.id,
+          this.picked.collectionID
+        )
       }
       this.$toast.success("Requested added", {
         icon: "done",

components/collections/index.vue

@@ -104,6 +104,7 @@
             :selected="selected.some((coll) => coll == collection)"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
+            :picked="picked"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
@@ -130,10 +131,10 @@
                 picked = $event.id
               }
             "
+            @select="$emit('select', $event)"
             @expand-collection="expandCollection"
             @remove-collection="removeCollection"
             @remove-request="removeRequest"
-            :picked="picked.toString()"
           />
         </li>
       </ul>
@@ -163,6 +164,7 @@ export default {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
     saveRequest: Boolean,
+    picked: Object,
   },
   data() {
     return {
@@ -187,7 +189,6 @@ export default {
       },
       teamCollectionAdapter: new TeamCollectionAdapter(null),
       teamCollectionsNew: [],
-      picked: "",
     }
   },
   subscriptions() {
@@ -292,9 +293,11 @@ export default {
     },
     updateSelectedTeam(newSelectedTeam) {
       this.collectionsType.selectedTeam = newSelectedTeam
+      this.$emit("update-coll-type", this.collectionsType)
     },
     updateCollectionType(newCollectionType) {
       this.collectionsType.type = newCollectionType
+      this.$emit("update-coll-type", this.collectionsType)
     },
     // Intented to be called by the CollectionAdd modal submit event
     addNewRootCollection(name) {

components/collections/my/Collection.vue

@@ -12,9 +12,9 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
         <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-        <i v-if="picked === collectionIndex.toString()" class="text-green-400 material-icons"
+
-          >check_circle</i
+        <i v-if="isSelected" class="text-green-400 material-icons"> check_circle </i>
-        >
+
         <i v-else class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
@@ -82,19 +82,12 @@
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
             :isFiltered="isFiltered"
+            :picked="picked"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
-            @select-folder="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: folder.name + '/' + $event.name,
-                id: $event.id,
-                reqIdx: $event.reqIdx,
-                folderPath: $event.folderPath,
-              })
-            "
             @remove-request="removeRequest"
-            :picked="picked.toString()"
           />
         </li>
       </ul>
@@ -109,18 +102,14 @@
             :collection-index="collectionIndex"
             :folder-index="-1"
             :folder-name="collection.name"
+            :folder-path="collectionIndex.toString()"
             :request-index="index"
             :doc="doc"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
+            :picked="picked"
             @edit-request="editRequest($event)"
-            @select-request="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: $event.name,
-                id: collection.id,
-                reqIdx: $event.idx,
-              })
-            "
             @remove-request="removeRequest"
           />
         </li>
@@ -151,7 +140,6 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
-import gql from "graphql-tag"
 
 export default {
   props: {
@@ -162,7 +150,7 @@ export default {
     selected: Boolean,
     saveRequest: Boolean,
     collectionsType: Object,
-    picked: { default: "", type: String },
+    picked: Object,
   },
   data() {
     return {
@@ -180,15 +168,18 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      )
+    },
+  },
   methods: {
     editRequest(event) {
       this.$emit("edit-request", event)
-      if (this.$props.saveRequest)
-        this.$emit("select-folder", {
-          name: this.$data.collection.name,
-          id: this.$data.collection.id,
-          reqIdx: event.requestIndex,
-        })
     },
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -200,7 +191,13 @@ export default {
     },
     toggleShowChildren() {
       if (this.$props.saveRequest)
-        this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
+        this.$emit("select", {
+          picked: {
+            pickedType: "my-collection",
+
+            collectionIndex: this.collectionIndex,
+          },
+        })
 
       this.$emit("expand-collection", this.collection.id)
       this.showChildren = !this.showChildren

components/collections/my/Folder.vue

@@ -13,7 +13,7 @@
         <button class="icon" @click="toggleShowChildren">
           <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
           <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-          <i v-if="picked === folderPath" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
           <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
@@ -71,14 +71,7 @@
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
             @update-team-collections="$emit('update-team-collections')"
-            @select-folder="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: subFolder.name + '/' + $event.name,
-                id: subFolder.id,
-                reqIdx: $event.reqIdx,
-                folderPath: $event.folderPath,
-              })
-            "
             @remove-request="removeRequest"
           />
         </li>
@@ -95,17 +88,13 @@
             :folder-index="folderIndex"
             :folder-name="folder.name"
             :request-index="index"
+            :folder-path="folderPath"
             :doc="doc"
+            :picked="picked"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
             @edit-request="$emit('edit-request', $event)"
-            @select-request="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: $event.name,
-                id: folder.id,
-                reqIdx: $event.idx,
-              })
-            "
             @remove-request="removeRequest"
           />
         </li>
@@ -135,8 +124,6 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
-import * as team_utils from "~/helpers/teams/utils"
-import gql from "graphql-tag"
 
 export default {
   name: "folder",
@@ -149,7 +136,7 @@ export default {
     saveRequest: Boolean,
     isFiltered: Boolean,
     collectionsType: Object,
-    picked: { default: "", type: String },
+    picked: Object,
   },
   data() {
     return {
@@ -165,6 +152,15 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-folder" &&
+        this.picked.folderPath === this.folderPath
+      )
+    },
+  },
   methods: {
     syncCollections() {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -176,11 +172,14 @@ export default {
     },
     toggleShowChildren() {
       if (this.$props.saveRequest)
-        this.$emit("select-folder", {
+        this.$emit("select", {
-          name: "",
+          picked: {
-          id: this.$props.folder.id,
+            pickedType: "my-folder",
-          reqIdx: "",
+
-          folderPath: this.$props.folderPath,
+            collectionIndex: this.collectionIndex,
+            folderName: this.folder.name,
+            folderPath: this.folderPath,
+          },
         })
       this.showChildren = !this.showChildren
     },

components/collections/my/Request.vue

@@ -15,6 +15,9 @@
           v-tooltip="!doc ? $t('use_request') : ''"
         >
           <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+
+          <i v-if="isSelected" class="material-icons"> check </i>
+
           <span>{{ request.name }}</span>
         </button>
       </div>
@@ -60,10 +63,6 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
-import * as team_utils from "~/helpers/teams/utils"
-
 export default {
   props: {
     request: Object,
@@ -74,6 +73,18 @@ export default {
     doc: Boolean,
     saveRequest: Boolean,
     collectionsType: Object,
+    folderPath: String,
+    picked: Object,
+  },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
+    },
   },
   data() {
     return {
@@ -91,9 +102,15 @@ export default {
   methods: {
     selectRequest() {
       if (this.$props.saveRequest)
-        this.$emit("select-request", {
+        this.$emit("select", {
-          idx: this.$props.requestIndex,
+          picked: {
-          name: this.$props.request.name,
+            pickedType: "my-request",
+
+            collectionIndex: this.collectionIndex,
+            folderPath: this.folderPath,
+            folderName: this.folderName,
+            requestIndex: this.requestIndex,
+          },
         })
       else this.$store.commit("postwoman/selectRequest", { request: this.request })
     },

components/collections/teams/Collection.vue

@@ -4,7 +4,9 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
         <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-        <i v-if="picked === collection.id" class="text-green-400 material-icons">check_circle</i>
+
+        <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+
         <i v-else class="material-icons">folder</i>
         <span>{{ collection.title }}</span>
       </button>
@@ -87,19 +89,13 @@
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
             :isFiltered="isFiltered"
+            :picked="picked"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
-            @select-folder="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: folder.title + '/' + $event.name,
-                id: $event.id,
-                reqIdx: $event.reqIdx,
-              })
-            "
             @expand-collection="expandCollection"
             @remove-request="removeRequest"
-            :picked="picked.toString()"
           />
         </li>
       </ul>
@@ -118,14 +114,9 @@
             :doc="doc"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
+            :picked="picked"
             @edit-request="editRequest($event)"
-            @select-request="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: $event.name,
-                id: collection.id,
-                reqIdx: $event.idx,
-              })
-            "
             @remove-request="removeRequest"
           />
         </li>
@@ -154,10 +145,6 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
-import gql from "graphql-tag"
-
 export default {
   props: {
     collectionIndex: Number,
@@ -167,7 +154,7 @@ export default {
     selected: Boolean,
     saveRequest: Boolean,
     collectionsType: Object,
-    picked: { default: "", type: String },
+    picked: Object,
   },
   data() {
     return {
@@ -180,19 +167,36 @@ export default {
       pageNo: 0,
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-collection" &&
+        this.picked.collectionID === this.collection.id
+      )
+    },
+  },
   methods: {
     editRequest(event) {
       this.$emit("edit-request", event)
       if (this.$props.saveRequest)
-        this.$emit("select-folder", {
+        this.$emit("select", {
-          name: this.$data.collection.name,
+          picked: {
-          id: this.$data.collection.id,
+            pickedType: "teams-collection",
-          reqIdx: event.requestIndex,
+
+            collectionID: this.collection.id,
+          },
         })
     },
     toggleShowChildren() {
       if (this.$props.saveRequest)
-        this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-collection",
+
+            collectionID: this.collection.id,
+          },
+        })
 
       this.$emit("expand-collection", this.collection.id)
       this.showChildren = !this.showChildren

components/collections/teams/Folder.vue

@@ -5,7 +5,9 @@
         <button class="icon" @click="toggleShowChildren">
           <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
           <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-          <i v-if="picked === folder.id" class="text-green-400 material-icons">check_circle</i>
+
+          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+
           <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
@@ -70,17 +72,12 @@
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
             :folder-path="`${folderPath}/${subFolderIndex}`"
+            :picked="picked"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
             @update-team-collections="$emit('update-team-collections')"
-            @select-folder="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: subFolder.name + '/' + $event.name,
-                id: subFolder.id,
-                reqIdx: $event.reqIdx,
-              })
-            "
             @expand-collection="expandCollection"
             @remove-request="removeRequest"
           />
@@ -101,14 +98,9 @@
             :doc="doc"
             :saveRequest="saveRequest"
             :collectionsType="collectionsType"
+            :picked="picked"
             @edit-request="$emit('edit-request', $event)"
-            @select-request="
+            @select="$emit('select', $event)"
-              $emit('select-folder', {
-                name: $event.name,
-                id: folder.id,
-                reqIdx: $event.idx,
-              })
-            "
             @remove-request="removeRequest"
           />
         </li>
@@ -134,11 +126,6 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
-import * as team_utils from "~/helpers/teams/utils"
-import gql from "graphql-tag"
-
 export default {
   name: "folder",
   props: {
@@ -150,7 +137,7 @@ export default {
     saveRequest: Boolean,
     isFiltered: Boolean,
     collectionsType: Object,
-    picked: { default: "", type: String },
+    picked: Object,
   },
   data() {
     return {
@@ -160,10 +147,25 @@ export default {
       cursor: "",
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-folder" &&
+        this.picked.folderID === this.folder.id
+      )
+    },
+  },
   methods: {
     toggleShowChildren() {
       if (this.$props.saveRequest)
-        this.$emit("select-folder", { name: "", id: this.$props.folder.id, reqIdx: "" })
+        this.$emit("select", {
+          picked: {
+            pickedType: "teams-folder",
+
+            folderID: this.folder.id,
+          },
+        })
 
       this.$emit("expand-collection", this.$props.folder.id)
       this.showChildren = !this.showChildren

components/collections/teams/Request.vue

@@ -7,6 +7,8 @@
           @click="!doc ? selectRequest() : {}"
           v-tooltip="!doc ? $t('use_request') : ''"
         >
+          <i v-if="isSelected" class="material-icons"> check </i>
+
           <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
           <span>{{ request.name }}</span>
         </button>
@@ -57,10 +59,6 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
-import * as team_utils from "~/helpers/teams/utils"
-
 export default {
   props: {
     request: Object,
@@ -71,6 +69,7 @@ export default {
     doc: Boolean,
     saveRequest: Boolean,
     collectionsType: Object,
+    picked: Object,
   },
   data() {
     return {
@@ -85,12 +84,23 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "teams-request" &&
+        this.picked.requestID === this.requestIndex
+      )
+    },
+  },
   methods: {
     selectRequest() {
       if (this.$props.saveRequest)
-        this.$emit("select-request", {
+        this.$emit("select", {
-          idx: this.$props.requestIndex,
+          picked: {
-          name: this.$props.request.name,
+            pickedType: "teams-request",
+            requestID: this.requestIndex,
+          },
         })
       else this.$store.commit("postwoman/selectRequest", { request: this.request })
     },