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

feat: confirm modal + chore(deps): bump

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-14 10:35:14 +05:30
parent 858ab252a6
commit 81a6d821c0
9 changed files with 211 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/collections/collection.vue
View File

@@ -46,7 +46,7 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="removeCollection" v-close-popover> <button class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span> <span>{{ $t("delete") }}</span>
</button> </button>
@@ -103,6 +103,12 @@
</li> </li>
</ul> </ul>
</div> </div>
<confirm-modal
:show="confirmRemove"
:title="$t('are_you_sure_remove_collection')"
@hide-modal="confirmRemove = false"
@resolve="removeCollection"
/>
</div> </div>
</template> </template>
@@ -121,6 +127,7 @@ export default {
showChildren: false, showChildren: false,
dragging: false, dragging: false,
selectedFolder: {}, selectedFolder: {},
confirmRemove: false,
} }
}, },
methods: { methods: {
@@ -135,7 +142,6 @@ export default {
this.showChildren = !this.showChildren this.showChildren = !this.showChildren
}, },
removeCollection() { removeCollection() {
if (!confirm(this.$t("are_you_sure_remove_collection"))) return
this.$store.commit("postwoman/removeCollection", { this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex, collectionIndex: this.collectionIndex,
}) })

10
components/collections/folder.vue
View File

@@ -43,7 +43,7 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="removeFolder" v-close-popover> <button class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span> <span>{{ $t("delete") }}</span>
</button> </button>
@@ -93,6 +93,12 @@
</li> </li>
</ul> </ul>
</div> </div>
<confirm-modal
:show="confirmRemove"
:title="$t('are_you_sure_remove_folder')"
@hide-modal="confirmRemove = false"
@resolve="removeFolder"
/>
</div> </div>
</template> </template>
@@ -113,6 +119,7 @@ export default {
return { return {
showChildren: false, showChildren: false,
dragging: false, dragging: false,
confirmRemove: false,
} }
}, },
methods: { methods: {
@@ -127,7 +134,6 @@ export default {
this.showChildren = !this.showChildren this.showChildren = !this.showChildren
}, },
removeFolder() { removeFolder() {
if (!confirm(this.$t("are_you_sure_remove_folder"))) return
this.$store.commit("postwoman/removeFolder", { this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.$props.collectionIndex, collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folder.name, folderName: this.$props.folder.name,

106
components/collections/request.vue
View File

@@ -1,53 +1,61 @@
<template> <template>
<div <div>
:class="['row-wrapper', dragging ? 'drag-el' : '']" <div
draggable="true" :class="['row-wrapper', dragging ? 'drag-el' : '']"
@dragstart="dragStart" draggable="true"
@dragover.stop @dragstart="dragStart"
@dragleave="dragging = false" @dragover.stop
@dragend="dragging = false" @dragleave="dragging = false"
> @dragend="dragging = false"
<div> >
<button <div>
class="icon" <button
@click="!doc ? selectRequest() : {}" class="icon"
v-tooltip="!doc ? $t('use_request') : ''" @click="!doc ? selectRequest() : {}"
> v-tooltip="!doc ? $t('use_request') : ''"
<span :class="getRequestLabelColor(request.method)">{{ request.method }}</span> >
<span>{{ request.name }}</span> <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
</button> <span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
class="icon"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
<v-popover> <confirm-modal
<button class="tooltip-target icon" v-tooltip="$t('more')"> :show="confirmRemove"
<i class="material-icons">more_vert</i> :title="$t('are_you_sure_remove_request')"
</button> @hide-modal="confirmRemove = false"
<template slot="popover"> @resolve="removeRequest"
<div> />
<button
class="icon"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeRequest" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
</template> </template>
@@ -73,6 +81,7 @@ export default {
delete: "text-red-400", delete: "text-red-400",
default: "text-gray-400", default: "text-gray-400",
}, },
confirmRemove: false,
} }
}, },
methods: { methods: {
@@ -94,7 +103,6 @@ export default {
dataTransfer.setData("requestIndex", this.$props.requestIndex) dataTransfer.setData("requestIndex", this.$props.requestIndex)
}, },
removeRequest() { removeRequest() {
if (!confirm(this.$t("are_you_sure_remove_request"))) return
this.$store.commit("postwoman/removeRequest", { this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.$props.collectionIndex, collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folderName, folderName: this.$props.folderName,

64
components/environments/environment.vue
View File

@@ -1,30 +1,38 @@
<template> <template>
<div class="row-wrapper"> <div>
<div> <div class="row-wrapper">
<button class="icon" @click="$emit('edit-environment')"> <div>
<i class="material-icons">layers</i> <button class="icon" @click="$emit('edit-environment')">
<span>{{ environment.name }}</span> <i class="material-icons">layers</i>
</button> <span>{{ environment.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="$emit('edit-environment')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
<v-popover> <confirm-modal
<button class="tooltip-target icon" v-tooltip.left="$t('more')"> :show="confirmRemove"
<i class="material-icons">more_vert</i> :title="$t('are_you_sure_remove_environment')"
</button> @hide-modal="confirmRemove = false"
<template slot="popover"> @resolve="removeEnvironment"
<div> />
<button class="icon" @click="$emit('edit-environment')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeEnvironment" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div> </div>
</template> </template>
@@ -36,6 +44,11 @@ export default {
environment: Object, environment: Object,
environmentIndex: Number, environmentIndex: Number,
}, },
data() {
return {
confirmRemove: false,
}
},
methods: { methods: {
syncEnvironments() { syncEnvironments() {
if (fb.currentUser !== null) { if (fb.currentUser !== null) {
@@ -45,7 +58,6 @@ export default {
} }
}, },
removeEnvironment() { removeEnvironment() {
if (!confirm(this.$t("are_you_sure_remove_environment"))) return
this.$store.commit("postwoman/removeEnvironment", this.environmentIndex) this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
this.$toast.error(this.$t("deleted"), { this.$toast.error(this.$t("deleted"), {
icon: "delete", icon: "delete",

71
components/ui/confirm-modal.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("confirm") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div slot="body" class="flex flex-col">
<label>{{ title }}</label>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="hideModal">
{{ no }}
</button>
<button class="icon primary" @click="resolve">
{{ yes }}
</button>
</span>
</div>
</div>
</modal>
</template>
<script>
export default {
props: {
show: Boolean,
title: "",
yes: {
type: String,
default: function () {
return this.$t("yes")
},
},
no: {
type: String,
default: function () {
return this.$t("no")
},
},
},
async mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
this.hideModal()
}
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
resolve() {
this.$emit("resolve")
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

1
components/ui/modal.vue
View File

@@ -19,6 +19,7 @@
</div> </div>
</transition> </transition>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-backdrop { .modal-backdrop {
@apply fixed; @apply fixed;

3
lang/en-US.json
View File

@@ -300,5 +300,6 @@
"gist_created": "Gist created", "gist_created": "Gist created",
"import_from_gist": "Import from Gist", "import_from_gist": "Import from Gist",
"enter_gist_url": "Enter Gist URL", "enter_gist_url": "Enter Gist URL",
"account_exists": "Account exists with different credential - Login to link both accounts" "account_exists": "Account exists with different credential - Login to link both accounts",
"confirm": "Confirm"
} }

50
package-lock.json generated
View File

@@ -1474,9 +1474,9 @@
"integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg==" "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg=="
}, },
"@firebase/auth": { "@firebase/auth": {
"version": "0.15.3", "version": "0.16.0",
"resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.15.3.tgz", "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.16.0.tgz",
"integrity": "sha512-nGJ0sVRgfd6ly4MyKhc1wyVoINLpQsxJ7uasw30qTssPdDQFus8uDu6Kmy0nN2XzRpYAfchQzZRHE9Q5Y2FHqA==", "integrity": "sha512-1d8WvbGCCaTMZXqevjrkrFzP6FFvFORHBUByQc5xVpDty+kQxIayeWxUqyEuwGm57BrQ1fUwveH2G9a4DGarCQ==",
"requires": { "requires": {
"@firebase/auth-types": "0.10.1" "@firebase/auth-types": "0.10.1"
} }
@@ -1523,12 +1523,12 @@
} }
}, },
"@firebase/firestore": { "@firebase/firestore": {
"version": "2.0.5", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.0.5.tgz", "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.1.0.tgz",
"integrity": "sha512-RBA2A/tnA6ZFQY3pD0TJXRzjB9+D+zaLXzvTVxTO/Sxt8l2cRNFiQhYvHihD6aV/jm3n7RUQ2U7TDtzfXq7jjQ==", "integrity": "sha512-CKzZdht5ECpOGsfxOfeea7rXFTeR/wR7Lbh12TQI7Ru4CfhfdMBQPw9gs4wBX+WyKifp18Fz/bjP8Lly5RgNMg==",
"requires": { "requires": {
"@firebase/component": "0.1.21", "@firebase/component": "0.1.21",
"@firebase/firestore-types": "2.0.0", "@firebase/firestore-types": "2.1.0",
"@firebase/logger": "0.2.6", "@firebase/logger": "0.2.6",
"@firebase/util": "0.3.4", "@firebase/util": "0.3.4",
"@firebase/webchannel-wrapper": "0.4.1", "@firebase/webchannel-wrapper": "0.4.1",
@@ -1539,9 +1539,9 @@
} }
}, },
"@firebase/firestore-types": { "@firebase/firestore-types": {
"version": "2.0.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.1.0.tgz",
"integrity": "sha512-ZGb7p1SSQJP0Z+kc9GAUi+Fx5rJatFddBrS1ikkayW+QHfSIz0omU23OgSHcBGTxe8dJCeKiKA2Yf+tkDKO/LA==" "integrity": "sha512-jietErBWihMvJkqqEquQy5GgoEwzHnMXXC/TsVoe9FPysXm1/AeJS12taS7ZYvenAtyvL/AEJyKrRKRh4adcJQ=="
}, },
"@firebase/functions": { "@firebase/functions": {
"version": "0.6.1", "version": "0.6.1",
@@ -1601,9 +1601,9 @@
"integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==" "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg=="
}, },
"@firebase/performance": { "@firebase/performance": {
"version": "0.4.4", "version": "0.4.5",
"resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.4.tgz", "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.5.tgz",
"integrity": "sha512-CY/fzz7qGQ9hUkvOow22MeJhayHSjXmI4+0AqcxaUC4CWk4oQubyIC4pk62aH+yCwZNNeC7JJUEDbtqI/0rGkQ==", "integrity": "sha512-oenEOaV/UzvV8XPi8afYQ71RzyrHoBesqOyXqb1TOg7dpU+i+UJ5PS8K64DytKUHTxQl+UJFcuxNpsoy9BpWzw==",
"requires": { "requires": {
"@firebase/component": "0.1.21", "@firebase/component": "0.1.21",
"@firebase/installations": "0.4.19", "@firebase/installations": "0.4.19",
@@ -7385,20 +7385,20 @@
} }
}, },
"firebase": { "firebase": {
"version": "8.1.2", "version": "8.2.0",
"resolved": "https://registry.npmjs.org/firebase/-/firebase-8.1.2.tgz", "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.2.0.tgz",
"integrity": "sha512-I1nYPQpE22sKWKc4A4GQNl0k0G1IbPZ5KvyzwEP4fAkLSX9j1rNwh7S902CJIjUxOXV/QOU7e/gYtNRc5SX98Q==", "integrity": "sha512-+xmFd6/E9dZC3OC16lPll5ql5tCi/CHu/iu66OAqZZwriwnxZTp48uQp5Rk/YiOkl19iyf9jzPx5NX3NXpXXbA==",
"requires": { "requires": {
"@firebase/analytics": "0.6.2", "@firebase/analytics": "0.6.2",
"@firebase/app": "0.6.13", "@firebase/app": "0.6.13",
"@firebase/app-types": "0.6.1", "@firebase/app-types": "0.6.1",
"@firebase/auth": "0.15.3", "@firebase/auth": "0.16.0",
"@firebase/database": "0.8.1", "@firebase/database": "0.8.1",
"@firebase/firestore": "2.0.5", "@firebase/firestore": "2.1.0",
"@firebase/functions": "0.6.1", "@firebase/functions": "0.6.1",
"@firebase/installations": "0.4.19", "@firebase/installations": "0.4.19",
"@firebase/messaging": "0.7.3", "@firebase/messaging": "0.7.3",
"@firebase/performance": "0.4.4", "@firebase/performance": "0.4.5",
"@firebase/polyfill": "0.3.36", "@firebase/polyfill": "0.3.36",
"@firebase/remote-config": "0.1.30", "@firebase/remote-config": "0.1.30",
"@firebase/storage": "0.4.2", "@firebase/storage": "0.4.2",
@@ -7709,9 +7709,9 @@
"dev": true "dev": true
}, },
"gaxios": { "gaxios": {
"version": "4.0.1", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.0.1.tgz", "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.1.0.tgz",
"integrity": "sha512-jOin8xRZ/UytQeBpSXFqIzqU7Fi5TqgPNLlUsSB8kjJ76+FiGBfImF8KJu++c6J4jOldfJUtt0YmkRj2ZpSHTQ==", "integrity": "sha512-vb0to8xzGnA2qcgywAjtshOKKVDf2eQhJoiL6fHhgW5tVN7wNk7egnYIO9zotfn3lQ3De1VPdf7V5/BWfCtCmg==",
"requires": { "requires": {
"abort-controller": "^3.0.0", "abort-controller": "^3.0.0",
"extend": "^3.0.2", "extend": "^3.0.2",
@@ -13060,9 +13060,9 @@
}, },
"dependencies": { "dependencies": {
"@types/node": { "@types/node": {
"version": "13.13.34", "version": "13.13.35",
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.34.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.35.tgz",
"integrity": "sha512-g8D1HF2dMDKYSDl5+79izRwRgNPsSynmWMbj50mj7GZ0b7Lv4p8EmZjbo3h0h+6iLr6YmVz9VnF6XVZ3O6V1Ug==" "integrity": "sha512-q9aeOGwv+RRou/ca4aJVUM/jD5u7LBexu+rq9PkA/NhHNn8JifcMo94soKm0b6JGSfw/PSNdqtc428OscMvEYA=="
} }
} }
}, },

2
package.json
View File

@@ -30,7 +30,7 @@
"@nuxtjs/toast": "^3.3.1", "@nuxtjs/toast": "^3.3.1",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"esprima": "^4.0.1", "esprima": "^4.0.1",
"firebase": "^8.1.2", "firebase": "^8.2.0",
"graphql": "^15.4.0", "graphql": "^15.4.0",
"graphql-language-service-interface": "^2.5.0", "graphql-language-service-interface": "^2.5.0",
"mustache": "^4.1.0", "mustache": "^4.1.0",