feat(stock) : save user role scole

src/stock-lookups/stock-lookups.resource.ts

@@ -97,7 +97,7 @@ export function useRoles(filter: ResourceFilterCriteria) {
     Error
   >(apiUrl, openmrsFetch);
   return {
-    items: data.data ? data.data : [],
+    items: data?.data || <PageableResult<Role>>{},
     isLoading,
     isError: error,
   };

src/stock-operations/stock-operations-table.resource.tsx

@@ -14,7 +14,7 @@ export function useStockOperationPages(filter: StockOperationFilter) {
 
   const {
     goTo,
-    results: paginatedQueueEntries,
+    results: paginatedItems,
     currentPage,
   } = usePagination(items.results, currentPageSize);
 
@@ -66,7 +66,7 @@ export function useStockOperationPages(filter: StockOperationFilter) {
     totalItems: items?.totalCount,
     currentPage,
     currentPageSize,
-    paginatedQueueEntries,
+    paginatedItems,
     goTo,
     pageSizes,
     isLoading,

src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -15,3 +15,4 @@ section {
 .modalBody {
   padding-bottom: spacing.$spacing-05;
 }
+

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

@@ -1,52 +1,192 @@
-import React from "react";
+import React, { useMemo } from "react";
+
 import {
-  DataTableSkeleton,
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
   TableToolbarAction,
   TableToolbarMenu,
+  DataTableSkeleton,
   TableToolbarSearch,
 } from "@carbon/react";
+import { isDesktop } from "@openmrs/esm-framework";
 import useStockSourcesPage from "./stock-sources-items-table.resource";
 import { ResourceRepresentation } from "../core/api/api";
-import DataList from "../core/components/table/table.component";
 import AddStockSourceActionButton from "./add-stock-source-button.component";
 import StockSourcesFilter from "./stock-sources-filter/stock-sources-filter.component";
+import styles from "./stock-sources.scss";
+import { useTranslation } from "react-i18next";
 
 function StockSourcesItems() {
-  // get sources
-  const { isLoading, tableHeaders, tableRows } = useStockSourcesPage({
-    v: ResourceRepresentation.Full,
+  const { t } = useTranslation();
+
+  // get sourcess
+  const {
+    items,
+    tableHeaders,
+    currentPage,
+    pageSizes,
+    paginatedItems,
+    goTo,
+    currentPageSize,
+    setPageSize,
+    isLoading,
+  } = useStockSourcesPage({
+    v: ResourceRepresentation.Default,
+    totalCount: true,
   });
 
-  const handleRefresh = () => {
-    // search.refetch()
-  };
+  const tableRows = useMemo(() => {
+    return items?.map((entry) => {
+      return {
+        ...entry,
+        id: entry?.uuid,
+        key: `key-${entry?.uuid}`,
+        uuid: entry?.uuid,
+        name: entry?.name,
+        acronym: entry?.acronym,
+        sourceType: entry?.sourceType?.display,
+      };
+    });
+  }, [items]);
 
-  if (isLoading) {
+  if (isLoading || items.length === 0) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
   return (
-    <DataList columns={tableHeaders} data={tableRows}>
-      {({ onInputChange }) => (
-        <>
-          <TableToolbarSearch persistent onChange={onInputChange} />
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <StockSourcesFilter />
-          </div>
-          <TableToolbarMenu>
-            <TableToolbarAction onClick={handleRefresh}>
-              Refresh
-            </TableToolbarAction>
-          </TableToolbarMenu>
-          <AddStockSourceActionButton />
-        </>
-      )}
-    </DataList>
+    <div className={styles.tableOverride}>
+      <div id="table-tool-bar">
+        <div></div>
+        <div className="right-filters"></div>
+      </div>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        isSortable={true}
+        useZebraStyles={true}
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          onInputChange,
+        }) => (
+          <TableContainer>
+            <TableToolbar
+              style={{
+                position: "static",
+                overflow: "visible",
+                backgroundColor: "color",
+              }}
+            >
+              <TableToolbarContent className={styles.toolbarContent}>
+                <TableToolbarSearch persistent onChange={onInputChange} />
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <StockSourcesFilter />
+                </div>
+                <TableToolbarMenu>
+                  <TableToolbarAction onClick={""}>Refresh</TableToolbarAction>
+                </TableToolbarMenu>
+                <AddStockSourceActionButton />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header: any) =>
+                      header.key !== "details" && (
+                        <TableHeader
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
+                          className={
+                            isDesktop
+                              ? styles.desktopHeader
+                              : styles.tabletHeader
+                          }
+                          key={`${header.key}`}
+                        >
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      )
+                  )}
+                  <TableHeader></TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row: any) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow
+                        className={
+                          isDesktop ? styles.desktopRow : styles.tabletRow
+                        }
+                        {...getRowProps({ row })}
+                      >
+                        {row.cells.map(
+                          (cell: any) =>
+                            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("noSourcesToDisplay", "No Stock sources 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>
+      <Pagination
+        page={currentPage}
+        pageSize={currentPageSize}
+        pageSizes={pageSizes}
+        totalItems={paginatedItems.length}
+        onChange={({ pageSize, page }) => {
+          if (pageSize !== currentPageSize) {
+            setPageSize(pageSize);
+          }
+          if (page !== currentPage) {
+            goTo(page);
+          }
+        }}
+        className={styles.paginationOverride}
+      />
+    </div>
   );
 }
 

src/stock-sources/stock-sources-items-table.resource.ts

@@ -39,20 +39,6 @@ export default function useStockSourcesPage(filter: StockOperationFilter) {
     []
   );
 
-  const tableRows = useMemo(() => {
-    return items.results?.map((entry) => {
-      return {
-        ...entry,
-        id: entry?.uuid,
-        key: `key-${entry?.uuid}`,
-        uuid: entry?.uuid,
-        name: entry?.name,
-        acronym: entry?.acronym,
-        sourceType: entry?.sourceType?.display,
-      };
-    });
-  }, [items.results]);
-
   return {
     items: items.results,
     currentPage,
@@ -64,6 +50,5 @@ export default function useStockSourcesPage(filter: StockOperationFilter) {
     isError,
     setPageSize,
     tableHeaders,
-    tableRows,
   };
 }