github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): org role selector input display issue

pull/9936/head
Ramesh Mane 1 week ago
parent
e94dc306c2
commit
b87982cd07
3 changed files with 69 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save