feat: user General script setup (#1938)

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>

src/views/user/settings/General.vue

@@ -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">{{
+						<option
-								lang.title
+							v-for="lang in availableLanguageOptions"
-							}}
+							:key="lang.code"
-						</option>
+							: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 {defineComponent} from 'vue'
-import {useI18n} from 'vue-i18n'
+
+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() {
+const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
-		return {
+const quickAddMagicMode = ref(getQuickAddMagicMode())
-			...useColorSchemeSetting(),
-			availableTimezones: useAvailableTimezones(),
-		}
-	},
 
-	mounted() {
+const store = useStore()
-		this.setTitle(`${this.$t('user.settings.general.title')} - ${this.$t('user.settings.title')}`)
+const settings = reactive({...store.state.auth.settings})
-	},
+const id = ref(createRandomID())
-	watch: {
+const availableLanguageOptions = ref(
-		playSoundWhenDone(play) {
+	Object.entries(availableLanguages)
-			if (play) {
+		.map(l => ({code: l[0], title: l[1]}))
-				playPopSound()
+		.sort((a, b) => a.title.localeCompare(b.title)),
-			}
+)
-		},
-	},
-	methods: {
-		async updateSettings() {
-			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone ? 'true' : 'false')
-			setQuickAddMagicMode(this.quickAddMagicMode)
 
-			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>