refactor(client): refactor api-console to use Composition API (#8566)
This commit is contained in:
		
							parent
							
								
									6a44616725
								
							
						
					
					
						commit
						8f32064fea
					
				
					 1 changed files with 43 additions and 55 deletions
				
			
		|  | @ -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> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue