Merge pull request #2193 from nextcloud/fix/noid/nc-select

Migrate from NcMultiselect to NcSelect

package.json

@@ -104,7 +104,7 @@
 			".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
 		},
 		"transformIgnorePatterns": [
-			"/node_modules/(?!(.*vue-material-design-icons)|(uuid))"
+			"/node_modules/(?!(.*vue-material-design-icons)|(uuid)|(.*vue-select))"
 		],
 		"snapshotSerializers": [
 			"<rootDir>/node_modules/jest-serializer-vue"

src/components/AppNavigation/CalendarShare.vue

@@ -29,25 +29,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<div class="calendar-shares">
 		<ul>
-			<li class="app-navigation-entry__multiselect">
-				<NcMultiselect ref="multiselect"
+			<li class="app-navigation-entry__select">
+				<NcSelect ref="select"
 					:options="usersOrGroups"
-					:searchable="true"
-					:internal-search="false"
-					:max-height="600"
-					:show-no-results="true"
 					:placeholder="placeholder"
-					:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 					:user-select="true"
-					open-direction="bottom"
-					track-by="user"
-					label="displayName"
-					@search-change="findSharee"
-					@change="shareCalendar">
-					<template #noResult>
+					@search="findSharee"
+					@option:selected="shareCalendar">
+					<template #no-options>
 						<span>{{ noResult }}</span>
 					</template>
-				</NcMultiselect>
+				</NcSelect>
 			</li>
 			<!-- list of user or groups calendar is shared with -->
 			<CalendarSharee v-for="sharee in calendar.shares"
@@ -66,15 +58,15 @@ import { urldecode } from '../../utils/url.js'
 import Axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import debounce from 'debounce'
 
 export default {
 	name: 'CalendarShare',
 	components: {
 		CalendarSharee,
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		calendar: {
@@ -86,8 +78,6 @@ export default {
 	},
 	data() {
 		return {
-			isLoading: false,
-			inputGiven: false,
 			usersOrGroups: [],
 		}
 	},
@@ -100,8 +90,8 @@ export default {
 		},
 	},
 	mounted() {
-		// This ensures that the multiselect input is in focus as soon as the user clicks share
-		this.$refs.multiselect?.focus?.()
+		// This ensures that the select input is in focus as soon as the user clicks share
+		this.$refs.select?.focus?.()
 	},
 	methods: {
 		/**
@@ -121,9 +111,9 @@ export default {
 		/**
 		 * Use the cdav client call to find matches to the query from the existing Users & Groups
 		 *
-		 * @param {string} query
+		 * @param {string} search
 		 */
-		findSharee: debounce(async function(query) {
+		findSharee: debounce(async function(search, loading) {
 			const hiddenPrincipalSchemes = []
 			const hiddenUrls = []
 			this.calendar.shares.forEach((share) => {
@@ -136,24 +126,19 @@ export default {
 				hiddenUrls.push(this.calendar.owner)
 			}
 
-			this.isLoading = true
 			this.usersOrGroups = []
 
-			if (query.length > 0) {
-				const davPromise = this.findShareesFromDav(query, hiddenPrincipalSchemes, hiddenUrls)
-				const ocsPromise = this.findShareesFromCircles(query, hiddenPrincipalSchemes, hiddenUrls)
+			if (search.length > 0) {
+				loading(true)
+				const davPromise = this.findShareesFromDav(search, hiddenPrincipalSchemes, hiddenUrls)
+				const ocsPromise = this.findShareesFromCircles(search, hiddenPrincipalSchemes, hiddenUrls)
 
 				const [davResults, ocsResults] = await Promise.all([davPromise, ocsPromise])
 				this.usersOrGroups = [
 					...davResults,
 					...ocsResults,
 				]
-
-				this.isLoading = false
-				this.inputGiven = true
-			} else {
-				this.inputGiven = false
-				this.isLoading = false
+				loading(false)
 			}
 		}, 500),
 		/**
@@ -262,50 +247,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.calendar-shares {
-	&__shareematch--bold {
-		font-weight: bold;
-	}
-
-	.app-navigation-entry {
-
-		&-wrapper::v-deep {
-			.app-navigation-entry {
-				padding-left: 0 !important;
+.calendar-shares .app-navigation-entry {
 
-				&__utils {
-					.action-checkbox__label {
-						padding-right: 0 !important;
-					}
+	&-wrapper::v-deep {
+		.app-navigation-entry {
+			padding-left: 0 !important;
 
-					.action-checkbox__label::before {
-						margin: 4px 4px 0 !important;
-					}
+			&__utils {
+				.action-checkbox__label {
+					padding-right: 0 !important;
 				}
-			}
-		}
-
-		&__multiselect::v-deep {
-			padding-left: 6px !important;
 
-			.multiselect {
-				width: 100%;
-				margin: 0;
-				padding-right: 8px !important;
-				.multiselect__tags:focus-within,
-				.multiselect__tags:hover {
-					border-color: var(--color-primary-element);
-				}
-
-				&:not(.showContent) .multiselect__content-wrapper {
-					display: none;
-				}
-
-				.multiselect__content-wrapper {
-					z-index: 101 !important;
+				.action-checkbox__label::before {
+					margin: 4px 4px 0 !important;
 				}
 			}
 		}
 	}
+
+	&__select::v-deep .v-select {
+		width: 100%;
+	}
 }
 </style>

src/components/AppSidebar/CalendarPickerItem.vue

@@ -24,39 +24,39 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="property__item">
-		<NcMultiselect label="displayName"
-			track-by="url"
+		<NcSelect label="displayName"
 			:disabled="isDisabled"
-			:options="calendars"
-			:value="calendar"
+			:clearable="false"
+			:options="calendarsMap"
+			:value="calendarMap"
 			:placeholder="t('tasks', 'Select a calendar')"
-			@select="change">
-			<template #singleLabel="scope">
-				<CalendarPickerOption v-bind="scope.option" />
+			@option:selected="change">
+			<template #selected-option="option">
+				<CalendarPickerOption v-bind="option" />
 			</template>
-			<template #option="scope">
-				<CalendarPickerOption v-bind="scope.option" />
+			<template #option="option">
+				<CalendarPickerOption v-bind="option" />
 			</template>
-			<template #noResult>
+			<template #no-options>
 				<CalendarPickerOption color=""
 					owner=""
 					:is-shared-with-me="false"
 					:display-name="t('tasks', 'No calendar matches the search.')" />
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 	</div>
 </template>
 
 <script>
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 export default {
 	components: {
 		CalendarPickerOption,
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		calendar: {
@@ -77,20 +77,37 @@ export default {
 		isDisabled() {
 			return this.calendars.length < 2 || this.disabled
 		},
+		calendarsMap() {
+			return this.calendars.map(calendar => this.stubCalendar(calendar))
+		},
+		calendarMap() {
+			return this.stubCalendar(this.calendar)
+		},
 	},
 	methods: {
 		t,
 
+		stubCalendar(calendar) {
+			return {
+				id: calendar.url,
+				displayName: calendar.displayName,
+				color: calendar.color,
+				isSharedWithMe: calendar.isSharedWithMe,
+				owner: calendar.owner,
+			}
+		},
+
 		/**
 		 * TODO: this should emit the calendar id instead
 		 *
-		 * @param {object} newCalendar The selected calendar
+		 * @param {object} calendarMap The selected calendar
 		 */
-		change(newCalendar) {
-			if (!newCalendar) {
+		change(calendarMap) {
+			const calendar = this.calendars.find(calendar => calendar.url === calendarMap.id)
+			if (!calendar) {
 				return
 			}
-			this.$emit('change-calendar', newCalendar)
+			this.$emit('change-calendar', calendar)
 		},
 	},
 }
@@ -102,47 +119,44 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
 
-	:deep(.multiselect) {
+	:deep(.v-select.select) {
 		width: 100%;
 
-		.multiselect--active .multiselect__tags {
-			border: 1px solid var(--color-border-dark);
-		}
-
-		.multiselect--disabled,
-		.multiselect--disabled .multiselect__single {
-			background-color: var(--color-main-background) !important;
-
-			& * {
-				cursor: default !important;
+		.vs {
+			&__dropdown-menu,
+			&__dropdown-option,
+			&__dropdown-toggle,
+			&__selected-options,
+			&__selected {
+				margin:  0;
+				padding: 0;
+				border: none;
 			}
-		}
 
-		.multiselect__tags {
-			border: 1px solid transparent;
-			height: 44px;
-			padding: 0 !important;
+			&__dropdown-menu {
+				border-radius: 0;
+				box-shadow: none;
+				border: 1px solid var(--color-border-dark);
+			}
 
-			.multiselect__single {
-				padding: 0;
+			&__dropdown-option {
+				margin-left: -1px;
 			}
 
-			input.multiselect__input {
-				padding: 0 !important;
-				padding-left: 44px !important;
-				width: 100% !important;
-				position: absolute !important;
-				font-weight: bold;
-				font-size: var(--default-font-size);
+			&__search {
+				padding-left: 44px;
+				margin: 0;
+				height: 44px !important;
 				line-height: 44px;
+				font-weight: bold;
 			}
-		}
 
-		.multiselect__content-wrapper li > span {
-			padding: 0;
+			&__actions {
+				cursor: pointer;
 
-			&.multiselect__option--selected {
-				color: var(--color-main-text);
+				span {
+					cursor: pointer;
+				}
 			}
 		}
 	}

src/components/AppSidebar/CalendarPickerOption.vue

@@ -107,6 +107,7 @@ export default {
 	align-items: center;
 	flex-grow: 1;
 	width: 100%;
+	cursor: pointer;
 
 	&__color-indicator {
 		width: 16px;
@@ -116,6 +117,7 @@ export default {
 		flex-basis: 16px;
 		flex-shrink: 0;
 		margin: 14px;
+		cursor: pointer;
 	}
 
 	&__label {
@@ -124,6 +126,8 @@ export default {
 		flex-grow: 1;
 		font-weight: bold;
 		white-space: nowrap;
+		color: var(--color-text-lighter);
+		cursor: pointer;
 	}
 
 	&__avatar {