@openmrs/esm-stock-management-app 1.0.1-pre.666 → 1.0.1-pre.680

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

@@ -20,26 +20,15 @@ import {
   TableToolbarContent,
   TableToolbarSearch,
   Tile,
-  StructuredListHead,
-  StructuredListRow,
-  StructuredListCell,
-  StructuredListBody,
   DatePickerInput,
   DatePicker,
   TableToolbarMenu,
   TableToolbarAction,
-  Button,
   InlineLoading,
 } from '@carbon/react';
-import { ArrowRight, Edit } from '@carbon/react/icons';
+import { ArrowRight } from '@carbon/react/icons';
 import { formatDisplayDate } from '../core/utils/datetimeUtils';
-import {
-  StockOperationStatusCancelled,
-  StockOperationStatusNew,
-  StockOperationStatusRejected,
-  StockOperationStatusReturned,
-} from '../core/api/types/stockOperation/StockOperationStatus';
-import { isDesktop, restBaseUrl, useConfig, showModal } from '@openmrs/esm-framework';
+import { isDesktop, restBaseUrl } from '@openmrs/esm-framework';
 import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
 import { launchAddOrEditDialog } from './stock-operation.utils';
 import { initialStockOperationValue } from '../core/utils/utils';
@@ -51,6 +40,7 @@ import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, StockFilters } from '..
 import { handleMutate } from '../utils';
 
 import styles from './stock-operations-table.scss';
+import StockOperationStatus from './add-stock-operation/stock-operation-status.component';
 
 interface StockOperationsTableProps {
   status?: string;
@@ -164,94 +154,15 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
       destination: `${stockOperation?.destinationName ?? ''}`,
       location: (
         <>
-          {' '}
-          {stockOperation?.sourceName ?? ''}{' '}
+          {stockOperation?.sourceName ?? ''}
           {stockOperation?.sourceName && stockOperation?.destinationName ? <ArrowRight size={16} /> : ''}{' '}
-          {stockOperation?.destinationName ?? ''}{' '}
+          {stockOperation?.destinationName ?? ''}
         </>
       ),
       responsiblePerson: `${
         stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
       } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
       operationDate: formatDisplayDate(stockOperation?.operationDate),
-      details: (
-        <div className="tbl-expand-display-fields">
-          <div className="field-label">
-            <span className="field-title"> {t('created', 'Created')}</span>
-            <span className="field-desc">
-              <span className="action-date">{formatDisplayDate(stockOperation?.dateCreated)}</span> {t('by', 'By')}
-              <span className="action-by">
-                {stockOperation.creatorFamilyName ?? ''} {stockOperation.creatorGivenName ?? ''}
-              </span>
-            </span>
-          </div>
-          {stockOperation?.status !== StockOperationStatusNew &&
-            stockOperation?.status !== StockOperationStatusReturned &&
-            stockOperation?.submittedDate && (
-              <div className="field-label">
-                <span className="field-title">{t('submitted', 'Submitted')}</span>
-                <span className="field-desc">
-                  <span className="action-date">{formatDisplayDate(stockOperation?.submittedDate)}</span>{' '}
-                  {t('by', 'By')}
-                  <span className="action-by">
-                    {stockOperation.submittedByFamilyName ?? ''} {stockOperation.submittedByGivenName ?? ''}
-                  </span>
-                </span>
-              </div>
-            )}
-
-          {stockOperation?.completedDate && (
-            <div className="field-label">
-              <span className="field-title">{t('completed', 'Completed')}</span>
-              <span className="field-desc">
-                <span className="action-date">{formatDisplayDate(stockOperation?.completedDate)}</span> {t('by', 'By')}
-                <span className="action-by">
-                  {stockOperation.completedByFamilyName ?? ''} {stockOperation.completedByGivenName ?? ''}
-                </span>
-              </span>
-            </div>
-          )}
-
-          {stockOperation?.status === StockOperationStatusCancelled && (
-            <div className="field-label">
-              <span className="field-title"> {t('cancelled', 'Cancelled')}</span>
-              <span className="field-desc">
-                <span className="action-date">{formatDisplayDate(stockOperation?.cancelledDate)}</span> {t('by', 'By')}
-                <span className="action-by">
-                  {stockOperation.cancelledByFamilyName ?? ''} {stockOperation.cancelledByGivenName ?? ''}
-                </span>
-                <p>{stockOperation.cancelReason}</p>
-              </span>
-            </div>
-          )}
-
-          {stockOperation?.status === StockOperationStatusRejected && (
-            <div className="field-label">
-              <span className="field-title">Rejected</span>
-              <span className="field-desc">
-                <span className="action-date">{formatDisplayDate(stockOperation?.rejectedDate)}</span> {t('by', 'By')}
-                <span className="action-by">
-                  {stockOperation.rejectedByFamilyName ?? ''} {stockOperation.rejectedByGivenName ?? ''}
-                </span>
-                <p>{stockOperation.rejectionReason}</p>
-              </span>
-            </div>
-          )}
-
-          {stockOperation?.status === StockOperationStatusReturned && (
-            <div className="field-label">
-              <span className="field-title">Returned</span>
-              <span className="field-desc">
-                <span className="action-date">{formatDisplayDate(stockOperation?.returnedDate)}</span> By
-                <span className="action-by">
-                  {stockOperation.returnedByFamilyName ?? ''} {stockOperation.returnedByGivenName ?? ''}
-                </span>
-                <p>{stockOperation.returnReason}</p>
-              </span>
-            </div>
-          )}
-        </div>
-      ),
       actions: (
         <EditStockOperationActionMenu
           model={stockOperation}
@@ -264,7 +175,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         />
       ),
     }));
-  }, [items, operations, t, handleEditClick, operation]);
+  }, [items, operations, handleEditClick, operation]);
 
   if (isLoading && !filterApplied) {
     return (
@@ -358,74 +269,24 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row: any, index) => {
+                {rows?.map((row: any, index) => {
                   return (
                     <React.Fragment key={row.id}>
                       <TableExpandRow
                         className={isDesktop ? styles.desktopRow : styles.tabletRow}
                         {...getRowProps({ row })}
                       >
-                        {row.cells.map(
-                          (cell: any) =>
-                            cell?.info?.header !== 'details' && <TableCell key={cell.id}>{cell.value}</TableCell>,
-                        )}
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
                       </TableExpandRow>
-                      <TableExpandedRow colSpan={headers.length + 2}>
-                        <>
-                          <StructuredListHead>
-                            <StructuredListRow head>
-                              <StructuredListCell head>{t('dateCreated', 'Date Created')}</StructuredListCell>
-                              <StructuredListCell head>{t('dateCompleted', 'Date Completed')}</StructuredListCell>
-                            </StructuredListRow>
-                          </StructuredListHead>
-                          <StructuredListBody>
-                            <StructuredListRow>
-                              <StructuredListCell noWrap>
-                                {items[index]?.dateCreated ? formatDisplayDate(items[index]?.dateCreated) : ''}
-                                &nbsp;
-                                {items[index]?.dateCreated ? 'By' : ''}
-                                &nbsp;
-                                {items[index]?.dateCreated ? items[index]?.creatorFamilyName : ''}
-                              </StructuredListCell>
-                              <StructuredListCell>
-                                {items[index]?.completedDate ? formatDisplayDate(items[index]?.completedDate) : ''}
-                                &nbsp;
-                                {items[index]?.completedDate ? 'By' : ''}
-                                &nbsp;
-                                {items[index]?.completedDate ? items[index]?.creatorFamilyName : ''}
-                              </StructuredListCell>
-                            </StructuredListRow>
-                            <StructuredListRow>
-                              <StructuredListCell noWrap>
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1]
-                                  ? formatDisplayDate(items[index]?.dateCreated)
-                                  : ''}
-                                &nbsp;
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1] ? 'By' : ''}
-                                &nbsp;
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1]
-                                  ? items[index]?.creatorFamilyName
-                                  : ''}
-                              </StructuredListCell>
-                              <StructuredListCell>
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1]
-                                  ? formatDisplayDate(items[index]?.completedDate)
-                                  : ''}
-                                &nbsp;
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1] &&
-                                items[index]?.completedDate
-                                  ? 'By'
-                                  : ''}
-                                &nbsp;
-                                {items[index]?.stockOperationItems.map((item) => item.quantity)[1] &&
-                                items[index]?.completedDate
-                                  ? items[index]?.creatorFamilyName
-                                  : ''}
-                              </StructuredListCell>
-                            </StructuredListRow>
-                          </StructuredListBody>
-                        </>
-                      </TableExpandedRow>
+                      {row.isExpanded ? (
+                        <TableExpandedRow colSpan={headers.length + 2}>
+                          <StockOperationStatus model={items[index]} />
+                        </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
                     </React.Fragment>
                   );
                 })}

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

@@ -58,3 +58,21 @@
   margin: auto;
   width: 20%;
 }
+
+.statusContainer {
+  display: flex;
+  margin: 10px;
+  gap: 1rem;
+}
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusDescriptions {
+  margin-top: 4px;
+
+  .text {
+    margin-right: 4px;
+  }
+}

package/src/stock-sources/stock-sources-items-table.test.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import { renderHook, act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import StockSourcesItems from './stock-sources-items-table.component';
+import useStockSourcesPage from './stock-sources-items-table.resource';
+import { useTranslation } from 'react-i18next';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+const mockTranslation = {
+  t: (key) => key,
+};
+
+jest.mock('./stock-sources-items-table.resource', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  useStockSourcesPage: jest.fn(),
+}));
+
+describe('StockSourcesItems', () => {
+  const mockFilter = {};
+  const mockItems = {
+    results: [{ name: 'Community', acronym: 'Community', sourceType: { display: 'Donation' } }],
+    totalCount: 1,
+  };
+
+  beforeEach(() => {
+    (useTranslation as jest.Mock).mockReturnValue(mockTranslation);
+    (useStockSourcesPage as jest.Mock).mockClear();
+  });
+
+  it('should return initial values', () => {
+    const mockFilter = {};
+    const mockItems = {
+      results: [{ name: 'Community', acronym: 'Community', sourceType: { display: 'Donation' } }],
+      totalCount: 1,
+    };
+
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: mockItems.results,
+      isLoading: false,
+      totalItems: mockItems.totalCount,
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+      error: null,
+    });
+
+    const { result } = renderHook(() => useStockSourcesPage(mockFilter));
+
+    expect(result.current.items).toEqual(mockItems.results);
+    expect(result.current.totalItems).toBe(mockItems.totalCount);
+    expect(result.current.currentPageSize).toBe(10);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBe(null);
+  });
+
+  it('should update current page size', () => {
+    let currentPageSize = 10; // Track page size with a local variable
+
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: mockItems.results,
+      isLoading: false,
+      totalItems: mockItems.totalCount,
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize,
+      setPageSize: jest.fn((size) => {
+        currentPageSize = size; // Update local variable
+      }),
+      error: null,
+    });
+
+    const { result } = renderHook(() => useStockSourcesPage(mockFilter));
+
+    act(() => {
+      result.current.setPageSize(20);
+    });
+
+    expect(currentPageSize).toBe(20); // Check the local variable instead
+  });
+
+  it('should handle loading and error states', () => {
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: { results: [], totalCount: 0 },
+      isLoading: true,
+      error: null,
+      totalItems: 0,
+      currentPage: 1,
+      currentPageSize: 10,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      setPageSize: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useStockSourcesPage(mockFilter));
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.error).toBe(null);
+    expect(result.current.totalItems).toBe(0);
+  });
+
+  test('renders loading state when data is being fetched', () => {
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: [],
+      isLoading: true,
+      totalItems: 0,
+      tableHeaders: [],
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+    });
+
+    render(<StockSourcesItems />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  test('renders data table when data is loaded', () => {
+    const mockItems = [
+      {
+        uuid: '1234',
+        name: 'Source A',
+        acronym: 'SA',
+        sourceType: { display: 'Internal' },
+      },
+    ];
+
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: mockItems,
+      isLoading: false,
+      totalItems: 1,
+      tableHeaders: [
+        { key: 'name', header: 'Name' },
+        { key: 'sourceType', header: 'Source Type' },
+      ],
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+    });
+
+    render(<StockSourcesItems />);
+
+    expect(screen.getByText('Source A')).toBeInTheDocument();
+    expect(screen.getByText('Internal')).toBeInTheDocument();
+  });
+
+  test('filters data based on source type', async () => {
+    const user = userEvent.setup();
+
+    const mockItems = [
+      {
+        uuid: '1234',
+        name: 'Source A',
+        acronym: 'SA',
+        sourceType: { display: 'Internal' },
+      },
+      {
+        uuid: '5678',
+        name: 'Source B',
+        acronym: 'SB',
+        sourceType: { display: 'External' },
+      },
+    ];
+
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: mockItems,
+      isLoading: false,
+      totalItems: 2,
+      tableHeaders: [{ key: 'name', header: 'Name' }],
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+    });
+
+    render(<StockSourcesItems />);
+
+    expect(screen.getByText('Source A')).toBeInTheDocument();
+    expect(screen.getByText('Source B')).toBeInTheDocument();
+
+    const filterInput = screen.getByLabelText('');
+    await user.type(filterInput, 'Internal');
+
+    await waitFor(() => {
+      expect(screen.getByText('Source A')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Source B')).toBeInTheDocument();
+    });
+  });
+
+  test('renders a message when no stock sources are available', () => {
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: [],
+      isLoading: false,
+      totalItems: 0,
+      tableHeaders: [],
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: jest.fn(),
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+    });
+
+    render(<StockSourcesItems />);
+
+    expect(screen.getByText('noSourcesToDisplay')).toBeInTheDocument();
+    expect(screen.getByText('checkFilters')).toBeInTheDocument();
+  });
+
+  test('pagination works as expected', async () => {
+    const user = userEvent.setup();
+
+    const mockGoTo = jest.fn();
+    const mockSetPageSize = jest.fn();
+
+    (useStockSourcesPage as jest.Mock).mockReturnValue({
+      items: [],
+      isLoading: false,
+      totalItems: 20,
+      tableHeaders: [],
+      currentPage: 1,
+      pageSizes: [10, 20, 50],
+      goTo: mockGoTo,
+      currentPageSize: 10,
+      setPageSize: mockSetPageSize,
+    });
+
+    render(<StockSourcesItems />);
+
+    const nextPageButton = screen.getByLabelText('Next page');
+    await user.click(nextPageButton);
+
+    expect(mockGoTo).toHaveBeenCalledWith(2);
+  });
+});