From 981a826785c9d762656ac5fcbf555269b0af9d4a Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Fri, 8 Dec 2023 11:42:59 +0100
Subject: [PATCH] Start migration, some properties are still to figure out

Signed-off-by: ScratchX98 <scratchx@gmx.com>
---
 src/components/AppNavigation/Settings.vue          | 14 ++++++--------
 .../Editor/Alarm/AlarmTimeUnitSelect.vue           |  8 ++++----
 .../Editor/Invitees/InviteesListSearch.vue         | 10 +++++-----
 .../Editor/Properties/PropertySelect.vue           |  8 ++++----
 .../Editor/Properties/PropertySelectMultiple.vue   | 10 +++++-----
 src/components/Editor/Repeat/RepeatEndRepeat.vue   |  8 ++++----
 .../Editor/Repeat/RepeatFirstLastSelect.vue        |  8 ++++----
 src/components/Editor/Repeat/RepeatFreqSelect.vue  |  8 ++++----
 src/components/Editor/Repeat/RepeatOnTheSelect.vue |  8 ++++----
 .../Editor/Resources/ResourceListSearch.vue        | 10 +++++-----
 .../Editor/Resources/ResourceRoomType.vue          | 10 +++++-----
 src/components/Shared/CalendarPicker.vue           | 10 +++++-----
 src/components/Shared/TimezoneSelect.vue           |  6 +++---
 13 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index fcb1e65b4a..41e73275cb 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -62,23 +62,21 @@
 			</ActionCheckbox>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--slotDuration">
 				<label for="slotDuration">{{ $t('calendar', 'Time increments') }}</label>
-				<Multiselect :id="slotDuration"
-					:allow-empty="false"
+				<Select :id="slotDuration"
 					:options="slotDurationOptions"
 					:value="selectedDurationOption"
 					:disabled="savingSlotDuration"
-					track-by="value"
+					input-id="value"
 					label="label"
 					@select="changeSlotDuration" />
 			</li>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--defaultReminder">
 				<label for="defaultReminder">{{ $t('calendar', 'Default reminder') }}</label>
-				<Multiselect :id="defaultReminder"
-					:allow-empty="false"
+				<Select :id="defaultReminder"
 					:options="defaultReminderOptions"
 					:value="selectedDefaultReminderOption"
 					:disabled="savingDefaultReminder"
-					track-by="value"
+					input-id="value"
 					label="label"
 					@select="changeDefaultReminder" />
 			</li>
@@ -122,7 +120,7 @@ import {
 	NcActionCheckbox as ActionCheckbox,
 	NcActionLink as ActionLink,
 	NcAppNavigationSettings as AppNavigationSettings,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import {
 	generateRemoteUrl,
@@ -164,7 +162,7 @@ export default {
 		ActionCheckbox,
 		ActionLink,
 		AppNavigationSettings,
-		Multiselect,
+		Select,
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,
diff --git a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
index 7f8c3995b3..f5ee68fdc0 100644
--- a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
+++ b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
@@ -21,22 +21,22 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
-		track-by="unit"
+		input-id="unit"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'AlarmTimeUnitSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		unit: {
diff --git a/src/components/Editor/Invitees/InviteesListSearch.vue b/src/components/Editor/Invitees/InviteesListSearch.vue
index ad9acfcb5b..7546df7d0a 100644
--- a/src/components/Editor/Invitees/InviteesListSearch.vue
+++ b/src/components/Editor/Invitees/InviteesListSearch.vue
@@ -24,7 +24,7 @@
   -->
 
 <template>
-	<Multiselect class="invitees-search__multiselect"
+	<Select class="invitees-search__multiselect"
 		:options="matches"
 		:searchable="true"
 		:internal-search="false"
@@ -34,7 +34,7 @@
 		:placeholder="placeholder"
 		:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 		open-direction="bottom"
-		track-by="uid"
+		input-id="uid"
 		label="dropdownName"
 		@search-change="findAttendees"
 		@select="addAttendee">
@@ -68,13 +68,13 @@
 				</div>
 			</div>
 		</template>
-	</Multiselect>
+	</Select>
 </template>
 
 <script>
 import {
 	NcAvatar as Avatar,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import { principalPropertySearchByDisplaynameOrEmail } from '../../../services/caldavService.js'
 import isCirclesEnabled from '../../../services/isCirclesEnabled.js'
@@ -93,7 +93,7 @@ export default {
 	name: 'InviteesListSearch',
 	components: {
 		Avatar,
-		Multiselect,
+		Select,
 		GoogleCirclesCommunitiesIcon,
 	},
 	props: {
diff --git a/src/components/Editor/Properties/PropertySelect.vue b/src/components/Editor/Properties/PropertySelect.vue
index a6a55f2546..b83b9653ed 100644
--- a/src/components/Editor/Properties/PropertySelect.vue
+++ b/src/components/Editor/Properties/PropertySelect.vue
@@ -31,14 +31,14 @@
 
 		<div class="property-select__input"
 			:class="{ 'property-select__input--readonly': isReadOnly }">
-			<Multiselect v-if="!isReadOnly"
+			<Select v-if="!isReadOnly"
 				:options="options"
 				:searchable="false"
 				:allow-empty="false"
 				:title="readableName"
 				:value="selectedValue"
 				:placeholder="placeholder"
-				track-by="value"
+				input-id="value"
 				label="label"
 				@select="changeValue" />
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
@@ -56,14 +56,14 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 import InformationVariant from 'vue-material-design-icons/InformationVariant.vue'
 
 export default {
 	name: 'PropertySelect',
 	components: {
-		Multiselect,
+		Select,
 		InformationVariant,
 	},
 	mixins: [
diff --git a/src/components/Editor/Properties/PropertySelectMultiple.vue b/src/components/Editor/Properties/PropertySelectMultiple.vue
index 5bc93fd2d8..394ef1096c 100644
--- a/src/components/Editor/Properties/PropertySelectMultiple.vue
+++ b/src/components/Editor/Properties/PropertySelectMultiple.vue
@@ -31,7 +31,7 @@
 
 		<div class="property-select-multiple__input"
 			:class="{ 'property-select-multiple__input--readonly': isReadOnly }">
-			<Multiselect v-if="!isReadOnly"
+			<Select v-if="!isReadOnly"
 				v-model="selectionData"
 				:options="options"
 				:searchable="true"
@@ -41,7 +41,7 @@
 				:title="readableName"
 				:multiple="true"
 				:taggable="true"
-				track-by="label"
+				input-id="label"
 				label="label"
 				@select="selectValue"
 				@tag="tag"
@@ -52,7 +52,7 @@
 				<template v-if="coloredOptions" #option="scope">
 					<PropertySelectMultipleColoredOption v-bind="scope" />
 				</template>
-			</Multiselect>
+			</Select>
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else class="property-select-multiple-colored-tag-wrapper">
 				<PropertySelectMultipleColoredTag v-for="singleValue in value"
@@ -72,7 +72,7 @@
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin.js'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import PropertySelectMultipleColoredTag from './PropertySelectMultipleColoredTag.vue'
 import PropertySelectMultipleColoredOption from './PropertySelectMultipleColoredOption.vue'
 import { getLocale } from '@nextcloud/l10n'
@@ -84,7 +84,7 @@ export default {
 	components: {
 		PropertySelectMultipleColoredOption,
 		PropertySelectMultipleColoredTag,
-		Multiselect,
+		Select,
 		InformationVariant,
 	},
 	mixins: [
diff --git a/src/components/Editor/Repeat/RepeatEndRepeat.vue b/src/components/Editor/Repeat/RepeatEndRepeat.vue
index 69614f9fa9..0864b13caf 100644
--- a/src/components/Editor/Repeat/RepeatEndRepeat.vue
+++ b/src/components/Editor/Repeat/RepeatEndRepeat.vue
@@ -23,13 +23,13 @@
 <template>
 	<div class="repeat-option-set repeat-option-set--end">
 		<span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span>
-		<Multiselect class="repeat-option-end__end-type-select"
+		<Select class="repeat-option-end__end-type-select"
 			:options="options"
 			:searchable="false"
 			:allow-empty="false"
 			:title="$t('calendar', 'Select to end repeat')"
 			:value="selectedOption"
-			track-by="value"
+			input-id="value"
 			label="label"
 			@select="changeEndType" />
 		<DatePicker v-if="isUntil"
@@ -54,13 +54,13 @@
 
 <script>
 import DatePicker from '../../Shared/DatePicker.vue'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatEndRepeat',
 	components: {
 		DatePicker,
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**
diff --git a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
index 433ecf27bf..32815ccab4 100644
--- a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
@@ -21,23 +21,23 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'first')"
-		track-by="value"
+		input-id="value"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFirstLastSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**
diff --git a/src/components/Editor/Repeat/RepeatFreqSelect.vue b/src/components/Editor/Repeat/RepeatFreqSelect.vue
index 3d3aa5b7b7..4d45b7113d 100644
--- a/src/components/Editor/Repeat/RepeatFreqSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFreqSelect.vue
@@ -21,22 +21,22 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		open-direction="bottom"
-		track-by="freq"
+		input-id="freq"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 
 export default {
 	name: 'RepeatFreqSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		freq: {
diff --git a/src/components/Editor/Repeat/RepeatOnTheSelect.vue b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
index 16b0010abe..4467853605 100644
--- a/src/components/Editor/Repeat/RepeatOnTheSelect.vue
+++ b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
@@ -21,24 +21,24 @@
   -->
 
 <template>
-	<Multiselect :allow-empty="false"
+	<Select :allow-empty="false"
 		:options="options"
 		:value="selected"
 		:disabled="disabled"
 		:placeholder="$t('calendar', 'Monday')"
-		track-by="value"
+		input-id="value"
 		label="label"
 		@select="select" />
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import { getDayNames } from '@nextcloud/l10n'
 
 export default {
 	name: 'RepeatOnTheSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		/**
diff --git a/src/components/Editor/Resources/ResourceListSearch.vue b/src/components/Editor/Resources/ResourceListSearch.vue
index 28f69aac0f..3efded2752 100644
--- a/src/components/Editor/Resources/ResourceListSearch.vue
+++ b/src/components/Editor/Resources/ResourceListSearch.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="resource-search">
-		<Multiselect class="resource-search__multiselect"
+		<Select class="resource-search__multiselect"
 			:options="matches"
 			:searchable="true"
 			:internal-search="false"
@@ -32,7 +32,7 @@
 			:placeholder="placeholder"
 			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 			open-direction="bottom"
-			track-by="email"
+			input-id="email"
 			label="displayName"
 			@search-change="findResources"
 			@select="addResource">
@@ -54,7 +54,7 @@
 					</div>
 				</div>
 			</template>
-		</Multiselect>
+		</Select>
 
 		<template>
 			<div class="resource-search__capacity">
@@ -85,7 +85,7 @@ import {
 	NcAvatar as Avatar,
 	NcActions as Actions,
 	NcActionCheckbox as ActionCheckbox,
-	NcMultiselect as Multiselect,
+	NcSelect as Select,
 } from '@nextcloud/vue'
 import { checkResourceAvailability } from '../../../services/freeBusyService.js'
 import debounce from 'debounce'
@@ -98,7 +98,7 @@ export default {
 	name: 'ResourceListSearch',
 	components: {
 		Avatar,
-		Multiselect,
+		Select,
 		ResourceSeatingCapacity,
 		Actions,
 		ActionCheckbox,
diff --git a/src/components/Editor/Resources/ResourceRoomType.vue b/src/components/Editor/Resources/ResourceRoomType.vue
index d5c72f5239..991428de21 100644
--- a/src/components/Editor/Resources/ResourceRoomType.vue
+++ b/src/components/Editor/Resources/ResourceRoomType.vue
@@ -23,28 +23,28 @@
 <template>
 	<div class="resource-room-type">
 		<div class="resource-room-type__input">
-			<Multiselect :value="getOption(value)"
+			<Select :value="getOption(value)"
 				:options="options"
 				:placeholder="placeholder"
-				track-by="value"
+				input-id="value"
 				label="label"
 				@update:value="changeValue">
 				<template #option="{ option }">
 					<div>{{ option.label }}</div>
 				</template>
-			</Multiselect>
+			</Select>
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import { getAllRoomTypes } from '../../../models/resourceProps.js'
 
 export default {
 	name: 'ResourceRoomType',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		value: {
diff --git a/src/components/Shared/CalendarPicker.vue b/src/components/Shared/CalendarPicker.vue
index 65d8918d7f..15f3c5437c 100644
--- a/src/components/Shared/CalendarPicker.vue
+++ b/src/components/Shared/CalendarPicker.vue
@@ -1,6 +1,6 @@
 <template>
-	<Multiselect label="displayName"
-		track-by="url"
+	<Select label="displayName"
+		input-id="url"
 		:disabled="isDisabled"
 		:options="calendars"
 		:value="value"
@@ -18,17 +18,17 @@
 				<CalendarPickerOption v-bind="option" />
 			</div>
 		</template>
-	</Multiselect>
+	</Select>
 </template>
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 export default {
 	name: 'CalendarPicker',
 	components: {
 		CalendarPickerOption,
-		Multiselect,
+		Select,
 	},
 	props: {
 		value: {
diff --git a/src/components/Shared/TimezoneSelect.vue b/src/components/Shared/TimezoneSelect.vue
index 9fcdc31cb4..d40edfb3c5 100644
--- a/src/components/Shared/TimezoneSelect.vue
+++ b/src/components/Shared/TimezoneSelect.vue
@@ -1,5 +1,5 @@
 <template>
-	<Multiselect :value="selectedTimezone"
+	<Select :value="selectedTimezone"
 		:options="options"
 		:multiple="false"
 		:group-select="false"
@@ -14,7 +14,7 @@
 
 <script>
 import { getReadableTimezoneName, getSortedTimezoneList } from '@nextcloud/calendar-js'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect as Select } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
 
 import getTimezoneManager from '../../services/timezoneDataProviderService.js'
@@ -22,7 +22,7 @@ import getTimezoneManager from '../../services/timezoneDataProviderService.js'
 export default {
 	name: 'TimezoneSelect',
 	components: {
-		Multiselect,
+		Select,
 	},
 	props: {
 		additionalTimezones: {