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

refactor: split rest page into components

Browse Source
This commit is contained in:
liyasthomas
2022-03-02 17:15:55 +05:30
parent 4b6581934e
commit 632813ef0a
3 changed files with 100 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/hoppscotch-app/components/http/RequestOptions.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
<SmartTab
:id="'params'"
:label="`${$t('tab.parameters')}`"
:selected="true"
:info="`${newActiveParamsCount$}`"
>
<HttpParameters />
</SmartTab>
<SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
<HttpBody />
</SmartTab>
<SmartTab
:id="'headers'"
:label="`${$t('tab.headers')}`"
:info="`${newActiveHeadersCount$}`"
>
<HttpHeaders />
</SmartTab>
<SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
<HttpAuthorization />
</SmartTab>
<SmartTab
:id="'preRequestScript'"
:label="`${$t('tab.pre_request_script')}`"
:indicator="
preRequestScript && preRequestScript.length > 0 ? true : false
"
>
<HttpPreRequestScript />
</SmartTab>
<SmartTab
:id="'tests'"
:label="`${$t('tab.tests')}`"
:indicator="testScript && testScript.length > 0 ? true : false"
>
<HttpTests />
</SmartTab>
</SmartTabs>
</template>
<script setup lang="ts">
import { map } from "rxjs/operators"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
restActiveHeadersCount$,
restActiveParamsCount$,
usePreRequestScript,
useTestScript,
} from "~/newstore/RESTSession"
const newActiveParamsCount$ = useReadonlyStream(
restActiveParamsCount$.pipe(
map((e) => {
if (e === 0) return null
return `${e}`
})
),
null
)
const newActiveHeadersCount$ = useReadonlyStream(
restActiveHeadersCount$.pipe(
map((e) => {
if (e === 0) return null
return `${e}`
})
),
null
)
const preRequestScript = usePreRequestScript()
const testScript = useTestScript()
</script>

22
packages/hoppscotch-app/components/http/Sidebar.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
<SmartTab
:id="'history'"
icon="clock"
:label="`${$t('tab.history')}`"
:selected="true"
>
<History ref="historyComponent" :page="'rest'" />
</SmartTab>
<SmartTab
:id="'collections'"
icon="folder"
:label="`${$t('tab.collections')}`"
>
<Collections />
</SmartTab>
<SmartTab :id="'env'" icon="layers" :label="`${$t('environment.title')}`">
<Environments />
</SmartTab>
</SmartTabs>
</template>

101
packages/hoppscotch-app/pages/index.vue
View File

@@ -2,81 +2,13 @@
<AppPaneLayout> <AppPaneLayout>
<template #primary> <template #primary>
<HttpRequest /> <HttpRequest />
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10"> <HttpRequestOptions />
<SmartTab
:id="'params'"
:label="`${$t('tab.parameters')}`"
:selected="true"
:info="`${newActiveParamsCount$}`"
>
<HttpParameters />
</SmartTab>
<SmartTab :id="'bodyParams'" :label="`${$t('tab.body')}`">
<HttpBody />
</SmartTab>
<SmartTab
:id="'headers'"
:label="`${$t('tab.headers')}`"
:info="`${newActiveHeadersCount$}`"
>
<HttpHeaders />
</SmartTab>
<SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
<HttpAuthorization />
</SmartTab>
<SmartTab
:id="'preRequestScript'"
:label="`${$t('tab.pre_request_script')}`"
:indicator="
preRequestScript && preRequestScript.length > 0 ? true : false
"
>
<HttpPreRequestScript />
</SmartTab>
<SmartTab
:id="'tests'"
:label="`${$t('tab.tests')}`"
:indicator="testScript && testScript.length > 0 ? true : false"
>
<HttpTests />
</SmartTab>
</SmartTabs>
</template> </template>
<template #secondary> <template #secondary>
<HttpResponse ref="response" /> <HttpResponse ref="response" />
</template> </template>
<template #sidebar> <template #sidebar>
<SmartTabs styles="sticky bg-primary z-10 top-0" vertical> <HttpSidebar />
<SmartTab
:id="'history'"
icon="clock"
:label="`${$t('tab.history')}`"
:selected="true"
>
<History ref="historyComponent" :page="'rest'" />
</SmartTab>
<SmartTab
:id="'collections'"
icon="folder"
:label="`${$t('tab.collections')}`"
>
<Collections />
</SmartTab>
<SmartTab
:id="'env'"
icon="layers"
:label="`${$t('environment.title')}`"
>
<Environments />
</SmartTab>
</SmartTabs>
</template> </template>
</AppPaneLayout> </AppPaneLayout>
</template> </template>
@@ -92,7 +24,6 @@ import {
useContext, useContext,
watch, watch,
} from "@nuxtjs/composition-api" } from "@nuxtjs/composition-api"
import { map } from "rxjs/operators"
import { Subscription } from "rxjs" import { Subscription } from "rxjs"
import isEqual from "lodash/isEqual" import isEqual from "lodash/isEqual"
import { import {
@@ -101,21 +32,16 @@ import {
safelyExtractRESTRequest, safelyExtractRESTRequest,
} from "@hoppscotch/data" } from "@hoppscotch/data"
import { import {
restActiveParamsCount$,
restActiveHeadersCount$,
getRESTRequest, getRESTRequest,
setRESTRequest, setRESTRequest,
setRESTAuth, setRESTAuth,
restAuth$, restAuth$,
useTestScript,
usePreRequestScript,
getDefaultRESTRequest, getDefaultRESTRequest,
} from "~/newstore/RESTSession" } from "~/newstore/RESTSession"
import { translateExtURLParams } from "~/helpers/RESTExtURLParams" import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
import { import {
pluckRef, pluckRef,
useI18n, useI18n,
useReadonlyStream,
useStream, useStream,
useToast, useToast,
} from "~/helpers/utils/composables" } from "~/helpers/utils/composables"
@@ -197,9 +123,6 @@ export default defineComponent({
setup() { setup() {
const requestForSync = ref<HoppRESTRequest | null>(null) const requestForSync = ref<HoppRESTRequest | null>(null)
const testScript = useTestScript()
const preRequestScript = usePreRequestScript()
const confirmSync = ref(false) const confirmSync = ref(false)
const toast = useToast() const toast = useToast()
@@ -238,30 +161,10 @@ export default defineComponent({
bindRequestToURLParams() bindRequestToURLParams()
return { return {
newActiveParamsCount$: useReadonlyStream(
restActiveParamsCount$.pipe(
map((e) => {
if (e === 0) return null
return `${e}`
})
),
null
),
newActiveHeadersCount$: useReadonlyStream(
restActiveHeadersCount$.pipe(
map((e) => {
if (e === 0) return null
return `${e}`
})
),
null
),
confirmSync, confirmSync,
syncRequest, syncRequest,
oAuthURL, oAuthURL,
requestForSync, requestForSync,
testScript,
preRequestScript,
} }
}, },
}) })