Skip to content

Commit

Permalink
Implemented floating save/preview buttons for engagement editing (#2388)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VineetBala-AOT
VineetBala-AOT authored Feb 19, 2024
1 parent ca06c76 commit 75687cd
Show file tree
Hide file tree
Showing 8 changed files with 233 additions and 143 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## February 16, 2024
- **Task**Make a floating save/preview bar when editing engagements [DESENG-498](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-498)
- Implemented a floating behavior for the save/preview buttons during engagement editing. This feature persists across all tabs but exclusively saves data for the Engagement Content tab.

## February 15, 2024
- **Task**Restore role assignment functionality to MET with the CSS API [DESENG-473](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-473)
- Utilize the CSS API for efficient management of composite roles. This involves the assignment, reassignment, or removal of users from the composite roles of TEAM_MEMBER, REVIEWER, IT_ADMIN, or IT_VIEWER.
Expand Down
39 changes: 36 additions & 3 deletions .../components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import React, { useContext } from 'react';
import { Divider, Grid } from '@mui/material';
import { MetPaper, PrimaryButton } from 'components/common';
import { Divider, Grid, Box } from '@mui/material';
import { MetPaper, PrimaryButton, SecondaryButton } from 'components/common';
import ConsentMessage from './ConsentMessage';
import EngagementInformation from './EngagementInformation';

import { EngagementTabsContext } from '../EngagementTabsContext';
import { ActionContext } from '../../ActionContext';
import { AdditionalDetailsContext } from './AdditionalDetailsContext';

const AdditionalTabContent = () => {
const { handleSaveAdditional, updatingAdditional } = useContext(AdditionalDetailsContext);
const { isSaving } = useContext(ActionContext);
const { handleSaveEngagement, handlePreviewEngagement } = useContext(EngagementTabsContext);

return (
<MetPaper elevation={1}>
Expand All @@ -33,6 +36,36 @@ const AdditionalTabContent = () => {
Save
</PrimaryButton>
</Grid>
<Box
position="sticky"
bottom={0}
width="100%"
borderTop="1px solid #ddd"
padding={2}
marginTop={2}
marginLeft={2}
zIndex={1000}
boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
sx={{ backgroundColor: 'white' }}
>
<Grid item xs={12}>
<PrimaryButton
sx={{ marginRight: 1 }}
data-testid="create-engagement-button"
onClick={() => handleSaveEngagement()}
loading={isSaving}
>
Save
</PrimaryButton>
<SecondaryButton
data-testid="preview-engagement-button"
onClick={() => handlePreviewEngagement()}
disabled={isSaving}
>
{'Preview'}
</SecondaryButton>
</Grid>
</Box>
</Grid>
</MetPaper>
);
Expand Down
166 changes: 37 additions & 129 deletions met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,30 @@ import { Typography, Grid, TextField, Stack, Box } from '@mui/material';
import { MetPaper, MetLabel, PrimaryButton, SecondaryButton, MetDescription } from '../../../common';
import { ActionContext } from '../ActionContext';
import ImageUpload from 'components/imageUpload';
import { useNavigate } from 'react-router-dom';
import { SurveyBlock } from './SurveyBlock';
import { If, Then, Else } from 'react-if';
import { EngagementTabsContext } from './EngagementTabsContext';
import { EngagementStatus, SUBMISSION_STATUS } from 'constants/engagementStatus';
import { EngagementStatus } from 'constants/engagementStatus';
import DayCalculatorModal from '../DayCalculator';
import { ENGAGEMENT_CROPPER_ASPECT_RATIO, ENGAGEMENT_UPLOADER_HEIGHT } from './constants';
import RichTextEditor from 'components/common/RichTextEditor';
import { getTextFromDraftJsContentState } from 'components/common/RichTextEditor/utils';

const CREATE = 'create';
const EngagementForm = () => {
const {
handleCreateEngagementRequest,
handleUpdateEngagementRequest,
isSaving,
savedEngagement,
handleAddBannerImage,
fetchEngagement,
} = useContext(ActionContext);
const { isSaving, savedEngagement, handleAddBannerImage } = useContext(ActionContext);

const {
engagementFormData,
setEngagementFormData,
setIsNewEngagement,
handleSaveEngagement,
handlePreviewEngagement,
richDescription,
setRichDescription,
richContent,
setRichContent,
engagementFormError,
setEngagementFormError,
surveyBlockText,
} = useContext(EngagementTabsContext);

const [initialRichDescription, setInitialRichDescription] = useState('');
Expand All @@ -42,32 +35,16 @@ const EngagementForm = () => {

const [isOpen, setIsOpen] = useState(false);

const navigate = useNavigate();

const isNewEngagement = window.location.pathname.includes(CREATE);

const { name, start_date, end_date, description } = engagementFormData;
const isCreateEngagement = window.location.pathname.includes(CREATE);

const surveyBlockList = [
{
survey_status: SUBMISSION_STATUS.UPCOMING,
block_text: surveyBlockText.Upcoming,
},
{
survey_status: SUBMISSION_STATUS.OPEN,
block_text: surveyBlockText.Open,
},
{
survey_status: SUBMISSION_STATUS.CLOSED,
block_text: surveyBlockText.Closed,
},
];
const { name, start_date, end_date } = engagementFormData;

useEffect(() => {
const initialDescription = getTextFromDraftJsContentState(richDescription || savedEngagement.rich_description);
setInitialRichDescription(richDescription || savedEngagement.rich_description);
setInitialRichContent(richContent || savedEngagement.rich_content);
setDescriptionCharCount(initialDescription.length);
setIsNewEngagement(isCreateEngagement);
}, []);

const getErrorMessage = () => {
Expand Down Expand Up @@ -119,72 +96,6 @@ const EngagementForm = () => {
setRichContent(newState);
};

const validateForm = () => {
const errors = {
name: !(name && name.length < 50),
start_date: !start_date,
end_date: !end_date,
description: description.length > 550,
};
setEngagementFormError(errors);

return Object.values(errors).some((isError: unknown) => isError);
};

const handleCreateEngagement = async () => {
const hasErrors = validateForm();

if (hasErrors) {
return;
}

const engagement = await handleCreateEngagementRequest({
...engagementFormData,
rich_description: richDescription,
rich_content: richContent,
status_block: surveyBlockList,
});

navigate(`/engagements/${engagement.id}/form`);

return engagement;
};

const handleUpdateEngagement = async () => {
const hasErrors = validateForm();

if (hasErrors) {
return;
}

await handleUpdateEngagementRequest({
...engagementFormData,
rich_description: richDescription,
rich_content: richContent,
status_block: surveyBlockList,
});

fetchEngagement();
return savedEngagement;
};

const handleSaveEngagement = () => {
if (isNewEngagement) {
return handleCreateEngagement();
}

return handleUpdateEngagement();
};

const handlePreviewEngagement = async () => {
const engagement = await handleSaveEngagement();
if (!engagement) {
return;
}

navigate(`/engagements/${engagement.id}/view`);
};

const isDateFieldDisabled = [EngagementStatus.Closed, EngagementStatus.Unpublished].includes(
savedEngagement.status_id,
);
Expand Down Expand Up @@ -333,38 +244,35 @@ const EngagementForm = () => {
<SurveyBlock />
</Grid>

<Grid item xs={12}>
<If condition={isNewEngagement}>
<Then>
<PrimaryButton
sx={{ marginRight: 1 }}
data-testid="create-engagement-button"
onClick={() => handleCreateEngagement()}
loading={isSaving}
>
Save
</PrimaryButton>
</Then>
<Else>
<PrimaryButton
data-testid="update-engagement-button"
sx={{ marginRight: 1 }}
onClick={() => handleUpdateEngagement()}
disabled={isSaving}
loading={isSaving}
>
Save
</PrimaryButton>
</Else>
</If>
<SecondaryButton
data-testid="preview-engagement-button"
onClick={() => handlePreviewEngagement()}
disabled={isSaving}
>
{'Preview'}
</SecondaryButton>
</Grid>
<Box
position="sticky"
bottom={0}
width="100%"
borderTop="1px solid #ddd"
padding={2}
marginTop={2}
zIndex={1000}
boxShadow="0px 0px 5px rgba(0, 0, 0, 0.1)"
sx={{ backgroundColor: 'white' }}
>
<Grid item xs={12}>
<PrimaryButton
sx={{ marginRight: 1 }}
data-testid="save-engagement-button"
onClick={() => handleSaveEngagement()}
loading={isSaving}
>
Save
</PrimaryButton>
<SecondaryButton
data-testid="preview-engagement-button"
onClick={() => handlePreviewEngagement()}
disabled={isSaving}
>
{'Preview'}
</SecondaryButton>
</Grid>
</Box>
</Grid>
</MetPaper>
);
Expand Down
Loading

0 comments on commit 75687cd

Please sign in to comment.