Skip to content

Commit bedd3d7

Browse files
committed
2024-11-22 - allow edit of ext-recip
1 parent 3a00867 commit bedd3d7

File tree

3 files changed

+38
-68
lines changed

3 files changed

+38
-68
lines changed

web-ui/src/components/feedback_external_recipient_card/EditRecipientModal.jsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { Box, Typography, TextField, Button, Modal, Select, MenuItem } from '@mui/material';
33
import PropTypes from 'prop-types';
44

@@ -13,6 +13,22 @@ const modalStyle = {
1313
};
1414

1515
const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
16+
const [error, setError] = useState('');
17+
18+
const handleSubmit = () => {
19+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
20+
if (!profile.firstName || !profile.lastName || !profile.email || !profile.companyName) {
21+
setError('All fields must be filled');
22+
return;
23+
}
24+
if (!emailRegex.test(profile.email)) {
25+
setError('Invalid email address');
26+
return;
27+
}
28+
setError('');
29+
onSubmit();
30+
};
31+
1632
return (
1733
<Modal open={open} onClose={onClose}>
1834
<Box sx={{ ...modalStyle, width: 400 }}>
@@ -26,6 +42,8 @@ const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
2642
onChange={onChange}
2743
fullWidth
2844
margin="normal"
45+
error={!!error && !profile.firstName}
46+
helperText={!!error && !profile.firstName ? 'First Name is required' : ''}
2947
/>
3048
<TextField
3149
label="Last Name"
@@ -34,6 +52,8 @@ const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
3452
onChange={onChange}
3553
fullWidth
3654
margin="normal"
55+
error={!!error && !profile.lastName}
56+
helperText={!!error && !profile.lastName ? 'Last Name is required' : ''}
3757
/>
3858
<TextField
3959
label="Email"
@@ -42,6 +62,8 @@ const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
4262
onChange={onChange}
4363
fullWidth
4464
margin="normal"
65+
error={!!error && (!profile.email || error === 'Invalid email address')}
66+
helperText={!!error && (!profile.email ? 'Email is required' : error === 'Invalid email address' ? 'Invalid email address' : '')}
4567
/>
4668
<TextField
4769
label="Company Name"
@@ -50,6 +72,8 @@ const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
5072
onChange={onChange}
5173
fullWidth
5274
margin="normal"
75+
error={!!error && !profile.companyName}
76+
helperText={!!error && !profile.companyName ? 'Company Name is required' : ''}
5377
/>
5478
<Select
5579
label="Status"
@@ -63,7 +87,7 @@ const EditRecipientModal = ({ open, onClose, profile, onChange, onSubmit }) => {
6387
<MenuItem value="Inactive">Inactive</MenuItem>
6488
</Select>
6589
<Box mt={2} />
66-
<Button onClick={onSubmit} variant="contained" color="primary">
90+
<Button onClick={handleSubmit} variant="contained" color="primary">
6791
Save
6892
</Button>
6993
</Box>

web-ui/src/components/feedback_external_recipient_card/FeedbackExternalRecipientCard.jsx

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,9 @@ const StyledBox = styled(Box)({
5656
});
5757

5858
const FeedbackExternalRecipientCard = ({
59-
recipientProfile, selected, onClick, onInactivateHandle, onEditHandle
59+
recipientProfile, selected, onClick, onEditHandle
6060
}) => {
6161
const { state } = useContext(AppContext);
62-
const csrf = selectCsrfToken(state);
63-
const supervisorProfile = selectProfileMap(state)[recipientProfile?.supervisorid];
64-
const pdlProfile = selectProfileMap(state)[recipientProfile?.pdlId];
65-
6662
const [editModalOpen, setEditModalOpen] = useState(false);
6763
const [editedProfile, setEditedProfile] = useState(recipientProfile);
6864

@@ -81,15 +77,10 @@ const FeedbackExternalRecipientCard = ({
8177
};
8278

8379
const handleEditSubmit = async () => {
84-
console.log("FeedbackExternalRecipientCard, handleEditSubmit, editedProfile: ", editedProfile);
8580
onEditHandle(editedProfile);
8681
setEditModalOpen(false);
8782
};
8883

89-
async function handleInactivate() {
90-
onInactivateHandle();
91-
}
92-
9384
return (
9485
<StyledBox display="flex" flexWrap="wrap">
9586
<Card onClick={onClick} className="member-card" selected={selected}>
@@ -106,18 +97,7 @@ const FeedbackExternalRecipientCard = ({
10697
<CheckCircleIcon style={{ color: green[500] }}>
10798
checkmark-image
10899
</CheckCircleIcon>
109-
) : (
110-
<Tooltip title="Inactivate" arrow>
111-
<IconButton
112-
onClick={(e) => {
113-
e.stopPropagation();
114-
handleInactivate();
115-
}}
116-
>
117-
<CloseIcon />
118-
</IconButton>
119-
</Tooltip>
120-
)}
100+
) : null}
121101
</>
122102
}
123103
disableTypography
@@ -137,12 +117,13 @@ const FeedbackExternalRecipientCard = ({
137117
<br/>
138118
Status: { recipientProfile?.inactive ? 'Inactive' : 'Active' }
139119
</Typography>
140-
<Button onClick={(e) => {
141-
e.stopPropagation();
142-
handleEditOpen();
143-
}}
144-
>Edit
145-
</Button>
120+
{ selected ? null : (
121+
<Button onClick={(e) => {
122+
e.stopPropagation();
123+
handleEditOpen();
124+
}}
125+
>Edit</Button>
126+
)}
146127
</Container>
147128
</CardContent>
148129
</Card>
@@ -162,7 +143,6 @@ FeedbackExternalRecipientCard.propTypes = {
162143
recipientProfile: PropTypes.object.isRequired,
163144
selected: PropTypes.bool,
164145
onClick: PropTypes.func.isRequired,
165-
onInactivateHandle: PropTypes.func.isRequired,
166146
onEditHandle: PropTypes.func.isRequired,
167147
};
168148

web-ui/src/components/feedback_external_recipient_selector/FeedbackExternalRecipientSelector.jsx

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -166,11 +166,11 @@ const FeedbackExternalRecipientSelector = ({ changeQuery, fromQuery, forQuery, a
166166
try {
167167
const response = await putExternalRecipient(externalRecipient, csrf);
168168
if (response && !response.error) {
169-
externalRecipientsCopy[indexArray] = response.data.payload;
169+
externalRecipientsCopy[indexArray] = response.payload.data;
170170
hasRenewedFromURL.current = false;
171171
setExternalRecipients(externalRecipientsCopy);
172172
} else {
173-
const errorMessage = 'Failed to inactivate recipient';
173+
const errorMessage = 'Failed to edit recipient';
174174
dispatch({
175175
type: UPDATE_TOAST,
176176
payload: {
@@ -180,39 +180,7 @@ const FeedbackExternalRecipientSelector = ({ changeQuery, fromQuery, forQuery, a
180180
});
181181
}
182182
} catch (error) {
183-
const errorMessage = ("An error occurred while inactivating the recipient: ", error);
184-
dispatch({
185-
type: UPDATE_TOAST,
186-
payload: {
187-
severity: 'error',
188-
toast: errorMessage
189-
}
190-
});
191-
}
192-
}
193-
194-
async function externalRecipientInactivate(id) {
195-
let externalRecipientsCopy = [...externalRecipients];
196-
let indexArray = externalRecipientsCopy.findIndex(profile => profile.id === id);
197-
198-
try {
199-
const response = await putExternalRecipientInactivate(id, csrf);
200-
if (response && !response.error) {
201-
externalRecipientsCopy[indexArray].inactive = true;
202-
hasRenewedFromURL.current = false;
203-
setExternalRecipients(externalRecipientsCopy);
204-
} else {
205-
const errorMessage = 'Failed to inactivate recipient';
206-
dispatch({
207-
type: UPDATE_TOAST,
208-
payload: {
209-
severity: 'error',
210-
toast: errorMessage
211-
}
212-
});
213-
}
214-
} catch (error) {
215-
const errorMessage = ("An error occurred while inactivating the recipient: ", error);
183+
const errorMessage = ("An error occurred while editing the recipient: ", error);
216184
dispatch({
217185
type: UPDATE_TOAST,
218186
payload: {
@@ -367,7 +335,6 @@ const FeedbackExternalRecipientSelector = ({ changeQuery, fromQuery, forQuery, a
367335
key={profile.id}
368336
recipientProfile={profile}
369337
onClick={() => cardClickHandler(profile.id)}
370-
onInactivateHandle={() => externalRecipientInactivate(profile.id)}
371338
onEditHandle={externalRecipientEdit}
372339
/>
373340
))}
@@ -383,7 +350,6 @@ const FeedbackExternalRecipientSelector = ({ changeQuery, fromQuery, forQuery, a
383350
/>
384351
</StyledGrid>
385352
);
386-
//recipientProfile={selectProfile(state, profile.id)}
387353
};
388354

389355
FeedbackExternalRecipientSelector.propTypes = propTypes;

0 commit comments

Comments
 (0)