local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: user General script setup (#1938)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1938
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-05-20 05:36:08 +00:00 committed by konrad
parent acaaa8e188
commit 2c270d063e
1 changed files with 63 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/views/user/settings/General.vue
View file

@ -68,10 +68,11 @@
</span>
<div class="select ml-2">
<select v-model="settings.language">
<option :value="lang.code" v-for="lang in availableLanguageOptions" :key="lang.code">{{
lang.title
}}
</option>
<option
v-for="lang in availableLanguageOptions"
:key="lang.code"
:value="lang.code"
>{{ lang.title }}</option>
</select>
</div>
</label>
@ -83,7 +84,7 @@
</span>
<div class="select ml-2">
<select v-model="quickAddMagicMode">
<option v-for="set in quickAddMagicPrefixes" :key="set" :value="set">
<option v-for="set in PrefixMode" :key="set" :value="set">
{{ $t(`user.settings.quickAddMagic.${set}`) }}
</option>
</select>
@ -132,19 +133,35 @@
</template>
<script lang="ts">
import {defineComponent, computed, watch, ref} from 'vue'
import {useI18n} from 'vue-i18n'
import {defineComponent} from 'vue'
export default defineComponent({
name: 'user-settings-general',
})
</script>
<script setup lang="ts">
import {computed, watch, ref, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useStore} from 'vuex'
import {playSoundWhenDoneKey, playPopSound} from '@/helpers/playPop'
import {availableLanguages} from '@/i18n'
import {getQuickAddMagicMode, setQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {PrefixMode} from '@/modules/parseTaskText'
import ListSearch from '@/components/tasks/partials/listSearch'
import ListSearch from '@/components/tasks/partials/listSearch.vue'
import {availableLanguages} from '@/i18n'
import {playSoundWhenDoneKey, playPopSound} from '@/helpers/playPop'
import {getQuickAddMagicMode, setQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {createRandomID} from '@/helpers/randomId'
import {useColorScheme} from '@/composables/useColorScheme'
import {success} from '@/message'
import {AuthenticatedHTTPFactory} from '@/http-common'
import {useColorScheme} from '@/composables/useColorScheme'
import { useTitle } from '@/composables/useTitle'
const {t} = useI18n()
useTitle(() => `${t('user.settings.general.title')} - ${t('user.settings.title')}`)
const DEFAULT_LIST_ID = 0
function useColorSchemeSetting() {
@ -170,6 +187,8 @@ function useColorSchemeSetting() {
}
}
const {colorSchemeSettings, activeColorSchemeSetting} = useColorSchemeSetting()
function useAvailableTimezones() {
const availableTimezones = ref([])
@ -181,68 +200,46 @@ function useAvailableTimezones() {
return availableTimezones
}
const availableTimezones = useAvailableTimezones()
function getPlaySoundWhenDoneSetting() {
return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
}
export default defineComponent({
name: 'user-settings-general',
data() {
return {
playSoundWhenDone: getPlaySoundWhenDoneSetting(),
quickAddMagicMode: getQuickAddMagicMode(),
quickAddMagicPrefixes: PrefixMode,
settings: {...this.$store.state.auth.settings},
id: createRandomID(),
availableLanguageOptions: Object.entries(availableLanguages)
.map(l => ({code: l[0], title: l[1]}))
.sort((a, b) => a.title.localeCompare(b.title)),
}
},
components: {
ListSearch,
},
computed: {
defaultList: {
get() {
return this.$store.getters['lists/getListById'](this.settings.defaultListId)
},
set(l) {
this.settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
},
},
loading() {
return this.$store.state.loading && this.$store.state.loadingModule === 'general-settings'
},
},
setup() {
return {
...useColorSchemeSetting(),
availableTimezones: useAvailableTimezones(),
}
},
const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
const quickAddMagicMode = ref(getQuickAddMagicMode())
mounted() {
this.setTitle(`${this.$t('user.settings.general.title')} - ${this.$t('user.settings.title')}`)
},
watch: {
playSoundWhenDone(play) {
if (play) {
playPopSound()
}
},
},
methods: {
async updateSettings() {
localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone ? 'true' : 'false')
setQuickAddMagicMode(this.quickAddMagicMode)
const store = useStore()
const settings = reactive({...store.state.auth.settings})
const id = ref(createRandomID())
const availableLanguageOptions = ref(
Object.entries(availableLanguages)
.map(l => ({code: l[0], title: l[1]}))
.sort((a, b) => a.title.localeCompare(b.title)),
)
await this.$store.dispatch('auth/saveUserSettings', {
settings: {...this.settings},
})
},
const defaultList = computed({
get: () => store.getters['lists/getListById'](settings.defaultListId),
set(l) {
settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
},
})
const loading = computed(() => store.state.loading && store.state.loadingModule === 'general-settings')
watch(
playSoundWhenDone,
(play) => play && playPopSound(),
)
async function updateSettings() {
localStorage.setItem(playSoundWhenDoneKey, playSoundWhenDone.value ? 'true' : 'false')
setQuickAddMagicMode(quickAddMagicMode.value)
await store.dispatch('auth/saveUserSettings', {
settings: {...settings},
})
}
</script>