Migrate GraphQL to use SaveRequest modal instead of GQL one

components/collections/SaveRequest.vue

@@ -20,7 +20,18 @@
       />
       <label for="selectLabel">Select location</label>
       <!-- <input readonly :value="path" /> -->
+
+      <CollectionsGraphql
+        v-if="mode === 'graphql'"
+        :doc="false"
+        :show-coll-actions="false"
+        :picked="picked"
+        :saving-mode="true"
+        @select="onSelect"
+      />
+
       <Collections
+        v-else
         :picked="picked"
         :save-request="true"
         @select="onSelect"
@@ -47,10 +58,12 @@
 <script>
 import { getSettingSubject } from "~/newstore/settings"
 import * as teamUtils from "~/helpers/teams/utils"
-import { saveRESTRequestAs, editRESTRequest } from "~/newstore/collections"
+import { saveRESTRequestAs, editRESTRequest, editGraphqlRequest, saveGraphqlRequestAs } from "~/newstore/collections"
 
 export default {
   props: {
+    // mode can be either "graphql" or "rest"
+    mode: { type: String, default: "rest" },
     show: Boolean,
     editingRequest: { type: Object, default: () => {} },
   },
@@ -190,6 +203,12 @@ export default {
           this.collectionsType.selectedTeam.id,
           this.picked.collectionID
         )
+      } else if (this.picked.pickedType === "gql-my-request") {
+        editGraphqlRequest(this.picked.folderPath, this.picked.requestIndex, requestUpdated)
+      } else if (this.picked.pickedType === "gql-my-folder") {
+        saveGraphqlRequestAs(this.picked.folderPath, requestUpdated)
+      } else if (this.picked.pickedType === "gql-my-collection") {
+        saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       }
       this.$toast.success("Requested added", {
         icon: "done",

components/collections/graphql/Collection.vue

@@ -19,7 +19,12 @@
         <i v-show="showChildren || isFiltered" class="material-icons"
           >arrow_drop_down</i
         >
-        <i class="material-icons">folder</i>
+
+        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+          >check_circle</i
+        >
+
+        <i v-else class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
       <div>
@@ -31,7 +36,7 @@
         >
           <i class="material-icons">topic</i>
         </button>
-        <v-popover>
+        <v-popover v-if="!savingMode">
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>
@@ -82,6 +87,8 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlFolder
+            :picked="picked"
+            :saving-mode="savingMode"
             :folder="folder"
             :folder-index="index"
             :folder-path="`${collectionIndex}/${index}`"
@@ -91,6 +98,7 @@
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -101,13 +109,17 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlRequest
+            :picked="picked"
+            :saving-mode="savingMode"
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="-1"
             :folder-name="collection.name"
+            :folder-path="`${collectionIndex}`"
             :request-index="index"
             :doc="doc"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -140,6 +152,9 @@ import { removeGraphqlCollection } from "~/newstore/collections"
 
 export default Vue.extend({
   props: {
+    picked: { type: Object, default: null },
+    // Whether the viewing context is related to picking (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
     doc: Boolean,
@@ -153,8 +168,27 @@ export default Vue.extend({
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+    }
+  },
   methods: {
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-collection",
+          collectionIndex: this.collectionIndex
+        }
+      })
+    },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeCollection() {

components/collections/graphql/Folder.vue

@@ -20,11 +20,15 @@
           <i v-show="showChildren || isFiltered" class="material-icons"
             >arrow_drop_down</i
           >
-          <i class="material-icons">folder_open</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
+
+          <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <v-popover>
+      <v-popover v-if="!savingMode">
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -66,6 +70,8 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlFolder
+            :picked="picked"
+            :saving-mode="savingMode"
             :folder="subFolder"
             :folder-index="subFolderIndex"
             :folder-path="`${folderPath}/${subFolderIndex}`"
@@ -75,6 +81,7 @@
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -85,6 +92,8 @@
           class="flex ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlRequest
+            :picked="picked"
+            :saving-mode="savingMode"
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
@@ -92,6 +101,7 @@
             :request-index="index"
             :doc="doc"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -127,6 +137,9 @@ import { removeGraphqlFolder } from "~/newstore/collections"
 export default Vue.extend({
   name: "Folder",
   props: {
+    picked: { type: Object, default: null },
+    // Whether the request is in a selectable mode (activates 'select' event)
+    savingMode: { type: Boolean, default: false },
     folder: { type: Object, default: () => {} },
     folderIndex: { type: Number, default: null },
     collectionIndex: { type: Number, default: null },
@@ -141,8 +154,27 @@ export default Vue.extend({
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return this.picked &&
+        this.picked.pickedType === "gql-my-folder" && 
+        this.picked.folderPath === this.folderPath
+    }
+  },
   methods: {
+    pick() {
+      this.$emit('select', {
+        picked: {
+          pickedType: "gql-my-folder",
+          folderPath: this.folderPath
+        }
+      })
+    },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeFolder() {

components/collections/graphql/Request.vue

@@ -17,11 +17,16 @@
           class="icon"
           @click="!doc ? selectRequest() : {}"
         >
-          <i class="material-icons">description</i>
+
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
+
+          <i v-else class="material-icons">description</i>
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
+      <v-popover v-if="!savingMode">
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -66,6 +71,10 @@ import { removeGraphqlRequest } from "~/newstore/collections"
 
 export default Vue.extend({
   props: {
+    // Whether the object is selected (show the tick mark)
+    picked: { type: Object, default: null },
+    // Whether the request is being saved (activate 'select' event)
+    savingMode: { type: Boolean, default: false },
     request: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
     requestIndex: { type: Number, default: null },
@@ -77,8 +86,30 @@ export default Vue.extend({
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+    }
+  },
   methods: {
+    pick() {
+      this.$emit('select', {
+        picked: {
+          pickedType: "gql-my-request",
+          folderPath: this.folderPath,
+          requestIndex: this.requestIndex
+        }
+      })
+    },
     selectRequest() {
+      if (this.savingMode) {
+        this.pick()
+        return
+      }
+
       this.$store.commit("postwoman/selectGraphqlRequest", {
         request: this.request,
       })

components/collections/graphql/index.vue

@@ -50,11 +50,11 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-brdColor">
-      <button class="icon" @click="displayModalAdd(true)">
+      <button v-if="showCollActions" class="icon" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
-      <button class="icon" @click="displayModalImportExport(true)">
+      <button v-if="showCollActions" class="icon" @click="displayModalImportExport(true)">
         {{ $t("import_export") }}
       </button>
     </div>
@@ -69,16 +69,19 @@
           :key="collection.name"
         >
           <CollectionsGraphqlCollection
+            :picked="picked"
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
             :doc="doc"
             :is-filtered="filterText.length > 0"
+            :saving-mode="savingMode"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
             @select-collection="$emit('use-collection', collection)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -96,7 +99,12 @@ import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
 export default {
   props: {
-    doc: Boolean,
+    // Whether to activate the ability to pick items (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
+    doc: { type: Boolean, default: false },
+    picked: { type: Object, default: null },
+    // Whether to show the 'New' and 'Import/Export' actions
+    showCollActions: { type: Boolean, default: true }
   },
   data() {
     return {

pages/graphql.vue

@@ -467,7 +467,8 @@
         </SmartTabs>
       </aside>
     </div>
-    <CollectionsGraphqlSaveRequest
+    <CollectionsSaveRequest
+      mode="graphql"
       :show="showSaveRequestModal"
       :editing-request="editRequest"
       @hide-modal="hideRequestModal"

pages/index.vue

@@ -553,6 +553,7 @@
     </div>
 
     <CollectionsSaveRequest
+      mode="rest"
       :show="showSaveRequestModal"
       @hide-modal="hideRequestModal"
       :editing-request="editRequest"