Restore original searchbox behaviour

openmrs · Oct 29, 2023 · 7361d50 · 7361d50
1 parent 3571f35
commit 7361d50
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 70 deletions.
diff --git a/packages/esm-patient-list-app/src/list-details-table/list-details-table.scss b/packages/esm-patient-list-app/src/list-details-table/list-details-table.scss
@@ -126,9 +126,10 @@ div#table-tool-bar {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-07 !important;
+  padding: spacing.$spacing-09 !important;
   text-align: center;
   border: 1px solid $ui-03;
+  background-color: white;
 }
 
 .filterEmptyStateTile {

diff --git a/packages/esm-patient-list-app/src/lists-table/lists-table.component.tsx b/packages/esm-patient-list-app/src/lists-table/lists-table.component.tsx
@@ -1,12 +1,14 @@
-import React, { type CSSProperties, useCallback, useState, useMemo } from 'react';
+import React, { type CSSProperties, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import orderBy from 'lodash-es/orderBy';
 import {
   DataTable,
   DataTableSkeleton,
+  InlineLoading,
   Layer,
   Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
@@ -48,6 +50,7 @@ interface PatientListTableProps {
   style?: CSSProperties;
   patientLists: Array<PatientList>;
   isLoading?: boolean;
+  isValidating?: boolean;
   headers?: Array<DataTableHeader>;
   refetch?(): void;
   listType: string;
@@ -59,6 +62,7 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   style,
   patientLists = [],
   isLoading = false,
+  isValidating,
   headers,
   refetch,
   listType,
@@ -140,20 +144,23 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   if (patientLists.length) {
     return (
       <>
+        <div id="tableToolBar" className={styles.searchContainer}>
+          <div>{isValidating && <InlineLoading />}</div>
+          <Layer>
+            <Search
+              className={styles.searchbox}
+              id="patient-list-search"
+              labelText=""
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+              placeholder={t('searchThisList', 'Search this list')}
+              size={responsiveSize}
+              value={searchTerm}
+            />
+          </Layer>
+        </div>
         <DataTable rows={tableRows} headers={headers} size={responsiveSize} sortRow={customSortRow}>
           {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
-            <TableContainer className={styles.tableContainer} {...getTableContainerProps()}>
-              <div className={styles.toolbarWrapper}>
-                <TableToolbar className={styles.tableToolbar} size={responsiveSize}>
-                  <TableToolbarContent className={styles.headerContainer}>
-                    <TableToolbarSearch
-                      className={styles.searchbox}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-                      placeholder={t('searchThisList', 'Search this list')}
-                    />
-                  </TableToolbarContent>
-                </TableToolbar>
-              </div>
+            <TableContainer {...getTableContainerProps()}>
               <Table
                 className={styles.table}
                 {...getTableProps()}

diff --git a/packages/esm-patient-list-app/src/lists-table/lists-table.scss b/packages/esm-patient-list-app/src/lists-table/lists-table.scss
@@ -3,61 +3,6 @@
 @use '@carbon/styles/scss/type';
 @import '../style.scss';
 
-.tableContainer {
-  padding: 0;
-
-  :global(.cds--data-table-content) {
-    border: 1px solid colors.$gray-20;
-    border-bottom: none;
-    overflow: visible;
-  }
-
-  :global(.cds--table-toolbar) {
-    position: relative;
-    height: 2rem;
-    min-height: 0rem;
-    overflow: visible;
-    top: 0;
-  }
-
-  &:global(.cds--data-table-container) {
-    padding-top: 0rem;
-  }
-}
-
-.toolbarWrapper {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .toolbarWrapper {
-    height: spacing.$spacing-09;
-  }
-}
-
-:global(.omrs-breakpoint-gt-tablet) {
-  .toolbarWrapper {
-    height: spacing.$spacing-07;
-  }
-}
-
-.tableToolbar {
-  width: 20%;
-  min-width: 12.5rem;
-}
-
-.headerContainer {
-  background-color: colors.$gray-10;
-}
-
-.searchbox {
-  input {
-    outline: 2px solid colors.$orange-40 !important;
-  }
-}
-
 .table {
   tr {
     &:last-of-type {
@@ -105,9 +50,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-07;
+  padding: spacing.$spacing-09;
   text-align: center;
   border: 1px solid $ui-03;
+  background-color: white;
 }
 
 .filterEmptyStateTile {
@@ -124,3 +70,22 @@
   @include type.type-style('body-compact-01');
   color: $text-02;
 }
+
+// Patient List Table
+.searchContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.searchContainer > div {
+  align-self: center;
+  justify-self: flex-end;
+}
+
+.searchbox {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}