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:
parent
91a5c64e04
commit
17266913df
11 changed files with 82 additions and 2 deletions
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
|
@ -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));
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue