Browse Source

Merge pull request #9936 from nocodb/nc-fix/user-role-selector-input-label-issue

fix(nc-gui): org role selector input display issue
pull/9944/head
Raju Udava 3 days ago committed by GitHub
parent
commit
462b44b756
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      packages/nc-gui/assets/style.scss
  2. 58
      packages/nc-gui/components/account/UserList.vue
  3. 53
      packages/nc-gui/components/account/UsersModal.vue

5
packages/nc-gui/assets/style.scss

@ -684,6 +684,11 @@ a {
@apply hidden;
}
/* Hide the element with class nc-selected-item-icon */
.ant-select-selection-item .nc-select-hide-item {
@apply hidden;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
@apply bg-transparent;
}

58
packages/nc-gui/components/account/UserList.vue

@ -208,6 +208,19 @@ const columns = [
justify: 'justify-end',
},
] as NcTableColumnProps[]
const userRoleOptions = [
{
title: 'objects.roleType.orgLevelCreator',
subtitle: 'msg.info.roles.orgCreator',
value: OrgUserRoles.CREATOR,
},
{
title: 'objects.roleType.orgLevelViewer',
subtitle: 'msg.info.roles.orgViewer',
value: OrgUserRoles.VIEWER,
},
]
</script>
<template>
@ -282,45 +295,32 @@ const columns = [
@change="updateRole(el.id, el.roles as string)"
>
<a-select-option
v-for="(option, idx) of userRoleOptions"
:key="idx"
class="nc-users-list-role-option"
:value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)"
:value="option.value"
>
<div class="w-full">
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<GeneralIcon
v-if="el?.roles === OrgUserRoles.CREATOR"
id="nc-selected-item-icon"
icon="check"
class="flex-none w-4 h-4 text-primary"
/>
</div>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgCreator') }}
<div class="w-full flex items-start gap-1">
<div class="flex-1">
<NcTooltip show-on-truncate-only class="truncate" data-rec="true">
<template #title>
{{ $t(option.title) }}
</template>
{{ $t(option.title) }}
</NcTooltip>
<div class="nc-select-hide-item text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t(option.subtitle) }}
</div>
</div>
</a-select-option>
<a-select-option
class="nc-users-list-role-option"
:value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)"
>
<div class="w-full">
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<GeneralIcon
v-if="el.roles === OrgUserRoles.VIEWER"
v-if="el.roles === option.value"
id="nc-selected-item-icon"
icon="check"
class="flex-none w-4 h-4 text-primary"
class="w-4 h-4 text-primary"
/>
</div>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgViewer') }}
</div>
</div>
</a-select-option>
</NcSelect>
<div v-else class="font-weight-bold" data-rec="true">

53
packages/nc-gui/components/account/UsersModal.vue

@ -92,6 +92,19 @@ const onPaste = (e: ClipboardEvent) => {
usersData.value.emails = extractEmail(pastedText) || pastedText
}
const userRoleOptions = [
{
title: 'objects.roleType.orgLevelCreator',
subtitle: 'msg.info.roles.orgCreator',
value: OrgUserRoles.CREATOR,
},
{
title: 'objects.roleType.orgLevelViewer',
subtitle: 'msg.info.roles.orgViewer',
value: OrgUserRoles.VIEWER,
},
]
</script>
<template>
@ -199,42 +212,32 @@ const onPaste = (e: ClipboardEvent) => {
dropdown-class-name="nc-dropdown-user-role max-w-64"
>
<a-select-option
v-for="(option, idx) of userRoleOptions"
:key="idx"
class="nc-role-option"
:value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)"
:value="option.value"
>
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<GeneralIcon
v-if="usersData.role === OrgUserRoles.CREATOR"
id="nc-selected-item-icon"
icon="check"
class="w-4 h-4 text-primary"
/>
</div>
<div class="w-full flex items-start gap-1">
<div class="flex-1 max-w-[calc(100%_-_16px)]">
<NcTooltip show-on-truncate-only class="truncate" data-rec="true">
<template #title>
{{ $t(option.title) }}
</template>
{{ $t(option.title) }}
</NcTooltip>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgCreator') }}
<div class="nc-select-hide-item text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t(option.subtitle) }}
</div>
</div>
</a-select-option>
<a-select-option
class="nc-role-option"
:value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)"
>
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<GeneralIcon
v-if="usersData.role === OrgUserRoles.VIEWER"
v-if="usersData.role === option.value"
id="nc-selected-item-icon"
icon="check"
class="w-4 h-4 text-primary"
/>
</div>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgViewer') }}
</div>
</a-select-option>
</NcSelect>
</a-form-item>

Loading…
Cancel
Save