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

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

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { ResourceRepresentation } from '../../../core/api/api';
-import { useStockItemRules } from './stock-item-rules.resource';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   DataTable,
+  DataTableSkeleton,
   Pagination,
   Table,
   TableBody,
@@ -12,22 +12,22 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
-  TableToolbarContent,
-  Tile,
   TableToolbarAction,
+  TableToolbarContent,
   TableToolbarMenu,
-  DataTableSkeleton,
   TableToolbarSearch,
+  Tile,
 } from '@carbon/react';
+import { isDesktop } from '@openmrs/esm-framework';
 import { formatDisplayDate } from '../../../core/utils/datetimeUtils';
-import styles from '../../stock-items-table.scss';
+import { ResourceRepresentation } from '../../../core/api/api';
 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 { isDesktop } from '@openmrs/esm-framework';
-import StockRulesFilter from './stock-rules-filter.component';
-import { useTranslation } from 'react-i18next';
-import StockRulesDeleteActionMenu from './stock-rules-delete.component';
 import EditStockRuleActionsMenu from './edit-stock-rule.component';
+import StockRulesDeleteActionMenu from './stock-rules-delete.component';
+import StockRulesFilter from './stock-rules-filter.component';
+import styles from '../../stock-items-table.scss';
 
 interface StockItemRulesProps {
   onSubmit?: () => void;
@@ -76,10 +76,6 @@ 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}
@@ -105,7 +101,9 @@ const StockItemRules: React.FC<StockItemRulesProps> = ({ stockItemUuid, model, c
                   <StockRulesFilter stockItemUuid={stockItemUuid} />
                 </div>
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={''}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarMenuAction} onClick={''}>
+                    {t('refresh', '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/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .form {
@@ -11,3 +11,7 @@
   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,9 +1,11 @@
 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';
-type Props = {
+import { getCoreTranslation } from '@openmrs/esm-framework';
+import TransactionsBincardPrintout from './transactions-bincard-printout.component';
+
+type TransactionsBincardPrintPreviewModalProps = {
   onClose?: () => void;
   title?: string;
   columns: any;
@@ -11,7 +13,13 @@ type Props = {
   binOrStockCard: number;
 };
 
-const TransactionsBincardPrintPreview: React.FC<Props> = ({ onClose, title, columns, data, binOrStockCard }) => {
+const TransactionsBincardPrintPreviewModal: React.FC<TransactionsBincardPrintPreviewModalProps> = ({
+  onClose,
+  title,
+  columns,
+  data,
+  binOrStockCard,
+}) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
 
@@ -28,14 +36,14 @@ const TransactionsBincardPrintPreview: React.FC<Props> = ({ onClose, title, colu
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onClose}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button type="button" onClick={handlePrint}>
-          {t('print', 'Print')}
+          {getCoreTranslation('print')}
         </Button>
       </ModalFooter>
     </>
   );
 };
 
-export default TransactionsBincardPrintPreview;
+export default TransactionsBincardPrintPreviewModal;

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

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

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 { launchAddOrStockItemWorkspace } from '../stock-item.utils';
+import { launchAddOrEditStockItemWorkspace } 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;
-        launchAddOrStockItemWorkspace(t, data);
+        launchAddOrEditStockItemWorkspace(t, data);
       }}
       iconDescription={t('editStockItem', 'Edit Stock Item')}
     >

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

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

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 { ResourceRepresentation } from '../core/api/api';
 import { usePagination } from '@openmrs/esm-framework';
+import { type StockItemFilter, useStockItems } from './stock-items.resource';
+import { ResourceRepresentation } from '../core/api/api';
 
 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/styles/scss/type';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
@@ -93,3 +93,7 @@
     z-index: 1;
   }
 }
+
+.toolbarAction {
+  max-width: none;
+}