YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: rework ToolWebadmin form view

Browse source
This commit is contained in:
axolotle 2024-07-29 14:49:36 +02:00
parent 2edfe943cc
commit c34e05d5eb
1 changed files with 41 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/src/views/tool/ToolWebadmin.vue
View file

@ -1,82 +1,80 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { computed, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { asUnreffed } from '@/helpers/commons' import { useSettings } from '@/composables/useSettings'
import { useMapStoreGetSet, useStoreGetters } from '@/store/utils' import { getKeys, pick } from '@/helpers/commons'
import type { FormField } from '@/types/form' import type { FormField } from '@/types/form'
const { t } = useI18n() const { t } = useI18n()
const { availableLocales } = useStoreGetters() // Computed `t` to get on the fly lang change in this view
const ct = (key: string) => computed(() => t(key))
const form = ref({ const settings = useSettings()
...useMapStoreGetSet<Fields>({
commit: ['cache', 'transitions', 'experimental'],
dispatch: ['locale', 'fallbackLocale', 'dark'],
}),
})
type Fields = { const fields = {
locale: FormField<'SelectItem', string> locale: reactive({
fallbackLocale: FormField<'SelectItem', string>
cache: FormField<'CheckboxItem', boolean>
transitions: FormField<'CheckboxItem', boolean>
dark: FormField<'CheckboxItem', boolean>
experimental: FormField<'CheckboxItem', boolean>
}
const fields: Fields = {
locale: {
component: 'SelectItem', component: 'SelectItem',
label: t('tools_webadmin.language'), label: ct('tools_webadmin.language'),
props: { id: 'locale', choices: asUnreffed(availableLocales) }, props: { id: 'locale', choices: settings.availableLocales },
}, }) as FormField<'SelectItem', string>,
fallbackLocale: { fallbackLocale: reactive({
component: 'SelectItem', component: 'SelectItem',
label: t('tools_webadmin.fallback_language'), label: ct('tools_webadmin.fallback_language'),
description: t('tools_webadmin.fallback_language_description'), description: ct('tools_webadmin.fallback_language_description'),
props: { id: 'fallback-locale', choices: asUnreffed(availableLocales) }, props: {
}, id: 'fallback-locale',
choices: settings.availableLocales,
},
}) as FormField<'SelectItem', string>,
cache: { cache: reactive({
component: 'CheckboxItem', component: 'CheckboxItem',
id: 'cache', id: 'cache',
label: t('tools_webadmin.cache'), label: ct('tools_webadmin.cache'),
description: t('tools_webadmin.cache_description'), description: ct('tools_webadmin.cache_description'),
props: { labels: { true: 'enabled', false: 'disabled' } }, props: { labels: { true: 'enabled', false: 'disabled' } },
}, }) as FormField<'CheckboxItem', boolean>,
transitions: { transitions: reactive({
component: 'CheckboxItem', component: 'CheckboxItem',
id: 'transitions', id: 'transitions',
label: t('tools_webadmin.transitions'), label: ct('tools_webadmin.transitions'),
props: { labels: { true: 'enabled', false: 'disabled' } }, props: { labels: { true: 'enabled', false: 'disabled' } },
}, }) as FormField<'CheckboxItem', boolean>,
dark: { dark: reactive({
component: 'CheckboxItem', component: 'CheckboxItem',
id: 'theme', id: 'theme',
label: t('tools_webadmin.theme'), label: ct('tools_webadmin.theme'),
props: { labels: { true: '🌙', false: '☀️' } }, props: { labels: { true: '🌙', false: '☀️' } },
}, }) as FormField<'CheckboxItem', boolean>,
experimental: { experimental: reactive({
component: 'CheckboxItem', component: 'CheckboxItem',
id: 'experimental', id: 'experimental',
label: t('tools_webadmin.experimental'), label: ct('tools_webadmin.experimental'),
description: t('tools_webadmin.experimental_description'), description: ct('tools_webadmin.experimental_description'),
// Available in dev mode only // Available in dev mode only
visible: import.meta.env.DEV, visible: import.meta.env.DEV,
props: { labels: { true: 'enabled', false: 'disabled' } }, props: { labels: { true: 'enabled', false: 'disabled' } },
}, }) as FormField<'CheckboxItem', boolean>,
} }
const form = ref(pick(settings, getKeys(fields)))
watch(form, (form) => {
getKeys(form).forEach((k) => {
settings[k].value = form[k]
})
})
</script> </script>
<template> <template>
<CardForm <CardForm
v-model="form" v-model="form"
:fields="fields" :fields="fields"
:title="$t('tools_webadmin_settings')" :title="t('tools_webadmin_settings')"
icon="cog" icon="cog"
no-footer no-footer
hr hr