@openmrs/esm-stock-management-app 1.0.1-pre.678 → 1.0.1-pre.683

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-reports/report-list/stock-report-parameters.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { parseParametersToMap } from '../../core/api/types/BatchJob';
+interface StockReportParametersProps {
+  model: any;
+}
+
+const StockReportParameters = (props: StockReportParametersProps) => {
+  let parameterMap: React.ReactNode;
+
+  const displayParameterMap = (
+    batchJobUuid: string,
+    parameterMap: { [key: string]: { [key: string]: string } } | null,
+  ): React.ReactNode => {
+    if (!parameterMap) {
+      return null;
+    }
+    const objectKeys: string[] = Object.keys(parameterMap);
+    if (objectKeys.length === 0) {
+      return null;
+    }
+    return objectKeys.map((key, index) => {
+      const displayField: string = parameterMap[key]['description'] ?? key;
+      const displayValue: string = parameterMap[key]['display'] ?? parameterMap[key]['value'];
+      return (
+        <div key={`${batchJobUuid}-param-${index}`}>
+          {displayField}: {displayValue}
+        </div>
+      );
+    });
+  };
+
+  try {
+    parameterMap = displayParameterMap(
+      props.model?.uuid,
+      parseParametersToMap(props.model?.parameters, ['param.report']),
+    );
+  } catch (ex) {
+    console.log(ex);
+  }
+
+  return <span>{parameterMap}</span>;
+};
+
+export default StockReportParameters;

package/src/stock-reports/report-list/stock-report-status.component.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import styles from './stock-reports.scss';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { BatchJobStatusCancelled, parseParametersToMap } from '../../core/api/types/BatchJob';
+import { useTranslation } from 'react-i18next';
+
+interface StockReportStatusProps {
+  model: any;
+}
+
+const StockReportStatus = (props: StockReportStatusProps) => {
+  const { t } = useTranslation();
+  let executionStateMap: React.ReactNode;
+
+  const displayParameterMap = (
+    batchJobUuid: string,
+    parameterMap: { [key: string]: { [key: string]: string } } | null,
+  ): React.ReactNode => {
+    if (!parameterMap) {
+      return null;
+    }
+    const objectKeys: string[] = Object.keys(parameterMap);
+    if (objectKeys.length === 0) {
+      return null;
+    }
+    return objectKeys.map((key, index) => {
+      const displayField: string = parameterMap[key]['description'] ?? key;
+      const displayValue: string = parameterMap[key]['display'] ?? parameterMap[key]['value'];
+      return (
+        <div key={`${batchJobUuid}-param-${index}`}>
+          {displayField}: {displayValue}
+        </div>
+      );
+    });
+  };
+
+  try {
+    executionStateMap = displayParameterMap(props.model?.uuid, parseParametersToMap(props.model?.executionState));
+  } catch (ex) {
+    console.log(ex);
+  }
+  return (
+    <div className={styles.statusContainer}>
+      {/* cancelled */}
+      {props.model?.status === BatchJobStatusCancelled && (
+        <div>
+          <span className={styles.textHeading}>{t('cancelled', 'Cancelled')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              {formatDate(parseDate(props.model?.cancelledDate.toString()), {
+                time: true,
+                mode: 'standard',
+              })}
+              <p>{props.model?.cancelReason}</p>
+            </span>
+          </div>
+        </div>
+      )}
+      {/* start time */}
+      {props.model?.startTime && (
+        <div>
+          <span className={styles.textHeading}>{t('started', 'Started')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              {formatDate(parseDate(props.model?.startTime.toString()), {
+                time: true,
+                mode: 'standard',
+              })}
+            </span>
+          </div>
+        </div>
+      )}
+      {/* endTime */}
+      {props.model?.endTime && (
+        <div>
+          <span className={styles.textHeading}>{t('ended', 'Ended')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              {formatDate(parseDate(props.model?.endTime.toString()), {
+                time: true,
+                mode: 'standard',
+              })}
+            </span>
+          </div>
+        </div>
+      )}
+      {/* expiration */}
+      {props.model?.expiration && (
+        <div>
+          <span className={styles.textHeading}>{t('expires', 'Expires')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              {formatDate(parseDate(props.model?.expiration.toString()), {
+                time: true,
+                mode: 'standard',
+              })}
+            </span>
+          </div>
+        </div>
+      )}
+      {/* executionMap */}
+      {executionStateMap && (
+        <div>
+          <span className={styles.textHeading}>{t('executionState', 'Execution State')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>{executionStateMap}</span>
+          </div>
+        </div>
+      )}
+      {/* completedDate */}
+      {props.model?.completedDate && (
+        <div>
+          <span className={styles.textHeading}>{t('completed', 'Completed')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              {formatDate(parseDate(props.model?.completedDate.toString()), {
+                time: true,
+                mode: 'standard',
+              })}
+            </span>
+          </div>
+        </div>
+      )}
+      {/* exitMessage */}
+      {props.model?.exitMessage && (
+        <div>
+          <span className={styles.textHeading}>{t('exitMessage', 'Message')}:</span>
+          <div className={styles.statusDescriptions}>
+            <span className={styles.text}>
+              <p>{props.model?.exitMessage}</p>
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StockReportStatus;

package/src/stock-reports/report-list/stock-reports.component.tsx

@@ -20,6 +20,9 @@ import {
   InlineLoading,
   TableToolbarMenu,
   TableToolbarAction,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
 } from '@carbon/react';
 import { isDesktop, restBaseUrl, useSession } from '@openmrs/esm-framework';
 import NewReportActionButton from './new-report-button.component';
@@ -49,6 +52,8 @@ import {
 } from '@carbon/react/icons';
 import { handleMutate } from '../../utils';
 import { PrivilagedView } from '../../core/components/privilages-component/privilages.component';
+import StockReportStatus from './stock-report-status.component';
+import StockReportParameters from './stock-report-parameters.component';
 
 const StockReports: React.FC = () => {
   const { t } = useTranslation();
@@ -111,16 +116,16 @@ const StockReports: React.FC = () => {
   }, []);
 
   const tableRows = useMemo(() => {
-    return reports?.map((batchJob) => ({
+    return reports?.map((batchJob, index) => ({
       ...batchJob,
       checkbox: 'isBatchJobActive',
       id: batchJob?.uuid,
       key: `key-${batchJob?.uuid}`,
       uuid: `${batchJob?.uuid}`,
-      batchJobType: batchJob.batchJobType,
+      batchJobType: batchJob?.batchJobType,
       dateRequested: formatDisplayDateTime(batchJob.dateCreated),
-      parameters: '',
-      report: batchJob.description,
+      parameters: <StockReportParameters model={reports[index]} />,
+      report: batchJob?.description,
       requestedBy: batchJob?.owners?.map((p, index) => (
         <div key={`${batchJob.uuid}-owner-${index}`}>{`${p.ownerFamilyName} ${p.ownerGivenName}`}</div>
       )),
@@ -218,34 +223,42 @@ const StockReports: React.FC = () => {
             <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>
-                  {headers.map(
-                    (header: any) =>
-                      header.key !== 'details' && (
-                        <TableHeader
-                          {...getHeaderProps({
-                            header,
-                            isSortable: header.isSortable,
-                          })}
-                          className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
-                          key={`${header.key}`}
-                        >
-                          {header.header?.content ?? header.header}
-                        </TableHeader>
-                      ),
-                  )}
+                  <TableExpandHeader />
+                  {headers.map((header: any) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}
+                      className={isDesktop ? styles.desktopHeader : styles.tabletHeader}
+                      key={`${header.key}`}
+                    >
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
                   <TableHeader></TableHeader>
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row: any) => {
+                {rows.map((row: any, index) => {
                   return (
                     <React.Fragment key={row.id}>
-                      <TableRow className={isDesktop ? styles.desktopRow : styles.tabletRow} {...getRowProps({ row })}>
-                        {row.cells.map(
-                          (cell: any) =>
-                            cell?.info?.header !== 'details' && <TableCell key={cell.id}>{cell.value}</TableCell>,
-                        )}
-                      </TableRow>
+                      <TableExpandRow
+                        className={isDesktop ? styles.desktopRow : styles.tabletRow}
+                        {...getRowProps({ row })}
+                      >
+                        {row.cells.map((cell: any) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableExpandRow>
+
+                      {row.isExpanded ? (
+                        <TableExpandedRow colSpan={headers.length + 2}>
+                          <StockReportStatus model={reports[index]} />
+                        </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
                     </React.Fragment>
                   );
                 })}

package/src/stock-reports/report-list/stock-reports.scss

@@ -60,3 +60,21 @@
   flex-direction: column;
   align-items: center;
 }
+
+.statusContainer {
+  display: flex;
+  margin: 10px;
+  gap: 1rem;
+}
+
+.textHeading {
+  font-weight: bold;
+}
+
+.statusDescriptions {
+  margin-top: 4px;
+
+  .text {
+    margin-right: 4px;
+  }
+}