Skip to content

GitLab

Commit e9214afa authored by Zhou Fang's avatar Zhou Fang Committed by Martin Lowe
Browse files

Added roles description for editing roles modal window

parent 324535ce
Hide whitespace changes
Inline Side-by-side
src/main/www/public/membership_data/test_contacts.json
View file @ e9214afa
[
{
"organization_id": "656",
"person_id": "jonsnow-1",
"relation": "CR",
"comments": "string",
"title": "string",
"email": "js@demo.com-1"
"id": "0651a41a",
"first_name": "e28acea9",
"last_name": "6cdbd568",
"email": "e8dff5d9@7def8172.com",
"relations": ["EMPLY", "CM", "CR"]
},
{
"organization_id": "656",
"person_id": "jonsnow-1",
"relation": "CM",
"comments": "string",
"title": "string",
"email": "js@demo.com-1"
"id": "37de8016",
"first_name": "530cff3a",
"last_name": "f9709069",
"email": "8f1c3b1f@eb63e35a.com",
"relations": ["DE", "MA", "EMPLY", "CM"]
},
{
"organization_id": "656",
"person_id": "jonsnow-2",
"relation": "CM",
"comments": "string",
"title": "string",
"email": "js@demo.com-2"
"id": "539bb0b6",
"first_name": "3cbded82",
"last_name": "a290056c",
"email": "5c422ed9@24fcd22e.com",
"relations": ["CRA", "EMPLY"]
},
{
"organization_id": "656",
"person_id": "jonsnow-2",
"relation": "CRA",
"comments": "string",
"title": "string",
"email": "js@demo.com-2"
"id": "751e5cad",
"first_name": "a72dda72",
"last_name": "749e31ec",
"email": "a331988f@e10731a6.com",
"relations": ["DE", "CRA", "EMPLY"]
},
{
"organization_id": "656",
"person_id": "jonsnow-3",
"relation": "MA",
"comments": "string",
"title": "string",
"email": "js@demo.com-3"
"id": "d439db6a",
"first_name": "e3d4c333",
"last_name": "4497cf2f",
"email": "21e22bc4@5455b4d1.com",
"relations": ["CRA", "EMPLY"]
},
{
"organization_id": "656",
"person_id": "jonsnow-4",
"relation": "DE",
"comments": "string",
"title": "string",
"email": "js@demo.com-4"
"id": "f00243aa",
"first_name": "0a34da21",
"last_name": "27025198",
"email": "5f24bb30@d54fb362.com",
"relations": ["CRA", "EMPLY"]
},
{
"organization_id": "656",
"person_id": "jonsnow-5",
"relation": "CM",
"comments": "string",
"title": "string",
"email": "js@demo.com-5"
"id": "f4e0bd6c",
"first_name": "d44aed10",
"last_name": "e4397b48",
"email": "ce241b87@656abf9c.com",
"relations": ["EMPLY"]
},
{
"organization_id": "656",
"person_id": "jonsnow-6",
"relation": "CM",
"comments": "string",
"title": "string",
"email": "js@demo.com-6"
"id": "f81d34d4",
"first_name": "d5a2d0fc",
"last_name": "fb8fc771",
"email": "873c6fef@ec516ea0.com",
"relations": ["DE", "EMPLY"]
},
{
"id": "zhoufang",
"first_name": "Zhou",
"last_name": "Fang",
"email": "zhou.fang@eclipse-foundation.org",
"relations": ["EMPLY", "CR"]
}
]
src/main/www/public/membership_data/test_org_rep.json
View file @ e9214afa
[
{
"id": "0651a41a",
"first_name": "e28acea9",
"last_name": "6cdbd568",
"first_name": "John",
"last_name": "Preview",
"email": "e8dff5d9@7def8172.com",
"relations": ["DE", "CR"]
},
{
"id": "2505d29c",
"first_name": "c04ae35d",
"last_name": "3dd1d06e",
"email": "cd819ba7@1d5fa85e.com",
"relations": ["DE", "CRA", "MA"]
},
{
"id": "37de8016",
"first_name": "530cff3a",
"last_name": "f9709069",
"email": "8f1c3b1f@eb63e35a.com",
"relations": ["DE"]
},
{
"id": "539bb0b6",
"first_name": "3cbded82",
"last_name": "a290056c",
"email": "5c422ed9@24fcd22e.com",
"relations": ["DE"]
},
{
"id": "751e5cad",
"first_name": "a72dda72",
"last_name": "749e31ec",
"email": "a331988f@e10731a6.com",
"relations": ["MA"]
"relations": ["CR"]
},
{
"id": "d439db6a",
"first_name": "e3d4c333",
"last_name": "4497cf2f",
"first_name": "Sandy",
"last_name": "Demo",
"email": "21e22bc4@5455b4d1.com",
"relations": ["CRA", "MA"]
},
{
"id": "f00243aa",
"first_name": "0a34da21",
"last_name": "27025198",
"email": "5f24bb30@d54fb362.com",
"relations": ["DE", "CRA", "MA"]
"relations": ["CRA"]
},
{
"id": "f81d34d4",
"first_name": "d5a2d0fc",
"last_name": "fb8fc771",
"first_name": "Bob",
"last_name": "Test",
"email": "873c6fef@ec516ea0.com",
"relations": ["DE", "MA"]
},
{
"id": "zhoufang",
"first_name": "Zhou",
"last_name": "Fang",
"email": "zhou.fang@eclipse-foundation.org",
"relations": ["CR"]
}
]
src/main/www/src/Constants/Constants.js
View file @ e9214afa
......@@ -279,6 +279,13 @@ export const PERMISSIONS_BASED_ON_ROLES = {
export const UPDATE_DENYLISTED_RELATIONS = ['emply', 'cm', 'cr'];
export const ROLE_DESCRIPTION = {
CR: 'The Member Representative is the primary point of contact between your organization and Eclipse Foundation. We may reach out to Member Representatives from time to time with various business related activities, in particular in relation to your benefits as a member of the General Assembly. The Member Representative also has the authority for updating company information stored in the Member Portal.',
CRA: 'Alternate Member Representative shall be a secondary point of contact between your organization and Eclipse Foundation. In the absence of the Member Representative, we may reach out to the Alternate Member Representative for all communications and business related activities. The Alternate Member Representative also has the authority for updating company information stored in the Member Portal.',
DE: 'Member Representatives may delegate some or all of their responsibilities related to this Member Portal to Delegates. That is, Delegates are granted by the Member Representative the authority for updating company information.',
MA: `Marketing Representative shall be the point of contact for all marketing initiatives in relation to the Foundation. Our marketing team may reach out to the Marketing Representative from time to time for all marketing related activities, and will be included in the Foundation's marketing campaigns.`,
};
export const CONFIG_FOR_BAR_LINE_CHART = {
responsive: true,
aspectRatio: 1.8,
......
src/main/www/src/components/Portal/ContactManagement/ContactManagement.tsx
View file @ e9214afa
......@@ -7,6 +7,7 @@ import {
makeStyles,
Theme,
Typography,
Popover,
} from '@material-ui/core';
import { DataGrid, GridColDef, GridRenderCellParams, getGridStringOperators, GridFilterItem } from '@mui/x-data-grid';
import RecentActorsIcon from '@material-ui/icons/RecentActors';
......@@ -20,6 +21,7 @@ import {
iconGray,
PERMISSIONS_BASED_ON_ROLES,
UPDATE_DENYLISTED_RELATIONS,
ROLE_DESCRIPTION,
} from '../../../Constants/Constants';
import { useContext, useEffect, useState } from 'react';
import PortalContext from '../../../Context/PortalContext';
......@@ -31,6 +33,7 @@ import { ContactBackend, OrganizationRoles, OrganizationRolesKeys } from '../../
import { fetchWrapper, fetchWrapperPagination, isProd } from '../../../Utils/formFunctionHelpers';
import GlobalContext from '../../../Context/GlobalContext';
import { checkPermission } from '../../../Utils/portalFunctionHelpers';
import HelpIcon from '@material-ui/icons/Help';
const isReactOnlyMode = getCurrentMode() === MODE_REACT_ONLY;
......@@ -72,6 +75,26 @@ const useStyle = makeStyles((theme: Theme) =>
roleText: {
whiteSpace: 'normal',
},
checkBoxContainer: {
display: 'flex',
alignItems: 'center',
},
helpIconContainer: {
cursor: 'pointer',
},
helpIcon: {
fontSize: 22,
color: iconGray,
},
popoverText: {
padding: theme.spacing(1.5),
maxWidth: 400,
},
customPopover: {
'& .MuiPopover-paper': {
boxShadow: '1px 1px 15px rgba(0,0,0,0.15)',
},
},
editIconCtn: {
display: 'flex',
alignItems: 'center',
......@@ -105,7 +128,7 @@ const INITIAL_CHECKED_ROLES: Array<{
}));
const ALL_ROLES = INITIAL_CHECKED_ROLES.filter((item) => item.relation !== 'EMPLY' && item.relation !== 'CM').map(
(item) => item.role
(item) => ({ relation: item.relation, role: item.role })
);
interface ContactFrontend {
id: string;
......@@ -127,6 +150,12 @@ interface AllRelationsFrontend {
[key: string]: string;
}
interface RoleDescription {
[key: string]: string;
}
const roleDescriptionObj: RoleDescription = ROLE_DESCRIPTION;
const defaultOperators = getGridStringOperators();
// Add exclude operator for listing contributors (which need to filter out committers)
......@@ -249,6 +278,9 @@ export default function ContactManagement() {
});
const [checkedRoles, setCheckedRoles] = useState(INITIAL_CHECKED_ROLES);
const [allRelations, setAllRelations] = useState<AllRelationsFrontend | null>(null);
const [roleDescription, setRoleDescription] = useState('');
const [anchorEle, setAnchorEle] = useState<HTMLElement | null>(null);
const openPopover = Boolean(anchorEle);
const handleRequestRemoval = () => {
setOpenRequestRemoval(false);
......@@ -357,33 +389,42 @@ export default function ContactManagement() {
}
};
const showDescriptionForRoles = (ev: any, relation: string) => {
setAnchorEle(ev.currentTarget);
setRoleDescription(roleDescriptionObj[relation]);
};
const renderAvailableRoles = () => {
return ALL_ROLES.map((role, index) => (
<FormControlLabel
key={index}
control={
<Checkbox
name={role}
color="primary"
checked={checkedRoles.find((item) => item.role === role)?.checked}
disabled={shouldDisableEdit(role)}
onChange={(ev) => {
const shouldCheckedRoles = checkedRoles.map((item) =>
// Only update the one that user clicks on. For others, just use what they are
item.role === ev.target.name
? {
role: item.role,
relation: item.relation,
checked: ev.target.checked,
}
: item
);
setCheckedRoles(shouldCheckedRoles);
}}
/>
}
label={role}
/>
<div key={index} className={classes.checkBoxContainer}>
<FormControlLabel
control={
<Checkbox
name={role.role}
color="primary"
checked={checkedRoles.find((item) => item.role === role.role)?.checked}
disabled={shouldDisableEdit(role.role)}
onChange={(ev) => {
const shouldCheckedRoles = checkedRoles.map((item) =>
// Only update the one that user clicks on. For others, just use what they are
item.role === ev.target.name
? {
role: item.role,
relation: item.relation,
checked: ev.target.checked,
}
: item
);
setCheckedRoles(shouldCheckedRoles);
}}
/>
}
label={role.role}
/>
<div className={classes.helpIconContainer} onClick={(ev) => showDescriptionForRoles(ev, role.relation)}>
<HelpIcon className={classes.helpIcon} />
</div>
</div>
));
};
......@@ -404,12 +445,11 @@ export default function ContactManagement() {
return;
}
const urlForContacts =
getCurrentMode() === MODE_REACT_ONLY
? '/membership_data/test_contacts.json'
: api_prefix() + `/organizations/${orgId}/contacts?page=`;
const isReactOnlyMode = getCurrentMode() === MODE_REACT_ONLY;
fetchWrapperPagination(urlForContacts, 1, setContactData);
isReactOnlyMode
? fetchWrapper('/membership_data/test_contacts.json', FETCH_METHOD.GET, setContactData)
: fetchWrapperPagination(api_prefix() + `/organizations/${orgId}/contacts?page=`, 1, setContactData);
}, [orgId, contactData, setContactData]);
useEffect(() => {
......@@ -507,6 +547,27 @@ export default function ContactManagement() {
cancelText={'Cancel'}
yesText={'Submit'}
/>
<Popover
id={openPopover ? 'simple-popover' : undefined}
className={classes.customPopover}
elevation={4}
open={openPopover}
anchorEl={anchorEle}
onClose={() => setAnchorEle(null)}
anchorOrigin={{
vertical: -20,
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: -10,
}}
>
<Typography variant="body1" className={classes.popoverText}>
{roleDescription}
</Typography>
</Popover>
</>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent