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

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

@@ -20,7 +20,7 @@ import StockOperationApproveDispatchButton from '../stock-operations-dialog/stoc
 import StockOperationCompleteDispatchButton from '../stock-operations-dialog/stock-operations-completed-dispatch-button.component';
 import StockOperationIssueStockButton from '../stock-operations-dialog/stock-operations-issue-stock-button.component';
 import { StockOperation } from './stock-operation-context/useStockOperationContext';
-import { formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 import {
   OperationType,
   StockOperationTypeIsStockIssue,
@@ -33,6 +33,8 @@ import { getStockOperationLinks, operationStatusColor } from '../stock-operation
 import styles from './add-stock-operation.scss';
 import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
 import { StockOperationLinkDTO } from '../../core/api/types/stockOperation/StockOperationLinkDTO';
+import StockOperationStatus from './stock-operation-status.component';
+import StockOperationRelatedLink from './stock-operation-related-link.component';
 
 const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
   const { t } = useTranslation();
@@ -191,16 +193,10 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
       {!isEditing && props.operation.name === 'Stock Issue' ? (
         <></>
       ) : (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            margin: '5px',
-          }}
-        >
+        <div className={styles.statusBody}>
           <div style={{ margin: '10px' }}>
             {isEditing && (
-              <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <div className={styles.statusLabel}>
                 <span className={styles.textHeading}>{t('status', 'Status ')}:</span>
                 <span
                   style={{
@@ -212,157 +208,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                 </span>
               </div>
             )}
-            <div className={styles.statusContainer}>
-              {props?.model?.dateCreated && (
-                <div>
-                  <span className={styles.textHeading}>{t('started', 'Started')}:</span>
-                  <div className={styles.statusDescriptions}>
-                    <span className={styles.text}>
-                      {formatDate(parseDate(props?.model?.dateCreated.toString()), {
-                        time: true,
-                        mode: 'standard',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.creatorFamilyName} &nbsp;
-                      {props?.model?.creatorGivenName}
-                    </span>
-                  </div>
-                </div>
-              )}
-
-              {props?.model?.submittedDate && (
-                <div>
-                  <span className={styles.textHeading}>{t('submitted', 'Submitted')}:</span>
-                  <div className={styles.statusDescriptions}>
-                    <span className={styles.text}>
-                      {formatDate(parseDate(props?.model?.submittedDate.toString()), {
-                        time: true,
-                        mode: 'standard',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.submittedByFamilyName} &nbsp;
-                      {props?.model?.submittedByGivenName}
-                    </span>
-                  </div>
-                </div>
-              )}
-
-              {props?.model?.dispatchedDate && (
-                <div>
-                  <span className={styles.textHeading}>{t('dispatched', 'Dispatched')}:</span>
-                  <div className={styles.statusDescriptions}>
-                    <span className={styles.text}>
-                      {formatDate(parseDate(props?.model?.dispatchedDate.toString()), {
-                        time: true,
-                        mode: 'standard',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.dispatchedByFamilyName} &nbsp;
-                      {props?.model?.dispatchedByGivenName}
-                    </span>
-                  </div>
-                </div>
-              )}
-
-              {props?.model?.returnedDate && (
-                <div>
-                  <span className={styles.textHeading}>{t('returned', 'Returned')}:</span>
-                  <div className={styles.statusDescriptions}>
-                    <span className={styles.text}>
-                      {formatDate(parseDate(props?.model?.returnedDate.toString()), {
-                        time: true,
-                        mode: 'standard',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.returnedByFamilyName} &nbsp;
-                      {props?.model?.returnedByGivenName}
-                    </span>
-                    <span className={styles.text}>{props?.model?.returnReason}</span>
-                  </div>
-                </div>
-              )}
-
-              {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>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.completedByFamilyName} &nbsp;
-                      {props?.model?.completedByGivenName}
-                    </span>
-                  </div>
-                </div>
-              )}
-
-              {props?.model?.status === 'CANCELLED' && (
-                <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',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.cancelledByFamilyName} &nbsp;
-                      {props?.model?.cancelledByGivenName}
-                      <span className={styles.text}>{props?.model?.cancelReason}</span>
-                    </span>
-                  </div>
-                </div>
-              )}
-
-              {props?.model?.status === 'REJECTED' && (
-                <div>
-                  <span className={styles.textHeading}>{t('rejected', 'Rejected')}:</span>
-                  <div className={styles.statusDescriptions}>
-                    <span className={styles.text}>
-                      {formatDate(parseDate(props?.model?.rejectedDate.toString()), {
-                        time: true,
-                        mode: 'standard',
-                      })}
-                    </span>
-
-                    <span className={styles.text}>By</span>
-
-                    <span className={styles.text}>
-                      {props?.model?.rejectedByFamilyName} &nbsp;
-                      {props?.model?.rejectedByGivenName}
-                      <span>{props?.model?.rejectionReason}</span>
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
+            <StockOperationStatus model={props?.model} />
           </div>
 
           {((!props?.model?.permission?.canEdit &&
@@ -452,13 +298,12 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                     <span> </span>
                     {item?.childVoided && item?.childOperationNumber}
                     {!item?.childVoided && (
-                      <span
-                        style={{
-                          marginLeft: '2px',
-                          color: '#0f62fe',
-                        }}
-                      >
-                        {item?.childOperationNumber}
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          operationTypes={types.results}
+                          operationUuid={item?.childUuid}
+                          operationNumber={item?.childOperationNumber}
+                        />
                       </span>
                     )}
                   </span>
@@ -477,13 +322,12 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                     <span> </span>
                     {item?.parentVoided && item?.parentOperationNumber}
                     {!item?.parentVoided && (
-                      <span
-                        style={{
-                          marginLeft: '2px',
-                          color: '#0f62fe',
-                        }}
-                      >
-                        {item?.parentOperationNumber}
+                      <span className={styles.relatedLink}>
+                        <StockOperationRelatedLink
+                          operationTypes={types.results}
+                          operationUuid={item?.parentUuid}
+                          operationNumber={item?.parentOperationNumber}
+                        />
                       </span>
                     )}
                   </span>

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

@@ -1,6 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '~@openmrs/esm-styleguide/src/vars' as *;
+
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
@@ -29,6 +30,7 @@
 
 .statusDescriptions {
   margin-top: 4px;
+
   .text {
     margin-right: 4px;
   }
@@ -39,3 +41,20 @@
   display: flex;
   flex-direction: row;
 }
+
+.statusLabel {
+  display: flex;
+  flex-direction: row;
+  margin-left: 10px;
+}
+
+.statusBody {
+  display: flex;
+  justify-content: space-between;
+  margin: 5px;
+}
+
+.relatedLink {
+  margin-left: 2px;
+  color: #0f62fe;
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import { launchAddOrEditDialog } from '../stock-operation.utils';
+import { useTranslation } from 'react-i18next';
+import { getStockOperation } from '../stock-operations.resource';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+
+interface StockOperationReferenceProps {
+  operationUuid: string;
+  operationNumber: string;
+}
+
+const StockOperationReference = (props: StockOperationReferenceProps) => {
+  const { t } = useTranslation();
+  const { types } = useStockOperationTypes();
+
+  let model: StockOperationDTO;
+
+  getStockOperation(props?.operationUuid).then((resp) => {
+    model = resp.data;
+  });
+
+  const handleEdit = () => {
+    const operation = types.results?.find((op) => op?.uuid === model?.operationTypeUuid);
+
+    if (!operation) {
+      return;
+    }
+    launchAddOrEditDialog(t, model, true, operation, types?.results, false);
+  };
+  return (
+    <a onClick={handleEdit} style={{ cursor: 'pointer' }}>
+      {props?.operationNumber}
+    </a>
+  );
+};
+
+export default StockOperationReference;

package/src/stock-operations/add-stock-operation/stock-operation-related-link.component.tsx

@@ -0,0 +1,38 @@
+import React 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 { getStockOperation } from '../stock-operations.resource';
+
+interface StockOperationRelatedLinkProps {
+  operationTypes: StockOperationType[];
+  operationUuid: string;
+  operationNumber: string;
+}
+
+const StockOperationRelatedLink = (props: StockOperationRelatedLinkProps) => {
+  const { t } = useTranslation();
+  const operationTypes = props?.operationTypes;
+  let model: StockOperationDTO;
+
+  getStockOperation(props?.operationUuid).then((resp) => {
+    model = resp.data;
+  });
+
+  const handleEdit = () => {
+    const operation = operationTypes?.find((op) => op?.uuid === model?.operationTypeUuid);
+
+    if (!operation) {
+      return;
+    }
+    launchAddOrEditDialog(t, model, true, operation, operationTypes, false);
+  };
+  return (
+    <span onClick={handleEdit} style={{ cursor: 'pointer', textDecoration: 'underline' }}>
+      {props?.operationNumber}
+    </span>
+  );
+};
+
+export default StockOperationRelatedLink;

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

@@ -0,0 +1,170 @@
+import { useTranslation } from 'react-i18next';
+import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
+import React from 'react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import styles from '../stock-operations-table.scss';
+
+interface StockOperationStatusProps {
+  model: StockOperationDTO;
+}
+
+const StockOperationStatus: React.FC<StockOperationStatusProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className={styles.statusContainer}>
+        {props.model?.dateCreated && (
+          <div>
+            <span className={styles.textHeading}>{t('started', 'Started')}:</span>
+            <div className={styles.statusDescriptions}>
+              <span className={styles.text}>
+                {formatDate(parseDate(props.model?.dateCreated.toString()), {
+                  time: true,
+                  mode: 'standard',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.creatorFamilyName} &nbsp;
+                {props.model?.creatorGivenName}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {props.model.submittedDate && (
+          <div>
+            <span className={styles.textHeading}>{t('submitted', 'Submitted')}:</span>
+            <div className={styles.statusDescriptions}>
+              <span className={styles.text}>
+                {formatDate(parseDate(props.model?.submittedDate.toString()), {
+                  time: true,
+                  mode: 'standard',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.submittedByFamilyName} &nbsp;
+                {props.model?.submittedByGivenName}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {props.model?.dispatchedDate && (
+          <div>
+            <span className={styles.textHeading}>{t('dispatched', 'Dispatched')}:</span>
+            <div className={styles.statusDescriptions}>
+              <span className={styles.text}>
+                {formatDate(parseDate(props.model?.dispatchedDate.toString()), {
+                  time: true,
+                  mode: 'standard',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.dispatchedByFamilyName} &nbsp;
+                {props.model?.dispatchedByGivenName}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {props.model?.returnedDate && (
+          <div>
+            <span className={styles.textHeading}>{t('returned', 'Returned')}:</span>
+            <div className={styles.statusDescriptions}>
+              <span className={styles.text}>
+                {formatDate(parseDate(props.model?.returnedDate.toString()), {
+                  time: true,
+                  mode: 'standard',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.returnedByFamilyName} &nbsp;
+                {props.model?.returnedByGivenName}
+              </span>
+              <span className={styles.text}>{props.model?.returnReason}</span>
+            </div>
+          </div>
+        )}
+
+        {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>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.completedByFamilyName} &nbsp;
+                {props.model?.completedByGivenName}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {props.model?.status === 'CANCELLED' && (
+          <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',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.cancelledByFamilyName} &nbsp;
+                {props.model?.cancelledByGivenName}
+                <span className={styles.text}>{props.model?.cancelReason}</span>
+              </span>
+            </div>
+          </div>
+        )}
+
+        {props.model?.status === 'REJECTED' && (
+          <div>
+            <span className={styles.textHeading}>{t('rejected', 'Rejected')}:</span>
+            <div className={styles.statusDescriptions}>
+              <span className={styles.text}>
+                {formatDate(parseDate(props.model?.rejectedDate.toString()), {
+                  time: true,
+                  mode: 'standard',
+                })}
+              </span>
+
+              <span className={styles.text}>{t('by', 'By')}</span>
+
+              <span className={styles.text}>
+                {props.model?.rejectedByFamilyName} &nbsp;
+                {props.model?.rejectedByGivenName}
+                <span>{props.model?.rejectionReason}</span>
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default StockOperationStatus;

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

@@ -25,7 +25,7 @@ const EditStockOperationActionMenu: React.FC<EditStockOperationActionMenuProps>
   const { t } = useTranslation();
 
   const handleEdit = () => {
-    const operation = operations.find((op) => op.uuid === model.operationTypeUuid);
+    const operation = operations?.find((op) => op?.uuid === model?.operationTypeUuid);
     launchAddOrEditDialog(t, model, true, operation, operations, false);
   };