Last Saved Bar (#47)

Enterprise-CMCS · Nov 15, 2024 · 6ae1ffd · 6ae1ffd
1 parent 97e2f1e
commit 6ae1ffd
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 3 deletions.
diff --git a/services/ui-src/src/assets/icons/check/icon_check_gray.png b/services/ui-src/src/assets/icons/check/icon_check_gray.png
diff --git a/services/ui-src/src/components/report/ReportPageWrapper.tsx b/services/ui-src/src/components/report/ReportPageWrapper.tsx
@@ -1,10 +1,11 @@
+import { useParams } from "react-router-dom";
 import { Box, Button, Divider, Flex, HStack, VStack } from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 import { Page } from "./Page";
 import { Sidebar } from "./Sidebar";
 import { ReportModal } from "./ReportModal";
+import { SubnavBar } from "./SubnavBar";
 import { getReport } from "utils/api/requestMethods/report";
-import { useParams } from "react-router-dom";
 import { useStore } from "utils";
 import { FormProvider, useForm } from "react-hook-form";
 import { FormPageTemplate } from "types/report";
@@ -72,6 +73,7 @@ export const ReportPageWrapper = () => {
 
   return (
     <FormProvider {...methods}>
+      <SubnavBar />
       <HStack width="100%" height="100%" position="relative" spacing="0">
         {currentPage.sidebar && <Sidebar />}
         <VStack

diff --git a/services/ui-src/src/components/report/SubnavBar.tsx b/services/ui-src/src/components/report/SubnavBar.tsx
@@ -0,0 +1,90 @@
+import { Link as RouterLink, useParams } from "react-router-dom";
+import { Flex, Container, Image, Link, Text } from "@chakra-ui/react";
+import { useStore } from "utils";
+import checkIcon from "assets/icons/check/icon_check_gray.png";
+import { ReportType } from "types/report";
+
+export const SubnavBar = () => {
+  const { reportType } = useParams();
+  const { report, lastSavedTime } = useStore();
+  const saveStatusText = "Last saved " + lastSavedTime;
+  return (
+    <Flex sx={sx.subnavBar}>
+      <Container sx={sx.subnavContainer}>
+        <Flex sx={sx.subnavFlex}>
+          <Flex>
+            <Text sx={sx.submissionNameText}>
+              {reportType == ReportType.QM ? report?.state + " QMS Report" : ""}
+            </Text>
+          </Flex>
+          <Flex sx={sx.subnavFlexRight}>
+            {lastSavedTime && (
+              <>
+                <Image
+                  src={checkIcon}
+                  alt="gray checkmark icon"
+                  sx={sx.checkIcon}
+                />
+                <Text sx={sx.saveStatusText}>{saveStatusText}</Text>
+              </>
+            )}
+            <Link
+              as={RouterLink}
+              to={`/report/${report?.type}/${report?.state}` || "/"}
+              sx={sx.leaveFormLink}
+              variant="outlineButton"
+              tabIndex={-1}
+            >
+              Leave form
+            </Link>
+          </Flex>
+        </Flex>
+      </Container>
+    </Flex>
+  );
+};
+
+const sx = {
+  subnavBar: {
+    position: "sticky",
+    top: 0,
+    zIndex: "sticky",
+    bg: "palette.secondary_lightest",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+  },
+  subnavContainer: {
+    maxW: "appMax",
+    ".desktop &": {
+      padding: "0 2rem",
+    },
+  },
+  subnavFlex: {
+    height: "60px",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  leaveFormLink: {
+    marginLeft: "1rem",
+  },
+  checkIcon: {
+    marginRight: "0.5rem",
+    boxSize: "1rem",
+    ".mobile &": {
+      display: "none",
+    },
+  },
+  submissionNameText: {
+    fontWeight: "bold",
+  },
+  saveStatusText: {
+    fontSize: "sm",
+    ".mobile &": {
+      width: "5rem",
+      textAlign: "right",
+    },
+  },
+  subnavFlexRight: {
+    alignItems: "center",
+    paddingRight: ".5rem",
+  },
+};
diff --git a/services/ui-src/src/styles/theme.ts b/services/ui-src/src/styles/theme.ts
@@ -405,6 +405,22 @@ const theme = extendTheme({
             textDecoration: "none",
           },
         },
+        outlineButton: {
+          color: "palette.primary",
+          border: "1px solid",
+          padding: ".5rem 1rem",
+          borderRadius: "5px",
+          fontWeight: "bold",
+          textDecoration: "none",
+          _visited: { color: "palette.primary" },
+          ":hover, :visited:hover": {
+            color: "palette.primary_darker",
+            textDecoration: "none",
+          },
+          ".mobile &": {
+            border: "none",
+          },
+        },
       },
       defaultProps: {
         variant: "primary",

diff --git a/services/ui-src/src/types/states.ts b/services/ui-src/src/types/states.ts
@@ -21,6 +21,7 @@ export interface HcbsReportState {
   currentPageId?: string;
   modalOpen: boolean;
   modalComponent?: React.ReactFragment;
+  lastSavedTime?: string;
 
   // ACTIONS
   setReport: (report?: Report) => void;

diff --git a/services/ui-src/src/utils/state/management/reportState.ts b/services/ui-src/src/utils/state/management/reportState.ts
@@ -1,6 +1,7 @@
 import { HcbsReportState } from "types";
 import { ParentPageTemplate, Report } from "types/report";
 import { putReport } from "utils/api/requestMethods/report";
+import { getLocalHourMinuteTime } from "utils";
 
 export const buildState = (report: Report | undefined) => {
   if (!report) return { report: undefined };
@@ -63,6 +64,5 @@ export const mergeAnswers = (answers: any, state: HcbsReportState) => {
   report.pages[pageIndex] = deepMerge(report.pages[pageIndex], answers);
 
   putReport(report); // Submit to API
-
-  return { report };
+  return { report, lastSavedTime: getLocalHourMinuteTime() };
 };
diff --git a/services/ui-src/src/utils/state/useStore.ts b/services/ui-src/src/utils/state/useStore.ts
@@ -29,6 +29,7 @@ const reportStore = (set: Function): HcbsReportState => ({
   currentPageId: undefined,
   modalOpen: false,
   modalComponent: undefined,
+  lastSavedTime: undefined,
 
   // actions
   setReport: (report: Report | undefined) =>