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

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-items-table.tsx

@@ -0,0 +1,111 @@
+import {
+  DataTable,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { formatDate, parseDate, usePagination } from '@openmrs/esm-framework';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationItemDTO } from '../../../core/api/types/stockOperation/StockOperationItemDTO';
+import styles from './stock-items-table.scss';
+
+type Props = {
+  items: Array<StockOperationItemDTO>;
+};
+const StockItemsTable: React.FC<Props> = ({ items }) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const pageSizesOptions = useMemo(() => [5, 10, 20, 50, 100], []);
+  const [searchText, setSearchText] = useState();
+
+  const handleSearch = (item: StockOperationItemDTO) => {
+    if (!searchText) return true;
+    return item.commonName.toLowerCase().includes(searchText);
+  };
+  const filtered = items.filter(handleSearch);
+  const { results, totalPages, currentPage, goTo } = usePagination(filtered, pageSize);
+
+  const headers = useMemo(
+    () => [
+      {
+        header: t('item', 'Item'),
+        key: 'commonName',
+      },
+      {
+        header: t('batchNo', 'Batch No'),
+        key: 'batchNo',
+      },
+      {
+        header: t('expiry', 'Expiry'),
+        key: 'expiration',
+      },
+      {
+        header: t('qty', 'Qty'),
+        key: 'quantity',
+      },
+      {
+        header: t('uom', 'UoM'),
+        key: 'stockItemPackagingUOMName',
+      },
+    ],
+    [t],
+  );
+
+  const tableRows = useMemo(
+    () =>
+      results.map((item, index) => ({
+        id: index,
+        ...item,
+        expiration: item.expiration ? formatDate(parseDate(`${item.expiration}`)) : '--',
+      })),
+    [results],
+  );
+
+  return (
+    <Tile className={styles.container}>
+      <span className={styles.title}>{t('stockItems', 'Stock items')}</span>
+      <Search value={searchText} onChange={({ target: { value } }) => setSearchText(value)} />
+      <DataTable useZebraStyles={true} rows={tableRows} headers={headers}>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizesOptions}
+        totalItems={filtered.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </Tile>
+  );
+};
+
+export default StockItemsTable;

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.component.tsx

@@ -0,0 +1,87 @@
+import { Layer, Row } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
+import styles from './stock-operation-expanded-row.scss';
+import StockItemsTable from './stock-items-table';
+import StockOpertationStatus from './stock-operations-status';
+
+interface StockOperationExpandedRowProps {
+  model: StockOperationDTO;
+}
+
+const StockOperationExpandedRow: React.FC<StockOperationExpandedRowProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Layer className={styles.statusContainer}>
+        <Row className={styles.statusContainerRow}>
+          {props.model?.dateCreated && (
+            <StockOpertationStatus
+              status={t('started', 'Started')}
+              statusFilledDate={props.model?.dateCreated.toString()}
+              statusFillerFamilyName={props.model?.creatorFamilyName}
+              statusFillerGivenName={props.model?.creatorGivenName}
+            />
+          )}
+          {props.model.submittedDate && (
+            <StockOpertationStatus
+              status={t('submitted', 'Submitted')}
+              statusFilledDate={props.model?.submittedDate.toString()}
+              statusFillerFamilyName={props.model?.submittedByFamilyName}
+              statusFillerGivenName={props.model?.submittedByGivenName}
+            />
+          )}
+          {props.model?.dispatchedDate && (
+            <StockOpertationStatus
+              status={t('dispatched', 'Dispatched')}
+              statusFilledDate={props.model?.dispatchedDate.toString()}
+              statusFillerFamilyName={props.model?.dispatchedByFamilyName}
+              statusFillerGivenName={props.model?.dispatchedByGivenName}
+            />
+          )}
+          {props.model?.returnedDate && (
+            <StockOpertationStatus
+              status={t('returned', 'Returned')}
+              statusFilledDate={props.model?.returnedDate.toString()}
+              statusFillerFamilyName={props.model?.returnedByFamilyName}
+              statusFillerGivenName={props.model?.returnedByGivenName}
+              extraStatusinfo={<span className={styles.text}>{props.model?.returnReason}</span>}
+            />
+          )}
+          {props.model?.completedDate && (
+            <StockOpertationStatus
+              status={t('completed', 'Completed')}
+              statusFilledDate={props.model?.completedDate.toString()}
+              statusFillerFamilyName={props.model?.completedByFamilyName}
+              statusFillerGivenName={props.model?.completedByGivenName}
+            />
+          )}
+          {props.model?.status === 'CANCELLED' && (
+            <StockOpertationStatus
+              status={t('cancelled', 'Cancelled')}
+              statusFilledDate={props.model?.cancelledDate.toString()}
+              statusFillerFamilyName={props.model?.cancelledByFamilyName}
+              statusFillerGivenName={props.model?.cancelledByGivenName}
+              extraStatusinfo={<span className={styles.text}>{props.model?.cancelReason}</span>}
+            />
+          )}
+          {props.model?.status === 'REJECTED' && (
+            <StockOpertationStatus
+              status={t('rejected', 'Rejected')}
+              statusFilledDate={props.model?.rejectedDate.toString()}
+              statusFillerFamilyName={props.model?.rejectedByFamilyName}
+              statusFillerGivenName={props.model?.rejectedByGivenName}
+              extraStatusinfo={<span>{props.model?.rejectionReason}</span>}
+            />
+          )}
+        </Row>
+        <Row className={styles.statusContainerRow}>
+          <StockItemsTable items={props.model.stockOperationItems} />
+        </Row>
+      </Layer>
+    </>
+  );
+};
+
+export default StockOperationExpandedRow;

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.scss

@@ -0,0 +1,31 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusDescriptions {
+  margin-top: 4px;
+
+  .text {
+    margin-right: 4px;
+  }
+}
+
+.statusContainer {
+  display: flex;
+  margin: 10px;
+  gap: layout.$spacing-05;
+  flex-direction: column;
+  padding: layout.$spacing-05;
+}
+
+.statusContainerRow {
+  display: flex;
+  width: 100%;
+  border: none;
+  gap: layout.$spacing-05;
+  flex: 1;
+}

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operations-status.tsx

@@ -0,0 +1,45 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './stock-operation-expanded-row.scss';
+
+type Props = {
+  status: string;
+  statusFilledDate: string;
+  statusFillerGivenName?: string;
+  statusFillerFamilyName?: string;
+  extraStatusinfo?: React.ReactNode;
+};
+
+const StockOpertationStatus: React.FC<Props> = ({
+  status,
+  statusFillerFamilyName,
+  statusFillerGivenName,
+  statusFilledDate,
+  extraStatusinfo,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <span className={styles.textHeading}>{status}:</span>
+      <div className={styles.statusDescriptions}>
+        <span className={styles.text}>
+          {formatDate(parseDate(statusFilledDate), {
+            time: true,
+            mode: 'standard',
+          })}
+        </span>
+
+        <span className={styles.text}>{t('by', 'By')}</span>
+
+        <span className={styles.text}>
+          {statusFillerFamilyName} &nbsp;
+          {statusFillerGivenName}
+        </span>
+        {extraStatusinfo}
+      </div>
+    </div>
+  );
+};
+
+export default StockOpertationStatus;

package/src/stock-operations/edit-stock-operation/edit-stock-operation-action-menu.component.tsx

@@ -1,33 +1,58 @@
-import React from 'react';
-import { Button } from '@carbon/react';
+import { Button, InlineLoading } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { launchAddOrEditDialog } from '../stock-operation.utils';
+import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
+import { useStockOperationAndItems } from '../stock-operations.resource';
 
 interface EditStockOperationActionMenuProps {
-  model: StockOperationDTO;
-  operations: StockOperationType[];
-  operationUuid: string;
-  operationNumber: string;
-  onEdit: (operation: StockOperationDTO) => void;
+  stockOperation: StockOperationDTO;
   showIcon?: boolean;
   showprops?: boolean;
 }
 
 const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps> = ({
-  model,
-  operations,
+  stockOperation: _stockOperation,
   showIcon = true,
   showprops = true,
 }) => {
   const { t } = useTranslation();
+  const { error, isLoading, operationTypes } = useFilteredOperationTypesByRoles();
+  const {
+    isLoading: isLoadingStockoperation,
+    items: stockOperation,
+    error: stockOperationError,
+  } = useStockOperationAndItems(_stockOperation.uuid);
+  const activeOperationType = useMemo(
+    () => operationTypes?.find((op) => op?.uuid === stockOperation?.operationTypeUuid),
+    [operationTypes, stockOperation],
+  );
+
+  const handleEdit = useCallback(() => {
+    launchStockoperationAddOrEditDialog(
+      t,
+      activeOperationType,
+      stockOperation,
+      stockOperation?.requisitionStockOperationUuid,
+    );
+  }, [t, activeOperationType, stockOperation]);
+
+  useEffect(() => {
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockOperationError', 'Error loading stock operation types'),
+        subtitle: error?.message ?? stockOperationError?.message,
+      });
+    }
+  }, [error, t, stockOperationError]);
+
+  if (isLoading || isLoadingStockoperation) return <InlineLoading status="active" iconDescription="Loading" />;
 
-  const handleEdit = () => {
-    const operation = operations?.find((op) => op?.uuid === model?.operationTypeUuid);
-    launchAddOrEditDialog(t, model, true, operation, operations, false);
-  };
+  if (error || stockOperationError) return <>--</>;
 
   return (
     <Button
@@ -37,7 +62,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
       iconDescription={t('editStockOperation', 'Edit Stock Operation')}
       renderIcon={showIcon ? Edit : undefined}
     >
-      {showprops && model?.operationNumber}
+      {showprops && stockOperation?.operationNumber}
     </Button>
   );
 };

package/src/stock-operations/stock-operation-reference.component.tsx

@@ -0,0 +1,64 @@
+import { InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useStockOperationTypes } from '../stock-lookups/stock-lookups.resource';
+import { launchStockoperationAddOrEditDialog } from './stock-operation.utils';
+import { useStockOperationAndItems } from './stock-operations.resource';
+
+interface StockOperationReferenceProps {
+  operationUuid: string;
+  operationNumber: string;
+}
+
+const StockOperationReference = ({ operationNumber, operationUuid }: StockOperationReferenceProps) => {
+  const { t } = useTranslation();
+  const { types, isLoading: istypesLoading, error: typesError } = useStockOperationTypes();
+  const {
+    items: stockOperation,
+    error: stockOperationError,
+    isLoading: isStockOperationloading,
+  } = useStockOperationAndItems(operationUuid ?? null);
+
+  const handleEdit = useCallback(() => {
+    const operationType = types.results?.find((op) => op?.uuid === stockOperation?.operationTypeUuid);
+    if (!operationType) {
+      return;
+    }
+    launchStockoperationAddOrEditDialog(
+      t,
+      operationType,
+      stockOperation,
+      stockOperation?.requisitionStockOperationUuid,
+    );
+  }, [stockOperation, t, types.results]);
+
+  useEffect(() => {
+    if (stockOperationError) {
+      showSnackbar({
+        title: t('errorLoadingStockOperation', 'Error loading stock operation'),
+        subtitle: stockOperationError?.message,
+        kind: 'error',
+      });
+    }
+    if (typesError) {
+      showSnackbar({
+        title: t('errorLoadingStockOperationTypes', 'Error loading stock operation types'),
+        subtitle: typesError?.message,
+        kind: 'error',
+      });
+    }
+  }, [stockOperationError, typesError, t]);
+
+  if (istypesLoading || isStockOperationloading) {
+    return <InlineLoading description={t('loading', 'Loading')} />;
+  }
+
+  return (
+    <a onClick={handleEdit} style={{ cursor: 'pointer' }}>
+      {operationNumber}
+    </a>
+  );
+};
+
+export default StockOperationReference;

package/src/stock-operations/stock-operation-status/stock-operation-status-row.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import styles from './stock-operation-status.scss';
+import StockOpertationStatus from './stock-operation-status';
+import { useTranslation } from 'react-i18next';
+import { Row } from '@carbon/react';
+type Props = {
+  stockOperation: StockOperationDTO;
+};
+const StockOperationStatusRow: React.FC<Props> = ({ stockOperation }) => {
+  const { t } = useTranslation();
+  return (
+    <Row className={styles.statusContainerRow}>
+      {stockOperation.dateCreated && (
+        <StockOpertationStatus
+          status={t('started', 'Started')}
+          statusFilledDate={stockOperation.dateCreated.toString()}
+          statusFillerFamilyName={stockOperation.creatorFamilyName}
+          statusFillerGivenName={stockOperation.creatorGivenName}
+        />
+      )}
+      {stockOperation?.submittedDate && (
+        <StockOpertationStatus
+          status={t('submitted', 'Submitted')}
+          statusFilledDate={stockOperation.submittedDate.toString()}
+          statusFillerFamilyName={stockOperation.submittedByFamilyName}
+          statusFillerGivenName={stockOperation.submittedByGivenName}
+        />
+      )}
+      {stockOperation.dispatchedDate && (
+        <StockOpertationStatus
+          status={t('dispatched', 'Dispatched')}
+          statusFilledDate={stockOperation.dispatchedDate.toString()}
+          statusFillerFamilyName={stockOperation.dispatchedByFamilyName}
+          statusFillerGivenName={stockOperation.dispatchedByGivenName}
+        />
+      )}
+      {stockOperation.returnedDate && (
+        <StockOpertationStatus
+          status={t('returned', 'Returned')}
+          statusFilledDate={stockOperation.returnedDate.toString()}
+          statusFillerFamilyName={stockOperation.returnedByFamilyName}
+          statusFillerGivenName={stockOperation.returnedByGivenName}
+          extraStatusinfo={<span className={styles.text}>{stockOperation.returnReason}</span>}
+        />
+      )}
+      {stockOperation.completedDate && (
+        <StockOpertationStatus
+          status={t('completed', 'Completed')}
+          statusFilledDate={stockOperation.completedDate.toString()}
+          statusFillerFamilyName={stockOperation.completedByFamilyName}
+          statusFillerGivenName={stockOperation.completedByGivenName}
+        />
+      )}
+      {stockOperation.status === 'CANCELLED' && (
+        <StockOpertationStatus
+          status={t('cancelled', 'Cancelled')}
+          statusFilledDate={stockOperation.cancelledDate.toString()}
+          statusFillerFamilyName={stockOperation.cancelledByFamilyName}
+          statusFillerGivenName={stockOperation.cancelledByGivenName}
+          extraStatusinfo={<span className={styles.text}>{stockOperation.cancelReason}</span>}
+        />
+      )}
+      {stockOperation.status === 'REJECTED' && (
+        <StockOpertationStatus
+          status={t('rejected', 'Rejected')}
+          statusFilledDate={stockOperation.rejectedDate.toString()}
+          statusFillerFamilyName={stockOperation.rejectedByFamilyName}
+          statusFillerGivenName={stockOperation.rejectedByGivenName}
+          extraStatusinfo={<span>{stockOperation.rejectionReason}</span>}
+        />
+      )}
+    </Row>
+  );
+};
+
+export default StockOperationStatusRow;

package/src/stock-operations/stock-operation-status/stock-operation-status.scss

@@ -0,0 +1,32 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusDescriptions {
+  margin-top: 4px;
+
+  .text {
+    margin-right: 4px;
+  }
+}
+
+.statusContainer {
+  display: flex;
+  margin: 10px;
+  gap: layout.$spacing-05;
+  flex-direction: column;
+  padding: layout.$spacing-05;
+}
+
+.statusContainerRow {
+  display: flex;
+  width: 100%;
+  border: none;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  justify-content: flex-start;
+}

package/src/stock-operations/stock-operation-status/stock-operation-status.tsx

@@ -0,0 +1,45 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './stock-operation-status.scss';
+
+type Props = {
+  status: string;
+  statusFilledDate: string;
+  statusFillerGivenName?: string;
+  statusFillerFamilyName?: string;
+  extraStatusinfo?: React.ReactNode;
+};
+
+const StockOpertationStatus: React.FC<Props> = ({
+  status,
+  statusFillerFamilyName,
+  statusFillerGivenName,
+  statusFilledDate,
+  extraStatusinfo,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <span className={styles.textHeading}>{status}:</span>
+      <div className={styles.statusDescriptions}>
+        <span className={styles.text}>
+          {formatDate(parseDate(statusFilledDate), {
+            time: true,
+            mode: 'standard',
+          })}
+        </span>
+
+        <span className={styles.text}>{t('by', 'By')}</span>
+
+        <span className={styles.text}>
+          {statusFillerFamilyName} &nbsp;
+          {statusFillerGivenName}
+        </span>
+        {extraStatusinfo}
+      </div>
+    </div>
+  );
+};
+
+export default StockOpertationStatus;

package/src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -1,39 +1,40 @@
-import React, { useEffect, useMemo } from 'react';
 import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { useStockOperationTypes, useUserRoles } from '../../stock-lookups/stock-lookups.resource';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { OperationType, StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { launchStockoperationAddOrEditDialog } from '../stock-operation.utils';
+import useFilteredOperationTypesByRoles from '../stock-operations-forms/hooks/useFilteredOperationTypesByRoles';
 
-interface StockOperationTypesSelectorProps {
-  onOperationTypeSelected?: (operation: StockOperationType) => void;
-  onOperationLoaded?: (operation: StockOperationType[]) => void;
-}
+const StockOperationTypesSelector = () => {
+  const { t } = useTranslation();
+  const { error, isLoading, operationTypes } = useFilteredOperationTypesByRoles();
 
-const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> = ({
-  onOperationTypeSelected,
-  onOperationLoaded,
-}) => {
-  const {
-    types: { results: createOperationTypes },
-    isLoading,
-    error,
-  } = useStockOperationTypes();
-  const { userRoles } = useUserRoles();
+  const handleSelect = useCallback(
+    (stockOperationType: StockOperationType) => {
+      const isStockIssueOperation = stockOperationType.operationType === OperationType.STOCK_ISSUE_OPERATION_TYPE;
 
-  const filterOperationTypes = useMemo(() => {
-    const applicablePrivilegeScopes = userRoles?.operationTypes?.map((p) => p.operationTypeUuid) || [];
-    const uniqueApplicablePrivilegeScopes = [...new Set(applicablePrivilegeScopes)];
-
-    return createOperationTypes?.filter((p) => uniqueApplicablePrivilegeScopes.includes(p.uuid)) || [];
-  }, [createOperationTypes, userRoles]);
+      launchStockoperationAddOrEditDialog(t, stockOperationType, undefined);
+    },
+    [t],
+  );
 
   useEffect(() => {
-    onOperationLoaded?.(filterOperationTypes);
-  }, [filterOperationTypes, onOperationLoaded]);
+    if (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('stockOperationError', 'Error loading stock operation types'),
+        subtitle: error?.message,
+      });
+    }
+  }, [error, t]);
+
+  if (isLoading) return <ButtonSkeleton />;
 
-  if (isLoading || error) return <ButtonSkeleton />;
+  if (error) return null;
 
-  return filterOperationTypes && filterOperationTypes.length ? (
+  return operationTypes && operationTypes.length ? (
     <OverflowMenu
       renderIcon={() => (
         <>
@@ -53,14 +54,14 @@ const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> =
         whiteSpace: 'nowrap',
       }}
     >
-      {filterOperationTypes
+      {operationTypes
         .sort((a, b) => a.name.localeCompare(b.name))
         .map((operation) => (
           <OverflowMenuItem
             key={operation.uuid}
             itemText={operation.name}
             onClick={() => {
-              onOperationTypeSelected?.(operation);
+              handleSelect(operation);
             }}
           />
         ))}