chore(settings): Migrate to built-in NcSelect input label

Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2024-01-22 17:18:56 -08:00
parent 567d011882
commit a0f60adcef
8 changed files with 20 additions and 56 deletions

View file

@ -4,7 +4,6 @@
:doc-url="authorizedSettingsDocLink">
<div class="setting-list">
<div v-for="setting in availableSettings" :key="setting.class">
<label :for="setting.id">{{ setting.sectionName }}</label>
<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
</div>
</div>

View file

@ -1,6 +1,6 @@
<template>
<NcSelect v-model="selected"
:input-id="setting.id"
:input-label="setting.sectionName"
class="group-select"
:placeholder="t('settings', 'None')"
label="displayName"

View file

@ -19,11 +19,8 @@
{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
</p>
<p>
<label for="enforcedGroups">
<span>{{ t('settings', 'Enforced groups') }}</span>
</label>
<NcSelect v-model="enforcedGroups"
input-id="enforcedGroups"
:input-label="t('settings', 'Enforced groups')"
:options="groups"
:disabled="loading"
:multiple="true"
@ -35,11 +32,8 @@
{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
</p>
<p>
<label for="excludedGroups">
<span>{{ t('settings', 'Excluded groups') }}</span>
</label>
<NcSelect v-model="excludedGroups"
input-id="excludedGroups"
:input-label="t('settings', 'Excluded groups')"
:options="groups"
:disabled="loading"
:multiple="true"

View file

@ -36,11 +36,8 @@
:title="t('settings', 'All')"
value="">
<br />
<label for="limitToGroups">
<span>{{ t('settings', 'Limit app usage to groups') }}</span>
</label>
<NcSelect v-if="isLimitedToGroups(app)"
input-id="limitToGroups"
:input-label="t('settings', 'Limit app usage to groups')"
:options="groups"
:value="appGroups"
:limit="5"

View file

@ -28,6 +28,7 @@
</label>
<NcSelect :input-id="inputId"
class="visibility-container__select"
label-outside
:clearable="false"
:options="visibilityOptions"
:value="visibilityObject"

View file

@ -82,12 +82,8 @@
:class="{ 'icon-loading-small': loading.groups }"
:value="newUser.groups"
:required="!settings.isAdmin" />
<label class="modal__label"
for="new-user-groups">
{{ !settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups') }}
</label>
<NcSelect class="modal__select"
input-id="new-user-groups"
:input-label="!settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups')"
:placeholder="t('settings', 'Set user groups')"
:disabled="loading.groups || loading.all"
:options="canAddGroups"
@ -104,13 +100,9 @@
</div>
<div v-if="subAdminsGroups.length > 0 && settings.isAdmin"
class="modal__item">
<label class="modal__label"
for="new-user-sub-admin">
{{ t('settings', 'Administered groups') }}
</label>
<NcSelect v-model="newUser.subAdminsGroups"
class="modal__select"
input-id="new-user-sub-admin"
:input-label="t('settings', 'Administered groups')"
:placeholder="t('settings', 'Set user as admin for …')"
:options="subAdminsGroups"
:close-on-select="false"
@ -118,13 +110,9 @@
label="name" />
</div>
<div class="modal__item">
<label class="modal__label"
for="new-user-quota">
{{ t('settings', 'Quota') }}
</label>
<NcSelect v-model="newUser.quota"
class="modal__select"
input-id="new-user-quota"
:input-label="t('settings', 'Quota')"
:placeholder="t('settings', 'Set user quota')"
:options="quotaOptions"
:clearable="false"
@ -133,13 +121,9 @@
</div>
<div v-if="showConfig.showLanguages"
class="modal__item">
<label class="modal__label"
for="new-user-language">
{{ t('settings', 'Language') }}
</label>
<NcSelect v-model="newUser.language"
class="modal__select"
input-id="new-user-language"
:input-label="t('settings', 'Language')"
:placeholder="t('settings', 'Set default language')"
:clearable="false"
:selectable="option => !option.languages"
@ -148,15 +132,10 @@
label="name" />
</div>
<div :class="['modal__item managers', { 'icon-loading-small': loading.manager }]">
<label class="modal__label"
for="new-user-manager">
<!-- TRANSLATORS This string describes a manager in the context of an organization -->
{{ t('settings', 'Manager') }}
</label>
<NcSelect v-model="newUser.manager"
class="modal__select"
input-id="new-user-manager"
:placeholder="managerLabel"
:input-label="managerLabel"
:placeholder="managerPlaceholder"
:options="possibleManagers"
:user-select="true"
label="displayname"
@ -211,7 +190,9 @@ export default {
return {
possibleManagers: [],
// TRANSLATORS This string describes a manager in the context of an organization
managerLabel: t('settings', 'Set user manager'),
managerLabel: t('settings', 'Manager'),
// TRANSLATORS This string describes a manager in the context of an organization
managerPlaceholder: t('settings', 'Set user manager'),
}
},
@ -424,11 +405,6 @@ export default {
align-self: flex-start;
}
&__label {
display: block;
padding: 4px 0;
}
&__select {
width: 100%;
}

View file

@ -123,6 +123,7 @@
</label>
<NcSelect data-cy-user-list-input-groups
:data-loading="loading.groups || undefined"
label-outside
:input-id="'groups' + uniqueId"
:close-on-select="false"
:disabled="isLoadingField"
@ -156,6 +157,7 @@
</label>
<NcSelect data-cy-user-list-input-subadmins
:data-loading="loading.subadmins || undefined"
label-outside
:input-id="'subadmins' + uniqueId"
:close-on-select="false"
:disabled="isLoadingField"
@ -183,6 +185,7 @@
{{ t('settings', 'Select user quota') }}
</label>
<NcSelect v-model="editedUserQuota"
label-outside
:close-on-select="true"
:create-option="validateQuota"
data-cy-user-list-input-quota
@ -219,6 +222,7 @@
<NcSelect :id="'language' + uniqueId"
data-cy-user-list-input-language
:data-loading="loading.languages || undefined"
label-outside
:allow-empty="false"
:disabled="isLoadingField"
:loading="loading.languages"
@ -265,6 +269,7 @@
class="select--fill"
data-cy-user-list-input-manager
:data-loading="loading.manager || undefined"
label-outside
:input-id="'manager' + uniqueId"
:close-on-select="true"
:disabled="isLoadingField"

View file

@ -60,9 +60,8 @@
<NcAppSettingsSection id="default-settings"
:name="t('settings', 'Defaults')">
<label for="default-quota-select">{{ t('settings', 'Default quota') }}</label>
<NcSelect v-model="defaultQuota"
input-id="default-quota-select"
:input-label="t('settings', 'Default quota')"
placement="top"
:taggable="true"
:options="quotaOptions"
@ -271,10 +270,3 @@ export default {
},
}
</script>
<style lang="scss" scoped>
label[for="default-quota-select"] {
display: block;
padding: 4px 0;
}
</style>