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

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,63 +34,51 @@ 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: '', function send() {
body: '{}', sending.value = true;
res: null, const requestBody = JSON5.parse(body.value);
sending: false, os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
endpoints: [], sending.value = false;
withCredential: true, res.value = JSON5.stringify(resp, null, 2);
}, err => {
sending.value = false;
res.value = JSON5.stringify(err, null, 2);
});
}
}; function onEndpointChange() {
}, os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
const endpointBody = {};
created() { for (const p of resp.params) {
os.api('endpoints').then(endpoints => { endpointBody[p.name] =
this.endpoints = endpoints; p.type === 'String' ? '' :
}); p.type === 'Number' ? 0 :
}, p.type === 'Boolean' ? false :
p.type === 'Array' ? [] :
methods: { p.type === 'Object' ? {} :
send() { null;
this.sending = true;
const body = JSON5.parse(this.body);
os.api(this.endpoint, body, body.i || (this.withCredential ? undefined : null)).then(res => {
this.sending = false;
this.res = JSON5.stringify(res, null, 2);
}, err => {
this.sending = false;
this.res = JSON5.stringify(err, null, 2);
});
},
onEndpointChange() {
os.api('endpoint', { endpoint: this.endpoint }, this.withCredential ? undefined : null).then(endpoint => {
const body = {};
for (const p of endpoint.params) {
body[p.name] =
p.type === 'String' ? '' :
p.type === 'Number' ? 0 :
p.type === 'Boolean' ? false :
p.type === 'Array' ? [] :
p.type === 'Object' ? {} :
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>