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>
This commit is contained in:
Andy 2022-05-17 18:33:21 +02:00 committed by GitHub
parent f03390f0b8
commit a86e1221a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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