diff --git a/ux/src/pages/AdminGeneral.vue b/ux/src/pages/AdminGeneral.vue index 1c945a88..e4594413 100644 --- a/ux/src/pages/AdminGeneral.vue +++ b/ux/src/pages/AdminGeneral.vue @@ -4,8 +4,8 @@ q-page.admin-general .col-auto img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-web.svg') .col.q-pl-md - .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.general.title') }} - .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.general.subtitle') }} + .text-h5.text-primary.animated.fadeInLeft {{ t('admin.general.title') }} + .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.general.subtitle') }} .col-auto q-btn.q-mr-sm.acrylic-btn( icon='las la-question-circle' @@ -16,19 +16,19 @@ q-page.admin-general type='a' ) q-btn.q-mr-sm.acrylic-btn( - icon='las la-redo-alt' + icon='fa-solid fa-rotate' flat color='secondary' - :loading='loading > 0' + :loading='state.loading > 0' @click='load' ) q-btn( unelevated - icon='mdi-check' - :label='$t(`common.actions.apply`)' + icon='fa-solid fa-check' + :label='t(`common.actions.apply`)' color='secondary' @click='save' - :disabled='loading > 0' + :disabled='state.loading > 0' ) q-separator(inset) .row.q-pa-md.q-col-gutter-md @@ -38,52 +38,48 @@ q-page.admin-general //- ----------------------- q-card.shadow-1.q-pb-sm q-card-section - .text-subtitle1 {{$t('admin.general.siteInfo')}} + .text-subtitle1 {{t('admin.general.siteInfo')}} q-item blueprint-icon(icon='home') q-item-section - q-item-label {{$t(`admin.general.siteTitle`)}} - q-item-label(caption) {{$t(`admin.general.siteTitleHint`)}} + q-item-label {{t(`admin.general.siteTitle`)}} + q-item-label(caption) {{t(`admin.general.siteTitleHint`)}} q-item-section q-input( outlined - v-model='config.title' + v-model='state.config.title' dense - :rules=`[ - val => /^[^<>"]+$/.test(val) || $t('admin.general.siteTitleInvalidChars') - ]` + :rules='rulesTitle' hide-bottom-space - :aria-label='$t(`admin.general.siteTitle`)' + :aria-label='t(`admin.general.siteTitle`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='select-all') q-item-section - q-item-label {{$t(`admin.general.siteDescription`)}} - q-item-label(caption) {{$t(`admin.general.siteDescriptionHint`)}} + q-item-label {{t(`admin.general.siteDescription`)}} + q-item-label(caption) {{t(`admin.general.siteDescriptionHint`)}} q-item-section q-input( outlined - v-model='config.description' + v-model='state.config.description' dense - :aria-label='$t(`admin.general.siteDescription`)' + :aria-label='t(`admin.general.siteDescription`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='dns') q-item-section - q-item-label {{$t(`admin.general.siteHostname`)}} - q-item-label(caption) {{$t(`admin.general.siteHostnameHint`)}} + q-item-label {{t(`admin.general.siteHostname`)}} + q-item-label(caption) {{t(`admin.general.siteHostnameHint`)}} q-item-section q-input( outlined - v-model='config.hostname' + v-model='state.config.hostname' dense - :rules=`[ - val => /^(([a-z0-9.-]+)|([*]{1}))$/.test(val) || $t('admin.general.siteHostnameInvalid') - ]` + :rules='rulesHostname' hide-bottom-space - :aria-label='$t(`admin.general.siteHostname`)' + :aria-label='t(`admin.general.siteHostname`)' ) //- ----------------------- @@ -91,36 +87,36 @@ q-page.admin-general //- ----------------------- q-card.shadow-1.q-pb-sm.q-mt-md q-card-section - .text-subtitle1 {{$t('admin.general.footerCopyright')}} + .text-subtitle1 {{t('admin.general.footerCopyright')}} q-item blueprint-icon(icon='building') q-item-section - q-item-label {{$t(`admin.general.companyName`)}} - q-item-label(caption) {{$t(`admin.general.companyNameHint`)}} + q-item-label {{t(`admin.general.companyName`)}} + q-item-label(caption) {{t(`admin.general.companyNameHint`)}} q-item-section q-input( outlined - v-model='config.company' + v-model='state.config.company' dense - :aria-label='$t(`admin.general.companyName`)' + :aria-label='t(`admin.general.companyName`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='copyright') q-item-section - q-item-label {{$t(`admin.general.contentLicense`)}} - q-item-label(caption) {{$t(`admin.general.contentLicenseHint`)}} + q-item-label {{t(`admin.general.contentLicense`)}} + q-item-label(caption) {{t(`admin.general.contentLicenseHint`)}} q-item-section q-select( outlined - v-model='config.contentLicense' + v-model='state.config.contentLicense' :options='contentLicenses' option-value='value' option-label='text' emit-value map-options dense - :aria-label='$t(`admin.general.contentLicense`)' + :aria-label='t(`admin.general.contentLicense`)' ) //- ----------------------- @@ -128,80 +124,76 @@ q-page.admin-general //- ----------------------- q-card.shadow-1.q-pb-sm.q-mt-md q-card-section - .text-subtitle1 {{$t('admin.general.features')}} + .text-subtitle1 {{t('admin.general.features')}} q-item(tag='label') blueprint-icon(icon='discussion-forum') q-item-section - q-item-label {{$t(`admin.general.allowComments`)}} - q-item-label(caption) {{$t(`admin.general.allowCommentsHint`)}} + q-item-label {{t(`admin.general.allowComments`)}} + q-item-label(caption) {{t(`admin.general.allowCommentsHint`)}} q-item-section(avatar) q-toggle( - v-model='config.features.comments' + v-model='state.config.features.comments' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.allowComments`)' + :aria-label='t(`admin.general.allowComments`)' ) q-separator.q-my-sm(inset) q-item(tag='label') blueprint-icon(icon='pen') q-item-section - q-item-label {{$t(`admin.general.allowContributions`)}} - q-item-label(caption) {{$t(`admin.general.allowContributionsHint`)}} + q-item-label {{t(`admin.general.allowContributions`)}} + q-item-label(caption) {{t(`admin.general.allowContributionsHint`)}} q-item-section(avatar) q-toggle( - v-model='config.features.contributions' + v-model='state.config.features.contributions' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.allowContributions`)' + :aria-label='t(`admin.general.allowContributions`)' ) q-separator.q-my-sm(inset) q-item(tag='label') blueprint-icon(icon='administrator-male') q-item-section - q-item-label {{$t(`admin.general.allowProfile`)}} - q-item-label(caption) {{$t(`admin.general.allowProfileHint`)}} + q-item-label {{t(`admin.general.allowProfile`)}} + q-item-label(caption) {{t(`admin.general.allowProfileHint`)}} q-item-section(avatar) q-toggle( - v-model='config.features.profile' + v-model='state.config.features.profile' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.allowProfile`)' + :aria-label='t(`admin.general.allowProfile`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='star-half-empty') q-item-section - q-item-label {{$t(`admin.general.allowRatings`)}} - q-item-label(caption) {{$t(`admin.general.allowRatingsHint`)}} + q-item-label {{t(`admin.general.allowRatings`)}} + q-item-label(caption) {{t(`admin.general.allowRatingsHint`)}} q-item-section.col-auto q-btn-toggle( - v-model='config.features.ratingsMode' + v-model='state.config.features.ratingsMode' push glossy no-caps toggle-color='primary' - :options=`[ - { label: $t('admin.general.ratingsOff'), value: 'off' }, - { label: $t('admin.general.ratingsThumbs'), value: 'thumbs' }, - { label: $t('admin.general.ratingsStars'), value: 'stars' } - ]` + :options='ratingsModes' ) q-separator.q-my-sm(inset) q-item(tag='label') blueprint-icon(icon='search') q-item-section - q-item-label {{$t(`admin.general.allowSearch`)}} - q-item-label(caption) {{$t(`admin.general.allowSearchHint`)}} + q-item-label {{t(`admin.general.allowSearch`)}} + q-item-label(caption) {{t(`admin.general.allowSearchHint`)}} q-item-section(avatar) q-toggle( - v-model='config.features.search' + v-model='state.config.features.search' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.allowSearch`)' + :aria-label='t(`admin.general.allowSearch`)' ) .col-12.col-lg-5 @@ -210,14 +202,14 @@ q-page.admin-general //- ----------------------- q-card.shadow-1.q-pb-sm q-card-section - .text-subtitle1 {{$t('admin.general.logo')}} + .text-subtitle1 {{t('admin.general.logo')}} q-item - blueprint-icon.self-start(icon='butterfly', indicator, :indicator-text='$t(`admin.extensions.requiresSharp`)') + blueprint-icon.self-start(icon='butterfly', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)') q-item-section .flex q-item-section - q-item-label {{$t(`admin.general.logoUpl`)}} - q-item-label(caption) {{$t(`admin.general.logoUplHint`)}} + q-item-label {{t(`admin.general.logoUpl`)}} + q-item-label(caption) {{t(`admin.general.logoUplHint`)}} q-item-section.col-auto q-btn( label='Upload' @@ -233,7 +225,7 @@ q-page.admin-general ) q-btn(dense, flat, to='/') q-avatar( - v-if='config.logoText' + v-if='state.config.logoText' size='34px' square ) @@ -243,29 +235,29 @@ q-page.admin-general src='https://m.media-amazon.com/images/G/01/audibleweb/arya/navigation/audible_logo._V517446980_.svg' style='height: 34px;' ) - q-toolbar-title.text-h6.font-poppins(v-if='config.logoText') {{config.title}} + q-toolbar-title.text-h6.font-poppins(v-if='state.config.logoText') {{state.config.title}} q-separator.q-my-sm(inset) q-item(tag='label') blueprint-icon(icon='information') q-item-section - q-item-label {{$t(`admin.general.displaySiteTitle`)}} - q-item-label(caption) {{$t(`admin.general.displaySiteTitleHint`)}} + q-item-label {{t(`admin.general.displaySiteTitle`)}} + q-item-label(caption) {{t(`admin.general.displaySiteTitleHint`)}} q-item-section(avatar) q-toggle( - v-model='config.logoText' + v-model='state.config.logoText' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.displaySiteTitle`)' + :aria-label='t(`admin.general.displaySiteTitle`)' ) q-separator.q-my-sm(inset) q-item - blueprint-icon.self-start(icon='starfish', indicator, :indicator-text='$t(`admin.extensions.requiresSharp`)') + blueprint-icon.self-start(icon='starfish', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)') q-item-section .flex q-item-section - q-item-label {{$t(`admin.general.favicon`)}} - q-item-label(caption) {{$t(`admin.general.faviconHint`)}} + q-item-label {{t(`admin.general.favicon`)}} + q-item-label(caption) {{t(`admin.general.faviconHint`)}} q-item-section.col-auto q-btn( label='Upload' @@ -282,7 +274,7 @@ q-page.admin-general square ) img(src='/_assets/logo-wikijs.svg') - .text-caption.q-ml-sm {{config.title}} + .text-caption.q-ml-sm {{state.config.title}} div q-icon(name='las la-otter', size='24px', color='grey') .text-caption.q-ml-sm Lorem ipsum @@ -293,19 +285,19 @@ q-page.admin-general //- ----------------------- //- Defaults //- ----------------------- - q-card.shadow-1.q-pb-sm.q-mt-md(v-if='config.defaults') + q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.config.defaults') q-card-section - .text-subtitle1 {{$t('admin.general.defaults')}} + .text-subtitle1 {{t('admin.general.defaults')}} q-item blueprint-icon(icon='timezone') q-item-section - q-item-label {{$t(`admin.general.defaultTimezone`)}} - q-item-label(caption) {{$t(`admin.general.defaultTimezoneHint`)}} + q-item-label {{t(`admin.general.defaultTimezone`)}} + q-item-label(caption) {{t(`admin.general.defaultTimezoneHint`)}} q-item-section q-select( outlined - v-model='config.defaults.timezone' - :options='timezones' + v-model='state.config.defaults.timezone' + :options='dataStore.timezones' option-value='value' option-label='text' emit-value @@ -313,372 +305,410 @@ q-page.admin-general dense options-dense :virtual-scroll-slice-size='1000' - :aria-label='$t(`admin.general.defaultTimezone`)' + :aria-label='t(`admin.general.defaultTimezone`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='calendar') q-item-section - q-item-label {{$t(`admin.general.defaultDateFormat`)}} - q-item-label(caption) {{$t(`admin.general.defaultDateFormatHint`)}} + q-item-label {{t(`admin.general.defaultDateFormat`)}} + q-item-label(caption) {{t(`admin.general.defaultDateFormatHint`)}} q-item-section q-select( outlined - v-model='config.defaults.dateFormat' + v-model='state.config.defaults.dateFormat' emit-value map-options dense - :aria-label='$t(`admin.general.defaultDateFormat`)' - :options=`[ - { label: $t('profile.localeDefault'), value: '' }, - { label: 'DD/MM/YYYY', value: 'DD/MM/YYYY' }, - { label: 'DD.MM.YYYY', value: 'DD.MM.YYYY' }, - { label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' }, - { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' }, - { label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' } - ]` + :aria-label='t(`admin.general.defaultDateFormat`)' + :options='dateFormats' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='clock') q-item-section - q-item-label {{$t(`admin.general.defaultTimeFormat`)}} - q-item-label(caption) {{$t(`admin.general.defaultTimeFormatHint`)}} + q-item-label {{t(`admin.general.defaultTimeFormat`)}} + q-item-label(caption) {{t(`admin.general.defaultTimeFormatHint`)}} q-item-section.col-auto q-btn-toggle( - v-model='config.defaults.timeFormat' + v-model='state.config.defaults.timeFormat' push glossy no-caps toggle-color='primary' - :options=`[ - { label: $t('admin.general.defaultTimeFormat12h'), value: '12h' }, - { label: $t('admin.general.defaultTimeFormat24h'), value: '24h' } - ]` + :options='timeFormats' ) //- ----------------------- //- SEO //- ----------------------- - q-card.shadow-1.q-pb-sm.q-mt-md(v-if='config.robots') + q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.config.robots') q-card-section .text-subtitle1 SEO q-item(tag='label') blueprint-icon(icon='bot') q-item-section - q-item-label {{$t(`admin.general.searchAllowIndexing`)}} - q-item-label(caption) {{$t(`admin.general.searchAllowIndexingHint`)}} + q-item-label {{t(`admin.general.searchAllowIndexing`)}} + q-item-label(caption) {{t(`admin.general.searchAllowIndexingHint`)}} q-item-section(avatar) q-toggle( - v-model='config.robots.index' + v-model='state.config.robots.index' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.searchAllowIndexing`)' + :aria-label='t(`admin.general.searchAllowIndexing`)' ) q-separator.q-my-sm(inset) q-item(tag='label') blueprint-icon(icon='polyline') q-item-section - q-item-label {{$t(`admin.general.searchAllowFollow`)}} - q-item-label(caption) {{$t(`admin.general.searchAllowFollowHint`)}} + q-item-label {{t(`admin.general.searchAllowFollow`)}} + q-item-label(caption) {{t(`admin.general.searchAllowFollowHint`)}} q-item-section(avatar) q-toggle( - v-model='config.robots.follow' + v-model='state.config.robots.follow' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.general.searchAllowFollow`)' + :aria-label='t(`admin.general.searchAllowFollow`)' ) -