ft : show intable empty state (#31)

* ft : show intable empty state

* fix : items search

* fix: add operation edit

.gitignore

@@ -82,6 +82,7 @@ dist/
 
 # Turborepo
 .turbo
+/*.idea/
 /.idea/inspectionProfiles/Project_Default.xml
 /.idea/.gitignore
 /.idea/modules.xml

src/root.component.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const swrConfiguration = {
+  // Maximum number of retries when the backend returns an error
+  errorRetryCount: 3,
+};
+
+const Root: React.FC = () => {
+  return <></>;
+};
+
+export default Root;

src/stock-items/stock-items-table.component.tsx

@@ -96,120 +96,122 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (items?.length) {
-    return (
-      <>
-        <DataTable
-          rows={tableRows}
-          headers={tableHeaders}
-          isSortable
-          useZebraStyles
-          render={({
-            rows,
-            headers,
-            getHeaderProps,
-            getTableProps,
-            getRowProps,
-            getBatchActionProps,
-          }) => (
-            <TableContainer>
-              <TableToolbar
+  return (
+    <>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        isSortable
+        useZebraStyles
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          getBatchActionProps,
+          onInputChange,
+        }) => (
+          <TableContainer>
+            <TableToolbar
+              style={{
+                position: "static",
+                overflow: "visible",
+                backgroundColor: "color",
+              }}
+            >
+              <TableBatchActions {...getBatchActionProps()}></TableBatchActions>
+              <TableToolbarContent
                 style={{
-                  position: "static",
-                  overflow: "visible",
-                  backgroundColor: "color",
+                  display: "flex",
+                  alignItems: "center",
                 }}
               >
-                <TableBatchActions
-                  {...getBatchActionProps()}
-                ></TableBatchActions>
-                <TableToolbarContent
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                  }}
-                >
-                  <TableToolbarSearch persistent onChange={setSearchString} />
-                  <FilterStockItems
-                    filterType={isDrug}
-                    changeFilterType={setDrug}
-                  />
-                  <AddStockItemActionButton />
-                </TableToolbarContent>
-              </TableToolbar>
-              <Table {...getTableProps()}>
-                <TableHead>
-                  <TableRow>
-                    {headers.map(
-                      (header) =>
-                        header.key !== "details" && (
-                          <TableHeader
-                            {...getHeaderProps({
-                              header,
-                              isSortable: header.isSortable,
-                            })}
-                            className={
-                              isDesktop
-                                ? styles.desktopHeader
-                                : styles.tabletHeader
-                            }
-                            key={`${header.key}`}
-                            isSortable={header.key !== "name"}
-                          >
-                            {header.header?.content ?? header.header}
-                          </TableHeader>
-                        )
-                    )}
-                    <TableHeader></TableHeader>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {rows.map((row) => {
-                    return (
-                      <React.Fragment key={row.id}>
-                        <TableRow
+                <TableToolbarSearch persistent onChange={onInputChange} />
+                <FilterStockItems
+                  filterType={isDrug}
+                  changeFilterType={setDrug}
+                />
+                <AddStockItemActionButton />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header) =>
+                      header.key !== "details" && (
+                        <TableHeader
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
                           className={
-                            isDesktop ? styles.desktopRow : styles.tabletRow
+                            isDesktop
+                              ? styles.desktopHeader
+                              : styles.tabletHeader
                           }
-                          {...getRowProps({ row })}
-                          key={row.id}
+                          key={`${header.key}`}
+                          isSortable={header.key !== "name"}
                         >
-                          {row.cells.map(
-                            (cell) =>
-                              cell?.info?.header !== "details" && (
-                                <TableCell key={cell.id}>
-                                  {cell.value}
-                                </TableCell>
-                              )
-                          )}
-                        </TableRow>
-                      </React.Fragment>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          )}
-        ></DataTable>
-
-        <Pagination
-          page={currentPage}
-          pageSize={currentPageSize}
-          pageSizes={pageSizes}
-          totalItems={totalCount}
-          onChange={({ page }) => setCurrentPage(page)}
-          className={styles.paginationOverride}
-        />
-      </>
-    );
-  }
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      )
+                  )}
+                  <TableHeader></TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow
+                        className={
+                          isDesktop ? styles.desktopRow : styles.tabletRow
+                        }
+                        {...getRowProps({ row })}
+                        key={row.id}
+                      >
+                        {row.cells.map(
+                          (cell) =>
+                            cell?.info?.header !== "details" && (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            )
+                        )}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t("noItemsToDisplay", "No Stock Items to display")}
+                    </p>
+                    <p className={styles.helper}>
+                      {t("checkFilters", "Check the filters above")}
+                    </p>
+                  </div>
+                  <p className={styles.separator}>{t("or", "or")}</p>
+                </Tile>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      ></DataTable>
 
-  return (
-    <div className={styles.tileContainer}>
-      <Tile className={styles.tile}>
-        <p className={styles.content}>No stock items to display</p>
-      </Tile>
-    </div>
+      <Pagination
+        page={currentPage}
+        pageSize={currentPageSize}
+        pageSizes={pageSizes}
+        totalItems={totalCount}
+        onChange={({ page }) => setCurrentPage(page)}
+        className={styles.paginationOverride}
+      />
+    </>
   );
 };
 

src/stock-items/stock-items-table.scss

@@ -1,26 +1,66 @@
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.tileContainer {
-  background-color: $ui-02;
-  border-top: 1px solid $ui-03;
-  padding: 5rem 0;
-}
-
-.tile {
-  margin: auto;
-  width: fit-content;
-  background: transparent;
-}
-
-.tileContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+@import '../root.scss';
+.headerBtnContainer {
+    background-color: $ui-background;
+    padding: spacing.$spacing-05;
+    text-align: right;
+  }
 
-.tableOverride {
-  :global(.cds--table-sort__description) {
-    display: none;
+  .tileContainer {
+    background-color: $ui-02;
+    border-top: 1px solid $ui-03;
+    padding: 5rem 0;
+  }
+
+  .tile {
+    margin: auto;
+    width: fit-content;
+  }
+
+  .tileContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .content {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+    margin-bottom: 0.5rem;
+  }
+
+  .helper {
+    @include type.type-style('body-compact-01');
+    color: $text-02;
   }
-}
+
+  .separator {
+    @include type.type-style('body-compact-02');
+    color: $text-02;
+    width: 80%;
+    margin: 1.5rem auto;
+    overflow: hidden;
+    text-align: center;
+
+    &::before,
+    &::after {
+      background-color: $text-03;
+      content: '';
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 50%;
+    }
+
+    &::before {
+      right: 0.5rem;
+      margin-left: -50%;
+    }
+
+    &::after {
+      left: 0.5rem;
+      margin-right: -50%;
+    }
+  }