natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(client): refactor api-console to use Composition API (#8566)

This commit is contained in:
Andreas Nedbal 2022-04-29 03:21:02 +02:00 committed by GitHub
parent 6a44616725
commit 8f32064fea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/client/src/pages/api-console.vue
View File

@ -25,8 +25,8 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { defineExpose, ref } from 'vue';
import * as JSON5 from 'json5'; import * as JSON5 from 'json5';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
@ -34,53 +34,36 @@ import MkTextarea from '@/components/form/textarea.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { Endpoints } from 'misskey-js';
export default defineComponent({ const body = ref('{}');
components: { const endpoint = ref('');
MkButton, MkInput, MkTextarea, MkSwitch, const endpoints = ref<any[]>([]);
}, const sending = ref(false);
const res = ref('');
const withCredential = ref(true);
data() { os.api('endpoints').then(endpointResponse => {
return { endpoints.value = endpointResponse;
[symbols.PAGE_INFO]: {
title: 'API console',
icon: 'fas fa-terminal'
},
endpoint: '',
body: '{}',
res: null,
sending: false,
endpoints: [],
withCredential: true,
};
},
created() {
os.api('endpoints').then(endpoints => {
this.endpoints = endpoints;
}); });
},
methods: { function send() {
send() { sending.value = true;
this.sending = true; const requestBody = JSON5.parse(body.value);
const body = JSON5.parse(this.body); os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
os.api(this.endpoint, body, body.i || (this.withCredential ? undefined : null)).then(res => { sending.value = false;
this.sending = false; res.value = JSON5.stringify(resp, null, 2);
this.res = JSON5.stringify(res, null, 2);
}, err => { }, err => {
this.sending = false; sending.value = false;
this.res = JSON5.stringify(err, null, 2); res.value = JSON5.stringify(err, null, 2);
}); });
}, }
onEndpointChange() { function onEndpointChange() {
os.api('endpoint', { endpoint: this.endpoint }, this.withCredential ? undefined : null).then(endpoint => { os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
const body = {}; const endpointBody = {};
for (const p of endpoint.params) { for (const p of resp.params) {
body[p.name] = endpointBody[p.name] =
p.type === 'String' ? '' : p.type === 'String' ? '' :
p.type === 'Number' ? 0 : p.type === 'Number' ? 0 :
p.type === 'Boolean' ? false : p.type === 'Boolean' ? false :
@ -88,9 +71,14 @@ export default defineComponent({
p.type === 'Object' ? {} : p.type === 'Object' ? {} :
null; null;
} }
this.body = JSON5.stringify(body, null, 2); body.value = JSON5.stringify(endpointBody, null, 2);
}); });
} }
}
defineExpose({
[symbols.PAGE_INFO]: {
title: 'API console',
icon: 'fas fa-terminal'
},
}); });
</script> </script>