Refactor file-dialog to use Composition API (#8661)

* refactor(client): refactor file-dialog 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/file-dialog.vue

@@ -34,74 +34,52 @@
 </XModalWindow>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+import { } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+let file: any = $ref(null);
-	components: {
+let info: any = $ref(null);
-		MkButton,
+let isSensitive: boolean = $ref(false);
-		MkSwitch,
-		XModalWindow,
-		MkDriveFileThumbnail,
-	},
 
-	props: {
+const props = defineProps<{
-		fileId: {
+	fileId: string,
-			required: true,
+}>();
+
+async function fetch() {
+	file = await os.api('drive/files/show', { fileId: props.fileId });
+	info = await os.api('admin/drive/show-file', { fileId: props.fileId });
+	isSensitive = file.isSensitive;
 }
-	},
 
-	emits: ['closed'],
+fetch();
 
-	data() {
+function showUser() {
-		return {
+	os.pageWindow(`/user-info/${file.userId}`);
-			file: null,
+}
-			info: null,
-			isSensitive: false,
-		};
-	},
 
-	created() {
+async function del() {
-		this.fetch();
-	},
-
-	methods: {
-		async fetch() {
-			this.file = await os.api('drive/files/show', { fileId: this.fileId });
-			this.info = await os.api('admin/drive/show-file', { fileId: this.fileId });
-			this.isSensitive = this.file.isSensitive;
-		},
-
-		showUser() {
-			os.pageWindow(`/user-info/${this.file.userId}`);
-		},
-
-		async del() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.file.name }),
+		text: i18n.t('removeAreYouSure', { x: file.name }),
 	});
 	if (canceled) return;
 
 	os.apiWithDialog('drive/files/delete', {
-				fileId: this.file.id
+		fileId: file.id
 	});
-		},
-
-		async toggleIsSensitive(v) {
-			await os.api('drive/files/update', { fileId: this.fileId, isSensitive: v });
-			this.isSensitive = v;
-		},
-
-		bytes
 }
-});
+
+async function toggleIsSensitive(v) {
+	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	isSensitive = v;
+}
 </script>
 
 <style lang="scss" scoped>