Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(client): refactor admin/object-storage to use Composition API (#8666)

Browse Source
This commit is contained in:
Andreas Nedbal 2022-05-17 18:31:32 +02:00 committed by GitHub
parent 13999d953b
commit 83ac6742f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 78 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
packages/client/src/pages/admin/object-storage.vue
View File

@ -2,32 +2,32 @@
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<div class="_formRoot"> <div class="_formRoot">
<FormSwitch v-model="useObjectStorage" class="_formBlock">{{ $ts.useObjectStorage }}</FormSwitch> <FormSwitch v-model="useObjectStorage" class="_formBlock">{{ i18n.ts.useObjectStorage }}</FormSwitch>
<template v-if="useObjectStorage"> <template v-if="useObjectStorage">
<FormInput v-model="objectStorageBaseUrl" class="_formBlock"> <FormInput v-model="objectStorageBaseUrl" class="_formBlock">
<template #label>{{ $ts.objectStorageBaseUrl }}</template> <template #label>{{ i18n.ts.objectStorageBaseUrl }}</template>
<template #caption>{{ $ts.objectStorageBaseUrlDesc }}</template> <template #caption>{{ i18n.ts.objectStorageBaseUrlDesc }}</template>
</FormInput> </FormInput>
<FormInput v-model="objectStorageBucket" class="_formBlock"> <FormInput v-model="objectStorageBucket" class="_formBlock">
<template #label>{{ $ts.objectStorageBucket }}</template> <template #label>{{ i18n.ts.objectStorageBucket }}</template>
<template #caption>{{ $ts.objectStorageBucketDesc }}</template> <template #caption>{{ i18n.ts.objectStorageBucketDesc }}</template>
</FormInput> </FormInput>
<FormInput v-model="objectStoragePrefix" class="_formBlock"> <FormInput v-model="objectStoragePrefix" class="_formBlock">
<template #label>{{ $ts.objectStoragePrefix }}</template> <template #label>{{ i18n.ts.objectStoragePrefix }}</template>
<template #caption>{{ $ts.objectStoragePrefixDesc }}</template> <template #caption>{{ i18n.ts.objectStoragePrefixDesc }}</template>
</FormInput> </FormInput>
<FormInput v-model="objectStorageEndpoint" class="_formBlock"> <FormInput v-model="objectStorageEndpoint" class="_formBlock">
<template #label>{{ $ts.objectStorageEndpoint }}</template> <template #label>{{ i18n.ts.objectStorageEndpoint }}</template>
<template #caption>{{ $ts.objectStorageEndpointDesc }}</template> <template #caption>{{ i18n.ts.objectStorageEndpointDesc }}</template>
</FormInput> </FormInput>
<FormInput v-model="objectStorageRegion" class="_formBlock"> <FormInput v-model="objectStorageRegion" class="_formBlock">
<template #label>{{ $ts.objectStorageRegion }}</template> <template #label>{{ i18n.ts.objectStorageRegion }}</template>
<template #caption>{{ $ts.objectStorageRegionDesc }}</template> <template #caption>{{ i18n.ts.objectStorageRegionDesc }}</template>
</FormInput> </FormInput>
<FormSplit :min-width="280"> <FormSplit :min-width="280">
@ -43,17 +43,17 @@
</FormSplit> </FormSplit>
<FormSwitch v-model="objectStorageUseSSL" class="_formBlock"> <FormSwitch v-model="objectStorageUseSSL" class="_formBlock">
<template #label>{{ $ts.objectStorageUseSSL }}</template> <template #label>{{ i18n.ts.objectStorageUseSSL }}</template>
<template #caption>{{ $ts.objectStorageUseSSLDesc }}</template> <template #caption>{{ i18n.ts.objectStorageUseSSLDesc }}</template>
</FormSwitch> </FormSwitch>
<FormSwitch v-model="objectStorageUseProxy" class="_formBlock"> <FormSwitch v-model="objectStorageUseProxy" class="_formBlock">
<template #label>{{ $ts.objectStorageUseProxy }}</template> <template #label>{{ i18n.ts.objectStorageUseProxy }}</template>
<template #caption>{{ $ts.objectStorageUseProxyDesc }}</template> <template #caption>{{ i18n.ts.objectStorageUseProxyDesc }}</template>
</FormSwitch> </FormSwitch>
<FormSwitch v-model="objectStorageSetPublicRead" class="_formBlock"> <FormSwitch v-model="objectStorageSetPublicRead" class="_formBlock">
<template #label>{{ $ts.objectStorageSetPublicRead }}</template> <template #label>{{ i18n.ts.objectStorageSetPublicRead }}</template>
</FormSwitch> </FormSwitch>
<FormSwitch v-model="objectStorageS3ForcePathStyle" class="_formBlock"> <FormSwitch v-model="objectStorageS3ForcePathStyle" class="_formBlock">
@ -65,8 +65,8 @@
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormGroup from '@/components/form/group.vue'; import FormGroup from '@/components/form/group.vue';
@ -76,84 +76,70 @@ import FormSection from '@/components/form/section.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
import { i18n } from '@/i18n';
export default defineComponent({ let useObjectStorage: boolean = $ref(false);
components: { let objectStorageBaseUrl: string | null = $ref(null);
FormSwitch, let objectStorageBucket: string | null = $ref(null);
FormInput, let objectStoragePrefix: string | null = $ref(null);
FormGroup, let objectStorageEndpoint: string | null = $ref(null);
FormSuspense, let objectStorageRegion: string | null = $ref(null);
FormSplit, let objectStoragePort: number | null = $ref(null);
FormSection, let objectStorageAccessKey: string | null = $ref(null);
}, let objectStorageSecretKey: string | null = $ref(null);
let objectStorageUseSSL: boolean = $ref(false);
let objectStorageUseProxy: boolean = $ref(false);
let objectStorageSetPublicRead: boolean = $ref(false);
let objectStorageS3ForcePathStyle: boolean = $ref(true);
emits: ['info'], async function init() {
const meta = await os.api('admin/meta');
useObjectStorage = meta.useObjectStorage;
objectStorageBaseUrl = meta.objectStorageBaseUrl;
objectStorageBucket = meta.objectStorageBucket;
objectStoragePrefix = meta.objectStoragePrefix;
objectStorageEndpoint = meta.objectStorageEndpoint;
objectStorageRegion = meta.objectStorageRegion;
objectStoragePort = meta.objectStoragePort;
objectStorageAccessKey = meta.objectStorageAccessKey;
objectStorageSecretKey = meta.objectStorageSecretKey;
objectStorageUseSSL = meta.objectStorageUseSSL;
objectStorageUseProxy = meta.objectStorageUseProxy;
objectStorageSetPublicRead = meta.objectStorageSetPublicRead;
objectStorageS3ForcePathStyle = meta.objectStorageS3ForcePathStyle;
}
data() { function save() {
return { os.apiWithDialog('admin/update-meta', {
[symbols.PAGE_INFO]: { useObjectStorage,
title: this.$ts.objectStorage, objectStorageBaseUrl,
icon: 'fas fa-cloud', objectStorageBucket,
bg: 'var(--bg)', objectStoragePrefix,
actions: [{ objectStorageEndpoint,
asFullButton: true, objectStorageRegion,
icon: 'fas fa-check', objectStoragePort,
text: this.$ts.save, objectStorageAccessKey,
handler: this.save, objectStorageSecretKey,
}], objectStorageUseSSL,
}, objectStorageUseProxy,
useObjectStorage: false, objectStorageSetPublicRead,
objectStorageBaseUrl: null, objectStorageS3ForcePathStyle,
objectStorageBucket: null, }).then(() => {
objectStoragePrefix: null, fetchInstance();
objectStorageEndpoint: null, });
objectStorageRegion: null, }
objectStoragePort: null,
objectStorageAccessKey: null,
objectStorageSecretKey: null,
objectStorageUseSSL: false,
objectStorageUseProxy: false,
objectStorageSetPublicRead: false,
objectStorageS3ForcePathStyle: true,
}
},
methods: { defineExpose({
async init() { [symbols.PAGE_INFO]: {
const meta = await os.api('admin/meta'); title: i18n.ts.objectStorage,
this.useObjectStorage = meta.useObjectStorage; icon: 'fas fa-cloud',
this.objectStorageBaseUrl = meta.objectStorageBaseUrl; bg: 'var(--bg)',
this.objectStorageBucket = meta.objectStorageBucket; actions: [{
this.objectStoragePrefix = meta.objectStoragePrefix; asFullButton: true,
this.objectStorageEndpoint = meta.objectStorageEndpoint; icon: 'fas fa-check',
this.objectStorageRegion = meta.objectStorageRegion; text: i18n.ts.save,
this.objectStoragePort = meta.objectStoragePort; handler: save,
this.objectStorageAccessKey = meta.objectStorageAccessKey; }],
this.objectStorageSecretKey = meta.objectStorageSecretKey;
this.objectStorageUseSSL = meta.objectStorageUseSSL;
this.objectStorageUseProxy = meta.objectStorageUseProxy;
this.objectStorageSetPublicRead = meta.objectStorageSetPublicRead;
this.objectStorageS3ForcePathStyle = meta.objectStorageS3ForcePathStyle;
},
save() {
os.apiWithDialog('admin/update-meta', {
useObjectStorage: this.useObjectStorage,
objectStorageBaseUrl: this.objectStorageBaseUrl ? this.objectStorageBaseUrl : null,
objectStorageBucket: this.objectStorageBucket ? this.objectStorageBucket : null,
objectStoragePrefix: this.objectStoragePrefix ? this.objectStoragePrefix : null,
objectStorageEndpoint: this.objectStorageEndpoint ? this.objectStorageEndpoint : null,
objectStorageRegion: this.objectStorageRegion ? this.objectStorageRegion : null,
objectStoragePort: this.objectStoragePort ? this.objectStoragePort : null,
objectStorageAccessKey: this.objectStorageAccessKey ? this.objectStorageAccessKey : null,
objectStorageSecretKey: this.objectStorageSecretKey ? this.objectStorageSecretKey : null,
objectStorageUseSSL: this.objectStorageUseSSL,
objectStorageUseProxy: this.objectStorageUseProxy,
objectStorageSetPublicRead: this.objectStorageSetPublicRead,
objectStorageS3ForcePathStyle: this.objectStorageS3ForcePathStyle,
}).then(() => {
fetchInstance();
});
}
} }
}); });
</script> </script>