@ampath/esm-reports-app 1.0.0-next.5 → 1.0.0-next.50

package/src/reports/moh-706/moh-706.scss

@@ -1,18 +1,126 @@
-.tableWrapper {
-  overflow-x: auto;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
+/* MOH-706 laid out for A4, on the same scale as the other reports.
+
+   Its nine sub-reports all render through the shared TableWrapper, so their
+   cells are styled from `table-wrapper.scss` rather than here. Those rules are
+   all single-class, so scoping these under `.sheet` (a class plus an element,
+   one step more specific) wins deterministically -- no reliance on which module
+   loads first. The wrapper is asked for a plain table so Carbon's data-table
+   rules, which are far more specific, never apply at all. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+.mainTitleBox {
+  padding: 2mm $pad;
+  text-align: center;
+  border: $rule;
+}
+
+.ministry {
+  font-size: $meta;
+}
+
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+.headerSection {
+  padding: 0;
 }
 
-.tableContainer {
+/* The nine sub-reports run continuously down the sheet, as they do on the form.
+   Each is kept off a page break so a block is never split from the heading row
+   that names its columns. */
+
+.reportSections {
   width: 100%;
-  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+
+  > * {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}
+
+.sheet {
+  font-size: $text;
 
-  thead {
-    background-color: #f4f4f4;
+  table {
+    width: 100%;
+    border-collapse: collapse;
   }
 
-  tbody tr {
-    border-bottom: 1px solid #e0e0e0;
+  td,
+  th {
+    height: auto;
+    min-width: 0;
+    padding: 0.7mm 1mm;
+    overflow-wrap: anywhere;
+    font-size: $text;
+    line-height: 1.25;
+    text-align: center;
+    border: $rule;
   }
-}
+
+  /* Row labels read as text, not as data */
+  td:first-child {
+    text-align: left;
+  }
+
+  /* The facility block is all labels and values, none of it tabular data */
+  .headerSection td {
+    text-align: left;
+  }
+}
+
+/* Sign-off, enclosed by the form */
+
+.signOff {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+
+  > span {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    min-width: 0;
+  }
+}
+
+.line,
+.shortLine {
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  border-bottom: $rule;
+}
+
+.line {
+  flex: 1 1 45mm;
+  min-width: 15mm;
+}
+
+.shortLine {
+  flex: 1 1 25mm;
+  min-width: 12mm;
+}

package/src/reports/moh-706/sub-reports/bacteriology/bacteriology.component.tsx

@@ -1,27 +1,27 @@
 import React, { useMemo } from "react";
-import { TableRow, TableCell } from '@carbon/react';
-import TableWrapper from "../../table-wrapper/table-wrapper.component";
-import styles from '../../table-wrapper/table-wrapper.scss';
+import TableWrapper from "../../../table-wrapper/table-wrapper.component";
+import TableRowMapper from "../../../table-wrapper/table-row-mapper.component";
+import { getCell } from "../../../../utils/utils";
 
-const Bacteriology: React.FC = () => {
-    const getCell = (key = "", value = "", colSpan = 1, strong = false) => ({
-        key,
-        value,
-        strong,
-        colSpan
-    });
+interface BacteriologyProps {
+    data?: any,
+    locationUuids?: string,
+    startDate?: string,
+    endDate?: string
+}
 
+const Bacteriology: React.FC<BacteriologyProps> = ({ data, locationUuids, startDate, endDate }) => {
     const tableRows = useMemo(() => {
         return [
             {
-                tableCells: [getCell("", "5 BACTERIOLOGY", 4, true)]
+                tableCells: [getCell("", "5 BACTERIOLOGY", 4, 1, true)]
             },
             {
                 tableCells: [
-                    getCell("", "Bacteriological Sample", 1, true),
-                    getCell("", "Total Exam", 1, true),
-                    getCell("", "Total Cultures", 1, true),
-                    getCell("", "Number Culture Positive", 1, true),
+                    getCell("", "Bacteriological Sample", 1, 1, true),
+                    getCell("", "Total Exam", 1, 1, true),
+                    getCell("", "Total Cultures", 1, 1, true),
+                    getCell("", "Number Culture Positive", 1, 1, true),
                 ]
             },
             { tableCells: [getCell("", "5.1 Urine"), getCell(), getCell(), getCell()] },
@@ -29,15 +29,15 @@ const Bacteriology: React.FC = () => {
             { tableCells: [getCell("", "5.3 High Vaginal Swabs"), getCell(), getCell(), getCell()] },
             { tableCells: [getCell("", "5.4 Throat swab"), getCell(), getCell(), getCell()] },
             { tableCells: [getCell("", "5.5 Rectal swab"), getCell(), getCell(), getCell()] },
-            { tableCells: [getCell("", "5.6 Blood"), getCell(), getCell(), getCell()] },
+            { tableCells: [getCell("", "5.6 Blood"), getCell("total_bact_blood"), getCell(), getCell()] },
             { tableCells: [getCell("", "5.7 Water"), getCell(), getCell(), getCell()] },
             { tableCells: [getCell("", "5.8 Food"), getCell(), getCell(), getCell()] },
-            { tableCells: [getCell("", "5.9 Urethral swabs"), getCell(), getCell(), getCell()] },
+            { tableCells: [getCell("", "5.9 Urethral swabs"), getCell("total_bact_urethral"), getCell(), getCell()] },
             {
                 tableCells: [
-                    getCell("", "Bacterial enteric pathogens", 2, true),
-                    getCell("", "Total Exam", 1, true),
-                    getCell("", "Number Positive", 1, true),
+                    getCell("", "Bacterial enteric pathogens", 2, 1, true),
+                    getCell("", "Total Exam", 1, 1, true),
+                    getCell("", "Number Positive", 1, 1, true),
                 ]
             },
             {
@@ -49,39 +49,39 @@ const Bacteriology: React.FC = () => {
             },
             {
                 tableCells: [
-                    getCell("", "Stool Isolates", 3, true),
-                    getCell("", "Number Positive", 1, true),
+                    getCell("", "Stool Isolates", 3, 1, true),
+                    getCell("", "Number Positive", 1, 1, true),
                 ]
             },
-            { tableCells: [getCell("", "5.11 Salmonella typhi", 3), getCell()] },
+            { tableCells: [getCell("", "5.11 Salmonella typhi", 3), getCell("positive_salmonella")] },
             { tableCells: [getCell("", "5.12 Shigella - dysenteriae type1", 3), getCell()] },
             { tableCells: [getCell("", "5.13 E. coli O157:H7", 3), getCell()] },
             { tableCells: [getCell("", "5.14 V. cholerae O1", 3), getCell()] },
             { tableCells: [getCell("", "5.15 V. cholerae O139", 3), getCell()] },
 
             {
-                tableCells: [getCell("", "Bacterial meningitis", 4, true)]
+                tableCells: [getCell("", "Bacterial meningitis", 4, 1, true)]
             },
             {
                 tableCells: [
-                    getCell("", "Bacterial meningitis", 1, true),
-                    getCell("", "Total Exam", 1, true),
-                    getCell("", "Number Positive", 1, true),
-                    getCell("", "Number Contaminated", 2, true),
+                    getCell("", "Bacterial meningitis", 1, 1, true),
+                    getCell("", "Total Exam", 1, 1, true),
+                    getCell("", "Number Positive", 1, 1, true),
+                    getCell("", "Number Contaminated", 2, 1, true),
                 ]
             },
             {
                 tableCells: [
                     getCell("", "5.16 CSF"),
-                    getCell(),
+                    getCell("total_bact_csf"),
                     getCell(),
                     getCell(),
                 ]
             },
             {
                 tableCells: [
-                    getCell("", "Bacterial meningitis Serotypes", 1, true),
-                    getCell("", "Number Positive", 3, true),
+                    getCell("", "Bacterial meningitis Serotypes", 1, 1, true),
+                    getCell("", "Number Positive", 3, 1, true),
                 ]
             },
             { tableCells: [getCell("", "5.17 Neisseria meningitidis A"), getCell("", "", 3)] },
@@ -95,16 +95,16 @@ const Bacteriology: React.FC = () => {
             { tableCells: [getCell("", "5.25 Haemophilus influenzae (type b)"), getCell("", "", 3)] },
             { tableCells: [getCell("", "5.26 Cryptococcal Meningitis"), getCell("", "", 3)] },
             {
-                tableCells: [getCell("", "Bacterial Pathogens from other types of specimen", 4, true)]
+                tableCells: [getCell("", "Bacterial Pathogens from other types of specimen", 4, 1, true)]
             },
             { tableCells: [getCell("", "5.27 B. anthracis"), getCell("", "", 3)] },
             { tableCells: [getCell("", "5.28 Y. pestis"), getCell("", "", 3)] },
             { tableCells: [getCell("", "TB SPUTUM", 4)] },
             {
                 tableCells: [
-                    getCell("", "TB SPUTUM", 1, true),
-                    getCell("", "Total Exam", 1, true),
-                    getCell("", "Number Positive", 1, true),
+                    getCell("", "TB SPUTUM", 1, 1, true),
+                    getCell("", "Total Exam", 1, 1, true),
+                    getCell("", "Number Positive", 1, 1, true),
                 ]
             },
             { tableCells: [getCell("", "5.29 Total TB smears"), getCell(), getCell()] },
@@ -117,15 +117,7 @@ const Bacteriology: React.FC = () => {
 
 
     return <TableWrapper>
-        {tableRows.map((tR) => (
-            <TableRow>
-                {tR.tableCells.map((tC) => (
-                    <TableCell className={styles.dataCell} colSpan={tC.colSpan}>
-                        {tC.strong ? <strong>{tC.value}</strong> : tC.value}
-                    </TableCell>
-                ))}
-            </TableRow>
-        ))}
+        <TableRowMapper tableRows={tableRows} data={data} locationUuids={locationUuids} startDate={startDate} endDate={endDate} />
     </TableWrapper>
 }