feat(importing): show all writable calendars in picker

Mark unsupported calendars as non-selectable.
Previously they were fully hidden.

Show a message about why some calendars are not selectable.

Also show calendars that do not support events (and only support tasks and/or journal entries).
Previously, calendars that did not support events were hidden altogether.

Resolves:  #2572
Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>

Author: odzhychko

css/import.scss

@@ -21,7 +21,8 @@
 
 		.import-modal-file-item {
 			display: flex;
-			padding-top: 10px;
+			margin-top: 10px;
+			margin-bottom: 10px;
 
 			&--header {
 				font-weight: bold;
@@ -34,6 +35,10 @@
 			&__calendar-select {
 				flex: 1 1 0;
 			}
+			
+			&__calendar-disabled-hint {
+				color: var(--color-text-maxcontrast);
+			}
 		}
 	}
 }

src/components/AppNavigation/Settings/ImportScreenRow.vue

@@ -6,12 +6,28 @@
 <template>
 	<li class="import-modal-file-item">
 		<div class="import-modal-file-item__filename">
-			{{ file.name }}
+			<div>{{ file.name }}</div>
+			<div
+				v-if="isSomeCalendarDisabledBecauseItDoesNotSupportEvents"
+				class="import-modal-file-item__calendar-disabled-hint">
+				{{ $t('calendar', 'Some calendars are disabled because this file contains events.') }}
+			</div>
+			<div
+				v-if="isSomeCalendarDisabledBecauseItDoesNotSupportTasks"
+				class="import-modal-file-item__calendar-disabled-hint">
+				{{ $t('calendar', 'Some calendars are disabled because this file contains tasks.') }}
+			</div>
+			<div
+				v-if="isSomeCalendarDisabledBecauseItDoesNotSupportJournals"
+				class="import-modal-file-item__calendar-disabled-hint">
+				{{ $t('calendar', 'Some calendars are disabled because this file contains journal entries.') }}
+			</div>
 		</div>
 		<CalendarPicker
 			class="import-modal-file-item__calendar-select"
 			:value="calendar"
 			:calendars="calendars"
+			:is-calendar-selectable="isCalendarSelectable"
 			@select-calendar="selectCalendar" />
 	</li>
 </template>
@@ -39,59 +55,76 @@ export default {
 
 	computed: {
 		...mapStores(usePrincipalsStore, useImportFilesStore, useCalendarsStore),
-		calendar() {
-			let calendarId = this.importFilesStore.importCalendarRelation[this.file.id]
-			if (!calendarId) {
-				this.setDefaultCalendarId()
-				calendarId = this.importFilesStore.importCalendarRelation[this.file.id]
+		newCalendar() {
+			return {
+				id: 'new',
+				displayName: this.$t('calendar', 'New calendar'),
+				isSharedWithMe: false,
+				color: uidToHexColor(this.$t('calendar', 'New calendar')),
+				owner: this.principalsStore.getCurrentUserPrincipal.url,
 			}
+		},
 
-			if (calendarId === 'new') {
-				return {
-					id: 'new',
-					displayName: this.$t('calendar', 'New calendar'),
-					isSharedWithMe: false,
-					color: uidToHexColor(this.$t('calendar', 'New calendar')),
-					owner: this.principalsStore.getCurrentUserPrincipal.url,
-				}
+		calendar() {
+			const calendarId = this.importFilesStore.importCalendarRelation[this.file.id]
+			if (calendarId === this.newCalendar.id) {
+				return this.newCalendar
 			}
-
 			return this.calendarsStore.getCalendarById(calendarId)
 		},
 
 		calendars() {
-			// TODO: remove once the false positive is fixed upstream
+			// `this.calendarsStore.sortedCalendars` cannot be used because it already filters out calendars that do not support events.
+			const calendars = [...this.calendarsStore.calendars]
+				.filter((calendar) => !calendar.readOnly)
+				.sort((a, b) => a.order - b.order)
+			calendars.push(this.newCalendar)
+			return calendars
+		},
 
-			const calendars = this.calendarsStore.sortedCalendarFilteredByComponents(
-				this.file.parser.containsVEvents(),
-				this.file.parser.containsVJournals(),
-				this.file.parser.containsVTodos(),
-			)
+		isSomeCalendarDisabledBecauseItDoesNotSupportEvents() {
+			return this.file.parser.containsVEvents() && this.calendars.some((calendar) => !calendar.supportsEvents)
+		},
 
-			calendars.push({
-				id: 'new',
-				displayName: this.$t('calendar', 'New calendar'),
-				isSharedWithMe: false,
-				color: uidToHexColor(this.$t('calendar', 'New calendar')),
-				owner: this.principalsStore.getCurrentUserPrincipal.url,
-			})
+		isSomeCalendarDisabledBecauseItDoesNotSupportTasks() {
+			return this.file.parser.containsVTodos() && this.calendars.some((calendar) => !calendar.supportsTasks)
+		},
 
-			return calendars
+		isSomeCalendarDisabledBecauseItDoesNotSupportJournals() {
+			return this.file.parser.containsVJournals() && this.calendars.some((calendar) => !calendar.supportsJournals)
 		},
 	},
 
+	created() {
+		const preselectedCalendar = this.calendars.find((calendar) => this.isCalendarSelectable(calendar))
+		if (!preselectedCalendar) {
+			// If no other calendar is selectable, at least `this.newCalendar` should be selectable and be preselected.
+			throw new Error('Encountered illegal state. At least one calendar that can be selected should exist.')
+		}
+		this.selectCalendar(preselectedCalendar)
+	},
+
 	methods: {
-		selectCalendar(newCalendar) {
-			this.importFilesStore.setCalendarForFileId({
-				fileId: this.file.id,
-				calendarId: newCalendar.id,
-			})
+		isCalendarSelectable(calendar) {
+			if (calendar.id === this.newCalendar.id) {
+				return true
+			}
+			if (this.file.parser.containsVEvents() && !calendar.supportsEvents) {
+				return false
+			}
+			if (this.file.parser.containsVTodos() && !calendar.supportsTasks) {
+				return false
+			}
+			if (this.file.parser.containsVJournals() && !calendar.supportsJournals) {
+				return false
+			}
+			return true
 		},
 
-		setDefaultCalendarId() {
+		selectCalendar(newCalendar) {
 			this.importFilesStore.setCalendarForFileId({
 				fileId: this.file.id,
-				calendarId: this.calendars[0].id,
+				calendarId: newCalendar.id,
 			})
 		},
 	},

src/components/Shared/CalendarPicker.vue

@@ -14,6 +14,7 @@
 		:filter-by="selectFilterBy"
 		:input-label="inputLabel"
 		:label-outside="inputLabel === ''"
+		:selectable="selectable"
 		@option:selected="change"
 		@option:deselected="remove">
 		<template #option="{ id }">
@@ -87,6 +88,19 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Decides whether a calendar is selectable or not.
+		 * Non-selectable calendars are displayed but cannot be selected.
+		 *
+		 * @type {Function}
+		 * @param {object} calendar
+		 * @return {boolean}
+		 */
+		isCalendarSelectable: {
+			type: Function,
+			default: (calendar) => true,
+		},
 	},
 
 	computed: {
@@ -162,6 +176,17 @@ export default {
 		selectFilterBy(option, label, search) {
 			return option.displayName.toLowerCase().indexOf(search) !== -1
 		},
+
+		/**
+		 * Decide whether the given option can be selected
+		 *
+		 * @param {object} option The calendar option
+		 * @return {boolean} True if the option can be selected
+		 */
+		selectable(option) {
+			const calendar = this.getCalendarById(option.id)
+			return this.isCalendarSelectable(calendar)
+		},
 	},
 }
 </script>