Refactor admin/relays to use Composition API (#8677)
* refactor(client): refactor admin/relays to use Composition API * Apply review suggestion from @Johann150 Co-authored-by: Johann150 <johann@qwertqwefsday.eu> Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
		
							parent
							
								
									7d08b936c6
								
							
						
					
					
						commit
						dfeafaf499
					
				
					 1 changed files with 52 additions and 65 deletions
				
			
		|  | @ -8,84 +8,71 @@ | |||
| 			<i v-else class="fas fa-clock icon requesting"></i> | ||||
| 			<span>{{ $t(`_relayStatus.${relay.status}`) }}</span> | ||||
| 		</div> | ||||
| 		<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> | ||||
| 		<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton> | ||||
| 	</div> | ||||
| </MkSpacer> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| <script lang="ts" setup> | ||||
| import { } from 'vue'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import * as os from '@/os'; | ||||
| import * as symbols from '@/symbols'; | ||||
| import { i18n } from '@/i18n'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		MkButton, | ||||
| 	}, | ||||
| let relays: any[] = $ref([]); | ||||
| 
 | ||||
| 	emits: ['info'], | ||||
| async function addRelay() { | ||||
| 	const { canceled, result: inbox } = await os.inputText({ | ||||
| 		title: i18n.ts.addRelay, | ||||
| 		type: 'url', | ||||
| 		placeholder: i18n.ts.inboxUrl | ||||
| 	}); | ||||
| 	if (canceled) return; | ||||
| 	os.api('admin/relays/add', { | ||||
| 		inbox | ||||
| 	}).then((relay: any) => { | ||||
| 		refresh(); | ||||
| 	}).catch((err: any) => { | ||||
| 		os.alert({ | ||||
| 			type: 'error', | ||||
| 			text: err.message || err | ||||
| 		}); | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
| 			[symbols.PAGE_INFO]: { | ||||
| 				title: this.$ts.relays, | ||||
| 				icon: 'fas fa-globe', | ||||
| 				bg: 'var(--bg)', | ||||
| 				actions: [{ | ||||
| 					asFullButton: true, | ||||
| 					icon: 'fas fa-plus', | ||||
| 					text: this.$ts.addRelay, | ||||
| 					handler: this.addRelay, | ||||
| 				}], | ||||
| 			}, | ||||
| 			relays: [], | ||||
| 			inbox: '', | ||||
| 		} | ||||
| 	}, | ||||
| function remove(inbox: string) { | ||||
| 	os.api('admin/relays/remove', { | ||||
| 		inbox | ||||
| 	}).then(() => { | ||||
| 		refresh(); | ||||
| 	}).catch((err: any) => { | ||||
| 		os.alert({ | ||||
| 			type: 'error', | ||||
| 			text: err.message || err | ||||
| 		}); | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
| 	created() { | ||||
| 		this.refresh(); | ||||
| 	}, | ||||
| function refresh() { | ||||
| 	os.api('admin/relays/list').then((relayList: any) => { | ||||
| 		relays = relayList; | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
| 	methods: { | ||||
| 		async addRelay() { | ||||
| 			const { canceled, result: inbox } = await os.inputText({ | ||||
| 				title: this.$ts.addRelay, | ||||
| 				type: 'url', | ||||
| 				placeholder: this.$ts.inboxUrl | ||||
| 			}); | ||||
| 			if (canceled) return; | ||||
| 			os.api('admin/relays/add', { | ||||
| 				inbox | ||||
| 			}).then((relay: any) => { | ||||
| 				this.refresh(); | ||||
| 			}).catch((e: any) => { | ||||
| 				os.alert({ | ||||
| 					type: 'error', | ||||
| 					text: e.message || e | ||||
| 				}); | ||||
| 			}); | ||||
| 		}, | ||||
| refresh(); | ||||
| 
 | ||||
| 		remove(inbox: string) { | ||||
| 			os.api('admin/relays/remove', { | ||||
| 				inbox | ||||
| 			}).then(() => { | ||||
| 				this.refresh(); | ||||
| 			}).catch((e: any) => { | ||||
| 				os.alert({ | ||||
| 					type: 'error', | ||||
| 					text: e.message || e | ||||
| 				}); | ||||
| 			}); | ||||
| 		}, | ||||
| 
 | ||||
| 		refresh() { | ||||
| 			os.api('admin/relays/list').then((relays: any) => { | ||||
| 				this.relays = relays; | ||||
| 			}); | ||||
| 		} | ||||
| defineExpose({ | ||||
| 	[symbols.PAGE_INFO]: { | ||||
| 		title: i18n.ts.relays, | ||||
| 		icon: 'fas fa-globe', | ||||
| 		bg: 'var(--bg)', | ||||
| 		actions: [{ | ||||
| 			asFullButton: true, | ||||
| 			icon: 'fas fa-plus', | ||||
| 			text: i18n.ts.addRelay, | ||||
| 			handler: addRelay, | ||||
| 		}], | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue