Merge remote-tracking branch 'origin/ft-O3-4235' into ft-O3-4235

openmrs · Dec 3, 2024 · 107885a · 107885a
2 parents 18f49d7 + deb8510
commit 107885a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 91 deletions.
diff --git a/packages/esm-patient-list-management-app/src/header/header.component.tsx b/packages/esm-patient-list-management-app/src/header/header.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Add } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import { PageHeader, PageHeaderContent, PatientListsPictogram } from '@openmrs/esm-framework';
+import styles from './header.scss';
+
+interface HeaderProps {
+  handleShowNewListOverlay: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ handleShowNewListOverlay }) => {
+  const { t } = useTranslation();
+  return (
+    <PageHeader className={styles.header}>
+      <PageHeaderContent title={t('patientLists', 'Patient lists')} illustration={<PatientListsPictogram />} />
+      <Button
+        className={styles.newListButton}
+        data-openmrs-role="New List"
+        kind="ghost"
+        iconDescription="Add"
+        renderIcon={(props) => <Add {...props} size={16} />}
+        onClick={handleShowNewListOverlay}
+        size="sm">
+        {t('newList', 'New list')}
+      </Button>
+    </PageHeader>
+  );
+};
+
+export default Header;
diff --git a/packages/esm-patient-list-management-app/src/header/header.scss b/packages/esm-patient-list-management-app/src/header/header.scss
@@ -2,51 +2,13 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.patientListHeader {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: layout.$spacing-12;
-  display: flex;
-  justify-content: space-between;
-}
-
-.leftJustifiedItems {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.rightJustifiedItems {
-  @include type.type-style('body-compact-02');
-  display: flex;
-  flex-direction: column;
-  color: $text-02;
-  padding: layout.$spacing-05 0;
-  justify-content: space-between;
-}
-
-.date {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-right: layout.$spacing-05;
-
-  svg {
-    margin-right: layout.$spacing-03;
-  }
-}
-
-.pageName {
-  @include type.type-style('heading-04');
-}
-
-.pageLabels {
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
+.header {
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
 }
 
 .newListButton {
-  align-self: flex-end;
   width: fit-content;
+  height: fit-content;
+  margin: layout.$spacing-05 0;
 }
diff --git a/packages/esm-patient-list-management-app/src/lists-dashboard/lists-dashboard.component.tsx b/packages/esm-patient-list-management-app/src/lists-dashboard/lists-dashboard.component.tsx
@@ -2,12 +2,11 @@ import React, { useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs, TabList, Button } from '@carbon/react';
-import { Add } from '@carbon/react/icons';
-import { PageHeader, PageHeaderContent, PatientListsPictogram } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList } from '@carbon/react';
 import { type PatientListFilter, PatientListType } from '../api/types';
 import { useAllPatientLists } from '../api/hooks';
 import CreateEditPatientList from '../create-edit-patient-list/create-edit-list.component';
+import Header from '../header/header.component';
 import ListsTable from '../lists-table/lists-table.component';
 import styles from './lists-dashboard.scss';
 
@@ -61,43 +60,33 @@ const ListsDashboard: React.FC = () => {
   return (
     <main className={classnames('omrs-main-content', styles.dashboardContainer)}>
       <section className={styles.dashboard}>
-        <PageHeader>
-          <PageHeaderContent title={t('patientLists', 'Patient lists')} illustration={<PatientListsPictogram />} />
-          <Button
-            className={styles.newListButton}
-            data-openmrs-role="New List"
-            kind="ghost"
-            iconDescription="Add"
-            renderIcon={(props) => <Add {...props} size={16} />}
-            onClick={handleShowNewListOverlay}
-            size="sm">
-            {t('newList', 'New list')}
-          </Button>
-        </PageHeader>
-        <Tabs
-          className={styles.tabs}
-          onChange={({ selectedIndex }) => {
-            setSelectedTab(selectedIndex);
-          }}
-          selectedIndex={selectedTab}
-          tabContentClassName={styles.hiddenTabsContent}>
-          <TabList className={styles.tablist} aria-label="List tabs" contained>
-            <Tab className={styles.tab}>{t('starredLists', 'Starred lists')}</Tab>
-            <Tab className={styles.tab}>{t('systemLists', 'System lists')}</Tab>
-            <Tab className={styles.tab}>{t('myLists', 'My lists')}</Tab>
-            <Tab className={styles.tab}>{t('allLists', 'All lists')}</Tab>
-          </TabList>
-        </Tabs>
-        <div className={styles.listsTableContainer}>
-          <ListsTable
-            error={error}
-            headers={tableHeaders}
-            isLoading={isLoading}
-            key={patientListFilter.label}
-            listType={patientListFilter.label}
-            patientLists={patientLists}
-            refetch={mutate}
-          />
+        <Header handleShowNewListOverlay={handleShowNewListOverlay} />
+        <div className={styles.tabsContainer}>
+          <Tabs
+            className={styles.tabs}
+            onChange={({ selectedIndex }) => {
+              setSelectedTab(selectedIndex);
+            }}
+            selectedIndex={selectedTab}
+            tabContentClassName={styles.hiddenTabsContent}>
+            <TabList className={styles.tablist} aria-label="List tabs" contained>
+              <Tab className={styles.tab}>{t('starredLists', 'Starred lists')}</Tab>
+              <Tab className={styles.tab}>{t('systemLists', 'System lists')}</Tab>
+              <Tab className={styles.tab}>{t('myLists', 'My lists')}</Tab>
+              <Tab className={styles.tab}>{t('allLists', 'All lists')}</Tab>
+            </TabList>
+          </Tabs>
+          <div className={styles.listsTableContainer}>
+            <ListsTable
+              error={error}
+              headers={tableHeaders}
+              isLoading={isLoading}
+              key={patientListFilter.label}
+              listType={patientListFilter.label}
+              patientLists={patientLists}
+              refetch={mutate}
+            />
+          </div>
         </div>
       </section>
       <section>

diff --git a/packages/esm-patient-list-management-app/src/lists-dashboard/lists-dashboard.scss b/packages/esm-patient-list-management-app/src/lists-dashboard/lists-dashboard.scss
@@ -6,26 +6,23 @@
   margin: layout.$spacing-05 0;
 }
 
-.newListButton {
-  width: fit-content;
-  height: fit-content;
-  margin: 1rem 0;
-}
-
 .dashboardContainer {
   display: flex;
   background-color: $ui-02;
 }
 
 .dashboard {
-  height: 100%;
   width: 100%;
   background-color: $ui-02;
   height: calc(100vh - layout.$spacing-09);
 }
 
+.tabsContainer {
+  margin: layout.$spacing-05 0;
+}
+
 .tabs {
-  grid-column: 'span 2';
+  grid-column: span 2;
 }
 
 .tablist {