From a86e1221a085d7dee5ff2a9111eb6cf9c7a19ae9 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <github-bf215181b5140522137b3d4f6b73544a@desu.email>
Date: Tue, 17 May 2022 18:33:21 +0200
Subject: [PATCH] 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>
---
.../client/src/pages/admin/file-dialog.vue | 86 +++++++------------
1 file changed, 32 insertions(+), 54 deletions(-)
diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin/file-dialog.vue
index 4c33f62399..0765548aab 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin/file-dialog.vue
@@ -34,74 +34,52 @@
</XModalWindow>
</template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+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({
- components: {
- MkButton,
- MkSwitch,
- XModalWindow,
- MkDriveFileThumbnail,
- },
+let file: any = $ref(null);
+let info: any = $ref(null);
+let isSensitive: boolean = $ref(false);
- props: {
- fileId: {
- required: true,
- }
- },
+const props = defineProps<{
+ fileId: string,
+}>();
- emits: ['closed'],
+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;
+}
- data() {
- return {
- file: null,
- info: null,
- isSensitive: false,
- };
- },
+fetch();
- created() {
- this.fetch();
- },
+function showUser() {
+ os.pageWindow(`/user-info/${file.userId}`);
+}
- 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;
- },
+async function del() {
+ const { canceled } = await os.confirm({
+ type: 'warning',
+ text: i18n.t('removeAreYouSure', { x: file.name }),
+ });
+ if (canceled) return;
- showUser() {
- os.pageWindow(`/user-info/${this.file.userId}`);
- },
+ os.apiWithDialog('drive/files/delete', {
+ fileId: file.id
+ });
+}
- async del() {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: this.$t('removeAreYouSure', { x: this.file.name }),
- });
- if (canceled) return;
-
- os.apiWithDialog('drive/files/delete', {
- fileId: this.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>