mirror of https://github.com/requarks/wiki
NGPixel
2 years ago
parent
e8cb5f9773
commit
9ecaebba32
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,211 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-menu.translucent-menu(
|
||||||
|
anchor='bottom right'
|
||||||
|
self='top right'
|
||||||
|
:offset='[0, 10]'
|
||||||
|
ref='menuRef'
|
||||||
|
)
|
||||||
|
q-card(style='width: 850px;')
|
||||||
|
q-card-section.card-header
|
||||||
|
q-icon(name='img:/_assets/icons/fluent-choose.svg', left, size='sm')
|
||||||
|
span {{t(`admin.users.defaults`)}}
|
||||||
|
q-list(padding)
|
||||||
|
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-section
|
||||||
|
q-select(
|
||||||
|
outlined
|
||||||
|
v-model='state.timezone'
|
||||||
|
:options='timezones'
|
||||||
|
option-value='value'
|
||||||
|
option-label='text'
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:virtual-scroll-slice-size='1000'
|
||||||
|
: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-section
|
||||||
|
q-select(
|
||||||
|
outlined
|
||||||
|
v-model='state.dateFormat'
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
dense
|
||||||
|
: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-section.col-auto
|
||||||
|
q-btn-toggle(
|
||||||
|
v-model='state.timeFormat'
|
||||||
|
push
|
||||||
|
glossy
|
||||||
|
no-caps
|
||||||
|
toggle-color='primary'
|
||||||
|
:options='timeFormats'
|
||||||
|
)
|
||||||
|
q-card-actions.card-actions
|
||||||
|
q-space
|
||||||
|
q-btn.acrylic-btn(
|
||||||
|
flat
|
||||||
|
:label='t(`common.actions.cancel`)'
|
||||||
|
color='grey'
|
||||||
|
padding='xs md'
|
||||||
|
v-close-popup
|
||||||
|
)
|
||||||
|
q-btn(
|
||||||
|
unelevated
|
||||||
|
:label='t(`common.actions.save`)'
|
||||||
|
color='primary'
|
||||||
|
padding='xs md'
|
||||||
|
@click='save'
|
||||||
|
)
|
||||||
|
q-inner-loading(:showing='state.loading > 0')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
import { usePageStore } from 'src/stores/page'
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const pageStore = usePageStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: 0,
|
||||||
|
timezone: '',
|
||||||
|
dateFormat: '',
|
||||||
|
timeFormat: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const menuRef = ref(null)
|
||||||
|
|
||||||
|
const dateFormats = [
|
||||||
|
{ value: '', label: t('profile.localeDefault') },
|
||||||
|
{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
|
||||||
|
{ value: 'DD.MM.YYYY', label: 'DD.MM.YYYY' },
|
||||||
|
{ value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
|
||||||
|
{ value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
|
||||||
|
{ value: 'YYYY/MM/DD', label: 'YYYY/MM/DD' }
|
||||||
|
]
|
||||||
|
const timeFormats = [
|
||||||
|
{ value: '12h', label: t('admin.general.defaultTimeFormat12h') },
|
||||||
|
{ value: '24h', label: t('admin.general.defaultTimeFormat24h') }
|
||||||
|
]
|
||||||
|
const timezones = Intl.supportedValuesOf('timeZone')
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
async function save () {
|
||||||
|
state.loading++
|
||||||
|
try {
|
||||||
|
const resp = await APOLLO_CLIENT.mutate({
|
||||||
|
mutation: gql`
|
||||||
|
mutation saveSite (
|
||||||
|
$timezone: String!
|
||||||
|
$dateFormat: String!
|
||||||
|
$timeFormat: String!
|
||||||
|
) {
|
||||||
|
updateUserDefaults (
|
||||||
|
timezone: $timezone
|
||||||
|
dateFormat: $dateFormat
|
||||||
|
timeFormat: $timeFormat
|
||||||
|
) {
|
||||||
|
operation {
|
||||||
|
succeeded
|
||||||
|
slug
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
timezone: state.timezone,
|
||||||
|
dateFormat: state.dateFormat,
|
||||||
|
timeFormat: state.timeFormat
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (resp?.data?.updateUserDefaults?.operation?.succeeded) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: t('admin.users.defaultsSaveSuccess')
|
||||||
|
})
|
||||||
|
menuRef.value.hide()
|
||||||
|
} else {
|
||||||
|
throw new Error(resp?.data?.updateUserDefaults?.operation?.message)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: 'Failed to save user defaults.',
|
||||||
|
caption: err.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
state.loading--
|
||||||
|
}
|
||||||
|
|
||||||
|
// MOUNTED
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
state.loading++
|
||||||
|
try {
|
||||||
|
const resp = await APOLLO_CLIENT.query({
|
||||||
|
query: gql`
|
||||||
|
query getUserDefaults {
|
||||||
|
userDefaults {
|
||||||
|
timezone
|
||||||
|
dateFormat
|
||||||
|
timeFormat
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
fetchPolicy: 'network-only'
|
||||||
|
})
|
||||||
|
const respData = cloneDeep(resp?.data?.userDefaults)
|
||||||
|
state.timezone = respData.timezone
|
||||||
|
state.dateFormat = respData.dateFormat
|
||||||
|
state.timeFormat = respData.timeFormat
|
||||||
|
} catch (err) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: 'Failed to load user defaults',
|
||||||
|
caption: err.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
state.loading--
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue