fix: saving default list (#1143)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1143
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/components/input/multiselect.vue

@@ -457,7 +457,7 @@ export default {
 			text-transform: none;
 			font-family: $family-sans-serif;
 			font-weight: normal;
-			padding: .5rem 0;
+			padding: .5rem;
 			border: none;
 			cursor: pointer;
 
@@ -477,7 +477,7 @@ export default {
 				font-size: .75rem;
 				color: transparent;
 				transition: color $transition;
-				padding: 0 .5rem;
+				padding-left: .5rem;
 			}
 
 			&:focus, &:hover {

src/components/tasks/partials/listSearch.vue

@@ -16,60 +16,54 @@
 	</multiselect>
 </template>
 
-<script>
-import ListModel from '../../../models/list'
+<script lang="ts" setup>
+import {reactive, ref, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+import ListModel from '@/models/list'
 import Multiselect from '@/components/input/multiselect.vue'
 
-export default {
-	name: 'listSearch',
-	data() {
-		return {
-			list: new ListModel(),
-			foundLists: [],
-		}
-	},
-	props: {
-		modelValue: {
-			required: false,
-		},
-	},
-	emits: ['update:modelValue', 'selected'],
-	components: {
-		Multiselect,
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.list = value
-			},
-			immeditate: true,
-			deep: true,
-		},
-	},
-	methods: {
-		findLists(query) {
-			this.foundLists = this.$store.getters['lists/searchList'](query)
-		},
+const store = useStore()
+const {t} = useI18n()
 
-		select(list) {
-			this.list = list
-			this.$emit('selected', list)
-			this.$emit('update:modelValue', list)
-		},
-
-		namespace(namespaceId) {
-			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
-			if (namespace !== null) {
-				return namespace.title
-			}
-			return this.$t('list.shared')
+const list = reactive(new ListModel())
+const props = defineProps({
+	modelValue: {
+		validator(value) {
+			return value instanceof ListModel
 		},
+		required: false,
 	},
+})
+const emit = defineEmits(['update:modelValue'])
+
+watchEffect(() => {
+	Object.assign(list, props.modelValue)
+})
+
+const foundLists = ref([])
+function findLists(query: string) {
+	if (query === '') {
+		select(null)
+	}
+	foundLists.value = store.getters['lists/searchList'](query)
+}
+
+function select(l: ListModel | null) {
+	Object.assign(list, l)
+	emit('update:modelValue', list)
+}
+
+function namespace(namespaceId: number) {
+	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	return namespace !== null
+		? namespace.title
+		: t('list.shared')
 }
 </script>
 
 <style lang="scss" scoped>
 .list-namespace-title {
-  color: var(--grey-500);
+	color: var(--grey-500);
 }
 </style>

src/views/tasks/TaskDetailView.vue

@@ -238,7 +238,7 @@
 						</h3>
 						<div class="field has-addons">
 							<div class="control is-expanded">
-								<list-search @selected="changeList" ref="moveList"/>
+								<list-search @update:modelValue="changeList" ref="moveList"/>
 							</div>
 						</div>
 					</div>

src/views/user/settings/General.vue

@@ -131,8 +131,10 @@ import {playPop} from '@/helpers/playPop'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {success} from '@/message'
 
+const DEFAULT_LIST_ID = 0
+
 function useColorSchemeSetting() {
-	const { t } = useI18n()
+	const {t} = useI18n()
 	const colorSchemeSettings = computed(() => ({
 		light: t('user.settings.appearance.colorScheme.light'),
 		auto: t('user.settings.appearance.colorScheme.system'),
@@ -141,9 +143,11 @@ function useColorSchemeSetting() {
 
 	const {store} = useColorScheme()
 	watch(store, (schemeId) => {
-		success({message: t('user.settings.appearance.setSuccess', {
-			colorScheme: colorSchemeSettings.value[schemeId],
-		})})
+		success({
+			message: t('user.settings.appearance.setSuccess', {
+				colorScheme: colorSchemeSettings.value[schemeId],
+			}),
+		})
 	})
 
 	return {
@@ -178,8 +182,13 @@ export default {
 				.map(l => ({code: l[0], title: l[1]}))
 				.sort((a, b) => a.title.localeCompare(b.title))
 		},
-		defaultList() {
-			return this.$store.getters['lists/getListById'](this.settings.defaultListId)
+		defaultList: {
+			get() {
+				return this.$store.getters['lists/getListById'](this.settings.defaultListId)
+			},
+			set(l) {
+				this.settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
+			},
 		},
 	},
 
@@ -204,12 +213,13 @@ export default {
 			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
 			saveLanguage(this.language)
 			setQuickAddMagicMode(this.quickAddMagicMode)
-			this.settings.defaultListId = this.defaultList ? this.defaultList.id : 0
 
-			await this.userSettingsService.update(this.settings)
-			this.$store.commit('auth/setUserSettings', {
+			const settings = {
 				...this.settings,
-			})
+			}
+
+			await this.userSettingsService.update(settings)
+			this.$store.commit('auth/setUserSettings', settings)
 			this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
 		},
 	},