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

feat: bind key-value pairs and bulk editor

Browse Source
This commit is contained in:
liyasthomas
2021-11-04 13:36:51 +05:30
parent 235968073a
commit ad76d100ee
3 changed files with 74 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -129,8 +129,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
svg="trash-2"
:disabled="Boolean(bulkMode)"
@click.native="headers = []"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -143,7 +142,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
svg="plus"
:disabled="Boolean(bulkMode)"
:disabled="bulkMode"
@click.native="addRequestHeader"
/>
</div>
@@ -172,10 +171,10 @@
py-1
px-4
truncate
focus:outline-none
"
class="!flex flex-1"
@input="
updateGQLHeader(index, {
updateRequestHeader(index, {
key: $event,
value: header.value,
active: header.active,
@@ -189,7 +188,7 @@
:value="header.value"
autofocus
@change="
updateGQLHeader(index, {
updateRequestHeader(index, {
key: header.key,
value: $event.target.value,
active: header.active,
@@ -215,7 +214,7 @@
"
color="green"
@click.native="
updateGQLHeader(index, {
updateRequestHeader(index, {
key: header.key,
value: header.value,
active: !header.active,
@@ -272,7 +271,7 @@
<CollectionsSaveRequest
mode="graphql"
:show="Boolean(showSaveRequestModal)"
:show="showSaveRequestModal"
@hide-modal="hideRequestModal"
/>
</div>
@@ -390,18 +389,28 @@ const copyVariablesIcon = ref("copy")
const showSaveRequestModal = ref(false)
watch(
headers,
() => {
if (
(headers.value[headers.value.length - 1]?.key !== "" ||
headers.value[headers.value.length - 1]?.value !== "") &&
headers.value.length
const editBulkHeadersLine = (
index: number,
item?: {
key: string
value: string
active: boolean
}
) => {
const headers = bulkHeaders.value.split("\n")
if (item !== null)
headers.splice(
index,
1,
`${item.active ? "" : "//"}${item.key}: ${item.value}`
)
addRequestHeader()
},
{ deep: true }
)
else headers.splice(index, 1)
bulkHeaders.value = headers.join("\n")
}
const clearBulkEditor = () => {
bulkHeaders.value = ""
}
onMounted(() => {
if (!headers.value?.length) {
@@ -504,14 +513,28 @@ const copyVariables = () => {
}
const addRequestHeader = () => {
addGQLHeader({
key: "",
value: "",
active: true,
})
const empty = { key: "", value: "", active: true }
const index = headers.value.length
addGQLHeader(empty)
editBulkHeadersLine(index, empty)
}
const updateRequestHeader = (
index: number,
item: { key: string; value: string; active: boolean }
) => {
updateGQLHeader(index, item)
editBulkHeadersLine(index, item)
}
const removeRequestHeader = (index: number) => {
removeGQLHeader(index)
editBulkHeadersLine(index, null)
}
const clearContent = () => {
headers.value = []
clearBulkEditor()
}
</script>

37
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -28,8 +28,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
svg="trash-2"
:disabled="bulkMode"
@click.native="clearContent"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -222,32 +221,42 @@ watch(bulkHeaders, () => {
const headers$ = useReadonlyStream(restHeaders$, [])
watch(
headers$,
(newValue) => {
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
const editBulkHeadersLine = (index: number, item?: HoppRESTHeader) => {
const headers = bulkHeaders.value.split("\n")
if (item !== null)
headers.splice(
index,
1,
`${item.active ? "" : "//"}${item.key}: ${item.value}`
)
addHeader()
},
{ deep: true }
)
else headers.splice(index, 1)
bulkHeaders.value = headers.join("\n")
}
const clearBulkEditor = () => {
bulkHeaders.value = ""
}
const addHeader = () => {
addRESTHeader({ key: "", value: "", active: true })
const empty = { key: "", value: "", active: true }
const index = headers$.value.length
addRESTHeader(empty)
editBulkHeadersLine(index, empty)
}
const updateHeader = (index: number, item: HoppRESTHeader) => {
updateRESTHeader(index, item)
editBulkHeadersLine(index, item)
}
const deleteHeader = (index: number) => {
deleteRESTHeader(index)
editBulkHeadersLine(index, null)
}
const clearContent = () => {
deleteAllRESTHeaders()
clearBulkEditor()
}
</script>

8
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -215,7 +215,7 @@ useCodemirror(bulkEditor, bulkParams, {
const params$ = useReadonlyStream(restParams$, [])
const editBulkParamLine = (index: number, item?: HoppRESTParam) => {
const editBulkParamsLine = (index: number, item?: HoppRESTParam) => {
const params = bulkParams.value.split("\n")
if (item !== null)
@@ -238,17 +238,17 @@ const addParam = () => {
const index = params$.value.length
addRESTParam(empty)
editBulkParamLine(index, empty)
editBulkParamsLine(index, empty)
}
const updateParam = (index: number, item: HoppRESTParam) => {
updateRESTParam(index, item)
editBulkParamLine(index, item)
editBulkParamsLine(index, item)
}
const deleteParam = (index: number) => {
deleteRESTParam(index)
editBulkParamLine(index, null)
editBulkParamsLine(index, null)
}
const clearContent = () => {