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>