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

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

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

26
components/environments/ImportExport.vue
View File

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

2
components/http/Request.vue
View File

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

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

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

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

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

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

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

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

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

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

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

12
components/realtime/Mqtt.vue
View File

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

15
components/realtime/Socketio.vue
View File

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

8
components/realtime/Sse.vue
View File

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

9
components/realtime/Websocket.vue
View File

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

7
pages/graphql.vue
View File

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