btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Migrate GraphQL to use SaveRequest modal instead of GQL one

Browse Source
This commit is contained in:
Andrew Bastin
2021-05-29 22:36:58 -04:00
parent 68c4efb1d3
commit 4d057a39ed
7 changed files with 137 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/collections/SaveRequest.vue
View File

@@ -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",

38
components/collections/graphql/Collection.vue
View File

@@ -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() {

36
components/collections/graphql/Folder.vue
View File

@@ -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() {

35
components/collections/graphql/Request.vue
View File

@@ -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,
})

14
components/collections/graphql/index.vue
View File

@@ -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 {

3
pages/graphql.vue
View File

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

1
pages/index.vue
View File

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