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

migrate a few components to NcSelect

4 files changed, 30 insertions, 26 deletions

diff --git a/apps/settings/src/admin.js b/apps/settings/src/admin.js
index 8bdfa1d0770..665f553bfbc 100644
--- a/apps/settings/src/admin.js
+++ b/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 || []
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index 5be6eaaf512..78dba7f3a7e 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/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,
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue
index 0a963f1b636..dbd26fa876f 100644
--- a/apps/settings/src/components/AppDetails.vue
+++ b/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],
diff --git a/apps/settings/src/mixins/AppManagement.js b/apps/settings/src/mixins/AppManagement.js
index cf44a37a53f..68f5808b37a 100644
--- a/apps/settings/src/mixins/AppManagement.js
+++ b/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 })
 		},