From 17266913df5f57333cf06e436ba9f8d6886171b0 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 12 Jan 2023 11:50:37 +0800 Subject: [PATCH] feat(console): add assigned users column to roles table (#2916) --- .../AssignedUsers/index.module.scss | 37 +++++++++++++++++++ .../Roles/components/AssignedUsers/index.tsx | 26 +++++++++++++ packages/console/src/pages/Roles/index.tsx | 13 ++++++- .../de/translation/admin-console/roles.ts | 1 + .../en/translation/admin-console/roles.ts | 1 + .../fr/translation/admin-console/roles.ts | 1 + .../ko/translation/admin-console/roles.ts | 1 + .../pt-br/translation/admin-console/roles.ts | 1 + .../pt-pt/translation/admin-console/roles.ts | 1 + .../tr-tr/translation/admin-console/roles.ts | 1 + .../zh-cn/translation/admin-console/roles.ts | 1 + 11 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 packages/console/src/pages/Roles/components/AssignedUsers/index.module.scss create mode 100644 packages/console/src/pages/Roles/components/AssignedUsers/index.tsx diff --git a/packages/console/src/pages/Roles/components/AssignedUsers/index.module.scss b/packages/console/src/pages/Roles/components/AssignedUsers/index.module.scss new file mode 100644 index 000000000..4a1c1c93f --- /dev/null +++ b/packages/console/src/pages/Roles/components/AssignedUsers/index.module.scss @@ -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); +} + diff --git a/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx b/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx new file mode 100644 index 000000000..968635126 --- /dev/null +++ b/packages/console/src/pages/Roles/components/AssignedUsers/index.tsx @@ -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>; + count: number; +}; + +const AssignedUsers = ({ users, count }: Props) => + count ? ( +
+
+ {users.map(({ id, avatar }) => ( + + ))} +
+ {count > 2 && {count.toLocaleString()}} +
+ ) : ( +
-
+ ); + +export default AssignedUsers; diff --git a/packages/console/src/pages/Roles/index.tsx b/packages/console/src/pages/Roles/index.tsx index b0b076b47..cd8016565 100644 --- a/packages/console/src/pages/Roles/index.tsx +++ b/packages/console/src/pages/Roles/index.tsx @@ -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 }) => , }, { title: t('roles.role_description'), dataIndex: 'description', - colSpan: 10, + colSpan: 6, render: ({ description }) => description, }, + { + title: {t('roles.assigned_users')}, + dataIndex: 'users', + colSpan: 5, + render: ({ featuredUsers, usersCount }) => ( + + ), + }, ]} rowClickHandler={({ id }) => { navigate(buildDetailsPathname(id)); diff --git a/packages/phrases/src/locales/de/translation/admin-console/roles.ts b/packages/phrases/src/locales/de/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/en/translation/admin-console/roles.ts b/packages/phrases/src/locales/en/translation/admin-console/roles.ts index b4a2d1b32..b855ae781 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts @@ -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: diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts index 5bc21a758..88235b38b 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts @@ -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: