Make MultiSelects searchable after some threshold

This commit is contained in:
Johannes Zellner
2025-05-12 10:50:16 +02:00
parent 4cbda25000
commit 53eb1649d5
5 changed files with 28 additions and 28 deletions
+2 -2
View File
@@ -58,10 +58,10 @@ onMounted(async () => {
<div v-if="accessRestrictionOption === ACL_OPTIONS.RESTRICTED">
<div style="margin-left: 20px; display: flex; gap: 10px;">
<div>
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" />
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" :search-threshold="20" />
</div>
<div>
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" />
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" :search-threshold="20" />
</div>
</div>
</div>
+2 -2
View File
@@ -213,10 +213,10 @@ defineExpose({
<div v-if="accessRestrictionOption === 'groups'">
<div style="margin-left: 20px; display: flex;">
<div>
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" :search-threshold="20" />
</div>
<div>
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" :search-threshold="20" />
</div>
</div>
</div>
+2 -2
View File
@@ -95,12 +95,12 @@ defineExpose({
<FormGroup>
<label for="usersInput">{{ $t('users.group.users') }}</label>
<div v-if="group?.source"><span ng-repeat="user in groupEdit.selectedUsers"> {{ (user.username || user.email) }}</span></div>
<MultiSelect v-else v-model="users" :options="allUsers"/>
<MultiSelect v-else v-model="users" :options="allUsers" :search-threshold="20"/>
</FormGroup>
<FormGroup>
<label for="appsInput">Access to Apps</label>
<MultiSelect v-model="apps" :options="allApps" />
<MultiSelect v-model="apps" :options="allApps" :search-threshold="20"/>
</FormGroup>
</fieldset>
</form>
+1 -1
View File
@@ -233,7 +233,7 @@ defineExpose({
<FormGroup>
<label for="groupsInput">{{ $t('users.user.groups') }}</label>
<div v-if="allGroups.length === 0">{{ $t('users.user.noGroups') }}</div>
<MultiSelect v-if="allLocalGroups.length" v-model="localGroups" :options="allLocalGroups" />
<MultiSelect v-if="allLocalGroups.length" v-model="localGroups" :options="allLocalGroups" :search-threshold="20" />
</FormGroup>
<Checkbox v-model="active" :disabled="isSelf" :label="$t('users.user.activeCheckbox')" style="display: inline-flex; margin-right: 6px;" /><sup><a href="https://docs.cloudron.io/user-management/#disable-user" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup><br/>