Skip to content

W
wiki-js
Unverified Commit 464f55cf authored by NGPixel's avatar NGPixel
Browse files
Options

refactor: admin general to vue3 comp api

parent 358ad1fd
Show whitespace changes
Inline Side-by-side
Showing with 247 additions and 217 deletions
ux/src/pages/AdminGeneral.vue
View file @ 464f55cf
...@@ -4,8 +4,8 @@ q-page.admin-general ...@@ -4,8 +4,8 @@ q-page.admin-general
.col-auto .col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-web.svg') img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-web.svg')
.col.q-pl-md .col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ $t('admin.general.title') }} .text-h5.text-primary.animated.fadeInLeft {{ t('admin.general.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.general.subtitle') }} .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.general.subtitle') }}
.col-auto .col-auto
q-btn.q-mr-sm.acrylic-btn( q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle' icon='las la-question-circle'
...@@ -16,19 +16,19 @@ q-page.admin-general ...@@ -16,19 +16,19 @@ q-page.admin-general
type='a' type='a'
) )
q-btn.q-mr-sm.acrylic-btn( q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt' icon='fa-solid fa-rotate'
flat flat
color='secondary' color='secondary'
:loading='loading > 0' :loading='state.loading > 0'
@click='load' @click='load'
) )
q-btn( q-btn(
unelevated unelevated
icon='mdi-check' icon='fa-solid fa-check'
:label='$t(`common.actions.apply`)' :label='t(`common.actions.apply`)'
color='secondary' color='secondary'
@click='save' @click='save'
:disabled='loading > 0' :disabled='state.loading > 0'
) )
q-separator(inset) q-separator(inset)
.row.q-pa-md.q-col-gutter-md .row.q-pa-md.q-col-gutter-md
...@@ -38,52 +38,48 @@ q-page.admin-general ...@@ -38,52 +38,48 @@ q-page.admin-general
//- ----------------------- //- -----------------------
q-card.shadow-1.q-pb-sm q-card.shadow-1.q-pb-sm
q-card-section q-card-section
.text-subtitle1 {{$t('admin.general.siteInfo')}} .text-subtitle1 {{t('admin.general.siteInfo')}}
q-item q-item
blueprint-icon(icon='home') blueprint-icon(icon='home')
q-item-section q-item-section
q-item-label {{$t(`admin.general.siteTitle`)}} q-item-label {{t(`admin.general.siteTitle`)}}
q-item-label(caption) {{$t(`admin.general.siteTitleHint`)}} q-item-label(caption) {{t(`admin.general.siteTitleHint`)}}
q-item-section q-item-section
q-input( q-input(
outlined outlined
v-model='config.title' v-model='state.config.title'
dense dense
:rules=`[ :rules='rulesTitle'
val => /^[^<>"]+$/.test(val) || $t('admin.general.siteTitleInvalidChars')
]`
hide-bottom-space hide-bottom-space
:aria-label='$t(`admin.general.siteTitle`)' :aria-label='t(`admin.general.siteTitle`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='select-all') blueprint-icon(icon='select-all')
q-item-section q-item-section
q-item-label {{$t(`admin.general.siteDescription`)}} q-item-label {{t(`admin.general.siteDescription`)}}
q-item-label(caption) {{$t(`admin.general.siteDescriptionHint`)}} q-item-label(caption) {{t(`admin.general.siteDescriptionHint`)}}
q-item-section q-item-section
q-input( q-input(
outlined outlined
v-model='config.description' v-model='state.config.description'
dense dense
:aria-label='$t(`admin.general.siteDescription`)' :aria-label='t(`admin.general.siteDescription`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='dns') blueprint-icon(icon='dns')
q-item-section q-item-section
q-item-label {{$t(`admin.general.siteHostname`)}} q-item-label {{t(`admin.general.siteHostname`)}}
q-item-label(caption) {{$t(`admin.general.siteHostnameHint`)}} q-item-label(caption) {{t(`admin.general.siteHostnameHint`)}}
q-item-section q-item-section
q-input( q-input(
outlined outlined
v-model='config.hostname' v-model='state.config.hostname'
dense dense
:rules=`[ :rules='rulesHostname'
val => /^(([a-z0-9.-]+)|([*]{1}))$/.test(val) || $t('admin.general.siteHostnameInvalid')
]`
hide-bottom-space hide-bottom-space
:aria-label='$t(`admin.general.siteHostname`)' :aria-label='t(`admin.general.siteHostname`)'
) )
//- ----------------------- //- -----------------------
...@@ -91,36 +87,36 @@ q-page.admin-general ...@@ -91,36 +87,36 @@ q-page.admin-general
//- ----------------------- //- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section q-card-section
.text-subtitle1 {{$t('admin.general.footerCopyright')}} .text-subtitle1 {{t('admin.general.footerCopyright')}}
q-item q-item
blueprint-icon(icon='building') blueprint-icon(icon='building')
q-item-section q-item-section
q-item-label {{$t(`admin.general.companyName`)}} q-item-label {{t(`admin.general.companyName`)}}
q-item-label(caption) {{$t(`admin.general.companyNameHint`)}} q-item-label(caption) {{t(`admin.general.companyNameHint`)}}
q-item-section q-item-section
q-input( q-input(
outlined outlined
v-model='config.company' v-model='state.config.company'
dense dense
:aria-label='$t(`admin.general.companyName`)' :aria-label='t(`admin.general.companyName`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='copyright') blueprint-icon(icon='copyright')
q-item-section q-item-section
q-item-label {{$t(`admin.general.contentLicense`)}} q-item-label {{t(`admin.general.contentLicense`)}}
q-item-label(caption) {{$t(`admin.general.contentLicenseHint`)}} q-item-label(caption) {{t(`admin.general.contentLicenseHint`)}}
q-item-section q-item-section
q-select( q-select(
outlined outlined
v-model='config.contentLicense' v-model='state.config.contentLicense'
:options='contentLicenses' :options='contentLicenses'
option-value='value' option-value='value'
option-label='text' option-label='text'
emit-value emit-value
map-options map-options
dense dense
:aria-label='$t(`admin.general.contentLicense`)' :aria-label='t(`admin.general.contentLicense`)'
) )
//- ----------------------- //- -----------------------
...@@ -128,80 +124,76 @@ q-page.admin-general ...@@ -128,80 +124,76 @@ q-page.admin-general
//- ----------------------- //- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section q-card-section
.text-subtitle1 {{$t('admin.general.features')}} .text-subtitle1 {{t('admin.general.features')}}
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='discussion-forum') blueprint-icon(icon='discussion-forum')
q-item-section q-item-section
q-item-label {{$t(`admin.general.allowComments`)}} q-item-label {{t(`admin.general.allowComments`)}}
q-item-label(caption) {{$t(`admin.general.allowCommentsHint`)}} q-item-label(caption) {{t(`admin.general.allowCommentsHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.features.comments' v-model='state.config.features.comments'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.allowComments`)' :aria-label='t(`admin.general.allowComments`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='pen') blueprint-icon(icon='pen')
q-item-section q-item-section
q-item-label {{$t(`admin.general.allowContributions`)}} q-item-label {{t(`admin.general.allowContributions`)}}
q-item-label(caption) {{$t(`admin.general.allowContributionsHint`)}} q-item-label(caption) {{t(`admin.general.allowContributionsHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.features.contributions' v-model='state.config.features.contributions'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.allowContributions`)' :aria-label='t(`admin.general.allowContributions`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='administrator-male') blueprint-icon(icon='administrator-male')
q-item-section q-item-section
q-item-label {{$t(`admin.general.allowProfile`)}} q-item-label {{t(`admin.general.allowProfile`)}}
q-item-label(caption) {{$t(`admin.general.allowProfileHint`)}} q-item-label(caption) {{t(`admin.general.allowProfileHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.features.profile' v-model='state.config.features.profile'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.allowProfile`)' :aria-label='t(`admin.general.allowProfile`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='star-half-empty') blueprint-icon(icon='star-half-empty')
q-item-section q-item-section
q-item-label {{$t(`admin.general.allowRatings`)}} q-item-label {{t(`admin.general.allowRatings`)}}
q-item-label(caption) {{$t(`admin.general.allowRatingsHint`)}} q-item-label(caption) {{t(`admin.general.allowRatingsHint`)}}
q-item-section.col-auto q-item-section.col-auto
q-btn-toggle( q-btn-toggle(
v-model='config.features.ratingsMode' v-model='state.config.features.ratingsMode'
push push
glossy glossy
no-caps no-caps
toggle-color='primary' toggle-color='primary'
:options=`[ :options='ratingsModes'
{ label: $t('admin.general.ratingsOff'), value: 'off' },
{ label: $t('admin.general.ratingsThumbs'), value: 'thumbs' },
{ label: $t('admin.general.ratingsStars'), value: 'stars' }
]`
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='search') blueprint-icon(icon='search')
q-item-section q-item-section
q-item-label {{$t(`admin.general.allowSearch`)}} q-item-label {{t(`admin.general.allowSearch`)}}
q-item-label(caption) {{$t(`admin.general.allowSearchHint`)}} q-item-label(caption) {{t(`admin.general.allowSearchHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.features.search' v-model='state.config.features.search'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.allowSearch`)' :aria-label='t(`admin.general.allowSearch`)'
) )
.col-12.col-lg-5 .col-12.col-lg-5
...@@ -210,14 +202,14 @@ q-page.admin-general ...@@ -210,14 +202,14 @@ q-page.admin-general
//- ----------------------- //- -----------------------
q-card.shadow-1.q-pb-sm q-card.shadow-1.q-pb-sm
q-card-section q-card-section
.text-subtitle1 {{$t('admin.general.logo')}} .text-subtitle1 {{t('admin.general.logo')}}
q-item 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 q-item-section
.flex .flex
q-item-section q-item-section
q-item-label {{$t(`admin.general.logoUpl`)}} q-item-label {{t(`admin.general.logoUpl`)}}
q-item-label(caption) {{$t(`admin.general.logoUplHint`)}} q-item-label(caption) {{t(`admin.general.logoUplHint`)}}
q-item-section.col-auto q-item-section.col-auto
q-btn( q-btn(
label='Upload' label='Upload'
...@@ -233,7 +225,7 @@ q-page.admin-general ...@@ -233,7 +225,7 @@ q-page.admin-general
) )
q-btn(dense, flat, to='/') q-btn(dense, flat, to='/')
q-avatar( q-avatar(
v-if='config.logoText' v-if='state.config.logoText'
size='34px' size='34px'
square square
) )
...@@ -243,29 +235,29 @@ q-page.admin-general ...@@ -243,29 +235,29 @@ q-page.admin-general
src='https://m.media-amazon.com/images/G/01/audibleweb/arya/navigation/audible_logo._V517446980_.svg' src='https://m.media-amazon.com/images/G/01/audibleweb/arya/navigation/audible_logo._V517446980_.svg'
style='height: 34px;' 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-separator.q-my-sm(inset)
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='information') blueprint-icon(icon='information')
q-item-section q-item-section
q-item-label {{$t(`admin.general.displaySiteTitle`)}} q-item-label {{t(`admin.general.displaySiteTitle`)}}
q-item-label(caption) {{$t(`admin.general.displaySiteTitleHint`)}} q-item-label(caption) {{t(`admin.general.displaySiteTitleHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.logoText' v-model='state.config.logoText'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.displaySiteTitle`)' :aria-label='t(`admin.general.displaySiteTitle`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item 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 q-item-section
.flex .flex
q-item-section q-item-section
q-item-label {{$t(`admin.general.favicon`)}} q-item-label {{t(`admin.general.favicon`)}}
q-item-label(caption) {{$t(`admin.general.faviconHint`)}} q-item-label(caption) {{t(`admin.general.faviconHint`)}}
q-item-section.col-auto q-item-section.col-auto
q-btn( q-btn(
label='Upload' label='Upload'
...@@ -282,7 +274,7 @@ q-page.admin-general ...@@ -282,7 +274,7 @@ q-page.admin-general
square square
) )
img(src='/_assets/logo-wikijs.svg') img(src='/_assets/logo-wikijs.svg')
.text-caption.q-ml-sm {{config.title}} .text-caption.q-ml-sm {{state.config.title}}
div div
q-icon(name='las la-otter', size='24px', color='grey') q-icon(name='las la-otter', size='24px', color='grey')
.text-caption.q-ml-sm Lorem ipsum .text-caption.q-ml-sm Lorem ipsum
...@@ -293,19 +285,19 @@ q-page.admin-general ...@@ -293,19 +285,19 @@ q-page.admin-general
//- ----------------------- //- -----------------------
//- Defaults //- 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 q-card-section
.text-subtitle1 {{$t('admin.general.defaults')}} .text-subtitle1 {{t('admin.general.defaults')}}
q-item q-item
blueprint-icon(icon='timezone') blueprint-icon(icon='timezone')
q-item-section q-item-section
q-item-label {{$t(`admin.general.defaultTimezone`)}} q-item-label {{t(`admin.general.defaultTimezone`)}}
q-item-label(caption) {{$t(`admin.general.defaultTimezoneHint`)}} q-item-label(caption) {{t(`admin.general.defaultTimezoneHint`)}}
q-item-section q-item-section
q-select( q-select(
outlined outlined
v-model='config.defaults.timezone' v-model='state.config.defaults.timezone'
:options='timezones' :options='dataStore.timezones'
option-value='value' option-value='value'
option-label='text' option-label='text'
emit-value emit-value
...@@ -313,102 +305,116 @@ q-page.admin-general ...@@ -313,102 +305,116 @@ q-page.admin-general
dense dense
options-dense options-dense
:virtual-scroll-slice-size='1000' :virtual-scroll-slice-size='1000'
:aria-label='$t(`admin.general.defaultTimezone`)' :aria-label='t(`admin.general.defaultTimezone`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='calendar') blueprint-icon(icon='calendar')
q-item-section q-item-section
q-item-label {{$t(`admin.general.defaultDateFormat`)}} q-item-label {{t(`admin.general.defaultDateFormat`)}}
q-item-label(caption) {{$t(`admin.general.defaultDateFormatHint`)}} q-item-label(caption) {{t(`admin.general.defaultDateFormatHint`)}}
q-item-section q-item-section
q-select( q-select(
outlined outlined
v-model='config.defaults.dateFormat' v-model='state.config.defaults.dateFormat'
emit-value emit-value
map-options map-options
dense dense
:aria-label='$t(`admin.general.defaultDateFormat`)' :aria-label='t(`admin.general.defaultDateFormat`)'
:options=`[ :options='dateFormats'
{ 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' }
]`
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item q-item
blueprint-icon(icon='clock') blueprint-icon(icon='clock')
q-item-section q-item-section
q-item-label {{$t(`admin.general.defaultTimeFormat`)}} q-item-label {{t(`admin.general.defaultTimeFormat`)}}
q-item-label(caption) {{$t(`admin.general.defaultTimeFormatHint`)}} q-item-label(caption) {{t(`admin.general.defaultTimeFormatHint`)}}
q-item-section.col-auto q-item-section.col-auto
q-btn-toggle( q-btn-toggle(
v-model='config.defaults.timeFormat' v-model='state.config.defaults.timeFormat'
push push
glossy glossy
no-caps no-caps
toggle-color='primary' toggle-color='primary'
:options=`[ :options='timeFormats'
{ label: $t('admin.general.defaultTimeFormat12h'), value: '12h' },
{ label: $t('admin.general.defaultTimeFormat24h'), value: '24h' }
]`
) )
//- ----------------------- //- -----------------------
//- SEO //- 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 q-card-section
.text-subtitle1 SEO .text-subtitle1 SEO
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='bot') blueprint-icon(icon='bot')
q-item-section q-item-section
q-item-label {{$t(`admin.general.searchAllowIndexing`)}} q-item-label {{t(`admin.general.searchAllowIndexing`)}}
q-item-label(caption) {{$t(`admin.general.searchAllowIndexingHint`)}} q-item-label(caption) {{t(`admin.general.searchAllowIndexingHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.robots.index' v-model='state.config.robots.index'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.searchAllowIndexing`)' :aria-label='t(`admin.general.searchAllowIndexing`)'
) )
q-separator.q-my-sm(inset) q-separator.q-my-sm(inset)
q-item(tag='label') q-item(tag='label')
blueprint-icon(icon='polyline') blueprint-icon(icon='polyline')
q-item-section q-item-section
q-item-label {{$t(`admin.general.searchAllowFollow`)}} q-item-label {{t(`admin.general.searchAllowFollow`)}}
q-item-label(caption) {{$t(`admin.general.searchAllowFollowHint`)}} q-item-label(caption) {{t(`admin.general.searchAllowFollowHint`)}}
q-item-section(avatar) q-item-section(avatar)
q-toggle( q-toggle(
v-model='config.robots.follow' v-model='state.config.robots.follow'
color='primary' color='primary'
checked-icon='las la-check' checked-icon='las la-check'
unchecked-icon='las la-times' unchecked-icon='las la-times'
:aria-label='$t(`admin.general.searchAllowFollow`)' :aria-label='t(`admin.general.searchAllowFollow`)'
) )
</template> </template>
<script> <script setup>
import { get } from 'vuex-pathify'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import { createMetaMixin } from 'quasar' import { useI18n } from 'vue-i18n'
import { useMeta, useQuasar } from 'quasar'
import { onMounted, reactive, watch } from 'vue'
export default { import { useAdminStore } from 'src/stores/admin'
mixins: [ import { useSiteStore } from 'src/stores/site'
createMetaMixin(function () { import { useDataStore } from 'src/stores/data'
return { import { useRoute, useRouter } from 'vue-router'
title: this.$t('admin.general.title')
} // QUASAR
})
], const $q = useQuasar()
data () {
return { // STORES
const adminStore = useAdminStore()
const siteStore = useSiteStore()
const dataStore = useDataStore()
// ROUTER
const router = useRouter()
const route = useRoute()
// I18N
const { t } = useI18n()
// META
useMeta({
title: t('admin.dashboard.title')
})
// DATA
const state = reactive({
loading: 0, loading: 0,
config: { config: {
hostname: '', hostname: '',
...@@ -434,40 +440,56 @@ export default { ...@@ -434,40 +440,56 @@ export default {
timeFormat: '' timeFormat: ''
} }
} }
} })
},
computed: { const contentLicenses = [
currentSiteId: get('admin/currentSiteId', false), { value: '', text: t('common.license.none') },
contentLicenses () { { value: 'alr', text: t('common.license.alr') },
return [ { value: 'cc0', text: t('common.license.cc0') },
{ value: '', text: this.$t('common.license.none') }, { value: 'ccby', text: t('common.license.ccby') },
{ value: 'alr', text: this.$t('common.license.alr') }, { value: 'ccbysa', text: t('common.license.ccbysa') },
{ value: 'cc0', text: this.$t('common.license.cc0') }, { value: 'ccbynd', text: t('common.license.ccbynd') },
{ value: 'ccby', text: this.$t('common.license.ccby') }, { value: 'ccbync', text: t('common.license.ccbync') },
{ value: 'ccbysa', text: this.$t('common.license.ccbysa') }, { value: 'ccbyncsa', text: t('common.license.ccbyncsa') },
{ value: 'ccbynd', text: this.$t('common.license.ccbynd') }, { value: 'ccbyncnd', text: t('common.license.ccbyncnd') }
{ value: 'ccbync', text: this.$t('common.license.ccbync') }, ]
{ value: 'ccbyncsa', text: this.$t('common.license.ccbyncsa') }, const ratingsModes = [
{ value: 'ccbyncnd', text: this.$t('common.license.ccbyncnd') } { value: 'off', label: t('admin.general.ratingsOff') },
] { value: 'thumbs', label: t('admin.general.ratingsThumbs') },
}, { value: 'stars', label: t('admin.general.ratingsStars') }
timezones: get('data/timezones', false) ]
}, const dateFormats = [
watch: { { value: '', label: t('profile.localeDefault') },
currentSiteId (newValue) { { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
this.load() { value: 'DD.MM.YYYY', label: 'DD.MM.YYYY' },
} { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
}, { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
mounted () { { value: 'YYYY/MM/DD', label: 'YYYY/MM/DD' }
if (this.currentSiteId) { ]
this.load() const timeFormats = [
} { value: '12h', label: t('admin.general.defaultTimeFormat12h') },
}, { value: '24h', label: t('admin.general.defaultTimeFormat24h') }
methods: { ]
async load () {
this.loading++ const rulesTitle = [
this.$q.loading.show() val => /^[^<>"]+$/.test(val) || t('admin.general.siteTitleInvalidChars')
const resp = await this.$apollo.query({ ]
const rulesHostname = [
val => /^(([a-z0-9.-]+)|([*]{1}))$/.test(val) || t('admin.general.siteHostnameInvalid')
]
// WATCHERS
watch(() => adminStore.currentSiteId, (newValue) => {
load()
})
// METHODS
async function load () {
state.loading++
$q.loading.show()
const resp = await APOLLO_CLIENT.query({
query: gql` query: gql`
query getSite ( query getSite (
$id: UUID! $id: UUID!
...@@ -504,18 +526,19 @@ export default { ...@@ -504,18 +526,19 @@ export default {
} }
`, `,
variables: { variables: {
id: this.currentSiteId id: adminStore.currentSiteId
}, },
fetchPolicy: 'network-only' fetchPolicy: 'network-only'
}) })
this.config = cloneDeep(resp?.data?.siteById) state.config = cloneDeep(resp?.data?.siteById)
this.$q.loading.hide() $q.loading.hide()
this.loading-- state.loading--
}, }
async save () {
this.loading++ async function save () {
state.loading++
try { try {
await this.$apollo.mutate({ await APOLLO_CLIENT.mutate({
mutation: gql` mutation: gql`
mutation saveSite ( mutation saveSite (
$id: UUID! $id: UUID!
...@@ -525,7 +548,7 @@ export default { ...@@ -525,7 +548,7 @@ export default {
id: $id id: $id
patch: $patch patch: $patch
) { ) {
status { operation {
succeeded succeeded
slug slug
message message
...@@ -534,62 +557,65 @@ export default { ...@@ -534,62 +557,65 @@ export default {
} }
`, `,
variables: { variables: {
id: this.currentSiteId, id: adminStore.currentSiteId,
patch: { patch: {
hostname: this.config.hostname ?? '', hostname: state.config.hostname ?? '',
title: this.config.title ?? '', title: state.config.title ?? '',
description: this.config.description ?? '', description: state.config.description ?? '',
company: this.config.company ?? '', company: state.config.company ?? '',
contentLicense: this.config.contentLicense ?? '', contentLicense: state.config.contentLicense ?? '',
logoText: this.config.logoText ?? false, logoText: state.config.logoText ?? false,
robots: { robots: {
index: this.config.robots?.index ?? false, index: state.config.robots?.index ?? false,
follow: this.config.robots?.follow ?? false follow: state.config.robots?.follow ?? false
}, },
features: { features: {
comments: this.config.features?.comments ?? false, comments: state.config.features?.comments ?? false,
ratings: (this.config.features?.ratings || 'off') !== 'off', ratings: (state.config.features?.ratings || 'off') !== 'off',
ratingsMode: this.config.features?.ratingsMode ?? 'off', ratingsMode: state.config.features?.ratingsMode ?? 'off',
contributions: this.config.features?.contributions ?? false, contributions: state.config.features?.contributions ?? false,
profile: this.config.features?.profile ?? false, profile: state.config.features?.profile ?? false,
search: this.config.features?.search ?? false search: state.config.features?.search ?? false
}, },
defaults: { defaults: {
timezone: this.config.defaults?.timezone ?? 'America/New_York', timezone: state.config.defaults?.timezone ?? 'America/New_York',
dateFormat: this.config.defaults?.dateFormat ?? 'YYYY-MM-DD', dateFormat: state.config.defaults?.dateFormat ?? 'YYYY-MM-DD',
timeFormat: this.config.defaults?.timeFormat ?? '12h' timeFormat: state.config.defaults?.timeFormat ?? '12h'
} }
} }
} }
}) })
this.$q.notify({ $q.notify({
type: 'positive', type: 'positive',
message: this.$t('admin.general.saveSuccess') message: t('admin.general.saveSuccess')
})
if (adminStore.currentSiteId === siteStore.id) {
await adminStore.fetchSites()
siteStore.$patch({
title: state.config.title,
description: state.config.description,
company: state.config.company,
contentLicense: state.config.contentLicense
}) })
if (this.currentSiteId === this.$store.get('site/id')) {
await this.$store.dispatch('admin/fetchSites')
this.$store.set('site/title', this.config.title)
this.$store.set('site/description', this.config.description)
this.$store.set('site/company', this.config.company)
this.$store.set('site/contentLicense', this.config.contentLicense)
} }
} catch (err) { } catch (err) {
this.$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: 'Failed to save site configuration.', message: 'Failed to save site configuration.',
caption: err.message caption: err.message
}) })
} }
this.loading-- state.loading--
}, }
async uploadLogo () {
async function uploadLogo () {
const input = document.createElement('input') const input = document.createElement('input')
input.type = 'file' input.type = 'file'
input.onchange = async e => { input.onchange = async e => {
this.loading++ state.loading++
try { try {
await this.$apollo.mutate({ await APOLLO_CLIENT.mutate({
mutation: gql` mutation: gql`
mutation uploadLogo ( mutation uploadLogo (
$id: UUID! $id: UUID!
...@@ -608,37 +634,35 @@ export default { ...@@ -608,37 +634,35 @@ export default {
} }
`, `,
variables: { variables: {
id: this.currentSiteId, id: adminStore.currentSiteId,
image: e.target.files[0] image: e.target.files[0]
} }
}) })
this.$q.notify({ $q.notify({
type: 'positive', type: 'positive',
message: this.$t('admin.general.logoUploadSuccess') message: t('admin.general.logoUploadSuccess')
}) })
} catch (err) { } catch (err) {
this.$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: 'Failed to upload site logo.', message: 'Failed to upload site logo.',
caption: err.message caption: err.message
}) })
} }
this.loading-- state.loading--
} }
input.click() input.click()
}, }
refreshLogo () {
this.$forceUpdate() async function uploadFavicon () {
},
async uploadFavicon () {
const input = document.createElement('input') const input = document.createElement('input')
input.type = 'file' input.type = 'file'
input.onchange = async e => { input.onchange = async e => {
this.loading++ state.loading++
try { try {
await this.$apollo.mutate({ await APOLLO_CLIENT.mutate({
mutation: gql` mutation: gql`
mutation uploadFavicon ( mutation uploadFavicon (
$id: UUID! $id: UUID!
...@@ -657,28 +681,34 @@ export default { ...@@ -657,28 +681,34 @@ export default {
} }
`, `,
variables: { variables: {
id: this.currentSiteId, id: adminStore.currentSiteId,
image: e.target.files[0] image: e.target.files[0]
} }
}) })
this.$q.notify({ $q.notify({
type: 'positive', type: 'positive',
message: this.$t('admin.general.faviconUploadSuccess') message: t('admin.general.faviconUploadSuccess')
}) })
} catch (err) { } catch (err) {
this.$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: 'Failed to upload site favicon.', message: 'Failed to upload site favicon.',
caption: err.message caption: err.message
}) })
} }
this.loading-- state.loading--
} }
input.click() input.click()
}
}
} }
// MOUNTED
onMounted(() => {
if (adminStore.currentSiteId) {
load()
}
})
</script> </script>
<style lang='scss'> <style lang='scss'>
......
ux/src/router/routes.js
View file @ 464f55cf
...@@ -31,7 +31,7 @@ const routes = [ ...@@ -31,7 +31,7 @@ const routes = [
{ path: 'dashboard', component: () => import('../pages/AdminDashboard.vue') }, { path: 'dashboard', component: () => import('../pages/AdminDashboard.vue') },
{ path: 'sites', component: () => import('../pages/AdminSites.vue') }, { path: 'sites', component: () => import('../pages/AdminSites.vue') },
// // -> Site // // -> Site
// { path: ':siteid/general', component: () => import('../pages/AdminGeneral.vue') }, { path: ':siteid/general', component: () => import('../pages/AdminGeneral.vue') },
{ path: ':siteid/editors', component: () => import('../pages/AdminEditors.vue') }, { path: ':siteid/editors', component: () => import('../pages/AdminEditors.vue') },
// { path: ':siteid/locale', component: () => import('../pages/AdminLocale.vue') }, // { path: ':siteid/locale', component: () => import('../pages/AdminLocale.vue') },
// { path: ':siteid/login', component: () => import('../pages/AdminLogin.vue') }, // { path: ':siteid/login', component: () => import('../pages/AdminLogin.vue') },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment