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

fix: user management table css fix for large screens

pull/6601/head
sreehari jayaraj 1 year ago
parent
92d926168a
commit
30e0553873
1 changed files with 104 additions and 106 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. 210
      packages/nc-gui/components/account/UserList.vue

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

@ -153,7 +153,7 @@ const openDeleteModal = (user: UserType) => {
</script> </script>
<template> <template>
<div data-testid="nc-super-user-list"> <div data-testid="nc-super-user-list" class="h-full">
<div class="max-w-195 mx-auto h-full"> <div class="max-w-195 mx-auto h-full">
<div class="text-2xl text-left font-weight-bold">{{ $t('title.userManagement') }}</div> <div class="text-2xl text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
<div class="py-2 flex gap-4 items-center justify-between"> <div class="py-2 flex gap-4 items-center justify-between">
@ -172,114 +172,112 @@ const openDeleteModal = (user: UserType) => {
</NcButton> </NcButton>
</div> </div>
</div> </div>
<div class="mt-3 flex flex-col justify-between"> <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5 border-1">
<div class="w-full border-1 rounded-md max-w-250 h-160"> <div class="flex w-full bg-gray-50 border-b-1">
<div class="flex w-full bg-gray-50 border-b-1"> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">{{ $t('labels.action') }}</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">{{ $t('labels.action') }}</span> </div>
</div> <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
<div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]"> <GeneralLoader size="xlarge" />
<GeneralLoader size="xlarge" /> </div>
</div> <!-- if users are empty -->
<!-- if users are empty --> <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
<div v-else-if="!users.length" class="flex items-center justify-center text-center h-128.25"> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </div>
</div> <section v-else class="tbody h-[calc(100%-3.3rem)] nc-scrollbar-md border-t-0">
<section v-else class="tbody"> <div
<div v-for="el of users"
v-for="el of users" :key="el.id"
:key="el.id" data-testid="nc-token-list"
data-testid="nc-token-list" class="flex py-3 justify-around px-5 border-b-1"
class="flex py-3 justify-around px-5 border-b-1" :class="{
:class="{ 'py-4': el.roles?.includes('super'),
'py-4': el.roles?.includes('super'), }"
}" >
> <span class="text-3.5 text-start w-1/3 pl-5">
<span class="text-3.5 text-start w-1/3 pl-5"> {{ el.email }}
{{ el.email }} </span>
</span> <span class="text-3.5 text-start w-1/3 pl-18">
<span class="text-3.5 text-start w-1/3 pl-18"> <div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
<div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div> <a-select
<a-select v-else
v-else v-model:value="el.roles"
v-model:value="el.roles" class="w-55 nc-user-roles"
class="w-55 nc-user-roles" :dropdown-match-select-width="false"
:dropdown-match-select-width="false" @change="updateRole(el.id, el.roles as string)"
@change="updateRole(el.id, el.roles as string)" >
<a-select-option
class="nc-users-list-role-option"
:value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)"
> >
<a-select-option <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
class="nc-users-list-role-option" <span class="text-gray-500 text-xs whitespace-normal">
:value="OrgUserRoles.CREATOR" {{ $t('msg.info.roles.orgCreator') }}
:label="$t(`objects.roleType.orgLevelCreator`)" </span>
> </a-select-option>
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal"> <a-select-option
{{ $t('msg.info.roles.orgCreator') }} class="nc-users-list-role-option"
</span> :value="OrgUserRoles.VIEWER"
</a-select-option> :label="$t(`objects.roleType.orgLevelViewer`)"
<a-select-option
class="nc-users-list-role-option"
:value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)"
>
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal">
{{ $t('msg.info.roles.orgViewer') }}
</span>
</a-select-option>
</a-select>
</span>
<span class="w-1/3 pl-43">
<div
class="flex items-center gap-2"
:class="{
'opacity-0': el.roles?.includes('super'),
}"
> >
<NcDropdown :trigger="['click']"> <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<MdiDotsVertical <span class="text-gray-500 text-xs whitespace-normal">
class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)" {{ $t('msg.info.roles.orgViewer') }}
/> </span>
<template #overlay> </a-select-option>
<NcMenu> </a-select>
<template v-if="!el.roles?.includes('super')"> </span>
<!-- Resend invite Email --> <span class="w-1/3 pl-43">
<NcMenuItem @click="resendInvite(el)"> <div
<component :is="iconMap.email" class="flex text-gray-500" /> class="flex items-center gap-2"
<div>{{ $t('activity.resendInvite') }}</div> :class="{
</NcMenuItem> 'opacity-0': el.roles?.includes('super'),
<NcMenuItem @click="copyInviteUrl(el)"> }"
<component :is="iconMap.copy" class="flex text-gray-500" /> >
<div>{{ $t('activity.copyInviteURL') }}</div> <NcDropdown :trigger="['click']">
</NcMenuItem> <MdiDotsVertical
<NcMenuItem @click="copyPasswordResetUrl(el)"> class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
<component :is="iconMap.copy" class="flex text-gray-500" /> />
<div>{{ $t('activity.copyPasswordResetURL') }}</div> <template #overlay>
</NcMenuItem> <NcMenu>
</template> <template v-if="!el.roles?.includes('super')">
<NcDivider v-if="!el.roles?.includes('super')" /> <!-- Resend invite Email -->
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)"> <NcMenuItem @click="resendInvite(el)">
<MaterialSymbolsDeleteOutlineRounded /> <component :is="iconMap.email" class="flex text-gray-500" />
{{ $t('general.remove') }} {{ $t('objects.user') }} <div>{{ $t('activity.resendInvite') }}</div>
</NcMenuItem> </NcMenuItem>
</NcMenu> <NcMenuItem @click="copyInviteUrl(el)">
</template> <component :is="iconMap.copy" class="flex text-gray-500" />
</NcDropdown> <div>{{ $t('activity.copyInviteURL') }}</div>
</div> </NcMenuItem>
</span> <NcMenuItem @click="copyPasswordResetUrl(el)">
</div> <component :is="iconMap.copy" class="flex text-gray-500" />
</section> <div>{{ $t('activity.copyPasswordResetURL') }}</div>
</div> </NcMenuItem>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-4"> </template>
<a-pagination <NcDivider v-if="!el.roles?.includes('super')" />
v-model:current="currentPage" <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)">
:total="pagination.total" <MaterialSymbolsDeleteOutlineRounded />
show-less-items {{ $t('general.remove') }} {{ $t('objects.user') }}
@change="loadUsers(currentPage, currentLimit)" </NcMenuItem>
/> </NcMenu>
</div> </template>
</NcDropdown>
</div>
</span>
</div>
</section>
</div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
<a-pagination
v-model:current="currentPage"
:total="pagination.total"
show-less-items
@change="loadUsers(currentPage, currentLimit)"
/>
</div> </div>
<GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()"> <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()">
<template #entity-preview> <template #entity-preview>

Write Preview
Loading…
Cancel
Save