(feat) O3-3024: Implement a two column layout for large desktops (#1772)

openmrs · Jul 24, 2024 · fba902f · fba902f
1 parent 64a4c88
commit fba902f
Show file tree

Hide file tree

Showing 39 changed files with 111 additions and 131 deletions.
diff --git a/packages/esm-generic-patient-widgets-app/src/routes.json b/packages/esm-generic-patient-widgets-app/src/routes.json
@@ -10,7 +10,7 @@
       "online": true,
       "offline": true,
       "meta": {
-        "columnSpan": 4
+        "fullWidth": false
       }
     }
   ]

diff --git a/packages/esm-patient-allergies-app/src/dashboard.meta.ts b/packages/esm-patient-allergies-app/src/dashboard.meta.ts
@@ -1,6 +1,5 @@
 export const dashboardMeta = {
   slot: 'patient-chart-allergies-dashboard-slot',
-  columns: 1,
   path: 'Allergies',
   title: 'Allergies',
 };
diff --git a/packages/esm-patient-allergies-app/src/routes.json b/packages/esm-patient-allergies-app/src/routes.json
@@ -18,10 +18,7 @@
       "component": "allergiesDetailedSummary",
       "slot": "patient-chart-allergies-dashboard-slot",
       "online": true,
-      "offline": true,
-      "meta": {
-        "columnSpan": 4
-      }
+      "offline": true
     },
     {
       "name": "allergies-summary-dashboard",
@@ -31,7 +28,6 @@
       "offline": true,
       "order": 6,
       "meta": {
-        "columns": 1,
         "slot": "patient-chart-allergies-dashboard-slot",
         "path": "Allergies"
       }

diff --git a/packages/esm-patient-attachments-app/src/dashboard.meta.ts b/packages/esm-patient-attachments-app/src/dashboard.meta.ts
@@ -1,6 +1,5 @@
 export const dashboardMeta = {
   slot: 'patient-chart-attachments-dashboard-slot',
-  columns: 1,
   path: 'Attachments',
   title: 'Attachments',
 };
diff --git a/packages/esm-patient-attachments-app/src/routes.json b/packages/esm-patient-attachments-app/src/routes.json
@@ -15,8 +15,7 @@
       "slot": "patient-chart-dashboard-slot",
       "meta": {
         "slot": "patient-chart-attachments-dashboard-slot",
-        "path": "Attachments",
-        "columns": 1
+        "path": "Attachments"
       },
       "order": 9
     },
@@ -35,4 +34,4 @@
     }
   ],
   "pages": []
-}
+}
diff --git a/packages/esm-patient-chart-app/src/dashboard.meta.ts b/packages/esm-patient-chart-app/src/dashboard.meta.ts
@@ -1,13 +1,11 @@
 export const summaryDashboardMeta = {
   slot: 'patient-chart-summary-dashboard-slot',
-  columns: 4,
   path: 'Patient Summary',
   title: 'Patient Summary',
 };
 
 export const encountersDashboardMeta = {
   slot: 'patient-chart-encounters-dashboard-slot',
-  columns: 1,
   path: 'Visits',
   title: 'Visits',
 };
diff --git a/packages/esm-patient-chart-app/src/patient-chart/chart-review/chart-review.test.tsx b/packages/esm-patient-chart-app/src/patient-chart/chart-review/chart-review.test.tsx
@@ -63,9 +63,6 @@ describe('ChartReview: ', () => {
               name: 'charts-summary-dashboard',
               meta: {
                 slot: 'patient-chart-summary-dashboard-slot',
-                config: {
-                  columns: 4,
-                },
                 path: 'Patient Summary',
                 title: 'Patient Summary',
               },
@@ -74,9 +71,6 @@ describe('ChartReview: ', () => {
               name: 'test-results-summary-dashboard',
               meta: {
                 slot: 'patient-chart-test-results-dashboard-slot',
-                config: {
-                  columns: 1,
-                },
                 path: 'Test Results',
                 title: 'Test Results',
               },

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
@@ -10,11 +10,7 @@ import {
 import { dashboardPath } from '../../constants';
 import styles from './dashboard-view.scss';
 import { launchPatientWorkspace, launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
-
-function getColumnsLayoutStyle(dashboard: DashboardConfig) {
-  const numberOfColumns = dashboard.columns ?? 2;
-  return '1fr '.repeat(numberOfColumns).trimEnd();
-}
+import classNames from 'classnames';
 
 /**
  * The layout mode dictates the width occuppied by the chart dashboard widgets.
@@ -29,7 +25,6 @@ export interface DashboardConfig {
   slot: string;
   title: string | (() => string | Promise<string>);
   path: string;
-  columns: number;
   hideDashboardTitle?: boolean;
   layoutMode?: LayoutMode;
 }
@@ -45,7 +40,6 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
   const {
     params: { view },
   } = useMatch(dashboardPath);
-  const gridTemplateColumns = getColumnsLayoutStyle(dashboard);
 
   const state = useMemo(
     () => ({
@@ -58,14 +52,6 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
     [patient, patientUuid, view],
   );
 
-  const wrapItem = useCallback(
-    (slot: ReactNode, extension: ExtensionData) => {
-      const { columnSpan = 1 } = widgetMetas[getExtensionNameFromId(extension.extensionId)];
-      return <div style={{ gridColumn: `span ${columnSpan}` }}>{slot}</div>;
-    },
-    [widgetMetas],
-  );
-
   const [resolvedTitle, setResolvedTitle] = useState<string | undefined>();
 
   useEffect(() => {
@@ -82,14 +68,18 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
     <>
       <ExtensionSlot state={state} name="top-of-all-patient-dashboards-slot" />
       {!dashboard.hideDashboardTitle && resolvedTitle && <h1 className={styles.dashboardTitle}>{resolvedTitle}</h1>}
-      <ExtensionSlot
-        key={dashboard.slot}
-        name={dashboard.slot}
-        className={styles.dashboard}
-        style={{ gridTemplateColumns }}
-      >
-        <Extension state={state}>{wrapItem}</Extension>
-      </ExtensionSlot>
+      <div className={styles.dashboardContainer}>
+        <ExtensionSlot key={dashboard.slot} name={dashboard.slot} className={styles.dashboard}>
+          {(extension) => {
+            const { fullWidth = false } = widgetMetas[extension.id];
+            return (
+              <div className={classNames(styles.extension, fullWidth && styles.fullWidth)}>
+                <Extension state={state} className={styles.extensionWrapper} />
+              </div>
+            );
+          }}
+        </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
@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
-@import "../../root.scss";
+@use '@carbon/styles/scss/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use "../../root.scss" as *;
 
 .dashboardTitle {
   @include type.type-style("heading-03");
@@ -9,13 +10,43 @@
 
 .dashboard {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-auto-rows: auto;
-  grid-auto-columns: auto;
-  grid-gap: 25px;
+  grid-gap: 1.3125rem;
   margin: 1.3125rem;
 }
 
+.dashboardContainer {
+  container-name: dashboard;
+  container-type: inline-size;
+}
+
+// Using 1100px here to account for the widget loading area, this ensures it collapses when the
+// workspace opens and lacks sufficient space.
+@container dashboard (width > 1100px){
+  .dashboard {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.extensionWrapper {
+  height: 100%;
+
+  > * {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.extension:only-child {
+  grid-column: 1 / -1;
+}
+
+.fullWidth {
+  grid-column: 1 / -1
+}
+
 :global(.omrs-breakpoint-lt-desktop) .dashboard {
   grid-template-columns: 1fr;
 }

diff --git a/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss b/packages/esm-patient-chart-app/src/patient-chart/patient-chart.scss
@@ -27,6 +27,10 @@ $actionPanelExpandedOffset: $actionNavOffset+$actionPanelOffset;
   max-width: 60rem;
 }
 
+:global(.omrs-breakpoint-gt-small-desktop) .widthContained {
+  max-width: 80rem;
+}
+
 .chartContainer {
   flex: 1;
   display: flex;

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,
@@ -92,7 +91,6 @@
       "component": "encountersSummaryDashboardLink",
       "meta": {
         "slot": "patient-chart-encounters-dashboard-slot",
-        "columns": 1,
         "path": "Visits"
       },
       "order": 5,
@@ -201,11 +199,11 @@
     {
       "name": "current-visit-summary",
       "component": "currentVisitSummary",
-      "meta": {
-        "columnSpan": 4
-      },
       "online": true,
-      "offline": true
+      "offline": true,
+      "meta": {
+        "fullWidth": true
+      }
     },
     {
       "name": "edit-visit-action-button",

diff --git a/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx b/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx
@@ -19,15 +19,6 @@ export const genericDashboardConfigSchema = {
     _default: '',
     _type: Type.String,
   },
-  columns: {
-    _default: 1,
-    _type: Type.Number,
-    _description:
-      'The number of columns that widgets in the dashboard ' +
-      "can use to display themselves in. Note that '2' will not " +
-      'necessarily result in a two-column layout—rather that widgets ' +
-      'will be able to occupy either one or both of those columns.',
-  },
 };
 
 export interface GenericDashboardConfig {

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
@@ -16,7 +16,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/pagination/pagination.scss b/packages/esm-patient-common-lib/src/pagination/pagination.scss
@@ -14,6 +14,7 @@
   background-color: $ui-02;
   padding-left: 1rem;
   align-items: center;
+  border-top: 1px solid $ui-03;
 }
 
 .desktop :global(.cds--pagination) {

diff --git a/packages/esm-patient-common-lib/src/types/index.ts b/packages/esm-patient-common-lib/src/types/index.ts
@@ -2,10 +2,6 @@ import { type OpenmrsResource } from '@openmrs/esm-framework';
 
 export * from './test-results';
 
-export interface DashbardConfig {
-  columns: number;
-}
-
 export interface DashboardLinkConfig {
   path: string;
   title: string;
@@ -14,7 +10,6 @@ export interface DashboardLinkConfig {
 
 export interface DashboardConfig extends DashboardLinkConfig {
   slot: string;
-  config: DashbardConfig;
 }
 
 export interface PatientProgram {

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
@@ -179,7 +179,7 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patientUuid })
         >
           {({ rows, headers, getHeaderProps, getTableProps }) => (
             <>
-              <TableContainer>
+              <TableContainer className={styles.tableContainer}>
                 <Table {...getTableProps()}>
                   <TableHead>
                     <TableRow>

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.scss
@@ -61,3 +61,7 @@
   @include type.type-style('body-compact-01');
   color: $text-02;
 }
+
+.tableContainer {
+  flex: 1;
+}
diff --git a/packages/esm-patient-conditions-app/src/dashboard.meta.ts b/packages/esm-patient-conditions-app/src/dashboard.meta.ts
@@ -1,6 +1,5 @@
 export const dashboardMeta = {
   slot: 'patient-chart-conditions-dashboard-slot',
-  columns: 1,
   path: 'Conditions',
   title: 'Conditions',
 };
diff --git a/packages/esm-patient-conditions-app/src/routes.json b/packages/esm-patient-conditions-app/src/routes.json
@@ -11,15 +11,15 @@
       "component": "conditionsOverview",
       "order": 3,
       "meta": {
-        "columnSpan": 4
+        "fullWidth": false
       }
     },
     {
       "name": "conditions-details-widget",
       "slot": "patient-chart-conditions-dashboard-slot",
       "component": "conditionsDetailedSummary",
       "meta": {
-        "columnSpan": 4
+        "fullWidth": false
       }
     },
     {
@@ -29,7 +29,6 @@
       "order": 7,
       "meta": {
         "slot": "patient-chart-conditions-dashboard-slot",
-        "columns": 1,
         "path": "Conditions"
       }
     },

diff --git a/packages/esm-patient-flags-app/src/routes.json b/packages/esm-patient-flags-app/src/routes.json
@@ -26,12 +26,12 @@
       "name": "patient-flags-overview",
       "slot": "patient-chart-summary-dashboard-slot",
       "component": "flagsOverview",
-      "meta": {
-        "columnSpan": 4
-      },
       "order": 0,
-      "featureFlag": "patientFlags"
+      "featureFlag": "patientFlags",
+      "meta": {
+        "fullWidth": false
+      }
     }
   ],
   "pages": []
-}
+}
diff --git a/packages/esm-patient-immunizations-app/src/dashboard.meta.ts b/packages/esm-patient-immunizations-app/src/dashboard.meta.ts
@@ -1,6 +1,5 @@
 export const dashboardMeta = {
   slot: 'patient-chart-immunizations-dashboard-slot',
-  columns: 1,
   path: 'Immunizations',
   title: 'Immunizations',
 };