Arjun | css changes to align fields in modal (#12)

Bahmni · Aug 7, 2023 · 08959ab · 08959ab
1 parent b22ed73
commit 08959ab
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "@storybook/react": "6.5",
     "axios": "1.4.0",
     "axios-mock-adapter": "^1.21.5",
-    "bahmni-carbon-ui": "0.1.2",
+    "bahmni-carbon-ui": "0.1.3",
     "carbon-components": "^10.19.0",
     "carbon-components-react": "^7.25.0",
     "carbon-icons": "^7.0.7",

diff --git a/src/entries/DrugChartModal/DrugChartModal.jsx b/src/entries/DrugChartModal/DrugChartModal.jsx
@@ -25,7 +25,7 @@ export default function DrugChartModal(props) {
   const enableStartTime = hostData?.startTimeFrequencies.includes(
     hostData?.drugOrder?.uniformDosingType?.frequency
   );
-  const enable24HourTimers = hostData?.enable24HourTimers || true;
+  const enable24HourTimers = hostData?.enable24HourTimers || false;
 
   const schedulesArray = Array.from(
     { length: enableSchedule?.frequencyPerDay },
@@ -62,13 +62,17 @@ export default function DrugChartModal(props) {
 
   const isTimePassed = (newTime) => {
     const currentTime = moment();
-    const enteredTime = moment(newTime, "HH:mm");
+    const enteredTime = enable24HourTimers
+      ? moment(newTime, "HH:mm")
+      : moment(newTime, "hh:mm A");
     return currentTime.isAfter(enteredTime);
   };
 
   const handleSchedule = (newSchedule, index) => {
     const newScheduleArray = [...schedules];
-    newScheduleArray[index] = newSchedule;
+    newScheduleArray[index] = enable24HourTimers
+      ? newSchedule
+      : moment(newSchedule, "hh:mm A");
     setSchedules(newScheduleArray);
     if (!isInvalidTimeTextPresent()) {
       setShowSchedulePassedWarning((prevScheduleWarnings) => {
@@ -88,12 +92,6 @@ export default function DrugChartModal(props) {
     });
   };
 
-  const convertSchedules = (schedules, enable24HourTimers) => {
-    return enable24HourTimers
-      ? schedules
-      : schedules.map((time) => moment(time, "hh:mm A").format("HH:mm"));
-  };
-
   const validateSchedules = async (schedules) => {
     if (schedules.some((schedule) => schedule === "")) {
       return { isValid: false, warningType: "empty" };
@@ -160,7 +158,9 @@ export default function DrugChartModal(props) {
 
   const isStartTimeExceedingFrequency = (time, frequency) => {
     const currentTime = moment();
-    const enteredTime = moment(time, "HH:mm");
+    const enteredTime = enable24HourTimers
+      ? moment(time, "HH:mm")
+      : moment(time, "hh:mm A");
     const updatedTime = updateStartTimeBasedOnFrequency(frequency, currentTime);
     return enteredTime.isAfter(updatedTime);
   };
@@ -174,7 +174,10 @@ export default function DrugChartModal(props) {
     } else {
       setShowEmptyStartTimeWarning(false);
     }
-    if (!moment(time, "HH:mm", true).isValid()) {
+    if (
+      (enable24HourTimers && !moment(time, "HH:mm", true).isValid()) ||
+      (!enable24HourTimers && !moment(time, "hh:mm A", true).isValid())
+    ) {
       setStartTime(time);
       return;
     }
@@ -187,20 +190,16 @@ export default function DrugChartModal(props) {
     isTimePassed(time)
       ? setShowStartTimePassedWarning(true)
       : setShowStartTimePassedWarning(false);
-    setStartTime(time);
-  };
 
-  const convertStartTime = (time, enable24HourTimers) => {
-    return enable24HourTimers ? time : moment(time, "hh:mm A").format("HH:mm");
-  };
-
-  const handleStartTimeChange = () => {
-    const time = convertStartTime(startTime, enable24HourTimers);
-    setStartTime(time);
+    enable24HourTimers
+      ? setStartTime(time)
+      : setStartTime(moment(time, "hh:mm A"));
   };
 
   const getUTCTimeEpoch = (time) => {
-    const [hours, minutes] = time.split(":");
+    const [hours, minutes] = enable24HourTimers
+      ? time.split(":")
+      : moment(time, "hh:mm A").format("HH:mm").split(":");
     const [day, month, year] = moment(hostData?.drugOrder?.scheduledDate)
       .format("DD-MM-YYYY")
       .split("-");
@@ -240,11 +239,6 @@ export default function DrugChartModal(props) {
     return payload;
   };
 
-  const handleSchedulesChange = () => {
-    const schedulesArray = convertSchedules(schedules, enable24HourTimers);
-    setSchedules(schedulesArray);
-  };
-
   const validateSave = async () => {
     if (isInvalidTimeTextPresent()) return false;
     if (enableSchedule) {
@@ -262,8 +256,6 @@ export default function DrugChartModal(props) {
   const handleSave = async () => {
     const performSave = await validateSave();
     if (performSave) {
-      enableStartTime && handleStartTimeChange();
-      enableSchedule && handleSchedulesChange();
       const medication = createDrugChartPayload();
       const response = await saveMedication(medication);
       response.status === 200 ? hostApi.onModalSave?.() : null;
@@ -305,7 +297,7 @@ export default function DrugChartModal(props) {
               disabled
             />
             <div className="inline-field">
-              <div className="field-with-units">
+              <div className="dose-field-with-units">
                 <NumberInputCarbon
                   id={"Dropdown"}
                   onChange={() => {}}
@@ -338,17 +330,7 @@ export default function DrugChartModal(props) {
               </div>
             </div>
             <div className="inline-field">
-              <DatePickerCarbon
-                id={"Dropdown"}
-                onChange={() => {}}
-                titleText={"Start Date"}
-                title={"Start Date"}
-                value={moment(hostData?.drugOrder?.scheduledDate).format(
-                  "MM/DD/YYYY"
-                )}
-                isDisabled={true}
-              />
-              <div className="field-with-units">
+              <div className="duration-field-with-units">
                 <NumberInputCarbon
                   id={"Dropdown"}
                   onChange={() => {}}
@@ -365,6 +347,16 @@ export default function DrugChartModal(props) {
                   isDisabled={true}
                 />
               </div>
+              <DatePickerCarbon
+                id={"Dropdown"}
+                onChange={() => {}}
+                titleText={"Start Date"}
+                title={"Start Date"}
+                value={moment(hostData?.drugOrder?.scheduledDate).format(
+                  "MM/DD/YYYY"
+                )}
+                isDisabled={true}
+              />
             </div>
             <div className="frequency">
               <DropdownCarbon

diff --git a/src/entries/DrugChartModal/DrugChartModal.scss b/src/entries/DrugChartModal/DrugChartModal.scss
@@ -22,13 +22,51 @@
     max-width: none;
   }
 
-  .field-with-units {
+  .dose-field-with-units {
     display: flex;
     flex-direction: row;
     width: 55%;
     justify-content: flex-start;
     align-items: flex-end;
-    margin-right: 0px;
+    margin-right: 10px;
+
+    .dropdown {
+      width: 142.449px;
+    }
+  }
+
+  .duration-field-with-units {
+    display: flex;
+    flex-direction: row;
+    width: 55%;
+    justify-content: flex-start;
+    align-items: flex-end;
+    margin-right: 10px;
+
+    .dropdown {
+      width: 142.449px;
+    }
+  }
+
+  .-TaKcdG2c0NUzkYaFWOzlQ\=\= {
+    width: 142.449px;
+    margin-right: 5px;
+  }
+
+  .frequency .dropdown {
+    margin-right: 0px !important;
+  }
+
+  .date-picker-carbon {
+    width: 45%;
+    .bx--date-picker .bx--date-picker--single,
+    .bx--date-picker-container {
+      width: 100%;
+    }
+  }
+
+  .schedule-time {
+    margin-right: 5px;
   }
 
   .schedule-section,
@@ -56,7 +94,7 @@
   }
 
   .route {
-    width: 60%;
+    width: 45%;
     margin-right: 0px;
 
     .dropdown {
@@ -89,6 +127,7 @@
   button[class*="bx--"]:disabled {
     opacity: 1;
     border: none;
+    border-radius: 0px;
   }
 
   .bx--text-input__readonly-icon {
@@ -98,6 +137,11 @@
 
   .bx--date-picker.bx--date-picker--single .bx--date-picker__input {
     background: #efefef;
+    width: 100% !important;
+  }
+
+  .bx--date-picker.bx--date-picker--single {
+    width: 100%;
   }
 
   .bx--date-picker__input:disabled,
@@ -113,10 +157,6 @@
     background-color: #efefef;
   }
 
-  .bx--date-picker.bx--date-picker--single .bx--date-picker__input {
-    margin-right: 5px;
-  }
-
   .bx--number__control-btn:disabled {
     border: none;
   }
@@ -146,8 +186,16 @@
     font-size: 0.85rem;
   }
 
+  .bx--number input[type="number"]:disabled ~ .bx--number__controls {
+    width: 55%;
+  }
+
   input#time-selector,
   textarea.bx--text-area.notes-section {
     background-color: #efefef;
   }
+
+  .bx--time-picker .bx--select-input {
+    background-color: #efefef;
+  }
 }
diff --git a/src/entries/DrugChartModal/DrugChartModal.spec.jsx b/src/entries/DrugChartModal/DrugChartModal.spec.jsx
@@ -183,7 +183,7 @@ describe("DrugChartModal", () => {
 
     await waitFor(() => {
       const startTimeInput = document.getElementById("time-selector");
-      const timeValue = "12:3";
+      const timeValue = "41:22";
       fireEvent.change(startTimeInput, { target: { value: timeValue } });
     });