0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

feat(console): add assigned users column to roles table (#2916)

This commit is contained in:
Xiao Yijun 2023-01-12 11:50:37 +08:00 committed by GitHub
parent 91a5c64e04
commit 17266913df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 82 additions and 2 deletions

View file

@ -0,0 +1,37 @@
@use '@/scss/underscore' as _;
.users {
display: flex;
align-items: center;
.avatars {
display: flex;
align-items: center;
flex-direction: row-reverse;
.avatar {
position: relative;
width: 24px;
height: 24px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--color-layer-1);
&:not(:last-child) {
margin-left: _.unit(-2);
}
}
}
.count {
margin-left: _.unit(2);
color: var(--color-text);
font: var(--font-body-medium);
}
}
.empty {
padding-left: _.unit(10);
}

View file

@ -0,0 +1,26 @@
import type { User } from '@logto/schemas';
import UserAvatar from '@/components/UserAvatar';
import * as styles from './index.module.scss';
type Props = {
users: Array<Pick<User, 'avatar' | 'id'>>;
count: number;
};
const AssignedUsers = ({ users, count }: Props) =>
count ? (
<div className={styles.users}>
<div className={styles.avatars}>
{users.map(({ id, avatar }) => (
<UserAvatar key={id} url={avatar} className={styles.avatar} />
))}
</div>
{count > 2 && <span className={styles.count}>{count.toLocaleString()}</span>}
</div>
) : (
<div className={styles.empty}>-</div>
);
export default AssignedUsers;

View file

@ -15,6 +15,7 @@ import useTableSearchParams, { formatKeyword } from '@/hooks/use-table-search-pa
import * as pageStyles from '@/scss/resources.module.scss';
import { buildUrl } from '@/utilities/url';
import AssignedUsers from './components/AssignedUsers';
import CreateRoleModal from './components/CreateRoleModal';
const rolesPathname = '/roles';
@ -68,15 +69,23 @@ const Roles = () => {
{
title: t('roles.role_name'),
dataIndex: 'name',
colSpan: 6,
colSpan: 5,
render: ({ id, name }) => <ItemPreview title={name} to={buildDetailsPathname(id)} />,
},
{
title: t('roles.role_description'),
dataIndex: 'description',
colSpan: 10,
colSpan: 6,
render: ({ description }) => description,
},
{
title: <span>{t('roles.assigned_users')}</span>,
dataIndex: 'users',
colSpan: 5,
render: ({ featuredUsers, usersCount }) => (
<AssignedUsers users={featuredUsers} count={usersCount} />
),
},
]}
rowClickHandler={({ id }) => {
navigate(buildDetailsPathname(id));

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles',
role_name: 'Role',
role_description: 'Description',
assigned_users: 'Assigned users',
assign_permissions: 'Assign permissions',
create_role_title: 'Create a role',
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description:

View file

@ -5,6 +5,7 @@ const roles = {
create: 'Add Roles', // UNTRANSLATED
role_name: 'Role', // UNTRANSLATED
role_description: 'Description', // UNTRANSLATED
assigned_users: 'Assigned users', // UNTRANSLATED
assign_permissions: 'Assign permissions', // UNTRANSLATED
create_role_title: 'Create a role', // UNTRANSLATED
create_role_description: