feat: widget assignee

cypress/integration/WidgetsForEnrollmentPages/WidgetAssignee/index.js

@@ -0,0 +1,33 @@
+When('you assign the user Geetha in the view mode', () => {
+    cy.get('[data-test="widget-assignee"]').within(() => {
+        cy.get('[data-test="widget-assignee-edit"]').click();
+        cy.get('[data-test="capture-ui-input"]').type('Geetha');
+        cy.contains('Geetha Alwan').click();
+    });
+});
+
+When('you assign the user Tracker demo User in the edit mode', () => {
+    cy
+        .get('[data-test="widget-enrollment-event"]')
+        .find('[data-test="dhis2-uicore-button"]')
+        .eq(1)
+        .click();
+
+    cy.get('[data-test="widget-assignee"]').within(() => {
+        cy.get('[data-test="widget-assignee-edit"]').click();
+        cy.get('[data-test="capture-ui-input"]').type('Tracker demo');
+        cy.contains('Tracker demo User').click();
+    });
+});
+
+Then('the event has the user Geetha Alwan assigned', () => {
+    cy.get('[data-test="widget-assignee"]').within(() => {
+        cy.get('[data-test="widget-contents"]').contains('Geetha Alwan').should('exist');
+    });
+});
+
+Then('the event has the user Tracker demo User assigned', () => {
+    cy.get('[data-test="widget-assignee"]').within(() => {
+        cy.get('[data-test="widget-contents"]').contains('Tracker demo User').should('exist');
+    });
+});

cypress/integration/WidgetsForEnrollmentPages/WidgetsForEnrollmentEditEvent.feature

@@ -99,4 +99,11 @@ Feature: The user interacts with the widgets on the enrollment edit event
     Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=XGLkLlOXgmE&orgUnitId=DiszpKrYNg8
     Then the enrollment widget should be loaded
     When you click edit mode
-    Then list should contain the new comment: new test comment
+    Then list should contain the new comment: new test comment
+
+  Scenario: You can assign a user to a event
+  Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=SObENdEf76z&orgUnitId=g8upMTyEZGZ
+  When you assign the user Geetha in the view mode
+  Then the event has the user Geetha Alwan assigned
+  When you assign the user Tracker demo User in the edit mode
+  Then the event has the user Tracker demo User assigned

cypress/integration/WidgetsForEnrollmentPages/WidgetsForEnrollmentEditEvent/index.js

@@ -2,3 +2,5 @@ import '../sharedSteps';
 import '../WidgetEnrollment';
 import '../WidgetProfile';
 import '../WidgetEventComment';
+import '../WidgetAssignee';
+

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-08-22T12:04:52.436Z\n"
-"PO-Revision-Date: 2023-08-22T12:04:52.436Z\n"
+"POT-Creation-Date: 2023-09-08T10:24:43.998Z\n"
+"PO-Revision-Date: 2023-09-08T10:24:43.998Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -911,15 +911,6 @@ msgstr ""
 "Leaving this page will discard any selections you made for a new "
 "relationship"
 
-msgid "No one is assigned to this event"
-msgstr "No one is assigned to this event"
-
-msgid "Assign"
-msgstr "Assign"
-
-msgid "Event assigned to {{name}}"
-msgstr "Event assigned to {{name}}"
-
 msgid "Feedbacks"
 msgstr "Feedbacks"
 
@@ -1092,6 +1083,15 @@ msgstr "To work with the selected program,"
 msgid "open the Tracker Capture app"
 msgstr "open the Tracker Capture app"
 
+msgid "Assign"
+msgstr "Assign"
+
+msgid "Event assigned to {{name}}"
+msgstr "Event assigned to {{name}}"
+
+msgid "No one is assigned to this event"
+msgstr "No one is assigned to this event"
+
 msgid "This program is protected"
 msgstr "This program is protected"
 
@@ -1497,6 +1497,9 @@ msgstr "Error deleting the enrollment event"
 msgid "Error editing the event, the changes made were not saved"
 msgstr "Error editing the event, the changes made were not saved"
 
+msgid "Error updating the Assignee"
+msgstr "Error updating the Assignee"
+
 msgid "Set coordinate"
 msgstr "Set coordinate"
 

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

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

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js

@@ -14,6 +14,7 @@ import { WidgetFeedback } from '../../WidgetFeedback';
 import { WidgetIndicator } from '../../WidgetIndicator';
 import { WidgetProfile } from '../../WidgetProfile';
 import { WidgetEnrollment } from '../../WidgetEnrollment';
+import { WidgetAssignee } from '../../WidgetAssignee';
 import { IncompleteSelectionsMessage } from '../../IncompleteSelectionsMessage';
 import { WidgetEventComment } from '../../WidgetEventComment';
 import { OrgUnitFetcher } from '../../OrgUnitFetcher';
@@ -66,11 +67,14 @@ const EnrollmentEditEventPagePain = ({
     eventDate,
     scheduleDate,
     eventStatus,
+    eventAccess,
+    assignee,
     pageStatus,
     onEnrollmentError,
     onEnrollmentSuccess,
     onCancelEditEvent,
     onHandleScheduleSave,
+    onGetAssignedUserSaveContext,
 }: PlainProps) => (
     <OrgUnitFetcher orgUnitId={orgUnitId}>
         <TopBar
@@ -118,6 +122,12 @@ const EnrollmentEditEventPagePain = ({
                     )}
                 </div>
                 <div className={classes.rightColumn}>
+                    <WidgetAssignee
+                        programStage={programStage}
+                        assignee={assignee}
+                        onGetSaveContext={onGetAssignedUserSaveContext}
+                        eventAccess={eventAccess}
+                    />
                     <WidgetEventComment dataEntryKey={mode} dataEntryId={dataEntryIds.ENROLLMENT_EVENT} />
                     <WidgetError error={widgetEffects.errors} />
                     <WidgetWarning warning={widgetEffects.warnings} />

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js

@@ -17,12 +17,13 @@ import { changeEventFromUrl } from '../ViewEvent/ViewEventComponent/viewEvent.ac
 import { buildEnrollmentsAsOptions } from '../../ScopeSelector';
 import { convertDateWithTimeForView, convertValue } from '../../../converters/clientToView';
 import { dataElementTypes } from '../../../metaData/DataElement';
-import { useEvent } from './hooks';
+import { useEvent, useAssignee, useAssignedUserSaveContext } from './hooks';
 import type { Props } from './EnrollmentEditEventPage.types';
 import { LoadingMaskForPage } from '../../LoadingMasks';
 import { cleanUpDataEntry } from '../../DataEntry';
 import { pageKeys } from '../../App/withAppUrlSync';
 import { withErrorMessageHandler } from '../../../HOC';
+import { getProgramEventAccess } from '../../../metaData';
 
 const getEventDate = (event) => {
     const eventDataConvertValue = convertDateWithTimeForView(event?.occurredAt || event?.scheduledAt);
@@ -120,6 +121,7 @@ const EnrollmentEditEventPageWithContextPlain = ({ programId, stageId, teiId, en
     const { currentPageMode } = useEnrollmentEditEventPageMode(event?.status);
     const dataEntryKey = `${dataEntryIds.ENROLLMENT_EVENT}-${currentPageMode}`;
     const outputEffects = useWidgetDataFromStore(dataEntryKey);
+    const eventAccess = getProgramEventAccess(programId, programStage?.id);
 
     const pageStatus = getPageStatus({
         orgUnitId,
@@ -129,6 +131,8 @@ const EnrollmentEditEventPageWithContextPlain = ({ programId, stageId, teiId, en
         programStage,
         event,
     });
+    const assignee = useAssignee(event);
+    const onGetAssignedUserSaveContext = useAssignedUserSaveContext(enrollmentSite, event, eventId);
 
     return (
         <EnrollmentEditEventPageComponent
@@ -148,12 +152,15 @@ const EnrollmentEditEventPageWithContextPlain = ({ programId, stageId, teiId, en
             onAddNew={onAddNew}
             orgUnitId={orgUnitId}
             eventDate={eventDate}
+            assignee={assignee}
             onEnrollmentError={onEnrollmentError}
             onEnrollmentSuccess={onEnrollmentSuccess}
             eventStatus={event?.status}
+            eventAccess={eventAccess}
             scheduleDate={scheduleDate}
             onCancelEditEvent={onCancelEditEvent}
             onHandleScheduleSave={onHandleScheduleSave}
+            onGetAssignedUserSaveContext={onGetAssignedUserSaveContext}
         />
     );
 };

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js

@@ -1,6 +1,7 @@
 // @flow
 import type { ProgramStage } from '../../../metaData';
 import type { WidgetEffects, HideWidgets } from '../common/EnrollmentOverviewDomain';
+import type { UserFormField } from '../../FormFields/UserField';
 
 export type PlainProps = {|
     programStage: ?ProgramStage,
@@ -25,6 +26,16 @@ export type PlainProps = {|
     onHandleScheduleSave: (eventData: Object) => void,
     pageStatus: string,
     eventStatus?: string,
+    eventAccess: {|
+        read: boolean,
+        write: boolean,
+    |} | null,
+    onGetAssignedUserSaveContext: (assignee: UserFormField) => {
+        eventId: string,
+        events: Array<ApiEnrollmentEvent>,
+        assignedUser?: ApiAssignedUser,
+    },
+    assignee: UserFormField | null,
     ...CssClasses,
 |};
 

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/hooks/index.js

@@ -1,2 +1,3 @@
 // @flow
 export { useEvent } from './useEvent';
+export { useAssignee, useAssignedUserSaveContext } from './useAssignedUserSaveContext';

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/hooks/useAssignedUserSaveContext.js

@@ -0,0 +1,27 @@
+// @flow
+import { useCallback, useMemo } from 'react';
+import { convertServerToClient, convertClientToServer } from '../../../WidgetAssignee';
+import type { EnrollmentData } from '../../common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData';
+import type { UserFormField } from '../../../FormFields/UserField';
+
+export const useAssignee = (event?: ApiEnrollmentEvent) =>
+    useMemo(() => convertServerToClient(event?.assignedUser), [event?.assignedUser]);
+
+export const useAssignedUserSaveContext = (
+    enrollmentSite?: EnrollmentData,
+    event?: ApiEnrollmentEvent,
+    eventId: string,
+) =>
+    useCallback(
+        (newAssignee: UserFormField) => ({
+            eventId,
+            assignedUser: event?.assignedUser,
+            events: enrollmentSite?.events
+            // $FlowFixMe[missing-annot]
+                ? enrollmentSite.events.map(e => (
+                    e.event === eventId ? { ...e, assignedUser: convertClientToServer(newAssignee) } : e
+                ))
+                : [],
+        }),
+        [enrollmentSite?.events, event?.assignedUser, eventId],
+    );