From 08959ab899b927de7f0f4a2cfdf5341b617be229 Mon Sep 17 00:00:00 2001 From: Arjun G <91885483+Arjun-Go@users.noreply.github.com> Date: Mon, 7 Aug 2023 12:26:27 +0530 Subject: [PATCH] Arjun | css changes to align fields in modal (#12) --- package.json | 2 +- src/entries/DrugChartModal/DrugChartModal.jsx | 72 +++++++++---------- .../DrugChartModal/DrugChartModal.scss | 62 ++++++++++++++-- .../DrugChartModal/DrugChartModal.spec.jsx | 2 +- 4 files changed, 89 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index 6aac82ca..36c1d07b 100644 --- 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 index cd26488a..95afc46a 100644 --- 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 />
-
+
{}} @@ -338,17 +330,7 @@ export default function DrugChartModal(props) {
- {}} - titleText={"Start Date"} - title={"Start Date"} - value={moment(hostData?.drugOrder?.scheduledDate).format( - "MM/DD/YYYY" - )} - isDisabled={true} - /> -
+
{}} @@ -365,6 +347,16 @@ export default function DrugChartModal(props) { isDisabled={true} />
+ {}} + titleText={"Start Date"} + title={"Start Date"} + value={moment(hostData?.drugOrder?.scheduledDate).format( + "MM/DD/YYYY" + )} + isDisabled={true} + />
{ await waitFor(() => { const startTimeInput = document.getElementById("time-selector"); - const timeValue = "12:3"; + const timeValue = "41:22"; fireEvent.change(startTimeInput, { target: { value: timeValue } }); });