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

refactor(ui): minor improvements on buttons and actions

Browse Source
This commit is contained in:
liyasthomas
2021-07-28 22:23:43 +05:30
parent 1a4d3dc91a
commit 4f71e801d5
15 changed files with 80 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/collections/ImportExport.vue
View File

@@ -390,22 +390,22 @@ export default {
}, },
exportJSON() { exportJSON() {
this.getJSONCollection() this.getJSONCollection()
let text = this.collectionJson const dataToWrite = this.collectionJson
text = text.replace(/\n/g, "\r\n") const file = new Blob([dataToWrite], { type: "application/json" })
const blob = new Blob([text], { const a = document.createElement("a")
type: "text/json", const url = URL.createObjectURL(file)
}) a.href = url
const anchor = document.createElement("a") // TODO get uri from meta
anchor.download = "hoppscotch-collection.json" a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
anchor.href = window.URL.createObjectURL(blob) document.body.appendChild(a)
anchor.target = "_blank" a.click()
anchor.style.display = "none"
document.body.appendChild(anchor)
anchor.click()
document.body.removeChild(anchor)
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
}, },
fileImported() { fileImported() {
this.$toast.info(this.$t("file_imported"), { this.$toast.info(this.$t("file_imported"), {

26
components/collections/graphql/ImportExport.vue
View File

@@ -243,22 +243,22 @@ export default {
this.$refs.inputChooseFileToImportFrom.value = "" this.$refs.inputChooseFileToImportFrom.value = ""
}, },
exportJSON() { exportJSON() {
let text = this.collectionJson const dataToWrite = this.collectionJson
text = text.replace(/\n/g, "\r\n") const file = new Blob([dataToWrite], { type: "application/json" })
const blob = new Blob([text], { const a = document.createElement("a")
type: "text/json", const url = URL.createObjectURL(file)
}) a.href = url
const anchor = document.createElement("a") // TODO get uri from meta
anchor.download = "hoppscotch-collection.json" a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
anchor.href = window.URL.createObjectURL(blob) document.body.appendChild(a)
anchor.target = "_blank" a.click()
anchor.style.display = "none"
document.body.appendChild(anchor)
anchor.click()
document.body.removeChild(anchor)
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
}, },
fileImported() { fileImported() {
this.$toast.info(this.$t("file_imported"), { this.$toast.info(this.$t("file_imported"), {

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

@@ -50,6 +50,7 @@
@click.native="$emit('unselect-collection')" @click.native="$emit('unselect-collection')"
/> />
<ButtonSecondary <ButtonSecondary
v-if="!doc"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder" icon="create_new_folder"
:title="$t('new_folder')" :title="$t('new_folder')"

26
components/environments/ImportExport.vue
View File

@@ -223,22 +223,22 @@ export default {
this.importFromHoppscotch(environments) this.importFromHoppscotch(environments)
}, },
exportJSON() { exportJSON() {
let text = this.environmentJson const dataToWrite = this.environmentJson
text = text.replace(/\n/g, "\r\n") const file = new Blob([dataToWrite], { type: "application/json" })
const blob = new Blob([text], { const a = document.createElement("a")
type: "text/json", const url = URL.createObjectURL(file)
}) a.href = url
const anchor = document.createElement("a") // TODO get uri from meta
anchor.download = "hoppscotch-environment.json" a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
anchor.href = window.URL.createObjectURL(blob) document.body.appendChild(a)
anchor.target = "_blank" a.click()
anchor.style.display = "none"
document.body.appendChild(anchor)
anchor.click()
document.body.removeChild(anchor)
this.$toast.success(this.$t("download_started"), { this.$toast.success(this.$t("download_started"), {
icon: "done", icon: "done",
}) })
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
}, },
fileImported() { fileImported() {
this.$toast.info(this.$t("file_imported"), { this.$toast.info(this.$t("file_imported"), {

2
components/http/Request.vue
View File

@@ -75,7 +75,7 @@
<div class="flex"> <div class="flex">
<ButtonPrimary <ButtonPrimary
id="send" id="send"
class="rounded-none" class="rounded-none w-18"
:label="!loading ? $t('send') : $t('cancel')" :label="!loading ? $t('send') : $t('cancel')"
:shortcut="[getSpecialKey(), 'G']" :shortcut="[getSpecialKey(), 'G']"
@click.native="!loading ? newSendRequest() : cancelRequest()" @click.native="!loading ? newSendRequest() : cancelRequest()"

2
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -97,7 +97,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadIcon = "save_alt" this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },

2
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -98,7 +98,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadIcon = "save_alt" this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },

15
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -17,7 +17,7 @@
</label> </label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-if="response.body && canDownloadResponse" v-if="response.body"
ref="downloadResponse" ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
@@ -55,7 +55,6 @@
<script> <script>
import TextContentRendererMixin from "./mixins/TextContentRendererMixin" import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default { export default {
mixins: [TextContentRendererMixin], mixins: [TextContentRendererMixin],
@@ -82,19 +81,11 @@ export default {
.split(";")[0] .split(";")[0]
.toLowerCase() .toLowerCase()
}, },
canDownloadResponse() {
return (
this.response &&
this.response.headers &&
this.response.headers["content-type"] &&
isJSONContentType(this.response.headers["content-type"])
)
},
}, },
methods: { methods: {
downloadResponse() { downloadResponse() {
const dataToWrite = this.responseBodyText const dataToWrite = this.responseBodyText
const file = new Blob([dataToWrite], { type: this.responseType }) const file = new Blob([dataToWrite], { type: "application/json" })
const a = document.createElement("a") const a = document.createElement("a")
const url = URL.createObjectURL(file) const url = URL.createObjectURL(file)
a.href = url a.href = url
@@ -108,7 +99,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadIcon = "save_alt" this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },

13
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -17,7 +17,7 @@
</label> </label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-if="response.body && canDownloadResponse" v-if="response.body"
ref="downloadResponse" ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
@@ -54,7 +54,6 @@
<script> <script>
import TextContentRendererMixin from "./mixins/TextContentRendererMixin" import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
import { isJSONContentType } from "~/helpers/utils/contenttypes"
export default { export default {
mixins: [TextContentRendererMixin], mixins: [TextContentRendererMixin],
@@ -73,14 +72,6 @@ export default {
.split(";")[0] .split(";")[0]
.toLowerCase() .toLowerCase()
}, },
canDownloadResponse() {
return (
this.response &&
this.response.headers &&
this.response.headers["content-type"] &&
isJSONContentType(this.response.headers["content-type"])
)
},
}, },
methods: { methods: {
downloadResponse() { downloadResponse() {
@@ -99,7 +90,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadIcon = "save_alt" this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },

2
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -90,7 +90,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadIcon = "save_alt" this.downloadIcon = "save_alt"
}, 1000) }, 1000)
}, },

12
components/realtime/Mqtt.vue
View File

@@ -29,10 +29,9 @@
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!validUrl" :disabled="!validUrl"
class="rounded-l-none" class="rounded-l-none w-28"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="connectionState ? $t('disconnect') : $t('connect')" :label="connectionState ? $t('disconnect') : $t('connect')"
reverse :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</div> </div>
@@ -88,7 +87,6 @@
name="get" name="get"
class="rounded-l-none" class="rounded-l-none"
:disabled="!canpublish" :disabled="!canpublish"
icon="send"
:label="$t('mqtt_publish')" :label="$t('mqtt_publish')"
@click.native="publish" @click.native="publish"
/> />
@@ -120,7 +118,6 @@
name="get" name="get"
:disabled="!cansubscribe" :disabled="!cansubscribe"
class="rounded-l-none" class="rounded-l-none"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label=" :label="
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe') subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
" "
@@ -157,6 +154,7 @@ export default defineComponent({
sub_topic: "", sub_topic: "",
msg: "", msg: "",
connectionState: false, connectionState: false,
connectingState: false,
log: null, log: null,
manualDisconnect: false, manualDisconnect: false,
subscriptionState: false, subscriptionState: false,
@@ -195,6 +193,7 @@ export default defineComponent({
if (data.url === this.url) this.isUrlValid = data.result if (data.url === this.url) this.isUrlValid = data.result
}, },
connect() { connect() {
this.connectingState = true
this.log = [ this.log = [
{ {
payload: this.$t("connecting_to", { name: this.url }), payload: this.$t("connecting_to", { name: this.url }),
@@ -222,6 +221,7 @@ export default defineComponent({
}) })
}, },
onConnectionFailure() { onConnectionFailure() {
this.connectingState = false
this.connectionState = false this.connectionState = false
this.log.push({ this.log.push({
payload: this.$t("error_occurred"), payload: this.$t("error_occurred"),
@@ -231,6 +231,7 @@ export default defineComponent({
}) })
}, },
onConnectionSuccess() { onConnectionSuccess() {
this.connectingState = false
this.connectionState = true this.connectionState = true
this.log.push({ this.log.push({
payload: this.$t("connected_to", { name: this.url }), payload: this.$t("connected_to", { name: this.url }),
@@ -268,6 +269,7 @@ export default defineComponent({
}) })
}, },
onConnectionLost() { onConnectionLost() {
this.connectingState = false
this.connectionState = false this.connectionState = false
if (this.manualDisconnect) { if (this.manualDisconnect) {
this.$toast.error(this.$t("disconnected"), { this.$toast.error(this.$t("disconnected"), {

15
components/realtime/Socketio.vue
View File

@@ -16,7 +16,9 @@
bg-primaryLight bg-primaryLight
border border-divider border border-divider
rounded-l rounded-l
flex
font-semibold font-mono font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-1 py-1
@@ -34,7 +36,9 @@
class=" class="
bg-primaryLight bg-primaryLight
border border-divider border border-divider
flex
font-semibold font-mono font-semibold font-mono
flex-1
text-secondaryDark text-secondaryDark
w-full w-full
py-1 py-1
@@ -49,10 +53,9 @@
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
name="connect" name="connect"
class="rounded-l-none" class="rounded-l-none w-28"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')" :label="!connectionState ? $t('connect') : $t('disconnect')"
reverse :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</div> </div>
@@ -132,7 +135,6 @@
name="send" name="send"
:disabled="!connectionState" :disabled="!connectionState"
class="rounded-l-none" class="rounded-l-none"
icon="send"
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"
/> />
@@ -165,6 +167,7 @@ export default defineComponent({
url: "wss://main-daxrc78qyb411dls-gtw.qovery.io", url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
path: "/socket.io", path: "/socket.io",
isUrlValid: true, isUrlValid: true,
connectingState: false,
connectionState: false, connectionState: false,
io: null, io: null,
communication: { communication: {
@@ -213,6 +216,7 @@ export default defineComponent({
else return this.disconnect() else return this.disconnect()
}, },
connect() { connect() {
this.connectingState = true
this.communication.log = [ this.communication.log = [
{ {
payload: this.$t("connecting_to", { name: this.url }), payload: this.$t("connecting_to", { name: this.url }),
@@ -231,6 +235,7 @@ export default defineComponent({
// Add ability to listen to all events // Add ability to listen to all events
wildcard(Client.Manager)(this.io) wildcard(Client.Manager)(this.io)
this.io.on("connect", () => { this.io.on("connect", () => {
this.connectingState = false
this.connectionState = true this.connectionState = true
this.communication.log = [ this.communication.log = [
{ {
@@ -262,6 +267,7 @@ export default defineComponent({
this.handleError() this.handleError()
}) })
this.io.on("disconnect", () => { this.io.on("disconnect", () => {
this.connectingState = false
this.connectionState = false this.connectionState = false
this.communication.log.push({ this.communication.log.push({
payload: this.$t("disconnected_from", { name: this.url }), payload: this.$t("disconnected_from", { name: this.url }),
@@ -289,6 +295,7 @@ export default defineComponent({
}, },
handleError(error) { handleError(error) {
this.disconnect() this.disconnect()
this.connectingState = false
this.connectionState = false this.connectionState = false
this.communication.log.push({ this.communication.log.push({
payload: this.$t("error_occurred"), payload: this.$t("error_occurred"),

8
components/realtime/Sse.vue
View File

@@ -29,10 +29,9 @@
id="start" id="start"
:disabled="!serverValid" :disabled="!serverValid"
name="start" name="start"
class="rounded-l-none" class="rounded-l-none w-22"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
:label="!connectionSSEState ? $t('start') : $t('stop')" :label="!connectionSSEState ? $t('start') : $t('stop')"
reverse :loading="connectingState"
@click.native="toggleSSEConnection" @click.native="toggleSSEConnection"
/> />
</div> </div>
@@ -62,6 +61,7 @@ export default {
data() { data() {
return { return {
connectionSSEState: false, connectionSSEState: false,
connectingState: false,
server: "https://express-eventsource.herokuapp.com/events", server: "https://express-eventsource.herokuapp.com/events",
isUrlValid: true, isUrlValid: true,
sse: null, sse: null,
@@ -104,6 +104,7 @@ export default {
else return this.stop() else return this.stop()
}, },
start() { start() {
this.connectingState = true
this.events.log = [ this.events.log = [
{ {
payload: this.$t("connecting_to", { name: this.server }), payload: this.$t("connecting_to", { name: this.server }),
@@ -115,6 +116,7 @@ export default {
try { try {
this.sse = new EventSource(this.server) this.sse = new EventSource(this.server)
this.sse.onopen = () => { this.sse.onopen = () => {
this.connectingState = false
this.connectionSSEState = true this.connectionSSEState = true
this.events.log = [ this.events.log = [
{ {

9
components/realtime/Websocket.vue
View File

@@ -31,11 +31,10 @@
<ButtonPrimary <ButtonPrimary
id="connect" id="connect"
:disabled="!urlValid" :disabled="!urlValid"
class="rounded-l-none" class="rounded-l-none w-28"
name="connect" name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')" :label="!connectionState ? $t('connect') : $t('disconnect')"
reverse :loading="connectingState"
@click.native="toggleConnection" @click.native="toggleConnection"
/> />
</div> </div>
@@ -171,7 +170,6 @@
name="send" name="send"
:disabled="!connectionState" :disabled="!connectionState"
class="rounded-l-none" class="rounded-l-none"
icon="send"
:label="$t('send')" :label="$t('send')"
@click.native="sendMessage" @click.native="sendMessage"
/> />
@@ -198,6 +196,7 @@ export default defineComponent({
data() { data() {
return { return {
connectionState: false, connectionState: false,
connectingState: false,
url: "wss://echo.websocket.org", url: "wss://echo.websocket.org",
isUrlValid: true, isUrlValid: true,
socket: null, socket: null,
@@ -263,8 +262,10 @@ export default defineComponent({
}, },
] ]
try { try {
this.connectingState = true
this.socket = new WebSocket(this.url, this.activeProtocols) this.socket = new WebSocket(this.url, this.activeProtocols)
this.socket.onopen = () => { this.socket.onopen = () => {
this.connectingState = false
this.connectionState = true this.connectionState = true
this.communication.log = [ this.communication.log = [
{ {

7
pages/graphql.vue
View File

@@ -30,9 +30,8 @@
<ButtonPrimary <ButtonPrimary
id="get" id="get"
name="get" name="get"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label="!isPollingSchema ? $t('connect') : $t('disconnect')" :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
class="rounded-l-none" class="rounded-l-none w-28"
@click.native="onPollSchemaClick" @click.native="onPollSchemaClick"
/> />
</div> </div>
@@ -1210,7 +1209,7 @@ export default defineComponent({
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadResponseIcon = "save_alt" this.downloadResponseIcon = "save_alt"
}, 1000) }, 1000)
}, },
@@ -1229,7 +1228,7 @@ export default defineComponent({
}) })
setTimeout(() => { setTimeout(() => {
document.body.removeChild(a) document.body.removeChild(a)
window.URL.revokeObjectURL(url) URL.revokeObjectURL(url)
this.downloadSchemaIcon = "save_alt" this.downloadSchemaIcon = "save_alt"
}, 1000) }, 1000)
}, },