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 2 days 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
Split 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;
}
/* 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;
}

68
packages/nc-gui/components/account/UserList.vue
Unescape View File

@ -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,44 +295,31 @@ 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>
</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"
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>
<GeneralIcon
v-if="el.roles === option.value"
id="nc-selected-item-icon"
icon="check"
class="w-4 h-4 text-primary"
/>
</div>
</a-select-option>
</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
}
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="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
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>

Write Preview
Loading…
Cancel
Save