From 042d86b1b1009edab33fa3ef520641627d99bece Mon Sep 17 00:00:00 2001 From: Andreas Nedbal <andreas.nedbal@in2code.de> Date: Wed, 4 May 2022 03:14:48 +0200 Subject: [PATCH] refactor(client): refactor settings/drive to use Composition API (#8573) --- packages/client/src/pages/settings/drive.vue | 135 ++++++++----------- 1 file changed, 57 insertions(+), 78 deletions(-) diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue index c3bdf4f6c..f235ace7c 100644 --- a/packages/client/src/pages/settings/drive.vue +++ b/packages/client/src/pages/settings/drive.vue @@ -1,41 +1,41 @@ <template> <div class="_formRoot"> <FormSection v-if="!fetching"> - <template #label>{{ $ts.usageAmount }}</template> + <template #label>{{ i18n.ts.usageAmount }}</template> <div class="_formBlock uawsfosz"> <div class="meter"><div :style="meterStyle"></div></div> </div> <FormSplit> <MkKeyValue class="_formBlock"> - <template #key>{{ $ts.capacity }}</template> + <template #key>{{ i18n.ts.capacity }}</template> <template #value>{{ bytes(capacity, 1) }}</template> </MkKeyValue> <MkKeyValue class="_formBlock"> - <template #key>{{ $ts.inUse }}</template> + <template #key>{{ i18n.ts.inUse }}</template> <template #value>{{ bytes(usage, 1) }}</template> </MkKeyValue> </FormSplit> </FormSection> <FormSection> - <template #label>{{ $ts.statistics }}</template> + <template #label>{{ i18n.ts.statistics }}</template> <MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/> </FormSection> <FormSection> <FormLink @click="chooseUploadFolder()"> - {{ $ts.uploadFolder }} + {{ i18n.ts.uploadFolder }} <template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template> <template #suffixIcon><i class="fas fa-folder-open"></i></template> </FormLink> - <FormSwitch v-model="keepOriginalUploading" class="_formBlock">{{ $ts.keepOriginalUploading }}<template #caption>{{ $ts.keepOriginalUploadingDescription }}</template></FormSwitch> + <FormSwitch v-model="keepOriginalUploading" class="_formBlock">{{ i18n.ts.keepOriginalUploading }}<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template></FormSwitch> </FormSection> </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; -import tinycolor from 'tinycolor2'; +<script lang="ts" setup> +import { computed, defineExpose, ref } from 'vue'; +import * as tinycolor from 'tinycolor2'; import FormLink from '@/components/form/link.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormSection from '@/components/form/section.vue'; @@ -46,80 +46,59 @@ import bytes from '@/filters/bytes'; import * as symbols from '@/symbols'; import { defaultStore } from '@/store'; import MkChart from '@/components/chart.vue'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - FormLink, - FormSwitch, - FormSection, - MkKeyValue, - FormSplit, - MkChart, - }, +const fetching = ref(true); +const usage = ref<any>(null); +const capacity = ref<any>(null); +const uploadFolder = ref<any>(null); - emits: ['info'], +const meterStyle = computed(() => { + return { + width: `${usage.value / capacity.value * 100}%`, + background: tinycolor({ + h: 180 - (usage.value / capacity.value * 180), + s: 0.7, + l: 0.5 + }) + }; +}); - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.drive, - icon: 'fas fa-cloud', - bg: 'var(--bg)', - }, - fetching: true, - usage: null, - capacity: null, - uploadFolder: null, +const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading')); + +os.api('drive').then(info => { + capacity.value = info.capacity; + usage.value = info.usage; + fetching.value = false; +}); + +if (defaultStore.state.uploadFolder) { + os.api('drive/folders/show', { + folderId: defaultStore.state.uploadFolder + }).then(response => { + uploadFolder.value = response; + }); +} + +function chooseUploadFolder() { + os.selectDriveFolder(false).then(async folder => { + defaultStore.set('uploadFolder', folder ? folder.id : null); + os.success(); + if (defaultStore.state.uploadFolder) { + uploadFolder.value = await os.api('drive/folders/show', { + folderId: defaultStore.state.uploadFolder + }); + } else { + uploadFolder.value = null; } - }, + }); +} - computed: { - meterStyle(): any { - return { - width: `${this.usage / this.capacity * 100}%`, - background: tinycolor({ - h: 180 - (this.usage / this.capacity * 180), - s: 0.7, - l: 0.5 - }) - }; - }, - keepOriginalUploading: defaultStore.makeGetterSetter('keepOriginalUploading'), - }, - - async created() { - os.api('drive').then(info => { - this.capacity = info.capacity; - this.usage = info.usage; - this.fetching = false; - this.$nextTick(() => { - this.renderChart(); - }); - }); - - if (this.$store.state.uploadFolder) { - this.uploadFolder = await os.api('drive/folders/show', { - folderId: this.$store.state.uploadFolder - }); - } - }, - - methods: { - chooseUploadFolder() { - os.selectDriveFolder(false).then(async folder => { - this.$store.set('uploadFolder', folder ? folder.id : null); - os.success(); - if (this.$store.state.uploadFolder) { - this.uploadFolder = await os.api('drive/folders/show', { - folderId: this.$store.state.uploadFolder - }); - } else { - this.uploadFolder = null; - } - }); - }, - - bytes +defineExpose({ + [symbols.PAGE_INFO]: { + title: i18n.ts.drive, + icon: 'fas fa-cloud', + bg: 'var(--bg)', } }); </script>