Merge pull request #26 from DaleMcGrew/Dale_WCC-Feb9-2025

Making it easier to get a link to any questionnaire for any person. Stopped processing TaskGroups and TaskDefinitions from `task-status-list-retrieve` and started using the more limited APIs 'task-definition-list-retrieve' and 'task-group-list-retrieve'. Updated the Add Team Member quick-person-add list to work with new data flow.
wevote · Feb 10, 2025 · 8a761f7 · 8a761f7
2 parents 221dc05 + 256da3b
commit 8a761f7
Show file tree

Hide file tree

Showing 15 changed files with 295 additions and 130 deletions.
diff --git a/src/js/components/Person/AddPersonDrawerMainContent.jsx b/src/js/components/Person/AddPersonDrawerMainContent.jsx
@@ -8,53 +8,60 @@ import makeRequestParams from '../../react-query/makeRequestParams';
 import { useAddPersonToTeamMutation } from '../../react-query/mutations';
 import { SpanWithLinkStyle } from '../Style/linkStyles';
 import AddPersonForm from './AddPersonForm';
-// import { GetTeamListArray } from '../../models/TeamModel';
 
 
 const AddPersonDrawerMainContent = () => {
   renderLog('AddPersonDrawerMainContent');
-  const { getAppContextValue } = useConnectAppContext();
+  const { apiDataCache, getAppContextValue } = useConnectAppContext();
+  const { allPeopleCache } = apiDataCache;
   const { mutate } = useAddPersonToTeamMutation();
 
   // const params  = useParams();
   // console.log('AddPersonDrawerMainContent params: ', params);
 
-  const [allStaffList] = useState(getAppContextValue('allStaffList'));
-  const [remainingStaffToAdd, setRemainingStaffToAdd] = useState(getAppContextValue('allStaffList'));
+  const [allPeopleList, setAllPeopleList] = useState([]);
+  const [remainingPeopleToAdd, setRemainingPeopleToAdd] = useState([]);
   const [searchResultsList, setSearchResultsList] = useState(undefined);
   const [thisTeamsCurrentMembersList] = useState(getAppContextValue('addPersonDrawerTeamMemberList'));
-  // eslint-disable-next-line no-unused-vars
-  const [teamId, setTeamId] = useState(getAppContextValue('teamId'));
-  // eslint-disable-next-line no-unused-vars
-  const [teamName, setTeamName] = useState('');
+  const [team] = useState(getAppContextValue('addPersonDrawerTeam'));
   const [teamMemberPersonIdList] = useState([]);
   const [matchingCountText, setMatchingCountText] = useState('');
-  const [addPersonDrawerOpen] = useState(getAppContextValue('addPersonDrawerOpen'));
 
   const searchStringRef = useRef('');
 
-  const initializeRemainingStaffToAddList = () => {
-    console.log('initializeTheRemainingStaffToAddListList in AddPersonDrawerMainContent');
-    // Start with the passed in allStaffList, create the remainingStaffToAddList, by removing any staff already on the team
-    if (allStaffList && allStaffList.length > 0) {
-      const staffToDisplay = [];
-      allStaffList.forEach((oneStaff) => {
-        const isOnTeam = thisTeamsCurrentMembersList.some((obj) => obj.id === oneStaff.id);
+  const initializeRemainingPeopleToAddList = () => {
+    // console.log('initializeTheRemainingPeopleToAddListList in AddPersonDrawerMainContent');
+    // Start with the passed in allPeopleList, create the remainingPeopleToAddList, by removing any people already on the team
+    if (allPeopleList && allPeopleList.length > 0) {
+      const personToDisplay = [];
+      allPeopleList.forEach((onePeople) => {
+        const isOnTeam = thisTeamsCurrentMembersList.some((obj) => obj.id === onePeople.id);
         if (!isOnTeam) {
-          staffToDisplay.push(oneStaff);
+          personToDisplay.push(onePeople);
         }
       });
-      setRemainingStaffToAdd(staffToDisplay);
+      setRemainingPeopleToAdd(personToDisplay);
     }
   };
 
   useEffect(() => {
-    setRemainingStaffToAdd(allStaffList);  // handles navigate to issues
-    initializeRemainingStaffToAddList();
-  }, [addPersonDrawerOpen]);
+    initializeRemainingPeopleToAddList();
+  }, [apiDataCache]);
+
+  useEffect(() => {
+    initializeRemainingPeopleToAddList();
+  }, [allPeopleList]);
+
+  useEffect(() => {
+    // console.log('useEffect in AddPersonDrawerMainContent allPeopleCache:', allPeopleCache);
+    if (allPeopleCache) {
+      setAllPeopleList(Object.values(allPeopleCache));
+      setRemainingPeopleToAdd(Object.values(allPeopleCache));  // handles navigate to issues
+    }
+  }, []);
 
   const setMatchingCounter = (matchingElements) => {
-    const matchingCount = matchingElements.length === 0 ? '' : `${matchingElements.length} matches out of ${remainingStaffToAdd.length} staff members`;
+    const matchingCount = matchingElements.length === 0 ? '' : `${matchingElements.length} matches out of ${remainingPeopleToAdd.length} people`;
     setMatchingCountText(matchingCount);
   };
 
@@ -66,7 +73,7 @@ const AddPersonDrawerMainContent = () => {
     } else {
       const isMatch = (element) => (element.lastName.toLowerCase().includes(currentValue.toLowerCase()) ||
           element.firstName.toLowerCase().includes(currentValue.toLowerCase()));
-      const matchingElements = remainingStaffToAdd ? remainingStaffToAdd.filter((element) => isMatch(element)) : {};
+      const matchingElements = remainingPeopleToAdd ? remainingPeopleToAdd.filter((element) => isMatch(element)) : {};
       if (matchingElements && matchingElements.length) {
         setSearchResultsList(matchingElements);
         setMatchingCounter(matchingElements);
@@ -80,26 +87,26 @@ const AddPersonDrawerMainContent = () => {
   const addClicked = (person) => {
     const plainParams = {
       personId: person.id,
-      teamId,
+      teamId: team.teamId,
       teamMemberFirstName: person.firstName,
       teamMemberLastName: person.lastName,
-      teamName,
+      teamName: team.teamName,
     };
     mutate(makeRequestParams(plainParams, {}));
-    // Remove this staff from the All Staff less Adds list (since they were added to the team)
-    const updatedRemainingStaffToAdd = remainingStaffToAdd.filter((staff) => staff.id !== person.id);
-    setRemainingStaffToAdd(updatedRemainingStaffToAdd);
+    // Remove this person from the All People less Adds list (since they were added to the team)
+    const updatedRemainingPeopleToAdd = remainingPeopleToAdd.filter((person) => person.id !== person.id);
+    setRemainingPeopleToAdd(updatedRemainingPeopleToAdd);
     if (searchResultsList && searchResultsList.length) {
       // also remove them from the searchResultsList if it exists
-      const updatedSearchResultsList = searchResultsList.filter((staff) => staff.id !== person.id);
+      const updatedSearchResultsList = searchResultsList.filter((person) => person.id !== person.id);
       setSearchResultsList(updatedSearchResultsList);
       setMatchingCounter(updatedSearchResultsList);
     }
   };
 
   // TODO: Need to deal with preferred name searching and display, very possible but it will get more complicated
-  let displayList = searchResultsList || remainingStaffToAdd || [];
-  displayList = displayList.filter((staff) => staff.firstName.length || staff.lastName.length);
+  let displayList = searchResultsList || remainingPeopleToAdd || [];
+  displayList = displayList.filter((person) => person.firstName.length || person.lastName.length);
 
   return (
     <AddPersonDrawerMainContentWrapper>

diff --git a/src/js/components/Person/PersonProfile.jsx b/src/js/components/Person/PersonProfile.jsx
@@ -1,39 +1,88 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
-import { useConnectAppContext } from '../../contexts/ConnectAppContext';
-// import useGetFullNamePreferredReactQuery from '../../react-query/useGetFullNamePreferredReactQuery';
+import { useConnectAppContext, useConnectDispatch } from '../../contexts/ConnectAppContext';
 import CopyQuestionnaireLink from '../Questionnaire/CopyQuestionnaireLink';
-import { useGetFullNamePreferred, useGetPersonById } from '../../models/PersonModel';
+import { useGetFullNamePreferred } from '../../models/PersonModel';
+import { SpanWithLinkStyle } from '../Style/linkStyles';
+import { METHOD, useFetchData } from '../../react-query/WeConnectQuery';
+import { captureQuestionnaireListRetrieveData } from '../../models/QuestionnaireModel';
 
 
 const PersonProfile = () => {
   renderLog('PersonProfile');  // Set LOG_RENDER_EVENTS to log all renders
-  const { getAppContextValue, setAppContextValue } = useConnectAppContext();
+  const { getAppContextValue } = useConnectAppContext();
+  const { apiDataCache } = useConnectAppContext();
+  const { allQuestionnairesCache } = apiDataCache;
+  const dispatch = useConnectDispatch();
 
-  // const [person] = useState(getAppContextValue('personDrawersPerson'));
-  const [person] = useState(useGetPersonById(getAppContextValue('personDrawersPersonId')));
+  const [personId] = useState(getAppContextValue('personDrawersPersonId'));
+  const [questionnaireList, setQuestionnaireList] = useState([]);
+  const [showQuestionnaireList, setShowQuestionnaireList] = useState(false);
 
+  const questionnaireListRetrieveResults = useFetchData(['questionnaire-list-retrieve'], {}, METHOD.GET);
   useEffect(() => {
-    // Hard coded temporarily while we are in development
-    setAppContextValue('QuestionnaireId', 1);
-  }, []);
+    // console.log('questionnaireListRetrieveResults in Questionnaire useEffect captureQuestionnaireListRetrieveData');
+    if (questionnaireListRetrieveResults) {
+      captureQuestionnaireListRetrieveData(questionnaireListRetrieveResults, apiDataCache, dispatch);
+    }
+  }, [questionnaireListRetrieveResults, allQuestionnairesCache]);
+
+  useEffect(() => {
+    if (allQuestionnairesCache) {
+      setQuestionnaireList(Object.values(allQuestionnairesCache));
+    }
+  }, [allQuestionnairesCache]);
 
   return (
     <PersonProfileWrapper>
       <FullName>
-        {useGetFullNamePreferred(person.personId)}
+        {useGetFullNamePreferred(personId)}
       </FullName>
       {/* <PersonDetails /> This was commented out as of January 28th, 2025 */}
-      <CopyQuestionnaireLink />
+      <ShowQuestionnaireOptions>
+        <div>
+          Questionnaires
+          {' '}
+          (
+          {showQuestionnaireList ? (
+            <SpanWithLinkStyle onClick={() => setShowQuestionnaireList(false)}>hide</SpanWithLinkStyle>
+          ) : (
+            <SpanWithLinkStyle onClick={() => setShowQuestionnaireList(true)}>show</SpanWithLinkStyle>
+          )}
+          )
+        </div>
+      </ShowQuestionnaireOptions>
+      {showQuestionnaireList && (
+        <QuestionnaireOptions>
+          {questionnaireList.map((questionnaire) => (
+            <OneQuestionnaire key={`questionnaire-${questionnaire.questionnaireId}`}>
+              <div>{questionnaire.questionnaireName}</div>
+              <CopyQuestionnaireLink personId={personId} questionnaireId={questionnaire.questionnaireId} />
+            </OneQuestionnaire>
+          ))}
+        </QuestionnaireOptions>
+      )}
     </PersonProfileWrapper>
   );
 };
 
-const FullName = styled('div')`
+const FullName = styled('h2')`
+`;
+
+const OneQuestionnaire = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
 `;
 
 const PersonProfileWrapper = styled('div')`
 `;
 
+const QuestionnaireOptions = styled('div')`
+`;
+
+const ShowQuestionnaireOptions = styled('div')`
+`;
+
 export default PersonProfile;
diff --git a/src/js/components/Questionnaire/CopyQuestionnaireLink.jsx b/src/js/components/Questionnaire/CopyQuestionnaireLink.jsx
@@ -1,23 +1,17 @@
 import { withStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
 import webAppConfig from '../../config';
-import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import { SpanWithLinkStyle } from '../Style/linkStyles';
-import { useGetPersonById } from '../../models/PersonModel';
 
 
-const CopyQuestionnaireLink = () => {
+const CopyQuestionnaireLink = ({ personId, questionnaireId }) => {
   renderLog('CopyQuestionnaireLink');
-  const { getAppContextValue } = useConnectAppContext();
-
-  // const [person] = useState(getAppContextValue('personDrawersPerson'));
-  const [person] = useState(useGetPersonById(getAppContextValue('personDrawersPersonId')));
-  const [questionnaireId] = useState(getAppContextValue('QuestionnaireId'));
   const [linkCopied, setLinkCopied] = useState(false);
-  const [linkToBeShared] = useState(`${webAppConfig.PROTOCOL}${webAppConfig.HOSTNAME}/q/${questionnaireId}/${person.id}`);
+  const [linkToBeShared] = useState(`${webAppConfig.PROTOCOL}${webAppConfig.HOSTNAME}/q/${questionnaireId}/${personId}`);
 
   const copyLink = () => {
     // console.log('CopyQuestionnaireLink copyLink');
@@ -31,21 +25,22 @@ const CopyQuestionnaireLink = () => {
     <CopyQuestionnaireLinkWrapper>
       <CopyToClipboard text={linkToBeShared} onCopy={copyLink}>
         <div>
-          {/* <div style={{ paddingBottom: '20px' }}> */}
-          {/*  Hi {person.firstName}! */}
-          {/* </div> */}
           {linkCopied ? (
             <div>Link copied!</div>
           ) : (
             <SpanWithLinkStyle>
-              copy questionnaire link
+              copy
             </SpanWithLinkStyle>
           )}
         </div>
       </CopyToClipboard>
     </CopyQuestionnaireLinkWrapper>
   );
 };
+CopyQuestionnaireLink.propTypes = {
+  personId: PropTypes.number.isRequired,
+  questionnaireId: PropTypes.number.isRequired,
+};
 
 const styles = () => ({
 });

diff --git a/src/js/components/Questionnaire/EditQuestionForm.jsx b/src/js/components/Questionnaire/EditQuestionForm.jsx
@@ -104,7 +104,7 @@ const EditQuestionForm = ({ classes }) => {
     };
     const requestParams = makeRequestParams(plainParams, params);
     mutate(requestParams);
-    console.log('saveQuestionnaire requestParams:', requestParams);
+    // console.log('saveQuestionnaire requestParams:', requestParams);
     setSaveButtonActive(false);
     setAppContextValue('editQuestionDrawerOpen', false);
     setAppContextValue('selectedQuestion', undefined);

diff --git a/src/js/components/Questionnaire/EditQuestionnaireForm.jsx b/src/js/components/Questionnaire/EditQuestionnaireForm.jsx
@@ -73,7 +73,7 @@ const EditQuestionnaireForm = ({ classes }) => {
           margin="dense"
           name="questionnaireName"
           onChange={() => updateSaveButton()}
-          placeholder="Name of the questionnaire, staff only"
+          placeholder="Name of the questionnaire, hr staff only"
           variant="outlined"
         />
         <TextField

diff --git a/src/js/components/Task/EditTaskDefinitionForm.jsx b/src/js/components/Task/EditTaskDefinitionForm.jsx
@@ -70,10 +70,7 @@ const EditTaskDefinitionForm = ({ classes }) => {
   };
 
   const updateSaveButton = () => {
-    if (taskNameFldRef.current.value && taskNameFldRef.current.value.length &&
-      taskDescFldRef.current.value && taskDescFldRef.current.value.length &&
-      taskInstFldRef.current.value && taskInstFldRef.current.value.length &&
-      taskUrlFldRef.current.value && taskUrlFldRef.current.value.length) {
+    if (taskNameFldRef.current.value && taskNameFldRef.current.value.length) {
       if (!saveButtonActive) {
         setSaveButtonActive(true);
       }

diff --git a/src/js/components/Team/TeamMemberList.jsx b/src/js/components/Team/TeamMemberList.jsx
@@ -33,11 +33,9 @@ const TeamMemberList = ({ teamId, team }) => { // teamMemberList
   }, [dataTLR, isSuccessTLR]);
 
   useEffect(() => {
-    // console.log(`TeamMemberList useEffect teamId: ${teamId} apiDataCache:`, apiDataCache);
     const updatedTeamMemberList = getTeamMembersListByTeamId(teamId, apiDataCache);
-    // console.log(`TeamMemberList useEffect teamId: ${teamId} updatedTeamMemberList:`, updatedTeamMemberList);
     setTeamMemberListApiDataCache(updatedTeamMemberList);
-  }, [allPeopleCache, allTeamsCache, teamId]);
+  }, [apiDataCache, teamId]);
 
   // const oneTeam = teamList.find((tm) => tm.teamId === parseInt(teamId));
 

diff --git a/src/js/contexts/ConnectAppContext.jsx b/src/js/contexts/ConnectAppContext.jsx
@@ -89,8 +89,8 @@ export const ConnectAppContextProvider = ({ children }) => {
   //   // console.log('useFetchData in TeamHome (person-list-retrieve) useEffect:', dataP, isSuccessP, isFetchingP, isStaleP);
   //   if (isSuccessP) {
   //     // console.log('useFetchData in TeamHome (person-list-retrieve)useEffect data good:', dataP, isSuccessP, isFetchingP, isStaleP);
-  //     setAppContextValue('allStaffList', dataP ? dataP.personList : []);
-  //     // console.log('ConnectAppContext useEffect allStaffList fetched');
+  //     setAppContextValue('allPeopleList', dataP ? dataP.personList : []);
+  //     // console.log('ConnectAppContext useEffect allPeopleList fetched');
   //   }
   // }, [dataP, isSuccessP, isFetchingP]);