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

Fix SaveRequest modal selection

Browse Source
This commit is contained in:
Andrew Bastin
2021-05-15 00:02:55 -04:00
parent 489f14b88f
commit 1b9b2ac4c9
8 changed files with 203 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/collections/SaveRequest.vue
View File

@@ -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) {
this.$data.requestData.folderName = data.folderName.split("/").slice(-2)[0]
this.$data.path = data.folderName
this.$data.requestData.collectionIndex = data.collectionIndex
this.$data.requestData.requestIndex = data.reqIdx
if (data.collectionsType.type !== "my-collections") {
this.$data.collectionsType = data.collectionsType
}
onUpdateCollType(newCollType) {
this.collectionsType = newCollType
},
onSelect({ picked }) {
this.picked = picked
},
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -141,8 +141,7 @@ export default {
}
},
saveRequestAs() {
const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
if (userDidntSpecifyCollection) {
if (this.picked == null) {
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,
folderName: this.$data.requestData.folderName,
requestIndex: this.$data.requestData.requestIndex,
collectionIndex: this.picked.collectionIndex,
folderName: this.picked.folderName,
requestIndex: this.picked.requestIndex,
flag: "rest",
})
this.syncCollections()
} else {
if (this.$data.requestData.requestIndex) {
team_utils.overwriteRequestTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.$data.requestData.requestIndex
)
} else {
team_utils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.$data.collectionsType.selectedTeam.id,
this.$data.requestData.collectionIndex
)
}
} else if (this.picked.pickedType === "my-folder") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.picked.collectionIndex,
folderName: this.picked.folderName,
flag: "rest",
})
this.syncCollections()
} else if (this.picked.pickedType === "my-collection") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.picked.collectionIndex,
flag: "rest",
})
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",

7
components/collections/index.vue
View File

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

53
components/collections/my/Collection.vue
View File

@@ -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="
$emit('select-folder', {
name: folder.name + '/' + $event.name,
id: $event.id,
reqIdx: $event.reqIdx,
folderPath: $event.folderPath,
})
"
@select="$emit('select', $event)"
@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="
$emit('select-folder', {
name: $event.name,
id: collection.id,
reqIdx: $event.idx,
})
"
@select="$emit('select', $event)"
@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

47
components/collections/my/Folder.vue
View File

@@ -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="
$emit('select-folder', {
name: subFolder.name + '/' + $event.name,
id: subFolder.id,
reqIdx: $event.reqIdx,
folderPath: $event.folderPath,
})
"
@select="$emit('select', $event)"
@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="
$emit('select-folder', {
name: $event.name,
id: folder.id,
reqIdx: $event.idx,
})
"
@select="$emit('select', $event)"
@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", {
name: "",
id: this.$props.folder.id,
reqIdx: "",
folderPath: this.$props.folderPath,
this.$emit("select", {
picked: {
pickedType: "my-folder",
collectionIndex: this.collectionIndex,
folderName: this.folder.name,
folderPath: this.folderPath,
},
})
this.showChildren = !this.showChildren
},

31
components/collections/my/Request.vue
View File

@@ -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", {
idx: this.$props.requestIndex,
name: this.$props.request.name,
this.$emit("select", {
picked: {
pickedType: "my-request",
collectionIndex: this.collectionIndex,
folderPath: this.folderPath,
folderName: this.folderName,
requestIndex: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
},

56
components/collections/teams/Collection.vue
View File

@@ -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="
$emit('select-folder', {
name: folder.title + '/' + $event.name,
id: $event.id,
reqIdx: $event.reqIdx,
})
"
@select="$emit('select', $event)"
@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="
$emit('select-folder', {
name: $event.name,
id: collection.id,
reqIdx: $event.idx,
})
"
@select="$emit('select', $event)"
@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", {
name: this.$data.collection.name,
id: this.$data.collection.id,
reqIdx: event.requestIndex,
this.$emit("select", {
picked: {
pickedType: "teams-collection",
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

46
components/collections/teams/Folder.vue
View File

@@ -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="
$emit('select-folder', {
name: subFolder.name + '/' + $event.name,
id: subFolder.id,
reqIdx: $event.reqIdx,
})
"
@select="$emit('select', $event)"
@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="
$emit('select-folder', {
name: $event.name,
id: folder.id,
reqIdx: $event.idx,
})
"
@select="$emit('select', $event)"
@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

24
components/collections/teams/Request.vue
View File

@@ -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", {
idx: this.$props.requestIndex,
name: this.$props.request.name,
this.$emit("select", {
picked: {
pickedType: "teams-request",
requestID: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
},