@openmrs/esm-stock-management-app 3.0.1-pre.853 → 3.0.1-pre.855

package/src/stock-items/add-stock-item/stock-item-rules/stock-item-rules.component.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useState, useEffect, useMemo } from 'react';
+import { ResourceRepresentation } from '../../../core/api/api';
+import { useStockItemRules } from './stock-item-rules.resource';
 import {
   DataTable,
-  DataTableSkeleton,
   Pagination,
   Table,
   TableBody,
@@ -12,22 +12,22 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
-  TableToolbarAction,
   TableToolbarContent,
+  Tile,
+  TableToolbarAction,
   TableToolbarMenu,
+  DataTableSkeleton,
   TableToolbarSearch,
-  Tile,
 } from '@carbon/react';
-import { isDesktop } from '@openmrs/esm-framework';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
-import { ResourceRepresentation } from '../../../core/api/api';
+import styles from '../../stock-items-table.scss';
 import { type StockRule } from '../../../core/api/types/stockItem/StockRule';
-import { useStockItemRules } from './stock-item-rules.resource';
 import AddStockRuleActionButton from './add-stock-rule-button.component';
-import EditStockRuleActionsMenu from './edit-stock-rule.component';
-import StockRulesDeleteActionMenu from './stock-rules-delete.component';
+import { isDesktop } from '@openmrs/esm-framework';
 import StockRulesFilter from './stock-rules-filter.component';
-import styles from '../../stock-items-table.scss';
+import { useTranslation } from 'react-i18next';
+import StockRulesDeleteActionMenu from './stock-rules-delete.component';
+import EditStockRuleActionsMenu from './edit-stock-rule.component';
 
 interface StockItemRulesProps {
   onSubmit?: () => void;
@@ -76,6 +76,10 @@ const StockItemRules: React.FC<StockItemRulesProps> = ({ stockItemUuid, model, c
 
   return (
     <div className={styles.tableOverride}>
+      <div id="table-tool-bar">
+        <div></div>
+        <div className="right-filters"></div>
+      </div>
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
@@ -101,9 +105,7 @@ const StockItemRules: React.FC<StockItemRulesProps> = ({ stockItemUuid, model, c
                   <StockRulesFilter stockItemUuid={stockItemUuid} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={''}>
-                    {t('refresh', 'Refresh')}
-                  </TableToolbarAction>
+                  <TableToolbarAction onClick={''}>Refresh</TableToolbarAction>
                 </TableToolbarMenu>
                 <AddStockRuleActionButton stockItemUuid={stockItemUuid} />
               </TableToolbarContent>

package/src/stock-items/add-stock-item/stock-item-rules/stock-item-rules.scss

@@ -1,9 +1,9 @@
-@use '@carbon/layout';
-@use '@carbon/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: layout.$spacing-03;
+  margin: spacing.$spacing-03;
 }
 
 .form {
@@ -11,7 +11,3 @@
   gap: 1.5rem;
   padding-top: 1rem;
 }
-
-.toolbarMenuAction {
-  max-width: none;
-}

package/src/stock-items/add-stock-item/transactions/printout/transactions-print-bincard-preview.modal.tsx

@@ -1,11 +1,9 @@
 import React, { useRef } from 'react';
+import TransactionsBincardPrintout from './transactions-bincard-printout.component';
 import { ModalBody, ModalHeader, ModalFooter, Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useReactToPrint } from 'react-to-print';
-import { getCoreTranslation } from '@openmrs/esm-framework';
-import TransactionsBincardPrintout from './transactions-bincard-printout.component';
-
-type TransactionsBincardPrintPreviewModalProps = {
+type Props = {
   onClose?: () => void;
   title?: string;
   columns: any;
@@ -13,13 +11,7 @@ type TransactionsBincardPrintPreviewModalProps = {
   binOrStockCard: number;
 };
 
-const TransactionsBincardPrintPreviewModal: React.FC<TransactionsBincardPrintPreviewModalProps> = ({
-  onClose,
-  title,
-  columns,
-  data,
-  binOrStockCard,
-}) => {
+const TransactionsBincardPrintPreview: React.FC<Props> = ({ onClose, title, columns, data, binOrStockCard }) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
 
@@ -36,14 +28,14 @@ const TransactionsBincardPrintPreviewModal: React.FC<TransactionsBincardPrintPre
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onClose}>
-          {getCoreTranslation('cancel')}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button type="button" onClick={handlePrint}>
-          {getCoreTranslation('print')}
+          {t('print', 'Print')}
         </Button>
       </ModalFooter>
     </>
   );
 };
 
-export default TransactionsBincardPrintPreviewModal;
+export default TransactionsBincardPrintPreview;

package/src/stock-items/add-stock-item/transactions/printout/transactions-print-stockcard-preview.modal.tsx

@@ -1,23 +1,17 @@
 import React, { useRef } from 'react';
+import TransactionsBincardPrintout from './transactions-bincard-printout.component';
+import TransactionsStockcardPrintout from './transactions-stockcard-printout.component';
 import { ModalBody, ModalHeader, ModalFooter, Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useReactToPrint } from 'react-to-print';
-import { getCoreTranslation } from '@openmrs/esm-framework';
-import TransactionsStockcardPrintout from './transactions-stockcard-printout.component';
-
-type TransactionsStockcardPrintPreviewModalProps = {
+type Props = {
   onClose?: () => void;
   title?: string;
   columns: any;
   data: any;
 };
 
-const TransactionsStockcardPrintPreviewModal: React.FC<TransactionsStockcardPrintPreviewModalProps> = ({
-  onClose,
-  title,
-  columns,
-  data,
-}) => {
+const TransactionsStockcardPrintPreview: React.FC<Props> = ({ onClose, title, columns, data }) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
 
@@ -26,7 +20,7 @@ const TransactionsStockcardPrintPreviewModal: React.FC<TransactionsStockcardPrin
   });
   return (
     <>
-      <ModalHeader closeModal={onClose} title={t('printStockCard', 'Print Stock Card')} />
+      <ModalHeader closeModal={onClose} title={t('printbincard', 'Print Stock Card')} />
       <ModalBody>
         <div ref={ref}>
           <TransactionsStockcardPrintout title={title} columns={columns} items={data} />
@@ -34,14 +28,14 @@ const TransactionsStockcardPrintPreviewModal: React.FC<TransactionsStockcardPrin
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onClose}>
-          {getCoreTranslation('cancel')}
+          {t('cancel', 'Cancel')}
         </Button>
         <Button type="button" onClick={handlePrint}>
-          {getCoreTranslation('print')}
+          {t('print', 'Print')}
         </Button>
       </ModalFooter>
     </>
   );
 };
 
-export default TransactionsStockcardPrintPreviewModal;
+export default TransactionsStockcardPrintPreview;

package/src/stock-items/edit-stock-item/edit-stock-item-action-menu.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { launchAddOrEditStockItemWorkspace } from '../stock-item.utils';
+import { launchAddOrStockItemWorkspace } from '../stock-item.utils';
 
 interface EditStockItemActionsMenuProps {
   data: StockItemDTO;
@@ -17,7 +17,7 @@ const EditStockItemActionsMenu: React.FC<EditStockItemActionsMenuProps> = ({ dat
       size="md"
       onClick={() => {
         data.isDrug = !!data.drugUuid;
-        launchAddOrEditStockItemWorkspace(t, data);
+        launchAddOrStockItemWorkspace(t, data);
       }}
       iconDescription={t('editStockItem', 'Edit Stock Item')}
     >

package/src/stock-items/stock-item.utils.tsx

@@ -1,11 +1,13 @@
-import { type TFunction } from 'react-i18next';
 import { launchWorkspace } from '@openmrs/esm-framework';
+import { type TFunction } from 'react-i18next';
 import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
 
-export const launchAddOrEditStockItemWorkspace = (t: TFunction, stockItem?: StockItemDTO) => {
+export const launchAddOrStockItemWorkspace = (t: TFunction, stockItem?: StockItemDTO) => {
   launchWorkspace('stock-item-form-workspace', {
     workspaceTitle: stockItem
-      ? `Edit ${stockItem?.drugName || stockItem.conceptName || ''} ${stockItem.isDrug ? '(Drug)' : '(Non Drug)'}`
+      ? `${t('editItem', 'Edit {{name}}', {
+          name: stockItem?.drugName || stockItem.conceptName || '',
+        })} ${stockItem.isDrug ? '(Drug)' : '(Non Drug)'}`
       : t('addItem', 'Add stock item'),
     stockItem,
   });

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

@@ -1,9 +1,8 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
+  Button,
+  TabPanel,
   DataTable,
   DataTableSkeleton,
-  IconButton,
   Pagination,
   Table,
   TableBatchActions,
@@ -14,25 +13,27 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
-  TableToolbarAction,
   TableToolbarContent,
-  TableToolbarMenu,
   TableToolbarSearch,
-  TabPanel,
   Tile,
+  Tooltip,
+  TableToolbarAction,
+  TableToolbarMenu,
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
-import { handleMutate } from '../utils';
-import { launchAddOrEditStockItemWorkspace } from './stock-item.utils';
+import React, { useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ResourceRepresentation } from '../core/api/api';
-import { useDebounce } from '../core/hooks/debounce-hook';
-import { useStockItemsPages } from './stock-items-table.resource';
 import AddStockItemActionButton from './add-stock-item/add-stock-action-button.component';
-import AddStockItemsBulktImportActionButton from './add-bulk-stock-item/add-stock-items-bulk-import-action-button.component';
-import EditStockItemActionsMenu from './edit-stock-item/edit-stock-item-action-menu.component';
 import FilterStockItems from './components/filter-stock-items/filter-stock-items.component';
+import { launchAddOrStockItemWorkspace } from './stock-item.utils';
+import { useStockItemsPages } from './stock-items-table.resource';
 import styles from './stock-items-table.scss';
+import AddStockItemsBulktImportActionButton from './add-bulk-stock-item/add-stock-items-bulk-import-action-button.component';
+import EditStockItemActionsMenu from './edit-stock-item/edit-stock-item-action-menu.component';
+import { useDebounce } from '../core/hooks/debounce-hook';
+import { handleMutate } from '../utils';
 
 interface StockItemsTableProps {
   from?: string;
@@ -47,17 +48,17 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
   };
 
   const {
-    currentPage,
-    currentPageSize,
-    isDrug,
     isLoading,
     items,
+    totalCount,
+    currentPageSize,
+    setPageSize,
     pageSizes,
+    currentPage,
     setCurrentPage,
+    isDrug,
     setDrug,
-    setPageSize,
     setSearchString,
-    totalCount,
   } = useStockItemsPages(ResourceRepresentation.Full);
 
   const handleSearch = (query: string) => {
@@ -111,8 +112,8 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
       },
       {
         id: 7,
-        header: t('actions', 'Actions'),
         key: 'actions',
+        header: 'Actions',
       },
     ],
     [t],
@@ -137,17 +138,18 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
           ? `${stockItem?.reorderLevel?.toLocaleString()} ${stockItem?.reorderLevelUoMName}`
           : '',
       actions: (
-        <IconButton
-          kind="ghost"
-          label={t('editStockItem', 'Edit stock item')}
-          size="md"
-          onClick={() => {
-            stockItem.isDrug = !!stockItem.drugUuid;
-            launchAddOrEditStockItemWorkspace(t, stockItem);
-          }}
-        >
-          <Edit size={16} />
-        </IconButton>
+        <Tooltip align="bottom" label="Edit Stock Item">
+          <Button
+            kind="ghost"
+            size="md"
+            onClick={() => {
+              stockItem.isDrug = !!stockItem.drugUuid;
+              launchAddOrStockItemWorkspace(t, stockItem);
+            }}
+            iconDescription={t('editStockItem', 'Edit Stock Item')}
+            renderIcon={(props) => <Edit size={16} {...props} />}
+          ></Button>
+        </Tooltip>
       ),
     }));
   }, [items, t]);
@@ -159,6 +161,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
   return (
     <>
       <TabPanel>{t('panelDescription', 'Drugs and other stock items managed by the system.')}</TabPanel>
+
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
@@ -173,25 +176,19 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                 backgroundColor: 'color',
               }}
             >
-              <TableBatchActions {...getBatchActionProps()} />
+              <TableBatchActions {...getBatchActionProps()}></TableBatchActions>
               <TableToolbarContent
                 style={{
                   display: 'flex',
                   alignItems: 'center',
                 }}
               >
-                <TableToolbarSearch
-                  onChange={(e) => handleSearch(e.target.value)}
-                  persistent
-                  placeholder={t('searchStockItems', 'Search stock items')}
-                  value={searchInput}
-                />
+                <TableToolbarSearch persistent value={searchInput} onChange={(e) => handleSearch(e.target.value)} />
+
                 <FilterStockItems filterType={isDrug} changeFilterType={setDrug} />
                 <AddStockItemsBulktImportActionButton />
                 <TableToolbarMenu data-testid="stock-items-menu">
-                  <TableToolbarAction className={styles.toolbarAction} onClick={handleRefresh}>
-                    {t('refresh', 'Refresh')}
-                  </TableToolbarAction>
+                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
                 </TableToolbarMenu>
                 <AddStockItemActionButton />
               </TableToolbarContent>
@@ -215,7 +212,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                         </TableHeader>
                       ),
                   )}
-                  <TableHeader />
+                  <TableHeader></TableHeader>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -223,8 +220,8 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                   return (
                     <React.Fragment key={row.id}>
                       <TableRow
-                        {...getRowProps({ row })}
                         className={isDesktop ? styles.desktopRow : styles.tabletRow}
+                        {...getRowProps({ row })}
                         key={row.id}
                       >
                         {row.cells.map(
@@ -241,7 +238,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
               <div className={styles.tileContainer}>
                 <Tile className={styles.tile}>
                   <div className={styles.tileContent}>
-                    <p className={styles.content}>{t('noStockItemsToDisplay', 'No stock items to display')}</p>
+                    <p className={styles.content}>{t('noItemsToDisplay', 'No Stock Items to display')}</p>
                     <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                   </div>
                 </Tile>
@@ -250,16 +247,17 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
           </TableContainer>
         )}
       ></DataTable>
+
       <Pagination
-        className={styles.paginationOverride}
-        onChange={({ page, pageSize }) => {
-          setCurrentPage(page);
-          setPageSize(pageSize);
-        }}
         page={currentPage}
         pageSize={currentPageSize}
         pageSizes={pageSizes}
         totalItems={totalCount}
+        onChange={({ page, pageSize }) => {
+          setCurrentPage(page);
+          setPageSize(pageSize);
+        }}
+        className={styles.paginationOverride}
       />
     </>
   );

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

@@ -1,8 +1,8 @@
+import { type StockItemFilter, useStockItems } from './stock-items.resource';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { usePagination } from '@openmrs/esm-framework';
-import { type StockItemFilter, useStockItems } from './stock-items.resource';
 import { ResourceRepresentation } from '../core/api/api';
+import { usePagination } from '@openmrs/esm-framework';
 
 export function useStockItemsPages(v?: ResourceRepresentation) {
   const { t } = useTranslation();

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

@@ -1,5 +1,5 @@
 @use '@carbon/layout';
-@use '@carbon/type';
+@use '@carbon/styles/scss/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
@@ -93,7 +93,3 @@
     z-index: 1;
   }
 }
-
-.toolbarAction {
-  max-width: none;
-}