Merge branch 'OCD-4700' into development

chpladmin · Mar 4, 2025 · 0969568 · 0969568
2 parents 58425c8 + ac6dede
commit 0969568
Show file tree

Hide file tree

Showing 48 changed files with 368 additions and 124 deletions.
diff --git a/src/app/components/change-request/change-requests.jsx b/src/app/components/change-request/change-requests.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core';
 import { arrayOf, string } from 'prop-types';
 
 import ChplChangeRequestsView from './change-requests-view';
@@ -12,6 +13,12 @@ import {
 } from 'components/filter';
 import { AnalyticsContext, useAnalyticsContext } from 'shared/contexts';
 
+const useStyles = makeStyles({
+  fixFooterSpacing: {
+    minHeight: 'calc(100vh - 283px)',
+  },
+});
+
 const staticFilters = [{
   ...defaultFilter,
   key: 'currentStatusChangeDateTime',
@@ -58,6 +65,7 @@ function ChplChangeRequests(props) {
   const { analytics } = useAnalyticsContext();
   const [filters, setFilters] = useState(staticFilters);
   const crtQuery = useFetchChangeRequestTypes();
+  const classes = useStyles();
 
   useEffect(() => {
     setFilters((f) => f.filter((filter) => !disallowedFilters.includes(filter.key)));
@@ -99,10 +107,12 @@ function ChplChangeRequests(props) {
         filters={filters}
         storageKey="storageKey-changeRequestsComponent"
       >
-        <ChplChangeRequestsView
-          disallowedFilters={disallowedFilters}
-          bonusQuery={bonusQuery}
-        />
+        <div className={classes.fixFooterSpacing}>
+          <ChplChangeRequestsView
+            disallowedFilters={disallowedFilters}
+            bonusQuery={bonusQuery}
+          />
+        </div>
       </FilterProvider>
     </AnalyticsContext.Provider>
   );

diff --git a/src/app/components/listing/confirm/confirm-developer.jsx b/src/app/components/listing/confirm/confirm-developer.jsx
@@ -78,6 +78,9 @@ const useStyles = makeStyles({
     gap: '16px',
     flexDirection: 'column',
   },
+  fixFooterSpacing: {
+    minHeight: 'calc(100vh - 257px)',
+  },
   formSubContainer: {
     display: 'grid',
     gap: '16px',
@@ -232,7 +235,7 @@ function ChplConfirmDeveloper(props) {
   });
 
   return (
-    <Container maxWidth="md">
+    <Container className={classes.fixFooterSpacing} maxWidth="md">
       <div className={classes.developerConfirm}>
         <div className={classes.developerSubContainer}>
           <Button

diff --git a/src/app/components/listing/confirm/confirm-product.jsx b/src/app/components/listing/confirm/confirm-product.jsx
@@ -17,11 +17,11 @@ import { arrayOf, func } from 'prop-types';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 
-import theme from '../../../themes/theme';
-import { product as productProp } from '../../../shared/prop-types';
-import { ChplTextField } from '../../util';
+import theme from 'themes/theme';
+import { product as productProp } from 'shared/prop-types';
+import { ChplTextField } from 'components/util';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles({
   buttonCard: {
     padding: '32px',
     display: 'flex',
@@ -41,6 +41,9 @@ const useStyles = makeStyles(() => ({
     flexDirection: 'column',
     whiteSpace: 'pre-wrap',
   },
+  fixFooterSpacing: {
+    minHeight: 'calc(100vh - 257px)',
+  },
   developerConfirm: {
     display: 'grid',
     gridTemplateColumns: '1fr',
@@ -96,7 +99,7 @@ const useStyles = makeStyles(() => ({
   verticalDivider: {
     height: '25%',
   },
-}));
+});
 
 const validationSchema = yup.object({
   name: yup.string()
@@ -162,7 +165,7 @@ function ChplConfirmProduct(props) {
 
   return (
     <ThemeProvider theme={theme}>
-      <Container maxWidth="md">
+      <Container maxWidth="md" className={classes.fixFooterSpacing}>
         <div className={classes.developerConfirm}>
           <div className={classes.developerSubContainer}>
             <Button

diff --git a/src/app/components/listing/confirm/confirm-version.jsx b/src/app/components/listing/confirm/confirm-version.jsx
@@ -47,6 +47,7 @@ const useStyles = makeStyles(() => ({
     gap: '32px',
     padding: '32px 0',
     alignItems: 'start',
+    paddingBottom: '26vh',
   },
   developerSubContainer: {
     display: 'grid',

diff --git a/src/app/components/surveillance/complaints/complaints.jsx b/src/app/components/surveillance/complaints/complaints.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { arrayOf, bool, string } from 'prop-types';
+import { makeStyles } from '@material-ui/core';
 
 import ChplComplaintsView from './complaints-view';
 
@@ -15,6 +16,12 @@ import {
 } from 'components/filter/filters';
 import { AnalyticsContext, useAnalyticsContext, UserContext } from 'shared/contexts';
 
+const useStyles = makeStyles({
+  fixFooterSpacing: {
+    minHeight: 'calc(100vh - 283px)',
+  },
+});
+
 const staticFilters = [{
   ...defaultFilter,
   key: 'closedDate',
@@ -116,6 +123,7 @@ function ChplComplaints(props) {
   const [disallowedFilters, setDisallowedFilters] = useState([]);
   const [filters, setFilters] = useState(staticFilters);
   const acbQuery = useFetchAcbs();
+  const classes = useStyles();
 
   useEffect(() => {
     if (acbQuery.isLoading || !acbQuery.isSuccess) {
@@ -173,10 +181,12 @@ function ChplComplaints(props) {
         filters={filters}
         storageKey="storageKey-complaintsComponent"
       >
-        <ChplComplaintsView
-          bonusQuery={bonusQuery}
-          canAdd={canAdd}
-        />
+        <div className={classes.fixFooterSpacing}>
+          <ChplComplaintsView
+            bonusQuery={bonusQuery}
+            canAdd={canAdd}
+          />
+        </div>
       </FilterProvider>
     </AnalyticsContext.Provider>
   );

diff --git a/src/app/components/surveillance/manage/reporting-date-selector.jsx b/src/app/components/surveillance/manage/reporting-date-selector.jsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles({
     gridRowGap: '16px',
     gridTemplateColumns: '1fr 1fr',
     backgroundColor: '#ffffff',
-    padding: '8px',
+    padding: '8px 8px 35vh 8px',
   },
   fullWidth: {
     gridColumn: '1 / -1',

diff --git a/src/app/components/system-maintenance/announcement/announcements-display.jsx b/src/app/components/system-maintenance/announcement/announcements-display.jsx
@@ -1,10 +1,57 @@
 import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Button,
+  Container,
+  IconButton,
+  Typography,
+  makeStyles,
+} from '@material-ui/core';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
+import { palette } from 'themes';
 import { useFetchAnnouncements } from 'api/announcements';
+import { getAngularService } from 'services/angular-react-helper';
+
+const useStyles = makeStyles({
+  announcementBox: {
+    color: palette.white,
+    display: 'flex',
+    flexDirection: 'row',
+    width: '90%',
+    alignItems: 'center',
+    gridGap: '8px',
+  },
+  nextButton: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '4px',
+  },
+  footerAnnouncement: {
+    display: 'flex !important',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    borderBottom: '2px solid #001f57 !important',
+    boxShadow: 'none',
+    zIndex: 999,
+    paddingBottom: '4px',
+  },
+  counter: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  readMore: {
+    fontSize: '1.2rem',
+  },
+});
 
 function ChplAnnouncementsDisplay() {
+  const classes = useStyles();
   const { data, isLoading, isSuccess } = useFetchAnnouncements({ getFuture: false });
   const [announcements, setAnnouncements] = useState([]);
+  const [currentAnnouncementIndex, setCurrentAnnouncementIndex] = useState(0);
+  const $state = getAngularService('$state');
 
   useEffect(() => {
     if (isLoading || !isSuccess) {
@@ -13,17 +60,50 @@ function ChplAnnouncementsDisplay() {
     setAnnouncements(data.sort((a, b) => (a.startDateTime < b.startDateTime ? -1 : 1)));
   }, [data, isLoading, isSuccess]);
 
-  if (announcements.length === 0) { return null; }
+  let currentAnnouncement = {};
+  if (announcements.length > 0) {
+    currentAnnouncement = announcements[currentAnnouncementIndex];
+  }
+  const handleNext = () => {
+    setCurrentAnnouncementIndex((prevIndex) => (prevIndex + 1) % announcements.length);
+  };
 
   return (
     <>
-      { announcements
-        .map((item) => (
-          <p key={item.id} className="announcement nav-text spaced-out badge">
-            { item.title }
-            { item.text ? `: ${item.text}` : ''}
-          </p>
-        ))}
+      {announcements.length > 0 && (
+        <Container disableGutters className={classes.footerAnnouncement} maxWidth="lg">
+          {currentAnnouncement.id && (
+            <>
+              <Box className={classes.announcementBox} key={currentAnnouncement.id}>
+                <strong>
+                  {currentAnnouncement.title.length > 25
+                    ? `${currentAnnouncement.title.substring(0, 25)}...`
+                    : currentAnnouncement.title}
+                </strong>
+                {`${currentAnnouncement.text.substring(0, 140)}...`}
+              </Box>
+              <Button className={classes.readMore} variant="text" color="secondary" size="small" onClick={() => { $state.go('resources.overview'); window.scrollTo(0, 0); }}>Read more</Button>
+            </>
+          )}
+          {announcements.length > 1 && (
+            <>
+              <Box className={classes.counter}>
+                <Typography color="secondary" variant="body2">
+                  {currentAnnouncementIndex + 1}
+                  {' '}
+                  /
+                  {announcements.length}
+                </Typography>
+              </Box>
+              <Box className={classes.nextButton}>
+                <IconButton size="small" onClick={handleNext}>
+                  <ArrowForwardIcon size="small" color="secondary" />
+                </IconButton>
+              </Box>
+            </>
+          )}
+        </Container>
+      )}
     </>
   );
 }

diff --git a/src/app/components/user/cognito-user-edit.jsx b/src/app/components/user/cognito-user-edit.jsx
@@ -31,6 +31,9 @@ const useStyles = makeStyles({
     display: 'grid',
     gap: '8px',
   },
+  fixFooterSpacing: { 
+    minHeight : 'calc(100vh - 188px)',
+  },
 });
 
 const validationSchema = yup.object({
@@ -83,7 +86,7 @@ function ChplCognitoUserEdit({
   });
 
   return (
-    <>
+    <div className={classes.fixFooterSpacing}>
       <Card>
         <CardHeader
           title="Edit User"
@@ -128,7 +131,7 @@ function ChplCognitoUserEdit({
         errors={errors}
         isDisabled={!formik.isValid}
       />
-    </>
+    </div>
   );
 }
 

diff --git a/src/app/components/user/users-view.jsx b/src/app/components/user/users-view.jsx
@@ -35,6 +35,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
+    minHeight: 'calc(100vh - 188px)',
   },
   header: {
     padding: '16px',