(feat) O3-4198: Use shared page header component in bed management pa…

…ge header (#1382) * feat: use PageHeader component instead of custom header component * replace Header route prop with title prop * Tweaks --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Nov 28, 2024 · de0c9c7 · de0c9c7
1 parent d75bb3a
commit de0c9c7
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 87 deletions.
diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx
@@ -249,7 +249,7 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                     defaultValue={selectedBedType}
                     id="bedType"
                     invalidText={t('required', 'Required')}
-                    labelText={t('bedType', 'Bed type')}
+                    labelText={t('bedTypes', 'Bed types')}
                     {...field}>
                     <SelectItem text={t('chooseBedtype', 'Choose a bed type')} />
                     {availableBedTypes.map((bedType, index) => (

diff --git a/...ages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx b/...ages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx
@@ -29,7 +29,7 @@ import styles from './bed-administration-table.scss';
 
 const BedAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('wardAllocation', 'Ward Allocation');
+  const headerTitle = t('wardAllocation', 'Ward allocation');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
@@ -131,7 +131,7 @@ const BedAdministrationTable: React.FC = () => {
   if (isLoadingBedsGroupedByLocation && !bedsGroupedByLocation.length) {
     return (
       <>
-        <Header route="Ward Allocation" />
+        <Header title={t('wardAllocation', 'Ward allocation')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -142,7 +142,7 @@ const BedAdministrationTable: React.FC = () => {
   if (errorFetchingBedsGroupedByLocation) {
     return (
       <>
-        <Header route="Ward Allocation" />
+        <Header title={t('wardAllocation', 'Ward allocation')} />
         <div className={styles.widgetCard}>
           <ErrorState error={errorFetchingBedsGroupedByLocation} headerTitle={headerTitle} />
         </div>
@@ -152,7 +152,7 @@ const BedAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Ward Allocation" />
+      <Header title={t('wardAllocation', 'Ward allocation')} />
       <div className={styles.flexContainer}>
         {results?.length ? (
           <div className={styles.filterContainer}>

diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx
@@ -27,7 +27,7 @@ import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTagAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedTag', 'Bed tag');
+  const headerTitle = t('bedTags', 'Bed tags');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
@@ -43,7 +43,7 @@ const BedTagAdministrationTable: React.FC = () => {
 
   const tableHeaders = [
     {
-      header: t('ids', 'Id'),
+      header: t('ids', 'ID'),
       key: 'ids',
     },
     {
@@ -85,7 +85,7 @@ const BedTagAdministrationTable: React.FC = () => {
   if (isBedDataLoading || isLoadingBedTags) {
     return (
       <>
-        <Header route="Bed Tag" />
+        <Header title={t('bedTags', 'Bed tags')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -96,7 +96,7 @@ const BedTagAdministrationTable: React.FC = () => {
   if (errorLoadingBedTags) {
     return (
       <>
-        <Header route="Bed Tag" />
+        <Header title={t('bedTags', 'Bed tags')} />
         <div className={styles.widgetCard}>
           <ErrorState error={errorLoadingBedTags} headerTitle={headerTitle} />
         </div>
@@ -106,7 +106,7 @@ const BedTagAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Bed Tag" />
+      <Header title={t('bedTags', 'Bed tags')} />
 
       <div className={styles.widgetCard}>
         {showBedTagsModal ? (

diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx
@@ -88,7 +88,7 @@ const BedTagsAdministrationForm: React.FC<BedTagAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedTag"
-                      labelText={t('bedTag', 'Bed tag')}
+                      labelText={t('bedTags', 'Bed tags')}
                       placeholder={t('bedTagPlaceholder', '')}
                       invalidText={fieldState.error?.message}
                       {...field}

diff --git a/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-type/bed-type-administration-table.component.tsx
@@ -28,7 +28,7 @@ import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTypeAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedType', 'Bed type');
+  const headerTitle = t('bedTypes', 'Bed types');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
@@ -91,7 +91,7 @@ const BedTypeAdministrationTable: React.FC = () => {
   if (isLoadingBedTypes) {
     return (
       <>
-        <Header route="Bed Type" />
+        <Header title={t('bedTypes', 'Bed types')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -102,7 +102,7 @@ const BedTypeAdministrationTable: React.FC = () => {
   if (errorLoadingBedTypes) {
     return (
       <>
-        <Header route="Bed Type" />
+        <Header title={t('bedTypes', 'Bed types')} />
         <div className={styles.widgetCard}>
           <ErrorState error={errorLoadingBedTypes} headerTitle={headerTitle} />
         </div>
@@ -112,7 +112,7 @@ const BedTypeAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Bed Type" />
+      <Header title={t('bedTypes', 'Bed types')} />
 
       <div className={styles.widgetCard}>
         {showBedTypeModal ? (

diff --git a/packages/esm-bed-management-app/src/header/header.component.tsx b/packages/esm-bed-management-app/src/header/header.component.tsx
@@ -1,31 +1,36 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
-import { ConfigurableLink, formatDate, useSession } from '@openmrs/esm-framework';
-import Illustration from './illustration.component';
+import {
+  ConfigurableLink,
+  formatDate,
+  InPatientPictogram,
+  PageHeader,
+  PageHeaderContent,
+  useSession,
+} from '@openmrs/esm-framework';
 import styles from './header.scss';
 
 type HeaderProps = {
-  route: string;
-  headerTitle?: string;
+  title: string;
 };
 
-const Header: React.FC<HeaderProps> = ({ route, headerTitle }) => {
+const Header: React.FC<HeaderProps> = ({ title }) => {
   const { t } = useTranslation();
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
-    <div className={styles.header}>
-      <div className={styles.leftJustifiedItems}>
-        <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
-          <Illustration />
-        </ConfigurableLink>
-        <div className={styles.pageLabels}>
-          <p>{t(headerTitle ?? 'bedManagement', headerTitle ?? 'Bed management')}</p>
-          <p className={styles.pageName}>{route}</p>
-        </div>
-      </div>
+    <PageHeader className={styles.header}>
+      <PageHeaderContent
+        illustration={
+          <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
+            <InPatientPictogram className={styles.inPatientPictogram} />
+          </ConfigurableLink>
+        }
+        title={title}
+        className={styles.leftJustifiedItems}
+      />
       <div className={styles.rightJustifiedItems}>
         <div className={styles.dateAndLocation}>
           <Location size={16} />
@@ -35,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ route, headerTitle }) => {
           <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
-    </div>
+    </PageHeader>
   );
 };
 

diff --git a/packages/esm-bed-management-app/src/header/header.scss b/packages/esm-bed-management-app/src/header/header.scss
@@ -18,6 +18,21 @@
   flex-direction: row;
   align-items: center;
   cursor: pointer;
+
+  & > div:nth-child(2) {
+    margin: layout.$spacing-05;
+
+    & > p:last-child {
+      white-space: nowrap;
+      @include type.type-style('heading-04');
+    }
+  }
+}
+
+.inPatientPictogram {
+  width: 4.5rem;
+  height: 4.5rem;
+  fill: var(--brand-03);
 }
 
 .rightJustifiedItems {
@@ -27,19 +42,6 @@
   padding-top: layout.$spacing-04;
 }
 
-.pageName {
-  white-space: nowrap;
-  @include type.type-style('heading-04');
-}
-
-.pageLabels {
-  margin: layout.$spacing-05;
-}
-
-.middot {
-  margin: 0 layout.$spacing-03;
-}
-
 .dateAndLocation {
   display: flex;
   justify-content: flex-end;
@@ -54,19 +56,3 @@
 .middot {
   margin: 0 layout.$spacing-03;
 }
-
-.view {
-  @include type.type-style('label-01');
-}
-
-svg.iconOverrides {
-  width: 4.5rem !important;
-  height: 4.5rem !important;
-  fill: var(--brand-03);
-}
-
-.svgContainer svg {
-  width: 4.5rem;
-  height: 4.5rem;
-  fill: var(--brand-03);
-}
diff --git a/packages/esm-bed-management-app/src/header/illustration.component.tsx b/packages/esm-bed-management-app/src/header/illustration.component.tsx
diff --git a/packages/esm-bed-management-app/src/home.component.tsx b/packages/esm-bed-management-app/src/home.component.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import BedManagementSummary from './summary/summary.component';
 import Header from './header/header.component';
 import styles from './home.scss';
 
 const Home: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <section className={styles.section}>
-      <Header route="Summary" />
+      <Header title={t('bedManagement', 'Bed management')} />
       <BedManagementSummary />
     </section>
   );

diff --git a/packages/esm-bed-management-app/src/index.ts b/packages/esm-bed-management-app/src/index.ts
@@ -22,31 +22,35 @@ export const adminCardLink = getAsyncLifecycle(() => import('./admin-card-link.c
 export const summaryLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'bed-management',
+    // t('summary', 'Summary')
     title: 'Summary',
   }),
   options,
 );
 
 export const adminLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'administration',
-    title: 'Ward Allocation',
+    name: 'bed-administration',
+    // t('wardAllocation', 'Ward allocation')
+    title: 'Ward allocation',
   }),
   options,
 );
 
 export const bedTypeLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'bed-type',
-    title: 'Bed Type',
+    name: 'bed-types',
+    // t('bedTypes', 'Bed types')
+    title: 'Bed types',
   }),
   options,
 );
 
 export const bedTagLeftPanelLink = getSyncLifecycle(
   createLeftPanelLink({
-    name: 'bed-tag',
-    title: 'Bed Tag',
+    name: 'bed-tags',
+    // t('bedTags', 'Bed tags')
+    title: 'Bed tags',
   }),
   options,
 );
diff --git a/packages/esm-bed-management-app/src/root.component.tsx b/packages/esm-bed-management-app/src/root.component.tsx
@@ -28,9 +28,9 @@ const Root: React.FC = () => {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/location/:location" element={<WardWithBeds />} />
-          <Route path="/administration" element={<BedAdministrationTable />} />
-          <Route path="/bed-tag" element={<BedTagAdministrationTable />} />
-          <Route path="/bed-type" element={<BedTypeAdministrationTable />} />
+          <Route path="/bed-administration" element={<BedAdministrationTable />} />
+          <Route path="/bed-tags" element={<BedTagAdministrationTable />} />
+          <Route path="/bed-types" element={<BedTypeAdministrationTable />} />
         </Routes>
       </main>
     </BrowserRouter>

diff --git a/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx b/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx
@@ -93,7 +93,7 @@ const WardWithBeds: React.FC = () => {
 
   return (
     <>
-      <Header route={name ? name : '--'} />
+      <Header title={name ? name : '--'} />
       {isLoadingBeds && (
         <div className={styles.container}>
           <DataTableSkeleton role="progressbar" zebra />

diff --git a/packages/esm-bed-management-app/translations/en.json b/packages/esm-bed-management-app/translations/en.json
@@ -12,16 +12,16 @@
   "bedName": "Bed name",
   "bedNumber": "Bed number",
   "beds": "Beds",
-  "bedTag": "Bed tag",
   "bedTagCreated": "Bed tag created",
   "bedTagCreatedSuccessfully": "",
   "bedTagPlaceholder": "",
+  "bedTags": "Bed tags",
   "bedTagUpdated": "Bed tag updated",
   "bedTagUpdatedSuccessfully": "",
-  "bedType": "Bed type",
   "bedTypeCreated": "Bed type created",
   "bedTypeCreatedSuccessfully": "",
   "bedTypePlaceholder": "",
+  "bedTypes": "Bed types",
   "bedTypeUpdated": "Bed type updated",
   "bedTypeUpdatedSuccessfully": "",
   "bedUpdated": "Bed updated",
@@ -60,7 +60,8 @@
   "required": "Required",
   "save": "Save",
   "selectBedLocation": "Select a bed location",
+  "summary": "Summary",
   "viewBeds": "View beds",
-  "wardAllocation": "Ward Allocation",
+  "wardAllocation": "Ward allocation",
   "yes": "Yes"
 }