fix: default calendar picker search and make it not clearable

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

src/components/AppNavigation/Settings.vue

@@ -1,6 +1,7 @@
 <!--
   - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>
   - @author Georg Ehrke <oc.list@georgehrke.com>
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license AGPL-3.0-or-later
   -
@@ -81,6 +82,7 @@
 					:calendars="defaultCalendarOptions"
 					:disabled="savingDefaultCalendarId"
 					:input-id="defaultCalendarPickerId"
+					:clearable="false"
 					@select-calendar="changeDefaultCalendar" />
 			</li>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--defaultReminder">

src/components/Shared/CalendarPicker.vue

@@ -5,6 +5,8 @@
 		:options="options"
 		:value="valueIds"
 		:multiple="multiple"
+		:clearable="clearable"
+		:filterBy="selectFilterBy"
 		@option:selected="change"
 		@option:deselected="remove">
 		<template #option="{ id }">
@@ -54,6 +56,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
 		inputId: {
 			type: String,
 			default: () => randomId(),
@@ -73,7 +79,10 @@ export default {
 			return this.value.id
 		},
 		options() {
-			return this.calendars.map((calendar) => ({ id: calendar.id }))
+			return this.calendars.map((calendar) => ({
+				id: calendar.id,
+				displayName: calendar.displayName,
+			}))
 		},
 	},
 	methods: {
@@ -111,6 +120,18 @@ export default {
 		getCalendarById(id) {
 			return this.calendars.find((cal) => cal.id === id)
 		},
+
+		/**
+		 * Decide whether the given option matches the given search term
+		 *
+		 * @param {object} option The calendar option
+		 * @param {string} label The label of the calendar option
+		 * @param {string} id The search term
+		 * @return {boolean} True if the search term matches
+		 */
+		selectFilterBy(option, label, search) {
+			return option.displayName.toLowerCase().indexOf(search) !== -1
+		}
 	},
 }
 </script>