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

Refactor: Modularize home page (#1372)

Browse Source 
* Move HTTP headers section to component

* Move import cURL modal to component

* Move Notes, OAuth token modal to seperate components

* Fix deepcode analysis

* Move parameters section to seperate component

* Move codegen modal to component

* ES6
This commit is contained in:
Liyas Thomas
2020-12-11 05:59:29 +05:30
committed by GitHub
parent a95d37d610
commit 1e6773deb5
19 changed files with 660 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/collections/import-export-collections.vue
View File

@@ -149,11 +149,11 @@ export default {
},
}
)
.then((response) => {
.then(({ html_url }) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(response.html_url)
window.open(html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
Accept: "application/vnd.github.v3+json",
},
})
.then((response) => {
let collections = JSON.parse(Object.values(response.files)[0].content)
.then(({ files }) => {
let collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", collections)
this.fileImported()
this.syncToFBCollections()

1
components/collections/save-request-as.vue
View File

@@ -188,7 +188,6 @@ export default {
},
hideModal() {
this.$emit("hide-modal")
this.$emit("hide-model") // for backward compatibility // TODO: use fixed event
},
},
}

8
components/environments/import-export-environment.vue
View File

@@ -149,11 +149,11 @@ export default {
},
}
)
.then((response) => {
.then(({ html_url }) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(response.html_url)
window.open(html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
Accept: "application/vnd.github.v3+json",
},
})
.then((response) => {
let environments = JSON.parse(Object.values(response.files)[0].content)
.then(({ files }) => {
let environments = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceEnvironments", environments)
this.fileImported()
this.syncToFBEnvironments()

118
components/http/codegen-modal.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
<input
v-else
id="requestType"
v-model="requestType"
:placeholder="$t('choose_language')"
class="cursor-pointer"
readonly
autofocus
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
{{ gen.name }}
</button>
</div>
</template>
</v-popover>
</span>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
readonly
></textarea>
</li>
</ul>
</div>
</modal>
</template>
<script>
import { codegens } from "~/helpers/codegen/codegen"
export default {
props: {
show: Boolean,
requestCode: String,
requestTypeProp: { type: String, default: "" },
},
data() {
return {
codegens,
copyButton: '<i class="material-icons">content_copy</i>',
doneButton: '<i class="material-icons">done</i>',
}
},
computed: {
requestType: {
get() {
return this.requestTypeProp
},
set(val) {
this.$emit("set-request-type", val)
},
},
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
handleImport() {
this.$emit("handle-import")
},
copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
this.$refs.generatedCode.select()
document.execCommand("copy")
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
},
},
}
</script>

101
components/http/http-headers.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<pw-section class="orange" label="Headers" ref="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('headers', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
<li>
<autocomplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@input="
$store.commit('setKeyHeader', {
index,
value: $event,
})
"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
$store.commit('setValueHeader', {
index,
value: $event.target.value,
})
"
@keyup.prevent="setRouteQueryState"
/>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
id="header"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</template>
<script>
import { commonHeaders } from "~/helpers/headers"
export default {
props: {
headers: { type: Array, default: () => [] },
},
data() {
return {
commonHeaders,
}
},
methods: {
clearContent(headers, $event) {
this.$emit("clear-content", headers, $event)
},
setRouteQueryState() {
this.$emit("set-route-query-state")
},
removeRequestHeader(index) {
this.$emit("remove-request-header", index)
},
addRequestHeader() {
this.$emit("add-request-header")
},
},
}
</script>

108
components/http/http-parameters.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<pw-section class="pink" label="Parameters" ref="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('parameters', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(param, index) in params" :key="index">
<li>
<input
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="decodeURI(param.value)"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<span class="select-wrapper">
<select
:name="'type' + index"
@change="
$store.commit('setTypeParams', {
index,
value: $event.target.value,
})
"
>
<option value="query" :selected="param.type === 'query'">
{{ $t("query") }}
</option>
<option value="path" :selected="param.type === 'path'">
{{ $t("path") }}
</option>
</select>
</span>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestParam(index)"
v-tooltip.bottom="$t('delete')"
id="param"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestParam">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</template>
<script>
export default {
props: {
params: { type: Array, default: () => [] },
},
methods: {
clearContent(parameters, $event) {
this.$emit("clear-content", parameters, $event)
},
removeRequestParam(index) {
this.$emit("remove-request-param", index)
},
addRequestParam() {
this.$emit("add-request-param")
},
},
}
</script>

54
components/http/import-curl.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</div>
</div>
</modal>
</template>
<script>
export default {
props: {
show: Boolean,
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
handleImport() {
this.$emit("handle-import")
},
},
}
</script>

30
components/http/notes.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser">
<inputform />
<feeds />
</div>
<div v-else>
<ul>
<li>
<label>{{ $t("login_first") }}</label>
<p>
<login />
</p>
</li>
</ul>
</div>
</pw-section>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
fb,
}
},
}
</script>

95
components/http/token-list.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul id="token-list" v-for="(token, index) in tokens" :key="index">
<li>
<input
:placeholder="'name ' + (index + 1)"
:value="token.name"
@change="
$store.commit('setOAuthTokenName', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input :value="token.value" readonly />
</li>
<div class="row-wrapper">
<li>
<button
class="icon"
@click="useOAuthToken(token.value)"
v-tooltip.bottom="$t('use_token')"
>
<i class="material-icons">input</i>
</button>
</li>
<li>
<button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<p v-if="tokens.length === 0" class="info">
{{ $t("empty") }}
</p>
</div>
</modal>
</template>
<script>
export default {
props: {
show: Boolean,
tokens: { type: Array, default: () => [] },
},
methods: {
clearContent(tokens, $event) {
this.$emit("clear-content", tokens, $event)
},
useOAuthToken(token) {
this.$emit("use-oauth-token", token)
},
removeOAuthToken(index) {
this.$emit("remove-oauth-token", index)
},
hideModal() {
this.$emit("hide-modal")
},
},
}
</script>

8
components/realtime/mqtt.vue
View File

@@ -116,8 +116,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
connect() {
this.log = [
@@ -163,9 +163,9 @@ export default {
icon: "sync",
})
},
onMessageArrived(message) {
onMessageArrived({ payloadString, destinationName }) {
this.log.push({
payload: `Message: ${message.payloadString} arrived on topic: ${message.destinationName}`,
payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString(),

4
components/realtime/socketio.vue
View File

@@ -147,8 +147,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "socketio", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
removeCommunicationInput({ index }) {
this.$delete(this.communication.inputs, index)

4
components/realtime/sse.vue
View File

@@ -78,8 +78,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "sse", url: this.server })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
toggleSSEConnection() {
// If it is connecting:

4
components/realtime/websocket.vue
View File

@@ -105,8 +105,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
toggleConnection() {
// If it is connecting: