diff options
Diffstat (limited to 'src/site')
| -rw-r--r-- | src/site/components/settings/JoiObject.vue | 142 | ||||
| -rw-r--r-- | src/site/pages/dashboard/admin/settings.vue | 137 | ||||
| -rw-r--r-- | src/site/store/admin.js | 17 |
3 files changed, 189 insertions, 107 deletions
diff --git a/src/site/components/settings/JoiObject.vue b/src/site/components/settings/JoiObject.vue new file mode 100644 index 0000000..af5b4eb --- /dev/null +++ b/src/site/components/settings/JoiObject.vue @@ -0,0 +1,142 @@ +<template> + <div v-if="keys"> + <div v-for="[key, field] in Object.entries(keys)" :key="key"> + <b-field + :label="field.flags.label" + :message="field.flags.description" + class="field" + horizontal> + <b-input + v-if="getDisplayType(field) === 'string'" + v-model="settings.serviceName" + class="chibisafe-input" + expanded /> + <b-input + v-else-if="getDisplayType(field) === 'number'" + v-model="settings.serviceName" + type="number" + class="chibisafe-input" + :min="getMin(field)" + :max="getMax(field)" + expanded /> + <b-switch + v-else-if="getDisplayType(field) === 'boolean'" + v-model="settings.publicMode" + :rounded="false" + :true-value="true" + :false-value="false" /> + <!-- TODO: If array and has allowed items, limit input to those items only --> + <b-taginput + v-else-if="getDisplayType(field) === 'array' || getDisplayType(field) === 'tagInput'" + v-model="settings.arr" + ellipsis + icon="label" + :placeholder="field.flags.label" + aria-close-label="Delete this tag" + class="taginp" /> + <div v-else-if="getDisplayType(field) === 'checkbox'"> + <b-checkbox v-for="item in getAllowedItems(field)" :key="item" + v-model="settings.ech" + :native-value="item"> + {{ item }} + </b-checkbox> + </div> + </b-field> + <!-- + TODO: Add asterisk to required fields + TODO: Implement showing errors returned by backend/joi + --> + </div> + </div> +</template> + + +<script> +export default { + name: 'JoiObject', + props: { + keys: { + type: Object, + required: true + }, + values: { + type: Object, + required: true + }, + errors: { + 'type': Object, + 'default': () => ({}) + } + }, + data() { + return { + fields: null, // keys + values combined + settings: { + ech: [] + } + }; + }, + mounted() { + + }, + methods: { + getMin(field) { + if (field.type !== 'number') return; + + for (const rule of field.rules) { + if (rule.name === 'greater') return rule.args.limit + 1; + if (rule.name === 'min') return rule.args.limit; + } + }, + getMax(field) { + if (field.type !== 'number') return; + + for (const rule of field.rules) { + if (rule.name === 'less') return rule.args.limit - 1; + if (rule.name === 'max') return rule.args.limit; + } + }, + getDisplayType(field) { + if (!field.metas) return field.type; + + const foundMeta = field.metas.find(e => e.displayType); + + if (foundMeta) return foundMeta.displayType; + + return field.type; + }, + getAllowedItems(field) { + if (!field.items) return []; + + return field.items.reduce((acc, item) => { + if (!item.allow) return acc; + + return [...acc, ...item.allow]; + }, []); + } + } +}; +</script> +<style lang="scss" scoped> + @import '~/assets/styles/_colors.scss'; + + .field { + margin-bottom: 1em; + } + + .taginp { + ::v-deep { + .taginput-container { + border-color: #585858; + } + + .input::placeholder { + color: $textColor; + } + + .taginput-container, .control, .input { + background-color: transparent; + } + } + } +</style> diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue index 038c495..3b2e99b 100644 --- a/src/site/pages/dashboard/admin/settings.vue +++ b/src/site/pages/dashboard/admin/settings.vue @@ -11,112 +11,18 @@ </h2> <hr> - <b-field - label="Service name" - message="Please enter the name which this service is gonna be identified as" - horizontal> - <b-input - v-model="settings.serviceName" - class="chibisafe-input" - expanded /> - </b-field> - - <b-field - label="Upload folder" - message="Where to store the files relative to the working directory" - horizontal> - <b-input - v-model="settings.uploadFolder" - class="chibisafe-input" - expanded /> - </b-field> - - <b-field - label="Links per album" - message="Maximum links allowed per album" - horizontal> - <b-input - v-model="settings.linksPerAlbum" - class="chibisafe-input" - type="number" - expanded /> - </b-field> - - <b-field - label="Max upload size" - message="Maximum allowed file size in MB" - horizontal> - <b-input - v-model="settings.maxUploadSize" - class="chibisafe-input" - expanded /> - </b-field> - - <b-field - label="Filename length" - message="How many characters long should the generated filenames be" - horizontal> - <b-input - v-model="settings.filenameLength" - class="chibisafe-input" - expanded /> - </b-field> - - <b-field - label="Album link length" - message="How many characters a link for an album should have" - horizontal> - <b-input - v-model="settings.albumLinkLength" - class="chibisafe-input" - expanded /> - </b-field> - - <b-field - label="Generate thumbnails" - message="Generate thumbnails when uploading a file if possible" - horizontal> - <b-switch - v-model="settings.generateThumbnails" - :true-value="true" - :false-value="false" /> - </b-field> - - <b-field - label="Generate zips" - message="Allow generating zips to download entire albums" - horizontal> - <b-switch - v-model="settings.generateZips" - :true-value="true" - :false-value="false" /> - </b-field> - - <b-field - label="Public mode" - message="Enable anonymous uploades" - horizontal> - <b-switch - v-model="settings.publicMode" - :true-value="true" - :false-value="false" /> - </b-field> - - <b-field - label="Enable creating account" - message="Enable creating new accounts in the platform" - horizontal> - <b-switch - v-model="settings.enableAccounts" - :true-value="true" - :false-value="false" /> - </b-field> + <div v-for="[sectionName, fields] in Object.entries(sectionedSettings)" :key="sectionName" class="block"> + <h5 class="title is-5 has-text-grey-lighter"> + {{ sectionName }} + </h5> + <JoiObject :keys="fields" :values="{}" /> + </div> <div class="mb2 mt2 text-center"> <button class="button is-primary" @click="promptRestartService"> - Save and restart service + Save settings </button> </div> </div> @@ -128,17 +34,38 @@ <script> import { mapState } from 'vuex'; import Sidebar from '~/components/sidebar/Sidebar.vue'; +import JoiObject from '~/components/settings/JoiObject.vue'; export default { components: { - Sidebar + Sidebar, + JoiObject }, middleware: ['auth', 'admin'], - computed: mapState({ - settings: state => state.admin.settings - }), + computed: { + ...mapState({ + settings: state => state.admin.settings, + settingsSchema: state => state.admin.settingsSchema + }), + sectionedSettings() { + return Object.entries(this.settingsSchema.keys).reduce((acc, [key, field]) => { + if (!field.metas) acc['Other'] = { ...acc['Other'], [key]: field }; + + const sectionMeta = field.metas.find(e => e.section); + if (sectionMeta) { + acc[sectionMeta.section] = { ...acc[sectionMeta.section], [key]: field }; + } else { + acc['Other'] = { ...acc['Other'], [key]: field }; + } + + return acc; + }, {}); + } + }, async asyncData({ app }) { await app.store.dispatch('admin/fetchSettings'); + // TODO: Implement merging fields with values from the db (no endpoint to fetch settings yet) + await app.store.dispatch('admin/getSettingsSchema'); }, methods: { promptRestartService() { diff --git a/src/site/store/admin.js b/src/site/store/admin.js index cac1cca..4f814b5 100644 --- a/src/site/store/admin.js +++ b/src/site/store/admin.js @@ -12,7 +12,11 @@ export const state = () => ({ }, file: {}, settings: {}, - statistics: {} + statistics: {}, + settingsSchema: { + type: null, + keys: {} + } }); export const actions = { @@ -25,10 +29,16 @@ export const actions = { async fetchStatistics({ commit }, category) { const url = category ? `service/statistics/${category}` : 'service/statistics'; const response = await this.$axios.$get(url); - commit('setStatistics', { statistics: response.statistics, category: category }); + commit('setStatistics', { statistics: response.statistics, category }); return response; }, + async getSettingsSchema({ commit }) { + // XXX: Maybe move to the config store? + const response = await this.$axios.$get('service/config/schema'); + + commit('setSettingsSchema', response); + }, async fetchUsers({ commit }) { const response = await this.$axios.$get('admin/users'); commit('setUsers', response); @@ -105,6 +115,9 @@ export const mutations = { state.statistics = statistics; } }, + setSettingsSchema(state, { schema }) { + state.settingsSchema = schema; + }, setUsers(state, { users }) { state.users = users; }, |