@openmrs/esm-stock-management-app 1.0.1-pre.783 → 1.0.1-pre.788

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

@@ -1,10 +1,9 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { useStockOperationPages } from './stock-operations-table.resource';
-import { ResourceRepresentation } from '../core/api/api';
 import {
   DataTable,
-  TabPanel,
   DataTableSkeleton,
+  DatePicker,
+  DatePickerInput,
+  InlineLoading,
   Pagination,
   Table,
   TableBody,
@@ -17,30 +16,30 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
+  TableToolbarMenu,
   TableToolbarSearch,
+  TabPanel,
   Tile,
-  DatePickerInput,
-  DatePicker,
-  TableToolbarMenu,
-  TableToolbarAction,
-  InlineLoading,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { formatDisplayDate } from '../core/utils/datetimeUtils';
 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';
-import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
-import StockOperationsFilters from './stock-operations-filters.component';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, StockFilters } from '../constants';
+import { ResourceRepresentation } from '../core/api/api';
+import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import { handleMutate } from '../utils';
+import EditStockOperationActionMenu from './edit-stock-operation/edit-stock-operation-action-menu.component';
+import StockOperationTypesSelector from './stock-operation-types-selector/stock-operation-types-selector.component';
+import StockOperationsFilters from './stock-operations-filters.component';
+import { useStockOperationPages } from './stock-operations-table.resource';
 
+import { Link } from '@carbon/react';
+import StockOperationExpandedRow from './add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component';
 import styles from './stock-operations-table.scss';
-import StockOperationStatus from './add-stock-operation/stock-operation-status.component';
 
 interface StockOperationsTableProps {
   status?: string;
@@ -51,32 +50,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/stockoperation`);
   };
-  const operation: StockOperationType = useMemo(
-    () => ({
-      uuid: '',
-      name: '',
-      description: '',
-      operationType: '',
-      hasSource: false,
-      sourceType: 'Location',
-      hasDestination: false,
-      destinationType: 'Location',
-      hasRecipient: false,
-      recipientRequired: false,
-      availableWhenReserved: false,
-      allowExpiredBatchNumbers: false,
-      stockOperationTypeLocationScopes: [],
-      creator: undefined,
-      dateCreated: undefined,
-      changedBy: undefined,
-      dateChanged: undefined,
-      dateVoided: undefined,
-      voidedBy: undefined,
-      voidReason: '',
-      voided: false,
-    }),
-    [],
-  );
 
   const [selectedFromDate, setSelectedFromDate] = useState(null);
   const [selectedToDate, setSelectedToDate] = useState(null);
@@ -98,8 +71,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
   const filterApplied =
     selectedFromDate || selectedToDate || selectedSources.length || selectedStatus.length || selectedOperations.length;
 
-  const [operations, setOperations] = useState<StockOperationType[]>([]);
-
   const handleOnFilterChange = useCallback((selectedItems, filterType) => {
     if (filterType === StockFilters.SOURCES) {
       setSelectedSources(selectedItems);
@@ -125,18 +96,15 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
     }
   };
 
-  const handleEditClick = useCallback(
-    (stockOperation, isEditing) => {
-      launchAddOrEditDialog(t, stockOperation, isEditing, operation, operations, false);
-    },
-    [t, operation, operations],
-  );
-
   const tableRows = useMemo(() => {
     return items?.map((stockOperation, index) => {
-      const commonNames = stockOperation?.stockOperationItems
-        ? stockOperation?.stockOperationItems.map((item) => item.commonName).join(', ')
-        : '';
+      const threshHold = 1;
+      const itemCountGreaterThanThreshhold = (stockOperation?.stockOperationItems?.length ?? 0) > threshHold;
+      const commonNames =
+        stockOperation?.stockOperationItems
+          ?.slice(0, itemCountGreaterThanThreshhold ? threshHold : undefined)
+          .map((item) => item.commonName)
+          .join(', ') ?? '';
 
       return {
         ...stockOperation,
@@ -144,17 +112,12 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         key: `key-${stockOperation?.uuid}`,
         operationTypeName: `${stockOperation?.operationTypeName}`,
         operationNumber: (
-          <EditStockOperationActionMenu
-            model={stockOperation}
-            operations={operations}
-            operationUuid={operation.uuid}
-            operationNumber={''}
-            onEdit={() => handleEditClick(stockOperation, true)}
-            showIcon={false}
-            showprops={true}
-          />
+          <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={false} showprops={true} />
         ),
-        stockOperationItems: commonNames,
+        stockOperationItems: {
+          commonNames,
+          more: itemCountGreaterThanThreshhold ? stockOperation?.stockOperationItems?.length - threshHold : 0,
+        },
         status: `${stockOperation?.status}`,
         source: `${stockOperation?.sourceName ?? ''}`,
         destination: `${stockOperation?.destinationName ?? ''}`,
@@ -169,20 +132,10 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
           stockOperation?.responsiblePersonFamilyName ?? stockOperation?.responsiblePersonOther ?? ''
         } ${stockOperation?.responsiblePersonGivenName ?? ''}`,
         operationDate: formatDisplayDate(stockOperation?.operationDate),
-        actions: (
-          <EditStockOperationActionMenu
-            model={stockOperation}
-            operations={operations}
-            operationUuid={operation.uuid}
-            operationNumber={''}
-            onEdit={() => handleEditClick(stockOperation, true)}
-            showIcon={true}
-            showprops={false}
-          />
-        ),
+        actions: <EditStockOperationActionMenu stockOperation={stockOperation} showIcon={true} showprops={false} />,
       };
     });
-  }, [items, operations, handleEditClick, operation]);
+  }, [items]);
 
   if (isLoading && !filterApplied) {
     return (
@@ -202,7 +155,16 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
         headers={tableHeaders}
         isSortable={true}
         useZebraStyles={true}
-        render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          onInputChange,
+          getExpandedRowProps,
+          expandRow,
+        }) => (
           <TableContainer>
             <TableToolbar
               style={{
@@ -243,14 +205,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                   <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
                 </TableToolbarMenu>
 
-                <StockOperationTypesSelector
-                  onOperationTypeSelected={(operation) => {
-                    launchAddOrEditDialog(t, initialStockOperationValue(), false, operation, operations, false);
-                  }}
-                  onOperationLoaded={(ops) => {
-                    setOperations(ops);
-                  }}
-                />
+                <StockOperationTypesSelector />
               </TableToolbarContent>
             </TableToolbar>
             <Table {...getTableProps()}>
@@ -277,19 +232,29 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
               </TableHead>
               <TableBody>
                 {rows?.map((row: any, index) => {
+                  const props = getRowProps({ row });
+                  const expandedRowProps = getExpandedRowProps({ row });
                   return (
                     <React.Fragment key={row.id}>
-                      <TableExpandRow
-                        className={isDesktop ? styles.desktopRow : styles.tabletRow}
-                        {...getRowProps({ row })}
-                      >
+                      <TableExpandRow className={isDesktop ? styles.desktopRow : styles.tabletRow} {...props}>
                         {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                          <TableCell key={cell.id}>
+                            {cell?.info?.header === 'stockOperationItems' ? (
+                              <span>
+                                <span>{cell.value.commonNames}</span>
+                                {cell.value.more > 0 && (
+                                  <Link onClick={() => expandRow(row.id)}>{`...(${cell.value.more} more)`}</Link>
+                                )}
+                              </span>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
                         ))}
                       </TableExpandRow>
                       {row.isExpanded ? (
                         <TableExpandedRow colSpan={headers.length + 2}>
-                          <StockOperationStatus model={items[index]} />
+                          <StockOperationExpandedRow model={items[index]} />
                         </TableExpandedRow>
                       ) : (
                         <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />

package/src/stock-operations/stock-operations.resource.ts

@@ -2,9 +2,12 @@ import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework
 import useSWR from 'swr';
 import { ResourceFilterCriteria, toQueryParams } from '../core/api/api';
 import { PageableResult } from '../core/api/types/PageableResult';
-import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
-import { StopOperationAction } from '../core/api/types/stockOperation/StockOperationAction';
 import { InventoryGroupBy } from '../core/api/types/stockItem/StockItem';
+import { StopOperationAction } from '../core/api/types/stockOperation/StockOperationAction';
+import { StockOperationDTO } from '../core/api/types/stockOperation/StockOperationDTO';
+import { StockOperationItemDtoSchema } from './validation-schema';
+import { StockOperationItemCost } from '../core/api/types/stockOperation/StockOperationItemCost';
+import { StockItemInventory } from '../core/api/types/stockItem/StockItemInventory';
 
 export interface StockOperationFilter extends ResourceFilterCriteria {
   status?: string | null | undefined;
@@ -63,7 +66,7 @@ export function useStockOperation(id: string | null) {
   const apiUrl = id ? `${restBaseUrl}/stockmanagement/stockoperation/${id}` : null;
   const { data, error, isLoading } = useSWR<{ data: StockOperationDTO }, Error>(apiUrl, apiUrl ? openmrsFetch : null);
   return {
-    items: data?.data || {},
+    items: data?.data,
     isLoading,
     error,
   };
@@ -83,7 +86,7 @@ export function useStockOperationAndItems(id: string) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${id}?v=full`;
   const { data, error, isLoading } = useSWR<{ data: StockOperationDTO }, Error>(apiUrl, openmrsFetch);
   return {
-    items: data.data ? data.data : {},
+    items: data?.data,
     isLoading,
     error,
   };
@@ -124,30 +127,30 @@ export function deleteStockOperationItem(id: string) {
 }
 
 // createStockOperation
-export function createStockOperation(item: StockOperationDTO) {
+export function createStockOperation(data: StockOperationItemDtoSchema) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockOperationDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     signal: abortController.signal,
-    body: item,
+    body: data,
   });
 }
 
 // updateStockOperation
-export function updateStockOperation(item: StockOperationDTO) {
-  const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${item.uuid}`;
+export function updateStockOperation(stockOperation: StockOperationDTO, data: StockOperationItemDtoSchema) {
+  const apiUrl = `${restBaseUrl}/stockmanagement/stockoperation/${stockOperation.uuid}`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<StockOperationDTO>(apiUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     signal: abortController.signal,
-    body: item,
+    body: data,
   });
 }
 
@@ -183,7 +186,7 @@ export function updateStockOperationBatchNumbers(item: StockOperationDTO, uuid:
 export function getStockOperationItemsCost(filter: StockOperationFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperationitemcost?v=default&stockOperationUuid=${filter}`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<{ results: Array<StockOperationItemCost> }>(apiUrl, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -195,7 +198,7 @@ export function getStockOperationItemsCost(filter: StockOperationFilter) {
 export function getStockItemInventory(filter: StockItemInventoryFilter) {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockiteminventory${toQueryParams(filter)}&v=default`;
   const abortController = new AbortController();
-  return openmrsFetch(apiUrl, {
+  return openmrsFetch<{ results: Array<StockItemInventory> }>(apiUrl, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',

package/src/stock-operations/validation-schema.ts

@@ -114,9 +114,49 @@ export const stockOperationSchema = z.object({
   dispatchedByGivenName: z.string().nullish(),
   dispatchedByFamilyName: z.string().nullish(),
   dispatchedDate: z.coerce.date(),
-  requisitionStockOperationUuid: z.string(),
+  requisitionStockOperationUuid: z.string().uuid().nullish(),
+});
+export const baseStockOperationItemSchema = z.object({
+  uuid: z.string().min(1, 'Required'),
+  stockItemUuid: z.string().min(1, { message: 'Required' }),
+  stockItemPackagingUOMUuid: z.string().min(1, { message: 'Required' }),
+  batchNo: z.string().min(1, { message: 'Required' }),
+  stockBatchUuid: z.string().optional(),
+  expiration: z.coerce.date({ required_error: 'Required' }),
+  quantity: z.coerce.number().min(1, { message: 'Required' }),
+  purchasePrice: z.coerce.number().nullish(),
+  hasExpiration: z.boolean().nullish(),
 });
 
+export type BaseStockOperationItemFormData = z.infer<typeof baseStockOperationItemSchema>;
+
+export const getStockOperationItemFormSchema = (operationType: OperationType) => {
+  switch (operationType) {
+    case OperationType.RECEIPT_OPERATION_TYPE:
+    case OperationType.OPENING_STOCK_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({ stockBatchUuid: true });
+    case OperationType.REQUISITION_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({
+        batchNo: true,
+        stockBatchUuid: true,
+        expiration: true,
+        purchasePrice: true,
+      });
+    case OperationType.ADJUSTMENT_OPERATION_TYPE:
+    case OperationType.DISPOSED_OPERATION_TYPE:
+    case OperationType.RETURN_OPERATION_TYPE:
+    case OperationType.STOCK_ISSUE_OPERATION_TYPE:
+    case OperationType.STOCK_TAKE_OPERATION_TYPE:
+    case OperationType.TRANSFER_OUT_OPERATION_TYPE:
+      return baseStockOperationItemSchema.omit({
+        batchNo: true,
+        expiration: true,
+        purchasePrice: true,
+      });
+    default:
+      return baseStockOperationItemSchema;
+  }
+};
 export const stockOperationItemDtoSchema = z.object({
   operationDate: z.coerce.date(),
   sourceUuid: z.string({ required_error: 'Location Required' }).min(1, {
@@ -137,47 +177,65 @@ export const stockOperationItemDtoSchema = z.object({
     }),
   responsiblePersonOther: z.string().nullish(),
   remarks: z.string().nullish(),
+  operationTypeUuid: z.string().min(1, 'Operation type required').uuid('Invalid operation type'),
+  stockOperationItems: baseStockOperationItemSchema.array().nonempty('You must add atleast one stock item'),
+  requisitionStockOperationUuid: z.string().uuid().optional(), // Suplied only for stock issue operation
 });
 
 export type StockOperationItemDtoSchema = z.infer<typeof stockOperationItemDtoSchema>;
 
 export type StockOperationFormData = z.infer<typeof stockOperationSchema>;
 
-export const operationSchema = (operation: OperationType): z.Schema => {
+export const getStockOperationFormSchema = (operation: OperationType): z.Schema => {
   switch (operation) {
     case OperationType.OPENING_STOCK_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({
-        destinationUuid: true,
-        reasonUuid: true,
-      });
+      return stockOperationItemDtoSchema
+        .omit({
+          destinationUuid: true,
+          reasonUuid: true,
+        })
+        .merge(
+          z.object({
+            stockOperationItems: getStockOperationItemFormSchema(operation)
+              .array()
+              .nonempty('You must add atleast one stock item'),
+          }),
+        );
     case OperationType.STOCK_TAKE_OPERATION_TYPE:
     case OperationType.ADJUSTMENT_OPERATION_TYPE:
     case OperationType.DISPOSED_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({ destinationUuid: true });
+      return stockOperationItemDtoSchema.omit({ destinationUuid: true }).merge(
+        z.object({
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
+        }),
+      );
     case OperationType.TRANSFER_OUT_OPERATION_TYPE:
     case OperationType.STOCK_ISSUE_OPERATION_TYPE:
       return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
         z.object({
+          // Merged to overid initial one with error message having  location instead of destination
           destinationUuid: z.string({ required_error: 'Destination Required' }).min(1, {
             message: 'Destination Required',
           }),
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
         }),
       );
     case OperationType.RETURN_OPERATION_TYPE:
     case OperationType.REQUISITION_OPERATION_TYPE:
-      return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
-        z.object({
-          sourceUuid: z.string({ required_error: 'Source Required' }).min(1, {
-            message: 'Source Required',
-          }),
-        }),
-      );
     case OperationType.RECEIPT_OPERATION_TYPE:
       return stockOperationItemDtoSchema.omit({ reasonUuid: true }).merge(
         z.object({
+          // Merged to overid initial one with error message having location instead of source
           sourceUuid: z.string({ required_error: 'Source Required' }).min(1, {
             message: 'Source Required',
           }),
+          stockOperationItems: getStockOperationItemFormSchema(operation)
+            .array()
+            .nonempty('You must add atleast one stock item'),
         }),
       );
   }