DESENG-512 Add results tab to engagements (#2419)

Co-authored-by: Alex <[email protected]>
bcgov · Mar 15, 2024 · 3058891 · 3058891
1 parent 437b133
commit 3058891
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 1 deletion.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 ## March 15, 2024
 
 - **Task**: Multi-language - Create event, subcribe_item, poll, timeline widget translation tables & API routes [DESENG-515](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-515)
@@ -6,6 +7,8 @@
   - Added Subscribe Item translation API.
   - Added Event item translation API
   - Added Unit tests.
+- **Task** Add "Results" page to engagements [DESENG-512](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-512)
+
 
 ## March 08, 2024
 

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx
@@ -6,6 +6,7 @@ import { MetTab, MetTabList, MetTabPanel } from '../StyledTabComponents';
 import { EngagementFormTabValues, ENGAGEMENT_FORM_TABS } from './constants';
 import EngagementUserManagement from './UserManagement/EngagementUserManagement';
 import EngagementSettingsForm from './Settings/EngagementSettingsForm';
+import EngagementResults from './Results/EngagementResults';
 import { ActionContext } from '../ActionContext';
 import { MetTooltip } from 'components/common';
 import AdditionalTabContent from './AdditionalDetails/AdditionalTabContent';
@@ -50,6 +51,7 @@ const FormTabs = () => {
                         {generateTab('Additional Details', ENGAGEMENT_FORM_TABS.ADDITIONAL)}
                         {generateTab('User Management', ENGAGEMENT_FORM_TABS.USER_MANAGEMENT)}
                         {generateTab('Settings', ENGAGEMENT_FORM_TABS.SETTINGS)}
+                        {generateTab('Results', ENGAGEMENT_FORM_TABS.RESULTS)}
                     </MetTabList>
                 </Box>
                 <MetTabPanel value={ENGAGEMENT_FORM_TABS.CONTENT}>
@@ -64,6 +66,9 @@ const FormTabs = () => {
                 <MetTabPanel value={ENGAGEMENT_FORM_TABS.SETTINGS}>
                     <EngagementSettingsForm />
                 </MetTabPanel>
+                <MetTabPanel value={ENGAGEMENT_FORM_TABS.RESULTS}>
+                    <EngagementResults />
+                </MetTabPanel>
             </TabContext>
         </Box>
     );

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx
@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import { Grid, Box } from '@mui/material';
+import { MetPaper, PrimaryButton, SecondaryButton } from 'components/common';
+import { EngagementTabsContext } from '../EngagementTabsContext';
+import { ActionContext } from '../../ActionContext';
+
+const EngagementResults = () => {
+    const { isSaving } = useContext(ActionContext);
+    const { handleSaveAndContinueEngagement, handleSaveAndExitEngagement, handlePreviewEngagement } =
+        useContext(EngagementTabsContext);
+
+    return (
+        <MetPaper elevation={1}>
+            <Grid
+                container
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="flex-start"
+                spacing={2}
+                sx={{ padding: '2em' }}
+            >
+                <Box
+                    position="sticky"
+                    bottom={0}
+                    width="100%"
+                    marginLeft={2}
+                    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={() => handleSaveAndContinueEngagement()}
+                            loading={isSaving}
+                        >
+                            Save and Continue
+                        </PrimaryButton>
+                        <PrimaryButton
+                            sx={{ marginRight: 1 }}
+                            data-testid="save-and-exit-engagement-button"
+                            onClick={() => handleSaveAndExitEngagement()}
+                            loading={isSaving}
+                        >
+                            Save and Exit
+                        </PrimaryButton>
+                        <SecondaryButton
+                            data-testid="preview-engagement-button"
+                            onClick={() => handlePreviewEngagement()}
+                            disabled={isSaving}
+                        >
+                            {'Preview'}
+                        </SecondaryButton>
+                    </Grid>
+                </Box>
+            </Grid>
+        </MetPaper>
+    );
+};
+
+export default EngagementResults;
diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts b/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts
@@ -1,10 +1,11 @@
-export type EngagementFormTabValues = 'content' | 'settings' | 'User Management' | 'additional';
+export type EngagementFormTabValues = 'content' | 'settings' | 'User Management' | 'additional' | 'results';
 
 export const ENGAGEMENT_FORM_TABS: { [x: string]: EngagementFormTabValues } = {
     CONTENT: 'content',
     ADDITIONAL: 'additional',
     USER_MANAGEMENT: 'User Management',
     SETTINGS: 'settings',
+    RESULTS: 'results',
 };
 
 export const ENGAGEMENT_UPLOADER_HEIGHT = '360px';