fix: schedule date automatically info bow

dhis2 · Dec 11, 2024 · eecfaa0 · eecfaa0
1 parent 8c02cc1
commit eecfaa0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 37 deletions.
diff --git a/src/core_modules/capture-core/components/WidgetEventSchedule/InfoBox/InfoBox.component.js b/src/core_modules/capture-core/components/WidgetEventSchedule/InfoBox/InfoBox.component.js
@@ -10,6 +10,7 @@ const styles = {
     infoBox: {
         marginTop: spacersNum.dp16,
         padding: spacersNum.dp16,
+        width: 'fit-content',
     },
 };
 
@@ -24,7 +25,7 @@ const InfoBoxPlain = ({
     orgUnitName,
     classes,
 }: Props) => {
-    if (!scheduleDate || !suggestedScheduleDate || !orgUnitName) {
+    if (!scheduleDate || !suggestedScheduleDate) {
         return null;
     }
 

diff --git a/...odules/capture-core/components/WidgetEventSchedule/ScheduleDate/ScheduleDate.component.js b/...odules/capture-core/components/WidgetEventSchedule/ScheduleDate/ScheduleDate.component.js
@@ -2,7 +2,7 @@
 import React, { type ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import withStyles from '@material-ui/core/styles/withStyles';
-import { spacers } from '@dhis2/ui';
+import { spacers, colors } from '@dhis2/ui';
 import {
     DateField,
     withDefaultFieldContainer,
@@ -31,7 +31,16 @@ const ScheduleDataField = withDefaultFieldContainer()(
 
 const styles = {
     infoBox: {
-        padding: `0 ${spacers.dp24} ${spacers.dp24} ${spacers.dp16}`,
+        padding: `0 ${spacers.dp16} ${spacers.dp16} ${spacers.dp16}`,
+    },
+    fieldWrapper: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    fieldLabel: {
+        color: colors.grey900,
+        padding: `${spacers.dp16} ${spacers.dp24} 0 ${spacers.dp16}`,
+        fontSize: '14px',
     },
 };
 
@@ -41,44 +50,50 @@ const ScheduleDatePlain = ({
     setScheduleDate,
     orgUnit,
     serverSuggestedScheduleDate,
+    displayDueDateLabel,
     eventCountInOrgUnit,
     classes,
     hideDueDate,
 }: Props) => (
-    <>
-        {!hideDueDate && (
-            <>
-                <ScheduleDataField
-                    label={i18n.t('Schedule date / Due date')}
-                    required
-                    value={scheduleDate}
-                    width="100%"
-                    calendarWidth={350}
-                    styles={baseInputStyles}
-                    onSetFocus={() => { }}
-                    onFocus={() => { }}
-                    onRemoveFocus={() => { }}
-                    onBlur={(e, internalComponentError) => {
-                        const { error } = internalComponentError;
-                        if (error) {
-                            setScheduleDate('');
-                            return;
-                        }
-                        setScheduleDate(e);
-                    }}
-                />
-                <div className={classes.infoBox}>
-                    <InfoBox
-                        scheduleDate={serverScheduleDate}
-                        suggestedScheduleDate={serverSuggestedScheduleDate}
-                        eventCountInOrgUnit={eventCountInOrgUnit}
-                        orgUnitName={orgUnit?.name}
-                        hideDueDate={hideDueDate}
-                    />
-                </div>
-            </>
-        )}
-    </>
+    <div className={classes.fieldWrapper}>
+        {!hideDueDate ?
+            <ScheduleDataField
+                label={i18n.t('Schedule date / Due date')}
+                required
+                value={scheduleDate}
+                width="100%"
+                calendarWidth={350}
+                styles={baseInputStyles}
+                onSetFocus={() => { }}
+                onFocus={() => { }}
+                onRemoveFocus={() => { }}
+                onBlur={(e, internalComponentError) => {
+                    const { error } = internalComponentError;
+                    if (error) {
+                        setScheduleDate('');
+                        return;
+                    }
+                    setScheduleDate(e);
+                }}
+            />
+            :
+            <div className={classes.fieldLabel}>
+                {displayDueDateLabel ?? i18n.t('Schedule date / Due date', {
+                    interpolation: { escapeValue: false },
+                },
+                )}
+            </div>
+        }
+        <div className={classes.infoBox}>
+            <InfoBox
+                scheduleDate={serverScheduleDate}
+                suggestedScheduleDate={serverSuggestedScheduleDate}
+                eventCountInOrgUnit={eventCountInOrgUnit}
+                orgUnitName={orgUnit?.name}
+                hideDueDate={hideDueDate}
+            />
+        </div>
+    </div>
 );
 
 

diff --git a/...re_modules/capture-core/components/WidgetEventSchedule/ScheduleDate/scheduleDate.types.js b/...re_modules/capture-core/components/WidgetEventSchedule/ScheduleDate/scheduleDate.types.js
@@ -5,6 +5,7 @@ export type Props = {|
     stageId: string,
     programId: string,
     enrolledAt: string,
+    displayDueDateLabel: string,
     scheduleDate?: ?string,
     serverScheduleDate?: ?string,
     setScheduleDate: (date: string) => void,

diff --git a/...core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js b/...core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js
@@ -90,6 +90,7 @@ const WidgetEventSchedulePlain = ({
                         stageId={stageId}
                         orgUnit={orgUnit}
                         scheduleDate={scheduleDate}
+                        displayDueDateLabel={displayDueDateLabel}
                         serverSuggestedScheduleDate={serverSuggestedScheduleDate}
                         {...passOnProps}
                     />