(feat) O3-3190: Add print support to FormEngine

package.json

@@ -35,6 +35,7 @@
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.0",
     "react-markdown": "^9.0.1",
+    "react-to-print": "^3.1.0",
     "react-waypoint": "^10.3.0",
     "react-webcam": "^7.2.0"
   },

src/components/sidebar/sidebar.component.tsx

@@ -8,6 +8,7 @@ import { useCurrentActivePage } from './useCurrentActivePage';
 import { usePageObserver } from './usePageObserver';
 import type { FormPage, SessionMode } from '../../types';
 import styles from './sidebar.scss';
+import { Printer } from '@carbon/react/icons';
 
 interface SidebarProps {
   defaultPage: string;
@@ -16,6 +17,7 @@ interface SidebarProps {
   onCancel: () => void;
   handleClose: () => void;
   hideFormCollapseToggle: () => void;
+  handlePrint: () => void;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -25,6 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   onCancel,
   handleClose,
   hideFormCollapseToggle,
+  handlePrint,
 }) => {
   const { t } = useTranslation();
   const { pages, pagesWithErrors, activePages, evaluatedPagesVisibility } = usePageObserver();
@@ -78,6 +81,16 @@ const Sidebar: React.FC<SidebarProps> = ({
           size={responsiveSize}>
           {sessionMode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
         </Button>
+        <Button
+          className={classNames(styles.printButton, {
+            [styles.topMargin]: sessionMode === 'view',
+          })}
+          kind="tertiary"
+          onClick={handlePrint}
+          size={responsiveSize}>
+          Print Form
+          <Printer />
+        </Button>
       </div>
     </div>
   );

src/components/sidebar/sidebar.scss

@@ -69,6 +69,9 @@
   min-height: 8rem;
   overscroll-behavior: contain;
   margin-right: 1rem;
+  @media print {
+    display: none !important;
+  }
 }
 
 .sideNavActions {
@@ -110,3 +113,7 @@
 .closeButton {
   @extend .button;
 }
+.printButton{
+  @extend .button;
+  margin-top: 0.625rem;
+}

src/components/value/value.component.tsx

@@ -6,7 +6,7 @@ export const ValueEmpty = () => {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <div className={styles.emptyContainer}>
       <span className={styles.empty}>({t('blank', 'Blank')})</span>
     </div>
   );

src/components/value/value.scss

@@ -4,14 +4,29 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: colors.$gray-60;
+  @media print {
+      margin-top: 20px !important;
+    }
 }
 
 .empty {
   @extend .value;
   color: colors.$gray-30;
+  @media print {
+    display: none !important;
+  }
 }
 
 .item {
   @extend .value;
   margin-bottom: 0.5rem;
+  @media print {
+      margin-top: 20px !important;
+    }
+}
+
+.emptyContainer {
+  @media print {
+    margin-top: 20px !important;
+  }
 }

src/components/value/view/field-value-view.scss

@@ -11,6 +11,10 @@
 .readonly {
   border-bottom: 0.5px colors.$gray-30;
   border-style: solid;
+  @media print {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
 }
 
 .readonly > div {

src/form-engine.component.tsx

@@ -19,6 +19,8 @@ import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.compo
 import PatientBanner from './components/patient-banner/patient-banner.component';
 import Sidebar from './components/sidebar/sidebar.component';
 import styles from './form-engine.scss';
+import { useReactToPrint } from 'react-to-print';
+import { Printer } from '@carbon/react/icons';
 
 interface FormEngineProps {
   patientUUID: string;
@@ -60,6 +62,7 @@ const FormEngine = ({
   const [isLoadingDependencies, setIsLoadingDependencies] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
   const sessionMode = !isEmpty(mode) ? mode : !isEmpty(encounterUUID) ? 'edit' : 'enter';
   const { isFormExpanded, hideFormCollapseToggle } = useFormCollapse(sessionMode);
   const { hasMultiplePages } = usePageObserver();
@@ -107,6 +110,10 @@ const FormEngine = ({
     markFormAsDirty?.(isFormDirty);
   }, [isFormDirty]);
 
+  const handlePrint = useReactToPrint({
+    contentRef,
+  });
+
   const handleSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsSubmitting(true);
@@ -152,6 +159,7 @@ const FormEngine = ({
                   onCancel={onCancel}
                   handleClose={handleClose}
                   hideFormCollapseToggle={hideFormCollapseToggle}
+                  handlePrint={handlePrint}
                 />
               )}
               <div className={styles.formContentInner}>
@@ -161,7 +169,7 @@ const FormEngine = ({
                     <MarkdownWrapper markdown={refinedFormJson.markdown} />
                   </div>
                 )}
-                <div className={styles.formBody}>
+                <div className={styles.formBody} ref={contentRef}>
                   <FormProcessorFactory
                     formJson={refinedFormJson}
                     setIsLoadingFormDependencies={setIsLoadingDependencies}
@@ -189,6 +197,15 @@ const FormEngine = ({
                         <span>{`${t('save', 'Save')}`}</span>
                       )}
                     </Button>
+                    <Button
+                      className={classNames(styles.printButton, {
+                        [styles.topMargin]: sessionMode === 'view',
+                      })}
+                      kind="tertiary"
+                      onClick={handlePrint}>
+                      Print Form
+                      <Printer />
+                    </Button>
                   </ButtonSet>
                 )}
               </div>

src/form-engine.scss

@@ -5,6 +5,12 @@
   height: 100%;
   overflow: hidden;
   flex-grow: 1;
+
+  @media print {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
 }
 
 // replaces .container
@@ -13,13 +19,25 @@
   height: 100%;
   overflow-y: hidden;
   flex-direction: column;
+
+  @media print {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
 }
 
 // replaces .body
 .formContent {
   display: flex;
   flex-direction: row;
   height: 100%;
+
+  @media print {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
 }
 
 // replaces .content
@@ -34,6 +52,12 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  @media print {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
 }
 
 // replaces .contentBody
@@ -45,6 +69,21 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+
+  @media print {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    // For Firefox
+    scrollbar-width: none;
+    // For IE and Edge
+    -ms-overflow-style: none;
+  }
 }
 
 .minifiedButtons {
@@ -55,6 +94,10 @@
     align-items: baseline;
     min-width: 50%;
   }
+
+  @media print {
+    display: none !important;
+  }
 }
 
 .markdownContainer {
@@ -69,6 +112,12 @@
 :global(.omrs-breakpoint-lt-desktop) {
   .formContentInner {
     height: var(--tablet-workspace-window-height);
+
+    @media print {
+      overflow: visible !important;
+      height: auto !important;
+      max-height: none !important;
+    }
   }
 
   .minifiedButtons {
@@ -119,11 +168,29 @@
   animation: indeterminate_second 2.5s infinite ease-in;
 }
 
+@media print {
+  @page {
+    margin: 0.2in;
+  }
+
+  body {
+    background-color: transparent !important;
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  svg {
+    display: none !important;
+  }
+}
+
 @keyframes indeterminate_first {
   0% {
     left: -100%;
     width: 100%;
   }
+
   100% {
     left: 100%;
     width: 10%;
@@ -135,6 +202,7 @@
     left: -150%;
     width: 100%;
   }
+
   100% {
     left: 100%;
     width: 10%;
@@ -145,4 +213,4 @@
   &:global(.cds--inline-loading) {
     min-height: layout.$spacing-05;
   }
-}
+}

yarn.lock

@@ -3160,6 +3160,7 @@ __metadata:
     react-hook-form: "npm:^7.52.0"
     react-i18next: "npm:^11.18.6"
     react-markdown: "npm:^9.0.1"
+    react-to-print: "npm:^3.1.0"
     react-waypoint: "npm:^10.3.0"
     react-webcam: "npm:^7.2.0"
     sass: "npm:^1.77.2"
@@ -17054,6 +17055,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-to-print@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "react-to-print@npm:3.1.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ~19
+  checksum: 10/e2d1c5168d72d0d0aa452c3a4b1d9469474652d0fe9c3a52ba819df93e580808fc97bb7f89a6dca7d3b40969b79e609349adb87c6cb5783928c80e57a18753d1
+  languageName: node
+  linkType: hard
+
 "react-waypoint@npm:^10.3.0":
   version: 10.3.0
   resolution: "react-waypoint@npm:10.3.0"