Merge pull request #947 from konsulin-id/issue/940

Issue/940
aehrc · Aug 6, 2024 · e432145 · e432145
2 parents cdf067a + 69409fe
commit e432145
Show file tree

Hide file tree

Showing 24 changed files with 1,464 additions and 64 deletions.
diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
     "@aehrc/sdc-populate": "^2.3.0",
-    "@aehrc/smart-forms-renderer": "^0.36.1",
+    "@aehrc/smart-forms-renderer": "^0.37.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.18",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.36.1",
+  "version": "0.37.1",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/Button.styles.ts b/packages/smart-forms-renderer/src/components/FormComponents/Button.styles.ts
@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Fab from '@mui/material/Fab';
+
+export const SecondaryFab = styled(Fab)(({ theme }) => ({
+  color: '#fff',
+  background: theme.palette.secondary.main,
+  '&:hover': {
+    background: theme.palette.secondary.dark
+  }
+}));
diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupHeading.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupHeading.tsx
@@ -29,10 +29,11 @@ interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   readOnly: boolean;
   tabIsMarkedAsComplete?: boolean;
+  pageIsMarkedAsComplete?: boolean;
 }
 
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
-  const { qItem, readOnly, tabIsMarkedAsComplete, isRepeated } = props;
+  const { qItem, readOnly, tabIsMarkedAsComplete, pageIsMarkedAsComplete, isRepeated } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
@@ -41,14 +42,15 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   }
 
   const isTabHeading = tabIsMarkedAsComplete !== undefined;
+  const isPageHeading = pageIsMarkedAsComplete !== undefined;
 
   return (
     <>
       <Box display="flex" alignItems="center" width="100%">
         <Typography
           variant="h6"
-          fontSize={isTabHeading ? 16 : 15}
-          color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
+          fontSize={isTabHeading || isPageHeading ? 16 : 15}
+          color={readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary'}>
           <ItemLabelText qItem={qItem} />
         </Typography>
         <Box flexGrow={1} />

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItem.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItem.tsx
@@ -28,6 +28,7 @@ import type {
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
 import useHidden from '../../../hooks/useHidden';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupItemView from './GroupItemView';
 
 interface GroupItemProps
@@ -41,6 +42,9 @@ interface GroupItemProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItem(props: GroupItemProps) {
@@ -52,6 +56,9 @@ function GroupItem(props: GroupItemProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -83,7 +90,7 @@ function GroupItem(props: GroupItemProps) {
   }
 
   if (!qItems || !qrItems) {
-    return <>Unable to load group, something has gone terribly wrong.</>;
+    return <>Group Item: Unable to load group, something has gone terribly wrong.</>;
   }
 
   // If an item has multiple answers, it is a repeat group
@@ -99,6 +106,9 @@ function GroupItem(props: GroupItemProps) {
       tabIsMarkedAsComplete={tabIsMarkedAsComplete}
       tabs={tabs}
       currentTabIndex={currentTabIndex}
+      pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+      pages={pages}
+      currentPageIndex={currentPageIndex}
       parentIsReadOnly={parentIsReadOnly}
       parentIsRepeatGroup={parentIsRepeatGroup}
       parentRepeatGroupIndex={parentRepeatGroupIndex}

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx
@@ -26,6 +26,7 @@ import type {
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
 import TabButtonsWrapper from './TabButtonsWrapper';
@@ -37,6 +38,7 @@ import Divider from '@mui/material/Divider';
 import { getGroupCollapsible } from '../../../utils/qItem';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { GroupAccordion } from './GroupAccordion.styles';
+import PageButtonsWrapper from './PageButtonWrapper';
 
 interface GroupItemViewProps
   extends PropsWithQrItemChangeHandler,
@@ -51,6 +53,9 @@ interface GroupItemViewProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItemView(props: GroupItemViewProps) {
@@ -63,6 +68,9 @@ function GroupItemView(props: GroupItemViewProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -91,6 +99,7 @@ function GroupItemView(props: GroupItemViewProps) {
             qItem={qItem}
             readOnly={readOnly}
             tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+            pageIsMarkedAsComplete={pageIsMarkedAsComplete}
             isRepeated={isRepeated}
           />
         </AccordionSummary>
@@ -117,6 +126,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
             {/* Next tab button at the end of each tab group */}
             <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+            <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
           </>
         </AccordionDetails>
       </GroupAccordion>
@@ -133,6 +143,7 @@ function GroupItemView(props: GroupItemViewProps) {
           qItem={qItem}
           readOnly={readOnly}
           tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+          pageIsMarkedAsComplete={pageIsMarkedAsComplete}
           isRepeated={isRepeated}
         />
         {childQItems.map((qItem: QuestionnaireItem, i) => {
@@ -155,6 +166,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
         {/* Next tab button at the end of each tab group */}
         <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+        <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
       </GroupCard>
     </QGroupContainerBox>
   );

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/NextPageButton.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/NextPageButton.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Iconify from '../../Iconify/Iconify';
+import { SecondaryFab } from '../Button.styles';
+
+interface NextPageButtonProps {
+  isDisabled: boolean;
+  onNextPageClick: () => void;
+}
+
+function NextPageButton(props: NextPageButtonProps) {
+  const { isDisabled, onNextPageClick } = props;
+
+  return (
+    <SecondaryFab size="small" aria-label="next" disabled={isDisabled} onClick={onNextPageClick}>
+      <Iconify icon="material-symbols:chevron-right-rounded" />
+    </SecondaryFab>
+  );
+}
+
+export default NextPageButton;