Make the width of an extension to be configurable

openmrs · Apr 22, 2024 · e203cad · e203cad
1 parent e43f127
commit e203cad
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.component.tsx
@@ -52,6 +52,19 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
     [patient, patientUuid, view],
   );
 
+  const wrapItem = useCallback(
+    (slot: ReactNode, extension: ExtensionData) => {
+      const { fullWidth = false } = widgetMetas[getExtensionNameFromId(extension.extensionId)];
+      const style = fullWidth ? { gridColumn: '1 / -1' } : {};
+      return (
+        <div className={styles.extension} style={style}>
+          {slot}
+        </div>
+      );
+    },
+    [widgetMetas],
+  );
+
   const [resolvedTitle, setResolvedTitle] = useState<string | undefined>();
 
   useEffect(() => {
@@ -70,7 +83,9 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
       {!dashboard.hideDashboardTitle && resolvedTitle && <h1 className={styles.dashboardTitle}>{resolvedTitle}</h1>}
       <div className={styles.dashboardContainer}>
         <ExtensionSlot key={dashboard.slot} name={dashboard.slot} className={styles.dashboard}>
-          <Extension state={state} className={styles.child}></Extension>
+          <Extension state={state} className={styles.extensionWrapper}>
+            {wrapItem}
+          </Extension>
         </ExtensionSlot>
       </div>
     </>

diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss b/packages/esm-patient-chart-app/src/patient-chart/chart-review/dashboard-view.scss
@@ -26,7 +26,11 @@
   }
 }
 
-.child:only-child {
+.extensionWrapper {
+  height: 100%;
+}
+
+.extension:only-child {
   grid-column: 1 / span 2;
 }
 

diff --git a/packages/esm-patient-chart-app/src/routes.json b/packages/esm-patient-chart-app/src/routes.json
@@ -8,7 +8,6 @@
       "order": 0,
       "meta": {
         "slot": "patient-chart-summary-dashboard-slot",
-        "columns": 4,
         "path": "Patient Summary"
       },
       "online": true,
@@ -213,7 +212,10 @@
       "name": "current-visit-summary",
       "component": "currentVisitSummary",
       "online": true,
-      "offline": true
+      "offline": true,
+      "meta": {
+        "fullWidth": true
+      }
     },
     {
       "name": "edit-visit-action-button",

diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx b/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
@@ -17,7 +17,7 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const isTablet = useLayoutType() === 'tablet';
 
   return (
-    <Layer>
+    <Layer className={styles.layer}>
       <Tile className={styles.tile}>
         <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
           <h4>{props.headerTitle}</h4>

diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.scss b/packages/esm-patient-common-lib/src/empty-state/empty-state.scss
@@ -49,7 +49,12 @@
   border-bottom: 0.375rem solid var(--brand-03);
 }
 
+.layer {
+  height: 100%;
+}
+
 .tile {
   text-align: center;
   border: 1px solid $ui-03;
+  height: 100%;
 }
diff --git a/packages/esm-patient-vitals-app/src/routes.json b/packages/esm-patient-vitals-app/src/routes.json
@@ -10,7 +10,7 @@
       "component": "vitalsSummary",
       "slot": "patient-chart-summary-dashboard-slot",
       "meta": {
-        "columnSpan": 4
+        "fullWidth": true
       },
       "order": 1
     },
@@ -21,7 +21,7 @@
       "meta": {
         "title": "Vitals",
         "view": "vitals",
-        "columnSpan": 2
+        "fullWidth": true
       },
       "order": 1
     },
@@ -46,7 +46,7 @@
       "meta": {
         "view": "biometrics",
         "title": "Biometrics",
-        "columnSpan": 2
+        "fullWidth": true
       }
     },
     {