Refactor: Modularize home page (#1372)
* 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
GitHub
118
components/http/codegen-modal.vue
Normal file
118
components/http/codegen-modal.vue
Normal 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
101
components/http/http-headers.vue
Normal 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
108
components/http/http-parameters.vue
Normal 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
54
components/http/import-curl.vue
Normal 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
30
components/http/notes.vue
Normal 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
95
components/http/token-list.vue
Normal 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>
|
||||
Reference in New Issue
Block a user