Refactor admin/queue to use Composition API (#8676)

* refactor(client): refactor admin/queue to use Composition API

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/pages/admin/queue.chart.vue

@@ -26,34 +26,23 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, markRaw, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import number from '@/filters/number';
 import MkQueueChart from '@/components/queue-chart.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		MkQueueChart
-	},
-
-	props: {
-		domain: {
-			type: String,
-			required: true,
-		},
-		connection: {
-			required: true,
-		},
-	},
-
-	setup(props) {
 const activeSincePrevTick = ref(0);
 const active = ref(0);
 const waiting = ref(0);
 const delayed = ref(0);
 const jobs = ref([]);
 
+const props = defineProps<{
+	domain: string,
+	connection: any,
+}>();
+
 onMounted(() => {
 	os.api(props.domain === 'inbox' ? 'admin/queue/inbox-delayed' : props.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(result => {
 		jobs.value = result;
@@ -72,17 +61,6 @@ export default defineComponent({
 		props.connection.off('stats', onStats);
 	});
 });
-
-		return {
-			jobs,
-			activeSincePrevTick,
-			active,
-			waiting,
-			delayed,
-			number,
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,71 +6,60 @@
 	<XQueue :connection="connection" domain="deliver">
 		<template #title>Out</template>
 	</XQueue>
-	<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
+	<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.clearQueue }}</MkButton>
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, markRaw } from 'vue';
+import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as symbols from '@/symbols';
 import * as config from '@/config';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const connection = markRaw(stream.useChannel('queueStats'))
-	components: {
-		MkButton,
-		XQueue,
-	},
 
-	emits: ['info'],
+function clear() {
+	os.confirm({
+		type: 'warning',
+		title: i18n.ts.clearQueueConfirmTitle,
+		text: i18n.ts.clearQueueConfirmText,
+	}).then(({ canceled }) => {
+		if (canceled) return;
 
-	data() {
+		os.apiWithDialog('admin/queue/clear');
-		return {
+	});
+}
+
+onMounted(() => {
+	nextTick(() => {
+		connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 200
+		});
+	});
+})
+
+onBeforeUnmount(() => {
+	connection.dispose();
+});
+
+defineExpose({
 	[symbols.PAGE_INFO]: {
-				title: this.$ts.jobQueue,
+		title: i18n.ts.jobQueue,
 		icon: 'fas fa-clipboard-list',
 		bg: 'var(--bg)',
 		actions: [{
 			asFullButton: true,
 			icon: 'fas fa-up-right-from-square',
-					text: this.$ts.dashboard,
+			text: i18n.ts.dashboard,
 			handler: () => {
 				window.open(config.url + '/queue', '_blank');
 			},
 		}],
-			},
-			connection: markRaw(stream.useChannel('queueStats')),
-		}
-	},
-
-	mounted() {
-		this.$nextTick(() => {
-			this.connection.send('requestLog', {
-				id: Math.random().toString().substr(2, 8),
-				length: 200
-			});
-		});
-	},
-
-	beforeUnmount() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		clear() {
-			os.confirm({
-				type: 'warning',
-				title: this.$ts.clearQueueConfirmTitle,
-				text: this.$ts.clearQueueConfirmText,
-			}).then(({ canceled }) => {
-				if (canceled) return;
-
-				os.apiWithDialog('admin/queue/clear', {});
-			});
-		}
 	}
 });
 </script>