diff --git a/src/components/Admin/tabs/ModuleActivityReport.jsx b/src/components/Admin/tabs/ModuleActivityReport.jsx index 2b4c10fbb..cf34d7e3d 100644 --- a/src/components/Admin/tabs/ModuleActivityReport.jsx +++ b/src/components/Admin/tabs/ModuleActivityReport.jsx @@ -156,8 +156,7 @@ const ModuleActivityReport = ({ enterpriseId }) => { />, ]} > - - + { const intl = useIntl(); diff --git a/src/components/PeopleManagement/OrgMemberCard.jsx b/src/components/PeopleManagement/OrgMemberCard.jsx new file mode 100644 index 000000000..de52ea57a --- /dev/null +++ b/src/components/PeopleManagement/OrgMemberCard.jsx @@ -0,0 +1,92 @@ +import { Avatar, Card, Col, Row } from '@openedx/paragon'; + +const OrgMemberCard = ({ original }) => { + const { name, email, joinedOrg, enrollments } = original; + + return ( + + + + + + + + + +

{name}

+
+ +

{email}

+
+ + +
Joined org
+ {joinedOrg} + + +
Enrollments
+ {enrollments} + +
+
+
+
+ // + // + // + + + + // + //

+ // {name} + // {/* */} + //

+ //
+ //

+ // {/* */} + // {email} + //

+ // + // + //
+ // + // + // {/* */} + // {joinedOrg} + // + // + //
+ // {/* */} + // {enrollments} + //
+ // + //
+ //
+ // + //
+ //
+ //
+ ); +}; + +export default OrgMemberCard; \ No newline at end of file diff --git a/src/components/PeopleManagement/PeopleManagementTable.jsx b/src/components/PeopleManagement/PeopleManagementTable.jsx new file mode 100644 index 000000000..0217e8083 --- /dev/null +++ b/src/components/PeopleManagement/PeopleManagementTable.jsx @@ -0,0 +1,79 @@ +import { CardView, Container, DataTable, TextFilter } from "@openedx/paragon"; +import { useIntl } from "@edx/frontend-platform/i18n"; + +import OrgMemberCard from "./OrgMemberCard"; + +const PeopleManagementTable = () => { + const pageSize = 10; + const intl = useIntl(); + // const tableColumns = [ + // { + // Header: "Name", + // accessor: "name", + // }, + // { + // Header: "Email", + // accessor: "email", + // }, + // { + // Header: "Joined org", + // accessor: "joinedOrg", + // }, + // { + // Header: "Enrollments", + // accessor: "enrollments", + // }, + // ]; + + return ( + + + + {/* */} + {/* */} + + + ); +}; + +export default PeopleManagementTable; diff --git a/src/components/PeopleManagement/_PeopleManagement.scss b/src/components/PeopleManagement/_PeopleManagement.scss index f5a8caa1a..788da061c 100644 --- a/src/components/PeopleManagement/_PeopleManagement.scss +++ b/src/components/PeopleManagement/_PeopleManagement.scss @@ -10,4 +10,12 @@ .collapsible-basic .collapsible-trigger { justify-content: right; +} + +// .org-member-card { +// width: 100%; +// } + +.pgn__card-grid__card-item { + width: 100%; } \ No newline at end of file diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx index 27e8c8858..6e32ba55d 100644 --- a/src/components/PeopleManagement/index.jsx +++ b/src/components/PeopleManagement/index.jsx @@ -13,6 +13,7 @@ import CreateGroupModal from './CreateGroupModal'; import { useAllEnterpriseGroups } from '../learner-credit-management/data'; import ZeroState from './ZeroState'; import GroupCardGrid from './GroupCardGrid'; +import PeopleManagementTable from './PeopleManagementTable'; const PeopleManagementPage = ({ enterpriseId }) => { const intl = useIntl(); @@ -39,6 +40,7 @@ const PeopleManagementPage = ({ enterpriseId }) => { } }, [data]); + return ( <> @@ -78,16 +80,37 @@ const PeopleManagementPage = ({ enterpriseId }) => { description="CTA button text to open new group modal." /> - + {groups && groups.length > 0 ? ( - ) : } + + ) : ( + + )} +

+ +

+ + ); }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ enterpriseId: state.portalConfiguration.enterpriseId, }); diff --git a/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx b/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx index 7e4125230..0f6f48809 100644 --- a/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx +++ b/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx @@ -8,7 +8,7 @@ import { Provider } from 'react-redux'; import { IntlProvider } from '@edx/frontend-platform/i18n'; import { useEnterpriseGroupUuid } from '../../learner-credit-management/data'; -import GroupDetailPage from '../GroupDetailPage'; +import GroupDetailPage from '../GroupDetailPage/GroupDetailPage'; import LmsApiService from '../../../data/services/LmsApiService'; const TEST_ENTERPRISE_SLUG = 'test-enterprise'; diff --git a/src/components/learner-credit-management/invite-modal/InviteModalContent.jsx b/src/components/learner-credit-management/invite-modal/InviteModalContent.jsx index 82759159a..a8ab62bc4 100644 --- a/src/components/learner-credit-management/invite-modal/InviteModalContent.jsx +++ b/src/components/learner-credit-management/invite-modal/InviteModalContent.jsx @@ -16,7 +16,7 @@ import InviteModalMembershipInfo from './InviteModalMembershipInfo'; import InviteModalBudgetCard from './InviteModalBudgetCard'; import InviteModalPermissions from './InviteModalPermissions'; import InviteSummaryCount from './InviteSummaryCount'; -import MAX_LENGTH_GROUP_NAME from '../../PeopleManagement/constants'; +import { MAX_LENGTH_GROUP_NAME } from '../../PeopleManagement/constants'; const InviteModalContent = ({ onEmailAddressesChange,