Merge pull request #38306 from nextcloud/enh/noid/migrate-to-ncselect

migrate a few components to NcSelect

apps/files/src/components/TransferOwnershipDialogue.vue

@@ -37,22 +37,15 @@
 				<label for="targetUser">
 					<span>{{ t('files', 'New owner') }}</span>
 				</label>
-				<NcMultiselect id="targetUser"
+				<NcSelect input-id="targetUser"
 					v-model="selectedUser"
 					:options="formatedUserSuggestions"
 					:multiple="false"
-					:searchable="true"
-					:placeholder="t('files', 'Search for an account')"
-					:preselect-first="true"
-					:preserve-search="true"
 					:loading="loadingUsers"
-					track-by="user"
 					label="displayName"
-					:internal-search="false"
-					:clear-on-select="false"
 					:user-select="true"
 					class="middle-align"
-					@search-change="findUserDebounced" />
+					@search="findUserDebounced" />
 			</p>
 			<p>
 				<input type="submit"
@@ -70,7 +63,7 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import Vue from 'vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
@@ -86,7 +79,7 @@ const picker = getFilePickerBuilder(t('files', 'Choose a file or folder to trans
 export default {
 	name: 'TransferOwnershipDialogue',
 	components: {
-		NcMultiselect,
+		NcSelect,
 		NcButton,
 	},
 	data() {

apps/settings/src/admin.js

@@ -1,5 +1,5 @@
 window.addEventListener('DOMContentLoaded', () => {
-	$('#excludedGroups,#linksExcludedGroups,#passwordsExcludedGroups').each(function(index, element) {
+	$('#linksExcludedGroups,#passwordsExcludedGroups').each(function(index, element) {
 		OC.Settings.setupGroupsSelect($(element))
 		$(element).change(function(ev) {
 			let groups = ev.val || []

apps/settings/src/components/AdminTwoFactor.vue

@@ -19,31 +19,33 @@
 				{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
 			</p>
 			<p>
-				<NcMultiselect v-model="enforcedGroups"
+				<label for="enforcedGroups">
+					<span>{{ t('settings', 'Enforced groups') }}</span>
+				</label>
+				<NcSelect input-id="enforcedGroups"
+					v-model="enforcedGroups"
 					:options="groups"
-					:placeholder="t('settings', 'Enforced groups')"
 					:disabled="loading"
 					:multiple="true"
-					:searchable="true"
 					:loading="loadingGroups"
-					:show-no-options="false"
 					:close-on-select="false"
-					@search-change="searchGroup" />
+					@search="searchGroup" />
 			</p>
 			<p class="top-margin">
 				{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
 			</p>
 			<p>
-				<NcMultiselect v-model="excludedGroups"
+				<label for="excludedGroups">
+					<span>{{ t('settings', 'Excluded groups') }}</span>
+				</label>
+				<NcSelect input-id="excludedGroups"
+					v-model="excludedGroups"
 					:options="groups"
-					:placeholder="t('settings', 'Excluded groups')"
 					:disabled="loading"
 					:multiple="true"
-					:searchable="true"
 					:loading="loadingGroups"
-					:show-no-options="false"
 					:close-on-select="false"
-					@search-change="searchGroup" />
+					@search="searchGroup" />
 			</p>
 			<p class="top-margin">
 				<em>
@@ -65,7 +67,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
@@ -77,7 +79,7 @@ import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 export default {
 	name: 'AdminTwoFactor',
 	components: {
-		NcMultiselect,
+		NcSelect,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcSettingsSection,

apps/settings/src/components/AppDetails.vue

@@ -35,22 +35,23 @@
 					class="group_select"
 					:title="t('settings', 'All')"
 					value="">
-				<NcMultiselect v-if="isLimitedToGroups(app)"
+				<br />
+				<label for="limitToGroups">
+					<span>{{ t('settings', 'Limit app usage to groups') }}</span>
+				</label>
+				<NcSelect v-if="isLimitedToGroups(app)"
+					input-id="limitToGroups"
 					:options="groups"
 					:value="appGroups"
-					:options-limit="5"
-					:placeholder="t('settings', 'Limit app usage to groups')"
+					:limit="5"
 					label="name"
-					track-by="id"
-					class="multiselect-vue"
 					:multiple="true"
 					:close-on-select="false"
-					:tag-width="60"
-					@select="addGroupLimitation"
-					@remove="removeGroupLimitation"
-					@search-change="asyncFindGroup">
+					@option:selected="addGroupLimitation"
+					@option:deselected="removeGroupLimitation"
+					@search="asyncFindGroup">
 					<span slot="noResult">{{ t('settings', 'No results') }}</span>
-				</NcMultiselect>
+				</NcSelect>
 			</div>
 			<div class="app-details__actions-manage">
 				<input v-if="app.update"
@@ -146,7 +147,7 @@
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import AppManagement from '../mixins/AppManagement.js'
 import PrefixMixin from './PrefixMixin.vue'
@@ -156,7 +157,7 @@ export default {
 	name: 'AppDetails',
 
 	components: {
-		NcMultiselect,
+		NcSelect,
 		Markdown,
 	},
 	mixins: [AppManagement, PrefixMixin],

apps/settings/src/mixins/AppManagement.js

@@ -98,7 +98,8 @@ export default {
 			}
 			return true
 		},
-		addGroupLimitation(group) {
+		addGroupLimitation(groupArray) {
+			const group = groupArray.pop()
 			const groups = this.app.groups.concat([]).concat([group.id])
 			this.$store.dispatch('enableApp', { appId: this.app.id, groups })
 		},