public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: final modifs

Browse Source
This commit is contained in:
ShareVB 2024-06-16 21:39:55 +02:00
parent 43922ae5f9
commit 130183cb36
3 changed files with 92 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
export interface GlobalComponents {
'404.page': typeof import('./src/pages/404.page.vue')['default']
About: typeof import('./src/pages/About.vue')['default']
ApiTester: typeof import('./src/tools/api-tester/api-tester.vue')['default']
App: typeof import('./src/App.vue')['default']
AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
@ -127,10 +128,12 @@ declare module '@vue/runtime-core' {
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDivider: typeof import('naive-ui')['NDivider']
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
@ -138,6 +141,7 @@ declare module '@vue/runtime-core' {
NH1: typeof import('naive-ui')['NH1']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NInput: typeof import('naive-ui')['NInput']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLabel: typeof import('naive-ui')['NLabel']
NLayout: typeof import('naive-ui')['NLayout']

33
src/composable/queryParams.ts
View File

@ -1,7 +1,8 @@
import { useRouteQuery } from '@vueuse/router';
import { computed } from 'vue';
import { useStorage } from '@vueuse/core';
export { useQueryParam };
export { useQueryParam, useQueryParamOrStorage };
const transformers = {
number: {
@ -16,6 +17,12 @@ const transformers = {
fromQuery: (value: string) => value.toLowerCase() === 'true',
toQuery: (value: boolean) => (value ? 'true' : 'false'),
},
object: {
fromQuery: (value: string) => {
return JSON.parse(value);
},
toQuery: (value: object) => JSON.stringify(value),
},
};
function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
},
});
}
function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
const type = typeof defaultValue;
const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
const storageRef = useStorage(storageName, defaultValue);
const proxyDefaultValue = transformer.toQuery(defaultValue as never);
const proxy = useRouteQuery(name, proxyDefaultValue);
const r = ref(defaultValue);
watch(r,
(value) => {
proxy.value = transformer.toQuery(value as never);
storageRef.value = value as never;
},
{ deep: true });
r.value = (proxy.value && proxy.value !== proxyDefaultValue
? transformer.fromQuery(proxy.value) as unknown as T
: storageRef.value as T) as never;
return r;
}

69
src/tools/api-tester/api-tester.vue
View File

@ -10,31 +10,47 @@ const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:u
const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' });
const queryParams = useQueryParamOrStorage<KeyValuePair[]>({ name: 'params', storageName: 'api-tester:params', defaultValue: [] });
const headers = useQueryParamOrStorage<KeyValuePair[]>({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] });
const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' });
const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' });
const noCORS = ref(false);
const apiCallResult = ref();
const inprogress = ref(false);
async function callAPI() {
const url = new URL(baseUrl.value);
for (const kv of queryParams.value) {
if (!kv.key) {
continue;
}
url.searchParams.append(kv.key, kv.value || '');
}
const queryHeaders = [] as [string, string][];
for (const kv of headers.value) {
if (!kv.key) {
continue;
}
queryHeaders.push([kv.key, kv.value || '']);
}
queryHeaders.push(['Content-Type', contentType.value || '']);
try {
const response = await fetch(url, {
method: method.value,
headers: queryHeaders,
body: body.value,
body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value,
mode: noCORS.value ? 'no-cors' : 'cors',
});
let responseText = await response.text();
try {
responseText = JSON.stringify(JSON.parse(responseText), null, 2);
}
catch (_) {
}
apiCallResult.value = {
code: response.status,
error: '',
result: await response.text(),
result: responseText,
};
}
catch (err: any) {
@ -45,11 +61,18 @@ async function callAPI() {
};
}
}
function emptyKeyPair() {
return {
key: '',
value: '',
};
}
</script>
<template>
<div>
<c-card title="">
<c-card title="API Calling">
<c-input-text
v-model:value="baseUrl"
label="Base API Url"
@ -61,36 +84,44 @@ async function callAPI() {
v-model:value="method"
label="HTTP Method:"
:options="['GET', 'POST', 'PUT', 'DELETE', 'PATCH']"
mb-2
/>
<c-card title="Headers" mb-2>
<n-dynamic-input v-model:value="headers">
<n-dynamic-input v-model:value="headers" :on-create="emptyKeyPair">
<template #create-button-default>
Add a new HTTP Header
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.key" type="text" />
<n-input v-model:value="value.value" type="text" />
<div v-if="value" w-100 flex justify-center gap-2>
<c-input-text v-model:value="value.key" placeholder="Header Name" type="text" />
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
</div>
</template>
</n-dynamic-input>
<c-select
v-model:value="contentType"
label="Content-Type:"
:options="['application/json', 'text/plain']"
mt-2
/>
</c-card>
<c-card title="Query Parameters" mb-2>
<n-dynamic-input v-model:value="queryParams">
<n-dynamic-input v-model:value="queryParams" :on-create="emptyKeyPair">
<template #create-button-default>
Add a new HTTP Header
Add a new Query Parameter
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.key" type="text" />
<n-input v-model:value="value.value" type="text" />
<div v-if="value" w-100 flex justify-center gap-2>
<c-input-text v-model:value="value.key" placeholder="Param Name" type="text" />
<c-input-text v-model:value="value.value" placeholder="Value" type="text" />
</div>
</template>
</n-dynamic-input>
</c-card>
<c-input-text
v-if="method !== 'GET' && method !== 'HEAD'"
v-model:value="body"
label="Body"
placeholder="HTTP Query body"
@ -99,20 +130,26 @@ async function callAPI() {
mb-2
/>
<n-checkbox v-model:checked="noCORS">
No CORS
</n-checkbox>
<div mt-5 flex justify-center>
<c-button secondary @click="callAPI">
Call API
</c-button>
</div>
</c-card>
<n-spin
v-if="inprogress"
size="small"
/>
<c-alert v-if="!inprogress && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
<c-alert v-if="!inprogress && apiCallResult && apiCallResult.code !== 200" type="error" mt-12 title="Error while calling API">
<p><strong>Status code = {{ apiCallResult.code }}</strong></p>
<TextareaCopyable :value="apiCallResult.error" />
<TextareaCopyable :value="apiCallResult.error" copy-placement="none" />
</c-alert>
<c-card v-if="!inprogress && apiCallResult.code === 200" mt-12 title="API Call result">
<TextareaCopyable :value="apiCallResult.result" />
<c-card v-if="!inprogress && apiCallResult && apiCallResult.code === 200" mt-12 title="API Call result">
<TextareaCopyable :value="apiCallResult.result" word-wrap />
</c-card>
</div>
</template>