@openmrs/esm-stock-management-app 1.0.1-pre.554 → 1.0.1-pre.575

package/src/core/components/table/table.scss

@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
   background-color: $ui-background;
@@ -11,7 +11,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
 }
 
 .widgetHeaderContainer > h4:after {
@@ -24,7 +24,7 @@
 
 .toggleButtons {
   width: fit-content;
-  margin: 0 spacing.$spacing-03;
+  margin: 0 layout.$spacing-03;
 }
 
 .searchField {
@@ -69,7 +69,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -91,29 +91,29 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: spacing.$spacing-03;
-  min-height: spacing.$spacing-10;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
   width: 100%;
   @include type.type-style('body-compact-01');
 }
 
 .radioButton {
-  padding: spacing.$spacing-02 spacing.$spacing-02;
-  margin: spacing.$spacing-03 0;
+  padding: layout.$spacing-02 layout.$spacing-02;
+  margin: layout.$spacing-03 0;
 }
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }
 
 .tabContainer div[role='tabpanel'] {
@@ -145,11 +145,11 @@
   }
 
   tr {
-    width: spacing.$spacing-01;
+    width: layout.$spacing-01;
   }
 
   .toolbarContent {
-    height: spacing.$spacing-09;
+    height: layout.$spacing-09;
   }
 }
 

package/src/core/components/tabs/vertical-tabs.scss

@@ -1,31 +1,31 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .heading {
   @include type.type-style('productive-heading-02');
   color: colors.$gray-70;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .heading:after {
   content: "";
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
 
 .mainContainer {
-  padding-bottom: 1.5rem;
+  padding-bottom: layout.$spacing-06;
   background: $ui-01;
   display: flex;
   justify-content: center;
 }
 
 .title {
-  padding: 1rem;
+  padding: layout.$spacing-05;
   font-size: 1.2rem;
 }
 
@@ -84,7 +84,7 @@
       outline-offset: 0 !important;
     }
 
-    max-height: 4rem;
+    max-height: layout.$spacing-10;
   }
 
   :global(.cds--col) {
@@ -107,10 +107,10 @@
 
 .tabContainer {
   background: white;
-  padding-left: 1.5rem;
-  padding-right: 1rem;
-  padding-top: 1rem;
-  margin-bottom: 1rem;
+  padding-left: layout.$spacing-06;
+  padding-right: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .optionCell {
@@ -118,10 +118,10 @@
 }
 
 .optionHeader {
-  width: 1.5rem !important;
+  width: layout.$spacing-06 !important;
 }
 
 .text {
   font-size: 0.9rem;
-  padding: 0.5rem;
+  padding: layout.$spacing-03;
 }

package/src/dashboard/home-dashboard.scss

@@ -1,5 +1,5 @@
 @use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 
 .homePageWrapper {
   display: flex;

package/src/stock-home/stock-home-detail-card.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: 2rem 0;
@@ -57,7 +57,7 @@
 }
 
 .emptyRow {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
   display: flex;
   align-items: center;
 }
@@ -65,7 +65,7 @@
 .visitSummaryContainer {
   width: 100%;
   max-width: 768px;
-  margin: 1rem auto;
+  margin: layout.$spacing-10 auto;
 }
 
 .expandedActiveVisitRow > td > div {
@@ -73,11 +73,11 @@
 }
 
 .expandedActiveVisitRow td {
-  padding: 0 2rem;
+  padding: 0 layout.$spacing-07;
 }
 
 .expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .action {
@@ -107,7 +107,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 3px;
       border-bottom: 0.375rem solid;
       @include brand-03(border-bottom-color);
@@ -136,7 +136,7 @@
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {

package/src/stock-home/stock-home.scss

@@ -1,13 +1,13 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 .cardContainer {
   background-color: colors.$white;
   display: flex;
   justify-content: space-between;
-  margin: 0 spacing.$spacing-05 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05 0 layout.$spacing-05;
   flex-flow: row wrap;
-  column-gap: spacing.$spacing-05;
-  row-gap: spacing.$spacing-05;
-}
+  column-gap: layout.$spacing-05;
+  row-gap: layout.$spacing-05;
+}

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -20,7 +20,7 @@ import StockItemCategorySelector from "../stock-item-category-selector/stock-ite
 import StockItemUnitsEdit from "../stock-item-units-edit/stock-item-units-edit.component";
 import { SaveStockItem } from "../../types";
 import ConceptsSelector from "../concepts-selector/concepts-selector.component";
-import rootStyles from "../../../root.scss";
+import styles from "../../add-stock-item/add-stock-item.scss";
 import { closeOverlay } from "../../../core/components/overlay/hook";
 import { expirationOptions, radioOptions } from "./stock-item-details.resource";
 import { restBaseUrl } from "@openmrs/esm-framework";
@@ -70,9 +70,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
     }, [model.hasExpiration, model.isDrug]);
 
     return (
-      <form
-        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
-      >
+      <form className={`${styles.formContainer} ${styles.verticalForm}`}>
         {!isEditing && (
           <FormGroup
             className="clear-margin-bottom"

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .form {
@@ -11,3 +11,32 @@
   gap: 1.5rem;
   padding-top: 1rem;
 }
+
+.formContainer {
+  height: calc(100vh - 100px) !important;
+  overflow: scroll;
+  padding: 0 1rem;
+}
+
+.verticalForm {
+  display: flex;
+  grid-row-gap: 2em;
+  padding-top: layout.$spacing-05;
+  align-content: space-between;
+  flex-direction: column;
+
+    :global(.cds--form-item) {
+    flex: none !important;
+  }
+
+  :global(.cds--label) {
+    color: black;
+    display: inline-block;
+    font-size: var(--cds-label-01-font-size);
+    font-weight: bold;
+    letter-spacing: var(--cds-label-01-letter-spacing, .32px);
+    line-height: layout.$spacing-05;
+    margin-bottom: layout.$spacing-03;
+    vertical-align: baseline;
+  }
+}

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

@@ -1,18 +1,17 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-@import '../root.scss';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
   background-color: $ui-background;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   text-align: right;
 }
 
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -78,12 +77,12 @@
 }
 
 .dateAlign {
-  padding-top: spacing.$spacing-03;
+  padding-top: layout.$spacing-03;
   height: 100%;
 }
 
 .filtersAlign {
-  padding-bottom: spacing.$spacing-03;
+  padding-bottom: layout.$spacing-03;
 
   :global(.cds--list-box__menu) {
     min-width: 15rem;
@@ -95,5 +94,5 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: spacing.$spacing-05;
-}
+  margin-bottom: layout.$spacing-05;
+}

package/src/stock-management-header/stock-management-header.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
-  height: spacing.$spacing-12;
+  height: layout.$spacing-12;
   background-color: $ui-02;
   display: flex;
   padding-left: 8px;

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

@@ -82,10 +82,12 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
   }, [currentStockOperationType, requisition, props.model?.uuid]);
 
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [canReceiveItems, setCanReceiveItems] = useState(false);
+  const [canDisplayReceivedItems, setCanDisplayReceivedItems] = useState(false);
 
   useEffect(() => {
-    setCanReceiveItems(props?.model?.permission?.canReceiveItems ?? false);
+    setCanDisplayReceivedItems(
+      props?.model?.permission?.canDisplayReceivedItems ?? false
+    );
   }, [props?.model?.permission]);
 
   if (isLoading) return <AccordionSkeleton />;
@@ -182,6 +184,9 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
               : result.requiresDispatchAcknowledgement
           }
           actions={{
+            onGoBack: () => {
+              setSelectedIndex(1);
+            },
             onSave: async (model) => {
               // TODO: Update
               await addOrEditStockOperation(
@@ -193,17 +198,15 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                 props.canPrint
               );
             },
-            onGoBack: () => {
-              setSelectedIndex(1);
-            },
+
             onComplete: async () => {
-              await showActionDialogButton("Complete", true, props?.model);
+              await showActionDialogButton("Complete", false, props?.model);
             },
             onSubmit: async () => {
-              await showActionDialogButton("Submit", true, props?.model);
+              await showActionDialogButton("Submit", false, props?.model);
             },
             onDispatch: async () => {
-              await showActionDialogButton("Dispatch", true, props?.model);
+              await showActionDialogButton("Dispatch", false, props?.model);
             },
           }}
         />
@@ -213,7 +216,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
   ].concat(
     StockOperationTypeIsStockIssue(
       props?.model?.operationType as OperationType
-    ) || canReceiveItems
+    ) || canDisplayReceivedItems
       ? status === "DISPATCHED" || status === "COMPLETED"
         ? [
             {
@@ -505,6 +508,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                       <div style={{ margin: "2px" }}>
                         <StockOperationCompleteDispatchButton
                           operation={props?.model}
+                          reason={false}
                         />
                       </div>
                       <div style={{ margin: "2px" }}>

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

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 .sectionTitle {
     @include type.type-style('heading-compact-02');
     color: $text-02;
-    margin-bottom: spacing.$spacing-04;
+    margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-    padding-bottom: spacing.$spacing-05;
+    padding-bottom: layout.$spacing-05;
 }
 
 .actionsContainer {

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

@@ -59,10 +59,7 @@ export async function initializeNewStockOperation(
   let destinationPartyList: Party[] | null | undefined;
 
   if (isNew) {
-    model = structuredClone({
-      ...initialStockOperationValue(),
-      receivedItems: [],
-    });
+    model = structuredClone(initialStockOperationValue());
     model = Object.assign(model, {
       operationDate: today(),
       operationTypeName: currentStockOperationType?.name,

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

@@ -35,7 +35,7 @@ import { useStockOperationPages } from "../stock-operations-table.resource";
 import { createBaseOperationPayload } from "./add-stock-utils";
 import { showSnackbar, useSession } from "@openmrs/esm-framework";
 
-import rootStyles from "../../root.scss";
+import styles from "../add-stock-operation/base-operation-details.scss";
 
 interface BaseOperationDetailsProps {
   isEditing?: boolean;
@@ -116,9 +116,7 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
   };
   return (
     <div style={{ margin: "10px" }}>
-      <form
-        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
-      >
+      <form className={`${styles.formContainer} ${styles.verticalForm}`}>
         {canEdit && (
           <Controller
             control={control}

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

@@ -0,0 +1,30 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.verticalForm {
+  display: flex;
+  grid-row-gap: 2em;
+  padding-top: layout.$spacing-05;
+  align-content: space-between;
+  flex-direction: column;
+
+    :global(.cds--form-item) {
+    flex: none !important;
+  }
+
+  :global(.cds--label) {
+    color: black;
+    display: inline-block;
+    font-size: var(--cds-label-01-font-size);
+    font-weight: bold;
+    letter-spacing: var(--cds-label-01-letter-spacing, .32px);
+    line-height: layout.$spacing-05;
+    margin-bottom: layout.$spacing-03;
+    vertical-align: baseline;
+  }
+}
+
+.formContainer {
+    margin: layout.$spacing-05;
+}

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

@@ -46,11 +46,12 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
   model,
   requiresDispatchAcknowledgement,
   actions,
+  isEditing,
 }) => {
   const { t } = useTranslation();
   const [isSaving, setIsSaving] = useState(false);
   const [approvalRequired, setApprovalRequired] = useState<boolean | null>(
-    null
+    model?.approvalRequired
   );
 
   const handleRadioButtonChange = (selectedItem: boolean) => {
@@ -68,7 +69,9 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
               "Does the transaction require approval ?"
             )}
             onChange={handleRadioButtonChange}
-            defaultSelected={approvalRequired}
+            defaultSelected={
+              model?.approvalRequired === null ? false : approvalRequired
+            }
           >
             <RadioButton
               value={true}
@@ -111,15 +114,15 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
                   kind="primary"
                   onClick={async () => {
                     delete model?.dateCreated;
-                    delete model?.status;
                     setIsSaving(true);
-                    await actions.onSave(model).then(() => {
-                      delete model?.dateCreated;
-                      model.status = "COMPLETED";
-                      setIsSaving(true);
-                      actions.onComplete(model);
+                    if (!isEditing) {
+                      delete model.status;
+                      await actions.onSave(model);
                       setIsSaving(false);
-                    });
+                    }
+                    model.status = "COMPLETED";
+                    actions.onComplete(model);
+                    setIsSaving(false);
                   }}
                   renderIcon={ListChecked}
                 >
@@ -137,13 +140,9 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
                     delete model?.dateCreated;
                     delete model?.status;
                     setIsSaving(true);
-                    await actions.onSave(model).then(() => {
-                      delete model?.dateCreated;
-                      model.status = "COMPLETED";
-                      setIsSaving(true);
-                      actions.onDispatch(model);
-                      setIsSaving(false);
-                    });
+                    model.status = "DISPATCHED";
+                    await actions.onDispatch(model);
+                    setIsSaving(false);
                   }}
                   renderIcon={Departure}
                 >
@@ -160,7 +159,7 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
                   onClick={actions.onSubmit}
                   renderIcon={SendFilled}
                 >
-                  {t("submit", "Submit For Review")}
+                  {t("submitForReview", "Submit For Review")}
                 </Button>
               )}
             </>
@@ -175,6 +174,7 @@ const StockOperationSubmission: React.FC<StockOperationSubmissionProps> = ({
               delete model?.dateCreated;
               delete model?.status;
               setIsSaving(true);
+              model.approvalRequired = approvalRequired ? true : false;
               await actions.onSave(model);
               setIsSaving(false);
             }}

package/src/stock-operations/stock-operations-dialog/stock-operations-complete-button.component.tsx

@@ -8,17 +8,18 @@ import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOper
 
 interface StockOperationCompleteButtonProps {
   operation: StockOperationDTO;
+  reason: boolean;
 }
 
 const StockOperationCompleteButton: React.FC<
   StockOperationCompleteButtonProps
-> = ({ operation }) => {
+> = ({ operation, reason }) => {
   const { t } = useTranslation();
   const launchCompleteModal = useCallback(() => {
     const dispose = showModal("stock-operation-dialog", {
       title: "Complete",
       operation: operation,
-      requireReason: true,
+      requireReason: reason,
       closeModal: () => dispose(),
     });
   }, [operation]);

package/src/stock-operations/stock-operations-dialog/stock-operations-completed-dispatch-button.component.tsx

@@ -8,17 +8,18 @@ import { StockOperationDTO } from "../../core/api/types/stockOperation/StockOper
 
 interface StockOperationCompleteDispatchButtonProps {
   operation: StockOperationDTO;
+  reason: boolean;
 }
 
 const StockOperationCompleteDispatchButton: React.FC<
   StockOperationCompleteDispatchButtonProps
-> = ({ operation }) => {
+> = ({ operation, reason }) => {
   const { t } = useTranslation();
   const launchcompletedDispatchModal = useCallback(() => {
     const dispose = showModal("stock-operation-dialog", {
       title: "Complete Dispatch",
       operation: operation,
-      requireReason: false,
+      requireReason: reason,
       closeModal: () => dispose(),
     });
   }, [operation]);

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

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }