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

feat: loading states for modal buttons (#2268)

Browse Source
This commit is contained in:
kyteinsky
2022-04-20 23:48:25 +05:30
committed by GitHub
parent 7bf76a5812
commit 2452b1be4b
13 changed files with 242 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -157,7 +157,7 @@
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
removeCollection()
options.tippy().hide()
}
"
@@ -192,7 +192,8 @@
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-request="removeRequest"
@remove-request="$emit('remove-request', $event)"
@remove-folder="$emit('remove-folder', $event)"
@duplicate-request="$emit('duplicate-request', $event)"
/>
<CollectionsTeamsRequest
@@ -210,7 +211,7 @@
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
@remove-request="$emit('remove-request', $event)"
@duplicate-request="$emit('duplicate-request', $event)"
/>
<div
@@ -241,12 +242,6 @@
</div>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="t('confirm.remove_collection')"
@hide-modal="confirmRemove = false"
@resolve="removeCollection"
/>
</div>
</template>
@@ -292,7 +287,6 @@ export default defineComponent({
showChildren: false,
dragging: false,
selectedFolder: {},
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
@@ -375,7 +369,6 @@ export default defineComponent({
},
removeCollection() {
this.$emit("remove-collection", {
collectionsType: this.collectionsType,
collectionIndex: this.collectionIndex,
collectionID: this.collection.id,
})
@@ -393,13 +386,6 @@ export default defineComponent({
if (E.isLeft(moveRequestResult))
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
},
removeRequest({ collectionIndex, folderName, requestIndex }: any) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
})
</script>

51
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -130,7 +130,7 @@
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
removeFolder()
options.tippy().hide()
}
"
@@ -165,7 +165,8 @@
@update-team-collections="$emit('update-team-collections')"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-request="removeRequest"
@remove-request="$emit('remove-request', $event)"
@remove-folder="$emit('remove-folder', $event)"
@duplicate-request="$emit('duplicate-request', $event)"
/>
<CollectionsTeamsRequest
@@ -183,7 +184,7 @@
:collection-i-d="folder.id"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
@remove-request="$emit('remove-request', $event)"
@duplicate-request="$emit('duplicate-request', $event)"
/>
<div
@@ -212,20 +213,12 @@
</div>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('confirm.remove_folder')"
@hide-modal="confirmRemove = false"
@resolve="removeFolder"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either"
import { runMutation } from "~/helpers/backend/GQLClient"
import { DeleteCollectionDocument } from "~/helpers/backend/graphql"
import {
getCompleteCollectionTree,
teamCollToHoppRESTColl,
@@ -262,7 +255,6 @@ export default defineComponent({
return {
showChildren: false,
dragging: false,
confirmRemove: false,
prevCursor: "",
cursor: "",
}
@@ -333,30 +325,10 @@ export default defineComponent({
this.showChildren = !this.showChildren
},
removeFolder() {
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
// Cancel pick if picked collection folder was deleted
if (
this.picked &&
this.picked.pickedType === "teams-folder" &&
this.picked.folderID === this.folder.id
) {
this.$emit("select", { picked: null })
}
runMutation(DeleteCollectionDocument, {
collectionID: this.folder.id,
})().then((result) => {
if (E.isLeft(result)) {
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
console.error(result.left)
} else {
this.$toast.success(`${this.$t("state.deleted")}`)
this.$emit("update-team-collections")
}
})
this.$emit("update-team-collections")
}
this.$emit("remove-folder", {
collectionsType: this.collectionsType,
folder: this.folder,
})
},
expandCollection(collectionID: number) {
this.$emit("expand-collection", collectionID)
@@ -371,13 +343,6 @@ export default defineComponent({
if (E.isLeft(moveRequestResult))
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
},
removeRequest({ collectionIndex, folderName, requestIndex }: any) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
})
</script>

15
packages/hoppscotch-app/components/collections/teams/Request.vue
View File

@@ -123,7 +123,7 @@
:shortcut="['⌫']"
@click.native="
() => {
confirmRemove = true
removeRequest()
options.tippy().hide()
}
"
@@ -133,12 +133,6 @@
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('confirm.remove_request')"
@hide-modal="confirmRemove = false"
@resolve="removeRequest"
/>
<HttpReqChangeConfirmModal
:show="confirmChange"
@hide-modal="confirmChange = false"
@@ -215,8 +209,7 @@ const emit = defineEmits<{
(
e: "remove-request",
data: {
collectionIndex: number
folderName: string | undefined
folderPath: string | undefined
requestIndex: string
}
): void
@@ -253,7 +246,6 @@ const requestMethodLabels = {
delete: "text-red-500",
default: "text-gray-500",
}
const confirmRemove = ref(false)
const confirmChange = ref(false)
const showSaveRequestModal = ref(false)
@@ -289,8 +281,7 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
const removeRequest = () => {
emit("remove-request", {
collectionIndex: props.collectionIndex,
folderName: props.folderName,
folderPath: props.folderName,
requestIndex: props.requestIndex,
})
}