mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<template>
|
|
<CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
|
|
<template v-for="(field, fname) in fields" :key="fname">
|
|
<FormField v-bind="field" v-model="self[fname]" />
|
|
<hr />
|
|
</template>
|
|
</CardForm>
|
|
</template>
|
|
|
|
<script>
|
|
// FIXME move into helpers ?
|
|
// Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
|
|
function mapStoreGetSet(props = [], action = 'commit') {
|
|
return props.reduce((obj, prop) => {
|
|
obj[prop] = {
|
|
get() {
|
|
return this.$store.getters[prop]
|
|
},
|
|
set(value) {
|
|
const key =
|
|
(action === 'commit' ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
|
|
this.$store[action](key, value)
|
|
},
|
|
}
|
|
return obj
|
|
}, {})
|
|
}
|
|
|
|
export default {
|
|
name: 'ToolWebadmin',
|
|
|
|
data() {
|
|
return {
|
|
// Hacky way to be able to dynamicly point to a computed property `self['computedProp']`
|
|
self: this,
|
|
|
|
fields: {
|
|
locale: {
|
|
label: this.$i18n.t('tools_webadmin.language'),
|
|
component: 'SelectItem',
|
|
props: { id: 'locale', choices: [] },
|
|
},
|
|
|
|
fallbackLocale: {
|
|
label: this.$i18n.t('tools_webadmin.fallback_language'),
|
|
description: this.$i18n.t(
|
|
'tools_webadmin.fallback_language_description',
|
|
),
|
|
component: 'SelectItem',
|
|
props: { id: 'fallback-locale', choices: [] },
|
|
},
|
|
|
|
cache: {
|
|
id: 'cache',
|
|
label: this.$i18n.t('tools_webadmin.cache'),
|
|
description: this.$i18n.t('tools_webadmin.cache_description'),
|
|
component: 'CheckboxItem',
|
|
props: { labels: { true: 'enabled', false: 'disabled' } },
|
|
},
|
|
|
|
transitions: {
|
|
id: 'transitions',
|
|
label: this.$i18n.t('tools_webadmin.transitions'),
|
|
component: 'CheckboxItem',
|
|
props: { labels: { true: 'enabled', false: 'disabled' } },
|
|
},
|
|
|
|
theme: {
|
|
id: 'theme',
|
|
label: this.$i18n.t('tools_webadmin.theme'),
|
|
component: 'CheckboxItem',
|
|
props: { labels: { true: '🌙', false: '☀️' } },
|
|
},
|
|
|
|
// experimental: added in `created()`
|
|
},
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// Those are set/get computed properties
|
|
...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
|
|
...mapStoreGetSet(['cache', 'transitions', 'experimental']),
|
|
},
|
|
|
|
created() {
|
|
const availableLocales = this.$store.getters.availableLocales
|
|
this.fields.locale.props.choices = availableLocales
|
|
this.fields.fallbackLocale.props.choices = availableLocales
|
|
if (import.meta.env.DEV) {
|
|
this.fields.experimental = {
|
|
id: 'experimental',
|
|
label: this.$i18n.t('tools_webadmin.experimental'),
|
|
description: this.$i18n.t('tools_webadmin.experimental_description'),
|
|
component: 'CheckboxItem',
|
|
props: { labels: { true: 'enabled', false: 'disabled' } },
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|