feat: assign an user when scheduling an enrollment event

cypress/integration/WidgetsForEnrollmentPages/WidgetsForEnrollmentAddEventPage.feature

@@ -96,3 +96,8 @@ Feature: The user interacts with the widgets on the enrollment add event page
     When you click switch tab to Schedule
     Then you should see Schedule tab
     And you should see suggested date: 08-01
+
+  Scenario: You can assign a user when scheduling an event
+  Given you land on the enrollment edit event page by having typed /#/enrollmentEventNew?enrollmentId=zRfAPUpjoG3&orgUnitId=DiszpKrYNg8&programId=M3xtLkYBlKI&stageId=uvMKOn1oWvd&teiId=S3JjTA4QMNe
+  When you click switch tab to Schedule
+  Then you can assign a user when scheduling the event

cypress/integration/WidgetsForEnrollmentPages/WidgetsForEnrollmentAddEventPage/index.js

@@ -2,3 +2,14 @@ import '../sharedSteps';
 import '../WidgetEnrollment';
 import '../WidgetProfile';
 import '../WidgetTab';
+
+Then('you can assign a user when scheduling the event', () => {
+    cy.get('[data-test="assignee-section"]').within(() => {
+        cy.get('[data-test="capture-ui-input"]').click();
+        cy.get('[data-test="capture-ui-input"]').type('Tracker demo');
+        cy.contains('Tracker demo User').click();
+    });
+    cy.get('[data-test="assignee-section"]').within(() => {
+        cy.get('[data-test="dhis2-uicore-chip"]').contains('Tracker demo User').should('exist');
+    });
+});

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: 2023-09-04T07:07:59.195Z\n"
-"PO-Revision-Date: 2023-09-04T07:07:59.195Z\n"
+"POT-Creation-Date: 2023-09-25T08:33:17.277Z\n"
+"PO-Revision-Date: 2023-09-25T08:33:17.277Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."

src/core_modules/capture-core/components/FormFields/UserField/index.js

@@ -1,2 +1,3 @@
 // @flow
 export { UserField } from './UserField.component';
+export type { User as UserFormField } from './types';

src/core_modules/capture-core/components/WidgetEventSchedule/Assignee/Assignee.component.js

@@ -0,0 +1,38 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/styles';
+import { UserField } from '../../FormFields/UserField/UserField.component';
+import type { Props } from './Assignee.types';
+
+const getStyles = () => ({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 8px 8px 12px',
+    },
+    label: {
+        fontSize: 14,
+        flexBasis: 200,
+        color: '#212934',
+    },
+    field: {
+        flexBasis: 150,
+        flexGrow: 1,
+    },
+});
+
+const AssigneePlain = (props: Props) => {
+    const { classes, assignee, ...passOnProps } = props;
+    return (
+        <div className={classes.container}>
+            <div className={classes.label}>{i18n.t('Assignee')}</div>
+            <div className={classes.field}>
+                {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
+                <UserField inputPlaceholderText={i18n.t('Search for user')} value={assignee} {...passOnProps} />
+            </div>
+        </div>
+    );
+};
+
+export const Assignee = withStyles(getStyles)(AssigneePlain);

src/core_modules/capture-core/components/WidgetEventSchedule/Assignee/Assignee.types.js

@@ -0,0 +1,7 @@
+// @flow
+import type { UserFormField } from '../../FormFields/UserField';
+
+export type Props = {
+    ...CssClasses,
+    assignee?: UserFormField,
+};

src/core_modules/capture-core/components/WidgetEventSchedule/Assignee/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { Assignee } from './Assignee.component';

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.actions.js

@@ -21,6 +21,7 @@ export const requestScheduleEvent = ({
     onSaveExternal,
     onSaveSuccessActionType,
     onSaveErrorActionType,
+    assignedUser,
 }: {
     scheduleDate: string,
     comments: Array<{value: string}>,
@@ -34,6 +35,7 @@ export const requestScheduleEvent = ({
     onSaveExternal: (eventServerValues: Object, uid: string) => void,
     onSaveSuccessActionType?: string,
     onSaveErrorActionType?: string,
+    assignedUser?: {uid: string},
 }) =>
     actionCreator(scheduleEventWidgetActionTypes.EVENT_SCHEDULE_REQUEST)({
         scheduleDate,
@@ -48,6 +50,7 @@ export const requestScheduleEvent = ({
         onSaveExternal,
         onSaveSuccessActionType,
         onSaveErrorActionType,
+        assignedUser,
     });
 
 export const scheduleEvent = (

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js

@@ -10,7 +10,7 @@ import { ScheduleText } from './ScheduleText';
 import { CommentSection } from '../WidgetComment';
 import type { Props } from './widgetEventSchedule.types';
 import { CategoryOptions } from './CategoryOptions/CategoryOptions.component';
-
+import { Assignee } from './Assignee';
 
 const styles = () => ({
     wrapper: {
@@ -66,9 +66,12 @@ const WidgetEventSchedulePlain = ({
     suggestedScheduleDate,
     comments,
     programCategory,
+    enableUserAssignment,
     selectedCategories,
     onClickCategoryOption,
     onResetCategoryOption,
+    onSetAssignee,
+    assignee,
     categoryOptionsError,
     ...passOnProps
 }: Props) => (
@@ -119,6 +122,11 @@ const WidgetEventSchedulePlain = ({
                 handleAddComment={onAddComment}
             />
         </DataSection>
+        {enableUserAssignment && (
+            <DataSection dataTest="assignee-section" sectionName={i18n.t('Assignee')}>
+                <Assignee onSet={onSetAssignee} assignee={assignee} />
+            </DataSection>
+        )}
         <ScheduleButtons
             hasChanges={scheduleDate !== suggestedScheduleDate}
             onCancel={onCancel}

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.container.js

@@ -43,6 +43,7 @@ export const WidgetEventSchedule = ({
     const { currentUser, noteId } = useCommentDetails();
     const [scheduleDate, setScheduleDate] = useState('');
     const [comments, setComments] = useState([]);
+    const [assignee, setAssignee] = useState();
     const { events } = useEventsInOrgUnit(orgUnitId, scheduleDate);
     const { eventId } = useLocationQuery();
     const eventCountInOrgUnit = events
@@ -80,6 +81,7 @@ export const WidgetEventSchedule = ({
             onSaveExternal: onSave,
             onSaveSuccessActionType,
             onSaveErrorActionType,
+            ...(assignee && { assignedUser: { uid: assignee.id } }),
         }));
     }, [
         dispatch,
@@ -96,6 +98,7 @@ export const WidgetEventSchedule = ({
         onSaveSuccessActionType,
         onSaveErrorActionType,
         programCategory,
+        assignee,
     ]);
 
     React.useEffect(() => {
@@ -119,6 +122,7 @@ export const WidgetEventSchedule = ({
         setComments([...comments, newComment]);
     };
 
+    const onSetAssignee = useCallback(user => setAssignee(user), []);
     const onClickCategoryOption = useCallback((optionId: string, categoryId: string) => {
         setSelectedCategories(prevCategoryOptions => ({
             ...prevCategoryOptions,
@@ -159,11 +163,13 @@ export const WidgetEventSchedule = ({
 
     return (
         <WidgetEventScheduleComponent
+            assignee={assignee}
             stageId={stageId}
             stageName={stage.name}
             programId={programId}
             programCategory={programCategory}
             programName={program.name}
+            enableUserAssignment={stage?.enableUserAssignment}
             scheduleDate={scheduleDate}
             displayDueDateLabel={programStageScheduleConfig.displayDueDateLabel}
             suggestedScheduleDate={suggestedScheduleDate}
@@ -178,6 +184,7 @@ export const WidgetEventSchedule = ({
             categoryOptionsError={categoryOptionsError}
             onClickCategoryOption={onClickCategoryOption}
             onResetCategoryOption={onResetCategoryOption}
+            onSetAssignee={onSetAssignee}
             {...passOnProps}
         />
 

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.epics.js

@@ -28,6 +28,7 @@ export const scheduleEnrollmentEventEpic = (action$: InputObservable, store: Red
                 onSaveExternal,
                 onSaveSuccessActionType,
                 onSaveErrorActionType,
+                assignedUser,
             } = action.payload;
 
             const { events } = store.value;
@@ -46,6 +47,7 @@ export const scheduleEnrollmentEventEpic = (action$: InputObservable, store: Red
                 programStage: stageId,
                 status: 'SCHEDULE',
                 notes: comments ?? [],
+                assignedUser,
             }] };
 
             if (attributeCategoryOptions) {

src/core_modules/capture-core/components/WidgetEventSchedule/widgetEventSchedule.types.js

@@ -1,5 +1,6 @@
 // @flow
 import type { ProgramCategory, CategoryOption } from './CategoryOptions/CategoryOptions.types';
+import type { UserFormField } from '../FormFields/UserField';
 
 export type ContainerProps = {|
    programId: string,
@@ -38,7 +39,10 @@ export type Props = {|
    selectedCategories?: ?{ [categoryId: string]: CategoryOption },
    programCategory?: ProgramCategory,
    categoryOptionsError?: ?{[categoryId: string]: { touched: boolean, valid: boolean} },
+   enableUserAssignment?: boolean,
    onSchedule: () => void,
+   onSetAssignee: (user: UserFormField) => void,
+   assignee?: UserFormField,
    onCancel: () => void,
    setScheduleDate: (date: string) => void,
    onAddComment: (comment: string) => void,