fix: style for schedule

dhis2 · Dec 8, 2024 · b240a15 · b240a15
1 parent 8fb93ca
commit b240a15
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 146 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-07T12:32:56.041Z\n"
-"PO-Revision-Date: 2024-12-07T12:32:56.041Z\n"
+"POT-Creation-Date: 2024-12-08T13:28:49.327Z\n"
+"PO-Revision-Date: 2024-12-08T13:28:49.327Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1321,6 +1321,12 @@ msgstr "Write a note about this event"
 msgid "This event doesn't have any notes"
 msgstr "This event doesn't have any notes"
 
+msgid "after"
+msgstr "after"
+
+msgid "before"
+msgstr "before"
+
 msgid "Schedule date info"
 msgstr "Schedule date info"
 
@@ -1335,12 +1341,6 @@ msgid_plural "The scheduled date is {{count}} days {{position}} the suggested da
 msgstr[0] "The scheduled date is {{count}} day {{position}} the suggested date."
 msgstr[1] "The scheduled date is {{count}} days {{position}} the suggested date."
 
-msgid "after"
-msgstr "after"
-
-msgid "before"
-msgstr "before"
-
 msgid "There are {{count}} scheduled event in {{orgUnitName}} on this day."
 msgid_plural "There are {{count}} scheduled event in {{orgUnitName}} on this day."
 msgstr[0] "There are {{count}} scheduled event in {{orgUnitName}} on this day."

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
@@ -13,6 +13,9 @@ const styles = {
     },
 };
 
+const getDayDifference = (startDate: string, endDate: string): number =>
+    moment(startDate).diff(moment(endDate), 'days');
+
 const InfoBoxPlain = ({
     scheduleDate,
     suggestedScheduleDate,
@@ -21,38 +24,49 @@ const InfoBoxPlain = ({
     orgUnitName,
     classes,
 }: Props) => {
-    if (!scheduleDate || !suggestedScheduleDate) { return null; }
-    const differenceScheduleDateAndSuggestedDate = moment(scheduleDate).diff(moment(suggestedScheduleDate), 'days');
+    if (!scheduleDate || !suggestedScheduleDate || !orgUnitName) {
+        return null;
+    }
+
+    const dayDifference = getDayDifference(scheduleDate, suggestedScheduleDate);
+    const absoluteDifference = Math.abs(dayDifference);
+    const position = dayDifference > 0 ? i18n.t('after') : i18n.t('before');
+    const scheduledDateMatchesSuggested = scheduleDate === suggestedScheduleDate;
 
     return (
         <NoticeBox className={classes.infoBox} title={i18n.t('Schedule date info')}>
-            {hideDueDate ? <>
-                {i18n.t('Scheduled automatically for {{suggestedScheduleDate}}', { suggestedScheduleDate })}
-            </> : <>
-                {scheduleDate === suggestedScheduleDate ?
-                    i18n.t('The scheduled date matches the suggested date, but can be changed if needed.')
-                    :
-                    i18n.t(
-                        'The scheduled date is {{count}} days {{position}} the suggested date.',
-                        {
-                            position: differenceScheduleDateAndSuggestedDate > 0 ? i18n.t('after') : i18n.t('before'),
-                            count: Math.abs(differenceScheduleDateAndSuggestedDate),
-                            defaultValue: 'The scheduled date is {{count}} day {{position}} the suggested date.',
-                            defaultValue_plural: 'The scheduled date is {{count}} days {{position}} the suggested date.',
-                        })
-                }
-                {' '}
-                {i18n.t('There are {{count}} scheduled event in {{orgUnitName}} on this day.', {
-                    count: eventCountInOrgUnit,
-                    orgUnitName,
-                    defaultValue: 'There are {{count}} scheduled event in {{orgUnitName}} on this day.',
-                    defaultValue_plural: 'There are {{count}} scheduled events in {{orgUnitName}} on this day.',
-                    interpolation: {
-                        escapeValue: false,
-                    },
-                })}</>}
+            {hideDueDate ? (
+                <>
+                    {i18n.t('Scheduled automatically for {{suggestedScheduleDate}}', { suggestedScheduleDate })}
+                </>
+            ) : (
+                <>
+                    {scheduledDateMatchesSuggested
+                        ? i18n.t('The scheduled date matches the suggested date, but can be changed if needed.')
+                        : i18n.t(
+                            'The scheduled date is {{count}} days {{position}} the suggested date.',
+                            {
+                                position,
+                                count: absoluteDifference,
+                                defaultValue: 'The scheduled date is {{count}} day {{position}} the suggested date.',
+                                defaultValue_plural: 'The scheduled date is {{count}} days {{position}} the suggested date.',
+                            },
+                        )
+                    }
+                    {' '}
+                    {i18n.t('There are {{count}} scheduled event in {{orgUnitName}} on this day.', {
+                        count: eventCountInOrgUnit,
+                        orgUnitName,
+                        defaultValue: 'There are {{count}} scheduled event in {{orgUnitName}} on this day.',
+                        defaultValue_plural: 'There are {{count}} scheduled events in {{orgUnitName}} on this day.',
+                        interpolation: {
+                            escapeValue: false,
+                        },
+                    })}
+                </>
+            )}
         </NoticeBox>
     );
 };
 
-export const InfoBox: ComponentType<$Diff<Props, CssClasses>> = (withStyles(styles)(InfoBoxPlain));
+export const InfoBox: ComponentType<$Diff<Props, CssClasses>> = withStyles(styles)(InfoBoxPlain);
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 { spacersNum } from '@dhis2/ui';
+import { spacers } from '@dhis2/ui';
 import {
     DateField,
     withDefaultFieldContainer,
@@ -15,7 +15,7 @@ import type { Props } from './scheduleDate.types';
 import labelTypeClasses from './dataEntryFieldLabels.module.css';
 import { InfoBox } from '../InfoBox';
 import { convertStringToDateFormat } from '../../../utils/converters/date';
-
+import { baseInputStyles } from '../ScheduleOrgUnit/commonProps';
 
 
 const LabelledRequiredDateField = withDefaultFieldContainer()(
@@ -31,9 +31,8 @@ const LabelledRequiredDateField = withDefaultFieldContainer()(
 );
 
 const styles = {
-    container: {
-        display: 'flex',
-        marginTop: spacersNum.dp4,
+    infoBox: {
+        padding: `0 ${spacers.dp24} ${spacers.dp24} ${spacers.dp16}`,
     },
 };
 
@@ -46,27 +45,35 @@ const ScheduleDatePlain = ({
     eventCountInOrgUnit,
     classes,
     hideDueDate,
-}: Props) => (<>
-    {!hideDueDate && <div className={classes.container}>
-        <LabelledRequiredDateField
-            label={i18n.t('Schedule date / Due date')}
-            required
-            value={scheduleDate}
-            width="100%"
-            calendarWidth={350}
-            onSetFocus={() => { }}
-            onFocus={() => { }}
-            onRemoveFocus={() => { }}
-            onBlur={(e) => { setScheduleDate(convertStringToDateFormat(e)); }}
-        />
-    </div>}
-    <InfoBox
-        scheduleDate={serverScheduleDate}
-        suggestedScheduleDate={serverSuggestedScheduleDate}
-        eventCountInOrgUnit={eventCountInOrgUnit}
-        orgUnitName={orgUnit?.name}
-        hideDueDate={hideDueDate}
-    />
-</>);
+}: Props) => (
+    <>
+        {!hideDueDate && (
+            <>
+                <LabelledRequiredDateField
+                    label={i18n.t('Schedule date / Due date')}
+                    required
+                    value={scheduleDate}
+                    width="100%"
+                    calendarWidth={350}
+                    styles={baseInputStyles}
+                    onSetFocus={() => { }}
+                    onFocus={() => { }}
+                    onRemoveFocus={() => { }}
+                    onBlur={(e) => { setScheduleDate(convertStringToDateFormat(e)); }}
+                />
+                <div className={classes.infoBox}>
+                    <InfoBox
+                        scheduleDate={serverScheduleDate}
+                        suggestedScheduleDate={serverSuggestedScheduleDate}
+                        eventCountInOrgUnit={eventCountInOrgUnit}
+                        orgUnitName={orgUnit?.name}
+                        hideDueDate={hideDueDate}
+                    />
+                </div>
+            </>
+        )}
+    </>
+);
+
 
 export const ScheduleDate: ComponentType<$Diff<Props, CssClasses>> = (withStyles(styles)(ScheduleDatePlain));
diff --git a/...core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js b/...core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js
@@ -1,9 +1,10 @@
 // @flow
 import React, { type ComponentType } from 'react';
-import { spacersNum, spacers, colors } from '@dhis2/ui';
+import { spacersNum } from '@dhis2/ui';
 import withStyles from '@material-ui/core/styles/withStyles';
 import i18n from '@dhis2/d2-i18n';
 import { DataSection } from '../DataSection';
+import { Widget } from '../Widget';
 import { ScheduleButtons } from './ScheduleButtons';
 import { ScheduleDate } from './ScheduleDate';
 import { ScheduleText } from './ScheduleText';
@@ -15,40 +16,8 @@ import { ScheduleOrgUnit } from './ScheduleOrgUnit/ScheduleOrgUnit.component';
 
 const styles = () => ({
     wrapper: {
-        padding: `${spacers.dp16} 0`,
-        maxWidth: '55.75rem',
-    },
-    fieldWrapper: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        padding: `${spacers.dp8}  ${spacers.dp16}`,
-    },
-    fieldLabel: {
-        color: colors.grey900,
-        paddingTop: spacersNum.dp16,
-        paddingRight: spacersNum.dp16,
-    },
-    fieldContent: {
-        flexBasis: '200px',
-        flexGrow: 1,
-    },
-    containerWrapper: {
-        padding: `${spacers.dp8}  ${spacers.dp16}`,
-    },
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        paddingTop: 8,
-        paddingBottom: 8,
-    },
-    label: {
-        flexBasis: 200,
-        paddingLeft: 5,
-    },
-    field: {
-        flexBasis: 150,
-        flexGrow: 1,
+        paddingLeft: spacersNum.dp16,
+        minWidth: '300px',
     },
 });
 
@@ -92,14 +61,19 @@ const WidgetEventSchedulePlain = ({
 
 
     return (
-
-        <div className={classes.wrapper}>
-            <DataSection
-                dataTest="schedule-section"
-                sectionName={i18n.t('Schedule info')}
-            >
-                <div className={classes.fieldWrapper}>
-                    <div className={classes.fieldContent}>
+        <Widget
+            noncollapsible
+            borderless
+            header={
+                <></>
+            }
+        >
+            <div className={classes.wrapper}>
+                <DataSection
+                    dataTest="schedule-section"
+                    sectionName={i18n.t('Schedule info')}
+                >
+                    <div className={classes.test}>
                         <ScheduleOrgUnit
                             orgUnit={orgUnit}
                             onSelectOrgUnit={onSelectOrgUnit}
@@ -115,49 +89,49 @@ const WidgetEventSchedulePlain = ({
                             {...passOnProps}
                         />
                     </div>
-                </div>
 
-            </DataSection>
-            {programCategory && <DataSection
-                dataTest="category-options-section"
-                sectionName={programCategory.displayName}
-            >
-                <CategoryOptions
-                    categories={programCategory.categories}
-                    selectedOrgUnitId={orgUnit?.id}
-                    selectedCategories={selectedCategories}
-                    categoryOptionsError={categoryOptionsError}
-                    onClickCategoryOption={onClickCategoryOption}
-                    onResetCategoryOption={onResetCategoryOption}
-                    required
+                </DataSection>
+                {programCategory && <DataSection
+                    dataTest="category-options-section"
+                    sectionName={programCategory.displayName}
+                >
+                    <CategoryOptions
+                        categories={programCategory.categories}
+                        selectedOrgUnitId={orgUnit?.id}
+                        selectedCategories={selectedCategories}
+                        categoryOptionsError={categoryOptionsError}
+                        onClickCategoryOption={onClickCategoryOption}
+                        onResetCategoryOption={onResetCategoryOption}
+                        required
+                    />
+                </DataSection>}
+                <DataSection
+                    dataTest="note-section"
+                    sectionName={i18n.t('Event notes')}
+                >
+                    <NoteSection
+                        notes={notes}
+                        placeholder={i18n.t('Write a note about this scheduled event')}
+                        handleAddNote={onAddNote}
+                    />
+                </DataSection>
+                {enableUserAssignment && (
+                    <DataSection dataTest="assignee-section" sectionName={i18n.t('Assignee')}>
+                        <Assignee onSet={onSetAssignee} assignee={assignee} />
+                    </DataSection>
+                )}
+                <ScheduleButtons
+                    hasChanges={scheduleDate !== suggestedScheduleDate}
+                    onCancel={onCancel}
+                    onSchedule={onSchedule}
                 />
-            </DataSection>}
-            <DataSection
-                dataTest="note-section"
-                sectionName={i18n.t('Event notes')}
-            >
-                <NoteSection
-                    notes={notes}
-                    placeholder={i18n.t('Write a note about this scheduled event')}
-                    handleAddNote={onAddNote}
+                <ScheduleText
+                    programName={programName}
+                    stageName={stageName}
+                    orgUnitName={orgUnit?.name}
                 />
-            </DataSection>
-            {enableUserAssignment && (
-                <DataSection dataTest="assignee-section" sectionName={i18n.t('Assignee')}>
-                    <Assignee onSet={onSetAssignee} assignee={assignee} />
-                </DataSection>
-            )}
-            <ScheduleButtons
-                hasChanges={scheduleDate !== suggestedScheduleDate}
-                onCancel={onCancel}
-                onSchedule={onSchedule}
-            />
-            <ScheduleText
-                programName={programName}
-                stageName={stageName}
-                orgUnitName={orgUnit?.name}
-            />
-        </div>
+            </div>
+        </Widget>
     );
 };