Merge pull request bcgov#1873 from djnunez-aot/update-form-fix

Teams page - Update team member modal - fix

epictrack-web/src/components/workPlan/WorkPlanContext.tsx

@@ -42,6 +42,8 @@ interface WorkplanContextProps {
   setIssues: Dispatch<SetStateAction<WorkIssue[]>>;
   loadIssues: () => Promise<void>;
   getWorkById: () => Promise<void>;
+  selectedStaff?: StaffWorkRole;
+  setSelectedStaff: Dispatch<SetStateAction<StaffWorkRole | undefined>>;
 }
 interface WorkPlanContainerRouteParams extends URLSearchParams {
   work_id: string;
@@ -66,6 +68,8 @@ export const WorkplanContext = createContext<WorkplanContextProps>({
   getWorkStatuses: () => new Promise((resolve) => resolve),
   loadIssues: () => new Promise((resolve) => resolve),
   getWorkById: () => new Promise((resolve) => resolve),
+  selectedStaff: undefined,
+  setSelectedStaff: () => ({}),
 });
 
 export const WorkplanProvider = ({
@@ -83,7 +87,7 @@ export const WorkplanProvider = ({
   const [workPhases, setWorkPhases] = useState<WorkPhaseAdditionalInfo[]>([]);
   const [firstNations, setFirstNations] = useState<WorkFirstNation[]>([]);
   const workId = useMemo(() => query.get("work_id"), [query]);
-
+  const [selectedStaff, setSelectedStaff] = useState<StaffWorkRole>();
   const [issues, setIssues] = useState<WorkIssue[]>([]);
 
   const loadIssues = async () => {
@@ -186,6 +190,8 @@ export const WorkplanProvider = ({
   return (
     <WorkplanContext.Provider
       value={{
+        selectedStaff,
+        setSelectedStaff,
         setStatuses,
         getWorkStatuses,
         selectedWorkPhase,

epictrack-web/src/components/workPlan/firstNations/FirstNationList.tsx

@@ -58,7 +58,6 @@ const FirstNationList = () => {
   const [consultationLevels, setConsultationLevels] = React.useState<
     ConsultationLevel[]
   >([]);
-
   const { roles, email } = useAppSelector((state) => state.user.userDetail);
   const userIsTeamMember = useMemo(
     () => ctx.team.some((member) => member.staff.email === email),
@@ -74,7 +73,7 @@ const FirstNationList = () => {
     () => ctx.firstNations,
     [ctx.firstNations]
   );
-
+  const firstNation = firstNations.find((fN) => fN.id === workFirstNationId);
   const [relationshipHolder, setRelationshipHolder] = React.useState<Staff>();
   const [statusOptions, setStatusOptions] = React.useState<string[]>([]);
   const [showImportNationForm, setShowImportNationForm] =
@@ -87,7 +86,6 @@ const FirstNationList = () => {
       setModalTitle("Add Nation");
       return;
     }
-    const firstNation = firstNations.find((fN) => fN.id === workFirstNationId);
     setModalTitle(firstNation?.indigenous_nation?.name || "");
   }, [workFirstNationId]);
 
@@ -500,7 +498,7 @@ const FirstNationList = () => {
         disableEscapeKeyDown
         fullWidth
         maxWidth="sm"
-        okButtonText="Add"
+        okButtonText={firstNation ? "Save" : "Add"}
         formId="work-first-nation-form"
         onCancel={() => onCancelHandler()}
         isActionsRequired

epictrack-web/src/components/workPlan/team/TeamForm.tsx

@@ -47,12 +47,12 @@ const schema = yup.object().shape({
 });
 
 const TeamForm = ({ onSave, workStaffId }: TeamFormProps) => {
-  const [staffWorkRole, setStaffWorkRole] = React.useState<StaffWorkRole>();
   const [staff, setStaff] = React.useState<Staff[]>([]);
   const [roles, setRoles] = React.useState<ListType[]>([]);
   const emailRef = React.useRef(null);
   const phoneRef = React.useRef(null);
   const ctx = React.useContext(WorkplanContext);
+  const staffWorkRole = ctx.selectedStaff;
 
   React.useEffect(() => {
     getAllStaff();
@@ -84,7 +84,7 @@ const TeamForm = ({ onSave, workStaffId }: TeamFormProps) => {
       const result = await workService.getWorkTeamMember(Number(workStaffId));
       if (result.status === 200) {
         const staff = result.data as StaffWorkRole;
-        setStaffWorkRole(staff);
+        ctx.setSelectedStaff(staff);
       }
     } catch (e) {
       showNotification(COMMON_ERROR_MESSAGE, {

epictrack-web/src/components/workPlan/team/TeamList.tsx

@@ -28,7 +28,7 @@ const TeamList = () => {
   const [showTeamForm, setShowTeamForm] = React.useState<boolean>(false);
   const ctx = React.useContext(WorkplanContext);
   const teamMembers = useMemo(() => ctx.team, [ctx.team]);
-
+  const staff = ctx.selectedStaff?.staff;
   const { email, roles: givenUserAuthRoles } = useAppSelector(
     (state) => state.user.userDetail
   );
@@ -145,6 +145,7 @@ const TeamList = () => {
 
   const onCancelHandler = () => {
     setShowTeamForm(false);
+    ctx.setSelectedStaff(undefined);
     setWorkStaffId(undefined);
   };
 
@@ -230,11 +231,11 @@ const TeamList = () => {
       )}
       <TrackDialog
         open={showTeamForm}
-        dialogTitle={workStaffId ? "Update Team Member" : "Add Team Member"}
+        dialogTitle={staff ? `${staff.full_name}` : "Add Team Member"}
         disableEscapeKeyDown
         fullWidth
         maxWidth="sm"
-        okButtonText={workStaffId ? "Update" : "Add"}
+        okButtonText={workStaffId ? "Save" : "Add"}
         formId="team-form"
         onCancel={() => onCancelHandler()}
         isActionsRequired