Unverified Commit 5c513829 authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Added checkbox asking for joining wg to make it an optional field (#222)

* added checkbox asking for joining wg to make it an optional field

* updated front end to work with new wg data

* Added DELETE request when user uncheck joining wg

* Added header in DELETE fetch to include CSRF

* Added error handler for DELETE request

* fixed react only mode issue

* updated react only wg data

* updated review page for not joining any wg

* Added a modal window to confirm uncheck joining a wg
parent 4f87c47a
......@@ -122,40 +122,21 @@ export function getCurrentMode() {
export const FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY = [
{
label: 'AsciiDoc',
value: 'AsciiDoc',
label: 'openMobility Working Group',
value: 'openMobility Working Group',
participation_levels: [
{
company_size: 10,
document_id: '2',
level: 'Partner members',
},
{
document_id: '2',
level: 'Committer members',
},
{
document_id: '2',
level: 'Guest members',
},
{ description: 'Participant Member', relation: 'WGAPS' },
{ description: 'Committer Member', relation: 'WGFHA' },
],
},
{
label: 'Internet of Things - IoT',
value: 'Internet of Things - IoT',
label: 'Jakarta EE Working Group',
value: 'Jakarta EE Working Group',
participation_levels: [
{
document_id: '1',
level: 'Strategic Member',
},
{
document_id: '1',
level: 'Participant Member',
},
{
document_id: '1',
level: 'Guest Member',
},
{ description: 'Strategic Member', relation: 'WGSD' },
{ description: 'Enterprise Member', relation: 'WGDSA' },
{ description: 'Participant Member', relation: 'WGAPS' },
{ description: 'Guest Member', relation: 'WGSAP' },
],
},
];
......
......@@ -604,7 +604,7 @@ export function deleteData(formId, endpoint, entityId, callback, index) {
}
// If the not using java server, just remove it from frontend
if (getCurrentMode() === MODE_REACT_ONLY) {
if (getCurrentMode() === MODE_REACT_ONLY && index) {
callback(index);
}
......@@ -619,14 +619,22 @@ export function deleteData(formId, endpoint, entityId, callback, index) {
}
fetch(url, {
method: FETCH_METHOD.DELETE,
}).then((res) => {
console.log(res.status);
// Remove from frontend
if (res.status === 200) {
callback(index);
return Promise.resolve(res);
}
});
headers: FETCH_HEADER,
})
.then((res) => {
if (res.ok) {
// Remove from frontend
callback(index);
return Promise.resolve(res);
}
requestErrorHandler(res.status);
throw res.status;
})
.catch((err) => {
console.log(err);
requestErrorHandler(err);
});
}
}
/**
......
......@@ -196,59 +196,66 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
</div>
<h2 className="fw-600 h3">Working Group(s) to Join</h2>
{values.workingGroups.map((el, index) => (
<React.Fragment key={index}>
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Working group</label>
<div className="preview-field">
{el['workingGroup']['label']}
</div>
</div>
<div className="col-md-8">
<label>Intended Participation Level</label>
<div className="preview-field">{el.participationLevel}</div>
</div>
<div className="col-md-8">
<label>Effective Date</label>
<div className="preview-field">
{new Date(el.effectiveDate).toLocaleDateString()}
</div>
</div>
{
// Check if the user joins at least 1 WG, if so, display all. If not, display 'Not joining'
values.workingGroups[0].workingGroup.label ? (
values.workingGroups.map((el, index) => (
<React.Fragment key={index}>
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Working group</label>
<div className="preview-field">
{el['workingGroup']['label']}
</div>
</div>
<div className="col-md-8">
<label>Intended Participation Level</label>
<div className="preview-field">{el.participationLevel}</div>
</div>
<div className="col-md-8">
<label>Effective Date</label>
<div className="preview-field">
{new Date(el.effectiveDate).toLocaleDateString()}
</div>
</div>
<div className="col-md-24">
<p className="h4 fw-600 margin-top-25">
The working Group Representative
</p>
</div>
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.firstName}
</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.lastName}
<div className="col-md-24">
<p className="h4 fw-600 margin-top-25">
The working Group Representative
</p>
</div>
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.firstName}
</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.lastName}
</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{el.workingGroupRepresentative.jobtitle}
</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{el.workingGroupRepresentative.email}
</div>
</div>
</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{el.workingGroupRepresentative.jobtitle}
</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{el.workingGroupRepresentative.email}
</div>
</div>
</div>
<hr />
</React.Fragment>
))}
<hr />
</React.Fragment>
))
) : (
<p>Not joining</p>
)
}
<h2 className="fw-600 h3">Signing Authority</h2>
<div className="row margin-bottom-30">
......
......@@ -10,43 +10,27 @@ import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu';
* - workingGroup: selected working group
*/
const ParticipationLevel = ({
name,
workingGroupUserJoined,
fullWorkingGroupList,
formik,
index,
}) => {
const [participationLevelOptions, setParticipationLevelOptions] = useState(
[]
);
const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList, formik, index }) => {
const [participationLevelOptions, setParticipationLevelOptions] = useState([]);
const theIndex = index;
useEffect(() => {
// If have selected working group, find this working group's
// participation levels, and pass to the react-select option
if (fullWorkingGroupList) {
let temp = fullWorkingGroupList?.find(
(item) => workingGroupUserJoined.value === item.value
);
let temp = fullWorkingGroupList?.find((item) => workingGroupUserJoined.value === item.value);
// extract all the participation_levels
let optionsForParticipationLevels = temp?.participation_levels
? temp?.participation_levels.map(
(item) => item.description || item.level
)
? temp?.participation_levels.map((item) => item.description || item.level)
: [];
// the Set will deduplicate participation_levels options
optionsForParticipationLevels = [
...new Set(optionsForParticipationLevels),
];
optionsForParticipationLevels = [...new Set(optionsForParticipationLevels)];
optionsForParticipationLevels = optionsForParticipationLevels.map(
(item) => {
return { value: item, label: item };
}
);
optionsForParticipationLevels = optionsForParticipationLevels.map((item) => {
return { value: item, label: item };
});
setParticipationLevelOptions(optionsForParticipationLevels);
}
}, [workingGroupUserJoined, fullWorkingGroupList]);
......@@ -63,9 +47,7 @@ const ParticipationLevel = ({
<DropdownMenu
inputLabel="Select a level"
inputName={name}
inputValue={
formik.values.workingGroups[theIndex]['participationLevel']
}
inputValue={formik.values.workingGroups[theIndex]['participationLevel']}
optionsArray={participationLevelOptions}
handleChange={formik.handleChange}
/>
......
......@@ -2,6 +2,7 @@ import { useState, useContext, useEffect } from 'react';
import MembershipContext from '../../../Context/MembershipContext';
import WorkingGroup from './WorkingGroup';
import {
deleteData,
matchWorkingGroupFields,
requestErrorHandler,
scrollToTop,
......@@ -19,6 +20,17 @@ import {
} from '../../../Constants/Constants';
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import { FormikProvider } from 'formik';
import {
Button,
Checkbox,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControlLabel,
} from '@material-ui/core';
import { initialValues } from '../../UIComponents/FormComponents/formFieldModel';
/**
* Wrapper for FieldArray of WorkingGroup component,
......@@ -44,6 +56,37 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
const [isLoading, setIsLoading] = useState(true);
const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
const [fullWorkingGroupList, setFullWorkingGroupList] = useState([]);
const [shouldOpen, setShouldOpen] = useState(false);
const handleIsJoiningWG = () => {
const isJoiningWG = formik.values.isJoiningWG;
if (isJoiningWG) {
setShouldOpen(true);
} else {
formik.setFieldValue('isJoiningWG', !isJoiningWG);
formik.setFieldValue('workingGroups', initialValues.workingGroups);
}
};
const closeModal = () => {
setShouldOpen(false);
};
const handleClearData = () => {
// if user uncheck it, then we need to reset WG form
formik.values.workingGroups.map((item) => {
deleteData(
currentFormId,
END_POINT.working_groups,
item.id,
formik.resetForm,
''
);
return null;
});
closeModal();
};
useEffect(() => {
scrollToTop();
......@@ -135,6 +178,7 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
fullWorkingGroupList
);
setWorkingGroupsUserJoined(theGroupsUserJoined);
setFieldValue('isJoiningWG', true);
setFieldValue('workingGroups', theGroupsUserJoined);
hasWGData = true;
}
......@@ -165,19 +209,57 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
id="working-groups-page"
className="align-center margin-top-50 margin-bottom-30"
>
<Dialog
open={shouldOpen}
onClose={closeModal}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{'Uncheck Joining a Working Group'}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
This will clear all saved data in this step. Proceed to
uncheck?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={closeModal}>Cancel</Button>
<Button onClick={handleClearData} color="primary" autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
<h1 className="fw-600 h2">Working Group</h1>
<p>
Please complete the following details for joining a Working Group
</p>
<WorkingGroup
formik={formik}
workingGroupsUserJoined={workingGroupsUserJoined}
fullWorkingGroupList={fullWorkingGroupList}
isLoading={isLoading}
<FormControlLabel
control={
<Checkbox
name="isJoiningWG"
color="primary"
checked={formik.values.isJoiningWG}
onChange={() => handleIsJoiningWG()}
/>
}
label="Joining a Working Group"
/>
</div>
{formik.values.isJoiningWG && (
<>
<p>
Please complete the following details for joining a Working
Group
</p>
<WorkingGroup
formik={formik}
workingGroupsUserJoined={workingGroupsUserJoined}
fullWorkingGroupList={fullWorkingGroupList}
isLoading={isLoading}
/>
</>
)}
</div>
<CustomStepButton
previousPage="/membership-level"
nextPage="/signing-authority"
......
......@@ -93,6 +93,8 @@ export const initialValues = {
},
],
isJoiningWG: false,
signingAuthorityRepresentative: {
firstName: '',
lastName: '',
......
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