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 2 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. 68
      packages/nc-gui/components/account/UserList.vue
  3. 57
      packages/nc-gui/components/account/UsersModal.vue

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

@ -684,6 +684,11 @@ a {
@apply hidden; @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) { .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
@apply bg-transparent; @apply bg-transparent;
} }

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

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

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

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

Loading…
Cancel
Save