Merge pull request #332 from aehrc/feature/embedded-view

Fix/Dashboard table enhancements
aehrc · Jul 24, 2023 · 360d412 · 360d412
2 parents 7651481 + a0c4cae
commit 360d412
Show file tree

Hide file tree

Showing 72 changed files with 1,297 additions and 1,139 deletions.
diff --git a/apps/smart-forms-app/cypress/e2e/auth.cy.ts b/apps/smart-forms-app/cypress/e2e/auth.cy.ts
@@ -22,11 +22,8 @@ describe('launch app in SMART Launcher', () => {
     const launchPage = 'http://localhost:5173/launch';
 
     it('from launch page, redirect to picker', () => {
-      cy.intercept('/').as('homepage');
-
       cy.visit(launchPage);
-      cy.wait('@homepage').its('response.statusCode').should('eq', 200);
-      cy.location('pathname').should('eq', '/');
+      cy.getByData('button-unlaunched-state');
     });
   });
 

diff --git a/apps/smart-forms-app/cypress/e2e/populate.cy.ts b/apps/smart-forms-app/cypress/e2e/populate.cy.ts
@@ -50,7 +50,7 @@ describe('populate form', () => {
   it('form items in Patient Details tab have expected populated answers', () => {
     cy.goToPatientDetailsTab();
 
-    cy.getByData('q-item-string-box').eq(0).find('input').should('have.value', 'Benito Lucio');
+    cy.getByData('q-item-string-box').eq(0).find('input').should('have.value', 'Lucio, Benito Mr.');
     cy.getByData('q-item-date-box').eq(0).find('input').should('have.value', '18/08/1936');
 
     cy.getByData('q-item-choice-radio-answer-value-set-box')
@@ -97,7 +97,7 @@ describe('populate form', () => {
     cy.previewForm();
 
     cy.getByData('response-item-text').contains('Name');
-    cy.getByData('response-item-answer').contains('Benito Lucio');
+    cy.getByData('response-item-answer').contains('Lucio, Benito Mr.');
 
     cy.getByData('response-item-text').contains('Date of birth');
     cy.getByData('response-item-answer').contains('18/08/1936');

diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -23,6 +23,7 @@
     "@sentry/react": "^7.58.1",
     "@sentry/tracing": "^7.57.0",
     "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-table": "^8.9.3",
     "allotment": "^1.19.0",
     "dayjs": "^1.11.7",
     "fhirclient": "^2.5.2",

diff --git a/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx b/apps/smart-forms-app/src/components/Button/UnlaunchedButton.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+function UnlaunchedButton() {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      variant="contained"
+      color="warning"
+      sx={{ mt: 6 }}
+      onClick={() => {
+        navigate('/dashboard/questionnaires');
+      }}
+      data-test="button-unlaunched-state">
+      Proceed in unlaunched state
+    </Button>
+  );
+}
+
+export default UnlaunchedButton;
diff --git a/...p/src/components/Header/DesktopHeader.tsx → .../components/Header/DesktopHeaderIcons.tsx b/...p/src/components/Header/DesktopHeader.tsx → .../components/Header/DesktopHeaderIcons.tsx
@@ -15,28 +15,31 @@
  * limitations under the License.
  */
 
-import { Avatar, Box, useTheme } from '@mui/material';
+import { Avatar, Box, Typography, useTheme } from '@mui/material';
 import { AccountDetailsTypography, AccountNameTypography } from '../Typography/Typography.tsx';
 import { constructName } from '../../features/smartAppLaunch/utils/launchContext.ts';
 import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
 import useConfigStore from '../../stores/useConfigStore.ts';
 
-function DesktopHeader() {
+function DesktopHeaderIcons() {
   const user = useConfigStore((state) => state.user);
 
   const theme = useTheme();
 
   return (
-    <Box display="flex" alignItems="center" gap={1.5}>
-      <Avatar sx={{ bgcolor: theme.palette.error.main }}>
+    <Box display="flex" alignItems="center" columnGap={1.5}>
+      <Avatar sx={{ bgcolor: theme.palette.error.main, height: 38, width: 38 }}>
         <MedicalServicesIcon sx={{ color: theme.palette.common.white }} />
       </Avatar>
       <Box>
+        <Typography fontSize={10} variant="subtitle1" color={'text.secondary'}>
+          User
+        </Typography>
         <AccountNameTypography name={user ? constructName(user.name) : 'No User'} />
         {user && user.gender ? <AccountDetailsTypography details={`${user.gender}`} /> : null}
       </Box>
     </Box>
   );
 }
 
-export default DesktopHeader;
+export default DesktopHeaderIcons;
diff --git a/...nents/DashboardHeader/DashboardHeader.tsx → ...p/src/components/Header/GenericHeader.tsx b/...nents/DashboardHeader/DashboardHeader.tsx → ...p/src/components/Header/GenericHeader.tsx
@@ -15,30 +15,22 @@
  * limitations under the License.
  */
 
-import { Box, Stack } from '@mui/material';
-import Iconify from '../../../../components/Iconify/Iconify.tsx';
-import { useTheme } from '@mui/material/styles';
-import DesktopHeader from '../../../../components/Header/DesktopHeader.tsx';
-import useResponsive from '../../../../hooks/useResponsive.ts';
-import Logo from '../../../../components/Logos/Logo.tsx';
-import { LogoWrapper } from '../../../../components/Logos/Logo.styles.ts';
-import {
-  MenuIconButton,
-  StyledRoot,
-  StyledToolbar
-} from '../../../../components/Header/Header.styles.ts';
-import MobileHeaderWithQuestionnaire from '../../../../components/Header/MobileHeaderWithoutQuestionnaire.tsx';
+import { Box } from '@mui/material';
+import Iconify from '../Iconify/Iconify.tsx';
+import useResponsive from '../../hooks/useResponsive.ts';
+import Logo from '../Logos/Logo.tsx';
+import { LogoWrapper } from '../Logos/Logo.styles.ts';
+import { MenuIconButton, StyledRoot, StyledToolbar } from './Header.styles.ts';
 import { memo } from 'react';
+import HeaderIcons from './HeaderIcons.tsx';
 
 interface DashboardHeaderProps {
   onOpenNav: () => void;
 }
 
-const DashboardHeader = memo(function DashboardHeader(props: DashboardHeaderProps) {
+const GenericHeader = memo(function DashboardHeader(props: DashboardHeaderProps) {
   const { onOpenNav } = props;
 
-  const theme = useTheme();
-
   const isDesktop = useResponsive('up', 'lg');
 
   return (
@@ -53,21 +45,13 @@ const DashboardHeader = memo(function DashboardHeader(props: DashboardHeaderProp
             <Logo />
           </LogoWrapper>
         ) : null}
+
         <Box flexGrow={1} />
 
-        <Stack
-          direction="row"
-          alignItems="center"
-          spacing={{
-            xs: 0.5,
-            sm: 1
-          }}
-          sx={{ color: theme.palette.grey['700'] }}>
-          {isDesktop ? <DesktopHeader /> : <MobileHeaderWithQuestionnaire />}
-        </Stack>
+        <HeaderIcons />
       </StyledToolbar>
     </StyledRoot>
   );
 });
 
-export default DashboardHeader;
+export default GenericHeader;
diff --git a/apps/smart-forms-app/src/components/Header/Header.styles.ts b/apps/smart-forms-app/src/components/Header/Header.styles.ts
@@ -18,9 +18,9 @@
 import { alpha, styled } from '@mui/material/styles';
 import { AppBar, IconButton, Toolbar } from '@mui/material';
 
-const NAV_WIDTH = 240;
-const HEADER_MOBILE = 64;
-const HEADER_DESKTOP = 72;
+export const NAV_WIDTH = 240;
+export const HEADER_MOBILE_HEIGHT = 52;
+export const HEADER_DESKTOP_HEIGHT = 60;
 
 export const MenuIconButton = styled(IconButton)(({ theme }) => ({
   paddingRight: '8px',
@@ -43,9 +43,13 @@ export const StyledRoot = styled(AppBar, {
 }));
 
 export const StyledToolbar = styled(Toolbar)(({ theme }) => ({
-  minHeight: HEADER_MOBILE,
+  height: HEADER_MOBILE_HEIGHT,
+  padding: theme.spacing(0, 1),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(0, 2)
+  },
   [theme.breakpoints.up('lg')]: {
-    minHeight: HEADER_DESKTOP,
+    minHeight: HEADER_DESKTOP_HEIGHT,
     padding: theme.spacing(0, 4)
   }
 }));
diff --git a/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx b/apps/smart-forms-app/src/components/Header/HeaderIcons.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 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 DesktopHeaderIcons from './DesktopHeaderIcons.tsx';
+import MobileHeaderIcons from './MobileHeaderIcons.tsx';
+import { Stack } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import useResponsive from '../../hooks/useResponsive.ts';
+
+function HeaderIcons() {
+  const theme = useTheme();
+  const isDesktop = useResponsive('up', 'lg');
+
+  return (
+    <Stack direction="row" alignItems="center" sx={{ color: theme.palette.grey['700'] }}>
+      {isDesktop ? <DesktopHeaderIcons /> : <MobileHeaderIcons />}
+    </Stack>
+  );
+}
+
+export default HeaderIcons;
diff --git a/...ader/MobileHeaderWithoutQuestionnaire.tsx → ...c/components/Header/MobileHeaderIcons.tsx b/...ader/MobileHeaderWithoutQuestionnaire.tsx → ...c/components/Header/MobileHeaderIcons.tsx
@@ -15,42 +15,45 @@
  * limitations under the License.
  */
 
-import { Box } from '@mui/material';
-import NavErrorAlert from '../Nav/NavErrorAlert.tsx';
-import PersonPopover from './Popovers/PersonPopover.tsx';
+import HeaderPopover from './Popovers/HeaderPopover.tsx';
 import FaceIcon from '@mui/icons-material/Face';
 import PatientPopoverMenu from './Popovers/PatientPopoverMenu.tsx';
 import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
 import UserPopoverMenu from './Popovers/UserPopoverMenu.tsx';
 import { useTheme } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import NotLaunchedPopover from './Popovers/NotLaunchedPopover.tsx';
 import useConfigStore from '../../stores/useConfigStore.ts';
 
-function MobileHeaderWithQuestionnaire() {
-  const smartClient = useConfigStore((state) => state.smartClient);
-
+function MobileHeaderIcons() {
   const theme = useTheme();
+  const smartClient = useConfigStore((state) => state.smartClient);
 
   const isNotLaunched = !smartClient;
 
   return (
     <>
       {isNotLaunched ? (
-        <Box sx={{ my: 0.5 }}>
-          <NavErrorAlert message={'Viewing responses disabled, app not launched via SMART'} />
+        <Box sx={{ mx: 1 }}>
+          <NotLaunchedPopover />
         </Box>
       ) : null}
-      <PersonPopover
-        bgColor={theme.palette.secondary.main}
-        displayIcon={<FaceIcon sx={{ color: theme.palette.common.white }} />}
+      <HeaderPopover
+        entity={'Patient'}
+        bgColor={theme.palette.primary.main}
+        displayIcon={<FaceIcon fontSize="small" sx={{ color: theme.palette.common.white }} />}
         menuContent={<PatientPopoverMenu />}
       />
-      <PersonPopover
+      <HeaderPopover
+        entity={'User'}
         bgColor={theme.palette.error.main}
-        displayIcon={<MedicalServicesIcon sx={{ color: theme.palette.common.white }} />}
+        displayIcon={
+          <MedicalServicesIcon fontSize="small" sx={{ color: theme.palette.common.white }} />
+        }
         menuContent={<UserPopoverMenu />}
       />
     </>
   );
 }
 
-export default MobileHeaderWithQuestionnaire;
+export default MobileHeaderIcons;
diff --git a/apps/smart-forms-app/src/components/Header/MobileHeaderWithQuestionnaire.tsx b/apps/smart-forms-app/src/components/Header/MobileHeaderWithQuestionnaire.tsx