GraphQL collections (#1536)

pages/graphql.vue

@@ -225,6 +225,14 @@
               >
                 <i class="material-icons">photo_filter</i>
               </button>
+              <button
+                class="icon"
+                @click="saveRequest"
+                ref="saveRequest"
+                v-tooltip.bottom="$t('save_to_collections')"
+              >
+                <i class="material-icons">create_new_folder</i>
+              </button>
             </div>
           </div>
           <GraphqlQueryEditor
@@ -402,11 +410,11 @@
             />
           </SmartTab>
 
-          <!-- <SmartTab :id="'collections'" :label="$t('collections')">
-                <Collections />
-              </SmartTab>
+          <SmartTab :id="'collections'" :label="$t('collections')">
+            <CollectionsGraphql />
+          </SmartTab>
 
-              <SmartTab :id="'env'" :label="$t('environments')">
+          <!-- <SmartTab :id="'env'" :label="$t('environments')">
                 <Environments @use-environment="useSelectedEnvironment($event)" />
               </SmartTab>
 
@@ -416,6 +424,11 @@
         </SmartTabs>
       </aside>
     </div>
+    <CollectionsGraphqlSaveRequest
+      :show="showSaveRequestModal"
+      @hide-modal="hideRequestModal"
+      :editing-request="editRequest"
+    />
   </div>
 </template>
 
@@ -454,6 +467,8 @@ export default {
       isPollingSchema: false,
       timeoutSubscription: null,
       activeSidebar: true,
+      editRequest: {},
+      showSaveRequestModal: false,
 
       settings: {
         SCROLL_INTO_ENABLED:
@@ -463,7 +478,22 @@ export default {
       },
     }
   },
+  watch: {
+    selectedRequest(newValue) {
+      if (!newValue) return
+      this.url = newValue.url
+      this.gqlQueryString = newValue.query
+      this.headers = newValue.headers
+      this.variableString = newValue.variables
+    },
+  },
   computed: {
+    selectedRequest() {
+      return this.$store.state.postwoman.selectedGraphqlRequest
+    },
+    editingRequest() {
+      return this.$store.state.postwoman.editingRequest
+    },
     filteredQueryFields() {
       return this.getFilteredGraphqlFields({
         filterText: this.graphqlFieldsFilterText,
@@ -553,6 +583,19 @@ export default {
     next()
   },
   methods: {
+    hideRequestModal() {
+      this.showSaveRequestModal = false
+      this.editRequest = {}
+    },
+    saveRequest() {
+      this.editRequest = {
+        url: this.url,
+        query: this.gqlQueryString,
+        headers: this.headers,
+        variables: this.variableString,
+      }
+      this.showSaveRequestModal = true
+    },
     useSelectedEnvironment(event) {
       console.log("use selected environment")
     },

pages/settings.vue

@@ -256,7 +256,14 @@ export default {
     syncCollections() {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
+            "collections"
+          )
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            "collectionsGraphql"
+          )
         }
       }
     },