refactor(client): refactor admin/announcements to use Composition API (#8650)

packages/client/src/pages/admin/announcements.vue

@@ -3,112 +3,98 @@
 	<section v-for="announcement in announcements" class="_card _gap announcements">
 		<div class="_content announcement">
 			<MkInput v-model="announcement.title">
-				<template #label>{{ $ts.title }}</template>
+				<template #label>{{ i18n.ts.title }}</template>
 			</MkInput>
 			<MkTextarea v-model="announcement.text">
-				<template #label>{{ $ts.text }}</template>
+				<template #label>{{ i18n.ts.text }}</template>
 			</MkTextarea>
 			<MkInput v-model="announcement.imageUrl">
-				<template #label>{{ $ts.imageUrl }}</template>
+				<template #label>{{ i18n.ts.imageUrl }}</template>
 			</MkInput>
-			<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
+			<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
 			<div class="buttons">
-				<MkButton class="button" inline primary @click="save(announcement)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+				<MkButton class="button" inline primary @click="save(announcement)"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
-				<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+				<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
 			</div>
 		</div>
 	</section>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+let announcements: any[] = $ref([]);
-	components: {
-		MkButton,
-		MkInput,
-		MkTextarea,
-	},
 
-	emits: ['info'],
+os.api('admin/announcements/list').then(announcementResponse => {
+	announcements = announcementResponse;
+});
 
-	data() {
+function add() {
-		return {
+	announcements.unshift({
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.announcements,
-				icon: 'fas fa-broadcast-tower',
-				bg: 'var(--bg)',
-				actions: [{
-					asFullButton: true,
-					icon: 'fas fa-plus',
-					text: this.$ts.add,
-					handler: this.add,
-				}],
-			},
-			announcements: [],
-		}
-	},
-
-	created() {
-		os.api('admin/announcements/list').then(announcements => {
-			this.announcements = announcements;
-		});
-	},
-
-	methods: {
-		add() {
-			this.announcements.unshift({
 		id: null,
 		title: '',
 		text: '',
 		imageUrl: null
 	});
-		},
+}
 
-		remove(announcement) {
+function remove(announcement) {
 	os.confirm({
 		type: 'warning',
-				text: this.$t('removeAreYouSure', { x: announcement.title }),
+		text: i18n.t('removeAreYouSure', { x: announcement.title }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-				this.announcements = this.announcements.filter(x => x != announcement);
+		announcements = announcements.filter(x => x !== announcement);
 		os.api('admin/announcements/delete', announcement);
 	});
-		},
+}
 
-		save(announcement) {
+function save(announcement) {
 	if (announcement.id == null) {
 		os.api('admin/announcements/create', announcement).then(() => {
 			os.alert({
 				type: 'success',
-						text: this.$ts.saved
+				text: i18n.ts.saved
 			});
-				}).catch(e => {
+		}).catch(err => {
 			os.alert({
 				type: 'error',
-						text: e
+				text: err
 			});
 		});
 	} else {
 		os.api('admin/announcements/update', announcement).then(() => {
 			os.alert({
 				type: 'success',
-						text: this.$ts.saved
+				text: i18n.ts.saved
 			});
-				}).catch(e => {
+		}).catch(err => {
 			os.alert({
 				type: 'error',
-						text: e
+				text: err
 			});
 		});
 	}
-		}
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.announcements,
+		icon: 'fas fa-broadcast-tower',
+		bg: 'var(--bg)',
+		actions: [{
+			asFullButton: true,
+			icon: 'fas fa-plus',
+			text: i18n.ts.add,
+			handler: add,
+		}],
 	}
 });
 </script>