From ad76d100ee745485c5eb2d994eefc88a7bddb25e Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Thu, 4 Nov 2021 13:36:51 +0530 Subject: [PATCH] feat: bind key-value pairs and bulk editor --- .../components/graphql/RequestOptions.vue | 71 ++++++++++++------- .../components/http/Headers.vue | 37 ++++++---- .../components/http/Parameters.vue | 8 +-- 3 files changed, 74 insertions(+), 42 deletions(-) diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue index 0f3604f50..07308358d 100644 --- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue +++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue @@ -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()" /> @@ -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 @@ @@ -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() } diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue index 97d075c86..8ccf4e262 100644 --- a/packages/hoppscotch-app/components/http/Headers.vue +++ b/packages/hoppscotch-app/components/http/Headers.vue @@ -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()" /> { 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() } diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue index 64b60e1f2..cacbd79a3 100644 --- a/packages/hoppscotch-app/components/http/Parameters.vue +++ b/packages/hoppscotch-app/components/http/Parameters.vue @@ -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 = () => {