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

refactor: request section

Browse Source
This commit is contained in:
liyasthomas
2021-07-10 18:45:39 +05:30
parent c7062ad613
commit d94c8aec51
17 changed files with 2461 additions and 2307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
components/http/Parameters.vue
View File

@@ -1,24 +1,24 @@
<template>
<AppSection label="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="flex flex-1">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('parameters', $event)"
/>
</div>
</div>
</li>
</ul>
<ul
<div
v-if="params.length !== 0"
class="flex flex-1 items-center justify-between pl-4"
>
<label for="paramList" class="font-semibold text-xs">
{{ $t("parameter_list") }}
</label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('parameters', $event)"
/>
</div>
<div
v-for="(param, index) in params"
:key="index"
class="
flex
border-b border-dashed
divide-y
md:divide-x
@@ -28,39 +28,62 @@
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
class="input"
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
autofocus
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="param.value"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
focus:outline-none
"
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
autofocus
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
/>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="param.value"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
<div class="flex relative">
<span class="select-wrapper">
<select
class="select"
class="
flex
w-full
px-4
text-xs
py-3
mr-8
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
"
:name="'type' + index"
@change="
$store.commit('setTypeParams', {
@@ -77,54 +100,49 @@
</option>
</select>
</span>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
param.hasOwnProperty('active')
? param.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
/>
</li>
</div>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestParam(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestParam"
v-tippy="{ theme: 'tooltip' }"
:title="
param.hasOwnProperty('active')
? param.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
/>
</li>
</ul>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestParam(index)"
/>
</div>
</div>
<div class="flex sticky bottom-0 bg-primary z-10 flex-1">
<ButtonSecondary
icon="add"
class="flex-1"
:label="$t('add_new')"
@click.native="addRequestParam"
/>
</div>
</AppSection>
</template>