From a1f1754e3c70695d2bdb054b6e9202e0109fd608 Mon Sep 17 00:00:00 2001 From: dalemcgrew Date: Sat, 8 Mar 2025 17:22:42 -0800 Subject: [PATCH] Very rough first version of adding a meeting on one team's landing page. Standardizing on "InputRef" variable names. Giving names to mutate function within components. --- src/js/components/Drawers/Drawers.jsx | 2 + .../components/Drawers/EditMeetingDrawer.jsx | 25 ++ .../Meeting/EditMeetingDrawerMainContent.jsx | 26 ++ src/js/components/Meeting/EditMeetingForm.jsx | 275 ++++++++++++++++++ .../Person/AddPersonDrawerMainContent.jsx | 10 +- src/js/components/Person/AddPersonForm.jsx | 28 +- .../components/Person/EditPersonAwayForm.jsx | 11 +- src/js/components/Person/EditPersonForm.jsx | 4 +- src/js/components/Person/PersonSummaryRow.jsx | 4 +- .../Questionnaire/EditQuestionForm.jsx | 4 +- .../Questionnaire/EditQuestionnaireForm.jsx | 26 +- .../Task/EditTaskDefinitionForm.jsx | 26 +- src/js/components/Task/EditTaskGroupForm.jsx | 22 +- src/js/components/Task/TaskSummaryRow.jsx | 10 +- src/js/components/Team/AddTeamForm.jsx | 6 +- src/js/controllers/PersonController.js | 6 +- src/js/models/PersonModel.jsx | 2 +- .../PermissionsAdministration.jsx | 28 +- src/js/pages/TeamHome.jsx | 21 ++ src/js/react-query/makeRequestParams.js | 1 + src/js/react-query/mutations.jsx | 16 +- 21 files changed, 457 insertions(+), 96 deletions(-) create mode 100644 src/js/components/Drawers/EditMeetingDrawer.jsx create mode 100644 src/js/components/Meeting/EditMeetingDrawerMainContent.jsx create mode 100644 src/js/components/Meeting/EditMeetingForm.jsx diff --git a/src/js/components/Drawers/Drawers.jsx b/src/js/components/Drawers/Drawers.jsx index 4773d62..693b435 100644 --- a/src/js/components/Drawers/Drawers.jsx +++ b/src/js/components/Drawers/Drawers.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { renderLog } from '../../common/utils/logging'; import AddPersonDrawer from './AddPersonDrawer'; import AddTeamDrawer from './AddTeamDrawer'; +import EditMeetingDrawer from './EditMeetingDrawer'; import EditPersonDrawer from './EditPersonDrawer'; import EditQuestionDrawer from './EditQuestionDrawer'; import EditQuestionnaireDrawer from './EditQuestionnaireDrawer'; @@ -18,6 +19,7 @@ const Drawers = () => { + diff --git a/src/js/components/Drawers/EditMeetingDrawer.jsx b/src/js/components/Drawers/EditMeetingDrawer.jsx new file mode 100644 index 0000000..2e13bf6 --- /dev/null +++ b/src/js/components/Drawers/EditMeetingDrawer.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { renderLog } from '../../common/utils/logging'; +import { useConnectAppContext } from '../../contexts/ConnectAppContext'; +import EditMeetingDrawerMainContent from '../Meeting/EditMeetingDrawerMainContent'; +import DrawerTemplateA from './DrawerTemplateA'; + + +const EditMeetingDrawer = () => { + renderLog('EditMeetingDrawer'); + const { getAppContextValue } = useConnectAppContext(); + + return ( + } + headerTitleJsx={<>{getAppContextValue('editMeetingDrawerLabel')}} + mainContentJsx={} + /> + ); +}; +EditMeetingDrawer.propTypes = { +}; + +export default EditMeetingDrawer; diff --git a/src/js/components/Meeting/EditMeetingDrawerMainContent.jsx b/src/js/components/Meeting/EditMeetingDrawerMainContent.jsx new file mode 100644 index 0000000..12f2510 --- /dev/null +++ b/src/js/components/Meeting/EditMeetingDrawerMainContent.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import { renderLog } from '../../common/utils/logging'; +import EditMeetingForm from './EditMeetingForm'; + + +const EditMeetingDrawerMainContent = () => { + renderLog('EditMeetingDrawerMainContent'); + + return ( + + + + + + ); +}; + +const EditMeetingDrawerMainContentWrapper = styled('div')` +`; + +const AddMeetingWrapper = styled('div')` + margin-top: 32px; +`; + +export default EditMeetingDrawerMainContent; diff --git a/src/js/components/Meeting/EditMeetingForm.jsx b/src/js/components/Meeting/EditMeetingForm.jsx new file mode 100644 index 0000000..ecfd380 --- /dev/null +++ b/src/js/components/Meeting/EditMeetingForm.jsx @@ -0,0 +1,275 @@ +import { + Button, + Checkbox, + FormControl, + FormControlLabel, + TextField, +} from '@mui/material'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { TimePicker } from '@mui/x-date-pickers/TimePicker'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { withStyles } from '@mui/styles'; +import dayjs from 'dayjs'; +import PropTypes from 'prop-types'; +import React, { useEffect, useRef, useState } from 'react'; +import styled from 'styled-components'; +import { renderLog } from '../../common/utils/logging'; +import { useConnectAppContext } from '../../contexts/ConnectAppContext'; +import makeRequestParams from '../../react-query/makeRequestParams'; +import { useMeetingSaveMutation } from '../../react-query/mutations'; + + +const EditMeetingForm = ({ classes }) => { + renderLog('EditMeetingForm'); + const { getAppContextValue, setAppContextValue } = useConnectAppContext(); + const { mutate: mutateMeetingSave } = useMeetingSaveMutation(); + + const [isRecurringMeeting, setIsRecurringMeeting] = useState(false); + const [meeting] = useState(getAppContextValue('selectedRecurringMeeting')); + const [meetingDate, setMeetingDate] = useState(dayjs()); + const [meetingDescription, setMeetingDescription] = useState(''); + const [meetingName, setMeetingName] = useState(''); + const [meetingSequenceEndDate, setMeetingSequenceEndDate] = useState(dayjs().add(1, 'week')); + const [meetingEndTime, setMeetingEndTime] = useState(dayjs().set('hour', 10).set('minute', 0)); + const [meetingStartTime, setMeetingStartTime] = useState(dayjs().set('hour', 9).set('minute', 0)); + const [saveButtonActive, setSaveButtonActive] = useState(false); + const [teamId] = useState(getAppContextValue('editMeetingDrawerTeamId')); + + const isRecurringMeetingInputRef = useRef(''); + const meetingNameInputRef = useRef(''); + const meetingDescriptionInputRef = useRef(''); + + useEffect(() => { + if (meeting) { + setIsRecurringMeeting(meeting.recurringMeetingId >= 0); + setMeetingDate(meeting.meetingDate); + setMeetingDescription(meeting.meetingDescription); + setMeetingEndTime(meeting.meetingEndTime); + setMeetingName(meeting.meetingName); + setMeetingStartTime(meeting.meetingStartTime); + } else { + setIsRecurringMeeting(false); + setMeetingDate(dayjs()); + setMeetingDescription(''); + setMeetingName(''); + } + }, [meeting]); + + const saveMeeting = () => { + let params = { + meetingName: meetingNameInputRef.current.value, + meetingDescription: meetingDescriptionInputRef.current.value, + meetingEndTime, + meetingStartTime, + }; + const plainParams = { + isRecurringMeeting, + meetingId: meeting ? meeting.id : '-1', + recurringMeetingId: meeting ? meeting.id : '-1', + teamId: teamId || '-1', + }; + if (isRecurringMeeting) { + // Add recurringMeeting-specific params here + params = { + ...params, + meetingSequenceEndDate, + meetingSequenceStartDate: meetingDate, + }; + } else { + // Add Meeting-specific params here + params = { + ...params, + meetingDate, + }; + } + mutateMeetingSave(makeRequestParams(plainParams, params)); + setSaveButtonActive(false); + setAppContextValue('editMeetingDrawerOpen', false); + setAppContextValue('editMeetingDrawerMeetingId', undefined); + setAppContextValue('editMeetingDrawerRecurringMeetingId', undefined); + setAppContextValue('editMeetingDrawerTeamId', undefined); + setAppContextValue('editMeetingDrawerLabel', ''); + }; + + const updateSaveButton = () => { + // console.log('updateSaveButton meetingNameInputRef:', meetingNameInputRef, ', saveButtonActive:', saveButtonActive); + if (meetingNameInputRef.current.value && meetingNameInputRef.current.value.length && + meetingDescriptionInputRef.current.value && meetingDescriptionInputRef.current.value.length) { + if (!saveButtonActive) { + setSaveButtonActive(true); + } + } + }; + + return ( + + + updateSaveButton()} + placeholder="Name of the meeting" + variant="outlined" + /> + updateSaveButton()} + placeholder="Meeting description" + rows={6} + variant="outlined" + /> + + + + + + { + setMeetingDate(newValue); + updateSaveButton(); + }} + renderInput={() => ( + + )} + value={meetingDate} + /> + + + { + setMeetingStartTime(newValue); + updateSaveButton(); + }} + value={meetingStartTime} + /> + + + - + + + { + setMeetingEndTime(newValue); + updateSaveButton(); + }} + value={meetingEndTime} + /> + + + + + { + setMeetingSequenceEndDate(newValue); + updateSaveButton(); + }} + renderInput={() => ( + + )} + sx={isRecurringMeeting ? {} : { + position: 'absolute', + left: '-9999px', + width: '1px', + height: '1px', + overflow: 'hidden', + }} + /> + + + + + + { + setIsRecurringMeeting(!isRecurringMeeting); + updateSaveButton(); + }} + /> + )} + label="Is this a recurring meeting?" + /> + + + + ); +}; +EditMeetingForm.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const styles = (theme) => ({ + checkboxLabel: { + marginTop: 2, + }, + dateFormControl: { + marginTop: 20, + }, + formControl: { + width: '100%', + }, + saveMeetingButton: { + width: 300, + [theme.breakpoints.down('md')]: { + width: '100%', + }, + }, +}); + +const CheckboxLabel = styled(FormControlLabel)` + margin-bottom: 0 !important; +`; + +const DateOptionsWrapper = styled('div')` + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; +`; + +const DateWrapper = styled('div')` + margin-right: 4px; +`; + +const EditMeetingFormWrapper = styled('div')` +`; + +export default withStyles(styles)(EditMeetingForm); diff --git a/src/js/components/Person/AddPersonDrawerMainContent.jsx b/src/js/components/Person/AddPersonDrawerMainContent.jsx index 55bafb9..e8a157e 100644 --- a/src/js/components/Person/AddPersonDrawerMainContent.jsx +++ b/src/js/components/Person/AddPersonDrawerMainContent.jsx @@ -17,7 +17,7 @@ const AddPersonDrawerMainContent = () => { renderLog('AddPersonDrawerMainContent'); const { apiDataCache, getAppContextValue } = useConnectAppContext(); const { allPeopleCache, allTeamsCache } = apiDataCache; - const { mutate } = useAddPersonToTeamMutation(); + const { mutate: addPersonToTeam } = useAddPersonToTeamMutation(); // const params = useParams(); // console.log('AddPersonDrawerMainContent params: ', params); @@ -31,7 +31,7 @@ const AddPersonDrawerMainContent = () => { const [teamMemberPersonIdList] = useState([]); const [matchingCountText, setMatchingCountText] = useState(''); - const searchStringRef = useRef(''); + const searchStringInputRef = useRef(''); const updateRemainingPeopleToAdd = () => { // console.log('initializeTheRemainingPeopleToAddListList in AddPersonDrawerMainContent'); @@ -88,7 +88,7 @@ const AddPersonDrawerMainContent = () => { }; const searchFunction = () => { // Now searches first and last name - const currentValue = searchStringRef.current.value; + const currentValue = searchStringInputRef.current.value; if (currentValue.length === 0) { setMatchingCountText(''); setSearchResultsList(undefined); @@ -117,7 +117,7 @@ const AddPersonDrawerMainContent = () => { teamMemberLastName: incomingPerson.lastName, teamName, }; - mutate(makeRequestParams(plainParams, {})); + addPersonToTeam(makeRequestParams(plainParams, {})); // Remove this person from the All People less Adds list (since they were added to the team) const updatedRemainingPeopleToAdd = remainingPeopleToAdd.filter((person) => person.personId !== incomingPerson.personId); @@ -137,7 +137,7 @@ const AddPersonDrawerMainContent = () => { { // classes, teamId renderLog('AddPersonForm'); const { getAppContextValue, setAppContextValue } = useConnectAppContext(); - const { mutate } = usePersonSaveMutation(); + const { mutate: personSave } = usePersonSaveMutation(); const [teamId, setTeamId] = useState(-1); const [teamName, setTeamName] = useState(''); const [saveButtonActive, setSaveButtonActive] = React.useState(false); - const firstNameFldRef = useRef(''); - const lastNameFldRef = useRef(''); - const emailFldRef = useRef(''); + const firstNameInputRef = useRef(''); + const lastNameInputRef = useRef(''); + const emailInputRef = useRef(''); useEffect(() => { // Replaces onAppObservableStoreChange and will be called whenever the context value changes // console.log('AddPersonForm: Context value changed:', true); @@ -32,25 +32,25 @@ const AddPersonForm = ({ classes }) => { // classes, teamId const saveNewPerson = () => { const data = { - firstName: firstNameFldRef.current.value, - lastName: lastNameFldRef.current.value, - emailPersonal: emailFldRef.current.value, + firstName: firstNameInputRef.current.value, + lastName: lastNameInputRef.current.value, + emailPersonal: emailInputRef.current.value, }; const plainParams = { personId: -1, teamId, teamName, }; - mutate(makeRequestParams(plainParams, data)); + personSave(makeRequestParams(plainParams, data)); setAppContextValue('addPersonDrawerOpen', false); setAppContextValue('addPersonDrawerLabel', ''); setAppContextValue('addPersonDrawerTeam', undefined); }; const updateSaveButton = () => { - if (firstNameFldRef.current.value && firstNameFldRef.current.value.length && - lastNameFldRef.current.value && lastNameFldRef.current.value.length && - emailFldRef.current.value && emailFldRef.current.value.length) { + if (firstNameInputRef.current.value && firstNameInputRef.current.value.length && + lastNameInputRef.current.value && lastNameInputRef.current.value.length && + emailInputRef.current.value && emailInputRef.current.value.length) { if (!saveButtonActive) { setSaveButtonActive(true); } @@ -64,7 +64,7 @@ const AddPersonForm = ({ classes }) => { // classes, teamId // classes={{ root: classes.textField }} // Not working yet autoFocus id="firstNameToBeSaved" - inputRef={firstNameFldRef} + inputRef={firstNameInputRef} label="First Name" margin="dense" name="firstNameToBeSaved" @@ -75,7 +75,7 @@ const AddPersonForm = ({ classes }) => { // classes, teamId { // classes, teamId { const awayReasonInputRef = useRef(''); const awayDescriptionForTeamLeadsInputRef = useRef(''); const awayDescriptionInputRef = useRef(''); - const dateEndInputRef = useRef(''); const dateEndEstimatedInputRef = useRef(''); + const dateEndInputRef = useRef(''); const dateStartInputRef = useRef(''); useEffect(() => { @@ -207,6 +207,7 @@ const EditPersonAwayForm = ({ classes, personId }) => { renderInput={() => ( )} @@ -258,16 +259,16 @@ const styles = (theme) => ({ }, }); -const DateWrapper = styled('div')` - margin-right: 4; -`; - const DateOptionsWrapper = styled('div')` display: flex; align-items: center; justify-content: space-between; `; +const DateWrapper = styled('div')` + margin-right: 4px; +`; + const EditPersonAwayFormWrapper = styled('div')` `; diff --git a/src/js/components/Person/EditPersonForm.jsx b/src/js/components/Person/EditPersonForm.jsx index d969ed4..4603694 100644 --- a/src/js/components/Person/EditPersonForm.jsx +++ b/src/js/components/Person/EditPersonForm.jsx @@ -13,7 +13,7 @@ import { usePersonSaveMutation } from '../../react-query/mutations'; const EditPersonForm = ({ classes }) => { renderLog('EditPersonForm'); const { getAppContextValue } = useConnectAppContext(); - const { mutate } = usePersonSaveMutation(); + const { mutate: personSave } = usePersonSaveMutation(); // const { mutate: personSave } = usePersonSave(); const [saveButtonActive, setSaveButtonActive] = useState(false); @@ -53,7 +53,7 @@ const EditPersonForm = ({ classes }) => { personId: activePerson.id, }; - mutate(makeRequestParams(plainParams, data)); + personSave(makeRequestParams(plainParams, data)); setSaveButtonActive(false); }; diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx index 2271fe4..1f9bee7 100644 --- a/src/js/components/Person/PersonSummaryRow.jsx +++ b/src/js/components/Person/PersonSummaryRow.jsx @@ -16,13 +16,13 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { renderLog('PersonSummaryRow'); // Set LOG_RENDER_EVENTS to log all renders const { apiDataCache, setAppContextValue } = useConnectAppContext(); const { viewerAccessRights, viewerTeamAccessRights } = apiDataCache; - const { mutate } = useRemoveTeamMemberMutation(); + const { mutate: removeTeamMember } = useRemoveTeamMemberMutation(); // const [person, setPerson] = useState(useGetPersonById(personId)); 2/5/2025 does not work const removeTeamMemberClick = () => { const params = { personId: person.personId, teamId }; - mutate(params); + removeTeamMember(params); }; const editPersonClick = (hasEditRights = true) => { diff --git a/src/js/components/Questionnaire/EditQuestionForm.jsx b/src/js/components/Questionnaire/EditQuestionForm.jsx index 7716c90..b67fe6b 100644 --- a/src/js/components/Questionnaire/EditQuestionForm.jsx +++ b/src/js/components/Questionnaire/EditQuestionForm.jsx @@ -32,7 +32,7 @@ const PERSON_FIELDS_ACCEPTED = [ const EditQuestionForm = ({ classes }) => { renderLog('EditQuestionForm'); const { getAppContextValue, setAppContextValue } = useConnectAppContext(); - const { mutate } = useQuestionSaveMutation(); + const { mutate: mutateQuestionSave } = useQuestionSaveMutation(); const [question] = useState(getAppContextValue('selectedQuestion')); const [questionnaire] = useState(getAppContextValue('selectedQuestionnaire')); @@ -108,7 +108,7 @@ const EditQuestionForm = ({ classes }) => { statusActive: (statusActiveInputRef.current.value === 'on'), }; const requestParams = makeRequestParams(plainParams, params); - mutate(requestParams); + mutateQuestionSave(requestParams); // console.log('saveQuestionnaire requestParams:', requestParams); setSaveButtonActive(false); setAppContextValue('editQuestionDrawerOpen', false); diff --git a/src/js/components/Questionnaire/EditQuestionnaireForm.jsx b/src/js/components/Questionnaire/EditQuestionnaireForm.jsx index f1c8fb6..31821da 100644 --- a/src/js/components/Questionnaire/EditQuestionnaireForm.jsx +++ b/src/js/components/Questionnaire/EditQuestionnaireForm.jsx @@ -12,7 +12,7 @@ import { useQuestionnaireSaveMutation } from '../../react-query/mutations'; const EditQuestionnaireForm = ({ classes }) => { renderLog('EditQuestionnaireForm'); const { getAppContextValue, setAppContextValue } = useConnectAppContext(); - const { mutate } = useQuestionnaireSaveMutation(); + const { mutate: mutateQuestionnaireSave } = useQuestionnaireSaveMutation(); const [questionnaire] = useState(getAppContextValue('selectedQuestionnaire')); const [saveButtonActive, setSaveButtonActive] = useState(false); @@ -20,9 +20,9 @@ const EditQuestionnaireForm = ({ classes }) => { const [titleFldValue, setTitleFldValue] = useState(''); const [instructionsFldValue, setInstructionsFldValue] = useState(''); - const nameFldRef = useRef(''); - const titleFldRef = useRef(''); - const instructionsFldRef = useRef(''); + const nameInputRef = useRef(''); + const titleInputRef = useRef(''); + const instructionsInputRef = useRef(''); useEffect(() => { if (questionnaire) { @@ -38,14 +38,14 @@ const EditQuestionnaireForm = ({ classes }) => { const saveQuestionnaire = () => { const params = { - questionnaireName: nameFldRef.current.value, - questionnaireTitle: titleFldRef.current.value, - questionnaireInstructions: instructionsFldRef.current.value, + questionnaireName: nameInputRef.current.value, + questionnaireTitle: titleInputRef.current.value, + questionnaireInstructions: instructionsInputRef.current.value, }; const plainParams = { questionnaireId: questionnaire ? questionnaire.id : '-1', }; - mutate(makeRequestParams(plainParams, params)); + mutateQuestionnaireSave(makeRequestParams(plainParams, params)); setSaveButtonActive(false); setAppContextValue('editQuestionnaireDrawerOpen', false); setAppContextValue('selectedQuestionnaire', undefined); @@ -53,8 +53,8 @@ const EditQuestionnaireForm = ({ classes }) => { }; const updateSaveButton = () => { - if (nameFldRef.current.value && nameFldRef.current.value.length && - titleFldRef.current.value && titleFldRef.current.value.length) { + if (nameInputRef.current.value && nameInputRef.current.value.length && + titleInputRef.current.value && titleInputRef.current.value.length) { if (!saveButtonActive) { setSaveButtonActive(true); } @@ -68,7 +68,7 @@ const EditQuestionnaireForm = ({ classes }) => { autoFocus defaultValue={nameFldValue} id="questionnaireNameToBeSaved" - inputRef={nameFldRef} + inputRef={nameInputRef} label="Questionnaire Internal Name" margin="dense" name="questionnaireName" @@ -79,7 +79,7 @@ const EditQuestionnaireForm = ({ classes }) => { { { const [taskUrlValue, setTaskUrlValue] = useState(''); const [saveButtonActive, setSaveButtonActive] = useState(false); - const taskNameFldRef = useRef(''); - const taskDescFldRef = useRef(''); - const taskInstFldRef = useRef(''); - const taskUrlFldRef = useRef(''); + const taskNameInputRef = useRef(''); + const taskDescInputRef = useRef(''); + const taskInstInputRef = useRef(''); + const taskUrlInputRef = useRef(''); useEffect(() => { if (taskDefinition) { @@ -56,10 +56,10 @@ const EditTaskDefinitionForm = ({ classes }) => { taskDefinitionId: taskDefinition ? taskDefinition.id : '-1', taskGroupId: taskGroup.taskGroupId, }, { - taskName: taskNameFldRef.current.value, - taskDescription: taskDescFldRef.current.value, - taskInstructions: taskInstFldRef.current.value, - taskActionUrl: taskUrlFldRef.current.value, + taskName: taskNameInputRef.current.value, + taskDescription: taskDescInputRef.current.value, + taskInstructions: taskInstInputRef.current.value, + taskActionUrl: taskUrlInputRef.current.value, }); taskDefinitionSave(requestParams); setSaveButtonActive(false); @@ -70,7 +70,7 @@ const EditTaskDefinitionForm = ({ classes }) => { }; const updateSaveButton = () => { - if (taskNameFldRef.current.value && taskNameFldRef.current.value.length) { + if (taskNameInputRef.current.value && taskNameInputRef.current.value.length) { if (!saveButtonActive) { setSaveButtonActive(true); } @@ -84,7 +84,7 @@ const EditTaskDefinitionForm = ({ classes }) => { autoFocus defaultValue={taskNameValue} id="taskNameToBeSaved" - inputRef={taskNameFldRef} + inputRef={taskNameInputRef} label="Task Name" margin="dense" name="taskName" @@ -95,7 +95,7 @@ const EditTaskDefinitionForm = ({ classes }) => { { { { renderLog('EditTaskGroupForm'); const { getAppContextValue, setAppContextValue } = useConnectAppContext(); - const { mutate } = useGroupSaveMutation(); + const { mutate: taskGroupSave } = useTaskGroupSaveMutation(); const [taskGroup] = useState(getAppContextValue('editTaskGroupDrawerTaskGroup')); const [groupNameValue, setGroupNameValue] = useState(''); const [groupDescValue, setGroupDescValue] = useState(''); const [saveButtonActive, setSaveButtonActive] = useState(false); - const groupNameFldRef = useRef(''); - const groupDescFldRef = useRef(''); + const groupNameInputRef = useRef(''); + const groupDescInputRef = useRef(''); useEffect(() => { if (taskGroup) { @@ -38,10 +38,10 @@ const EditTaskGroupForm = ({ classes }) => { const requestParams = makeRequestParams({ taskGroupId: taskGroup ? taskGroup.id : '-1', }, { - taskGroupName: groupNameFldRef.current.value, - taskGroupDescription: groupDescFldRef.current.value, + taskGroupName: groupNameInputRef.current.value, + taskGroupDescription: groupDescInputRef.current.value, }); - mutate(requestParams); + taskGroupSave(requestParams); setSaveButtonActive(false); setAppContextValue('editTaskGroupDrawerOpen', false); setAppContextValue('editTaskGroupDrawerTaskGroup', undefined); @@ -49,8 +49,8 @@ const EditTaskGroupForm = ({ classes }) => { }; const updateSaveButton = () => { - if (groupNameFldRef.current.value && groupNameFldRef.current.value.length && - groupDescFldRef.current.value && groupDescFldRef.current.value.length) { + if (groupNameInputRef.current.value && groupNameInputRef.current.value.length && + groupDescInputRef.current.value && groupDescInputRef.current.value.length) { if (!saveButtonActive) { setSaveButtonActive(true); } @@ -64,7 +64,7 @@ const EditTaskGroupForm = ({ classes }) => { autoFocus defaultValue={groupNameValue} id="taskGroupNameToBeSaved" - inputRef={groupNameFldRef} + inputRef={groupNameInputRef} label="Task Grouping Name" margin="dense" name="taskGroupName" @@ -75,7 +75,7 @@ const EditTaskGroupForm = ({ classes }) => { import(/* webpackChunkName: 'OpenEx const TaskSummaryRow = ({ classes, hideIfCompleted, personId, rowNumberForDisplay, taskDefinition, task }) => { renderLog('TaskSummaryRow'); // Set LOG_RENDER_EVENTS to log all renders - const { mutate } = useSaveTaskMutation(); + const { mutate: saveTask } = useSaveTaskMutation(); - const doneCheckboxFldRef = useRef(''); + const doneCheckboxInputRef = useRef(''); const updateTaskFieldInstant = (event) => { console.log('updateTaskFieldInstant event:', event); @@ -30,7 +30,7 @@ const TaskSummaryRow = ({ classes, hideIfCompleted, personId, rowNumberForDispla }, { statusDone: !event.target.checked, }); - mutate(requestParams); + saveTask(requestParams); }; if (hideIfCompleted && task.statusDone) { @@ -64,7 +64,7 @@ const TaskSummaryRow = ({ classes, hideIfCompleted, personId, rowNumberForDispla color="primary" disabled id={`statusDoneCheckbox-${task.taskDefinitionId}`} - inputRef={doneCheckboxFldRef} + inputRef={doneCheckboxInputRef} name="statusDone" /> Done @@ -77,7 +77,7 @@ const TaskSummaryRow = ({ classes, hideIfCompleted, personId, rowNumberForDispla className={classes.checkboxRoot} color="primary" id={`statusDoneCheckbox-${task.taskDefinitionId}`} - inputRef={doneCheckboxFldRef} + inputRef={doneCheckboxInputRef} name="statusDone" onChange={updateTaskFieldInstant} /> diff --git a/src/js/components/Team/AddTeamForm.jsx b/src/js/components/Team/AddTeamForm.jsx index d3375f6..e48cfd8 100644 --- a/src/js/components/Team/AddTeamForm.jsx +++ b/src/js/components/Team/AddTeamForm.jsx @@ -13,7 +13,7 @@ const AddTeamForm = ({ classes }) => { renderLog('AddTeamForm'); const { getAppContextValue, setAppContextValue } = useConnectAppContext(); - const teamNameFldRef = useRef(''); + const teamNameInputRef = useRef(''); const queryClient = useQueryClient(); const [team] = useState(getAppContextValue('teamForAddTeamDrawer')); const [teamNameCached, setTeamNameCached] = useState(team && team.teamName); @@ -32,7 +32,7 @@ const AddTeamForm = ({ classes }) => { }); const saveNewTeam = () => { - const teamName = teamNameFldRef.current.value; + const teamName = teamNameInputRef.current.value; if (teamName.length === 0) { setErrorText('Enter a valid team name'); return; @@ -53,7 +53,7 @@ const AddTeamForm = ({ classes }) => { autoFocus defaultValue={teamNameCached} id="teamNameToBeSaved" - inputRef={teamNameFldRef} + inputRef={teamNameInputRef} label="Team Name" name="teamNameToBeSaved" margin="dense" diff --git a/src/js/controllers/PersonController.js b/src/js/controllers/PersonController.js index 772e017..c0659f1 100644 --- a/src/js/controllers/PersonController.js +++ b/src/js/controllers/PersonController.js @@ -25,8 +25,8 @@ export const getPersonAwayLabel = (personAwayReason) => { switch (personAwayReason) { case 'isLeaveOfAbsence': return 'Leave of Absence'; - case 'isMedicalLeave': - return 'Medical Leave'; + case 'isNotFeelingWell': + return 'Not feeling well'; case 'isNonResponsive': return 'Has stopped responding to management contact'; case 'isNotAttending': @@ -35,7 +35,7 @@ export const getPersonAwayLabel = (personAwayReason) => { if (webAppConfig.ORGANIZATION_NAME) { return `Resigning from ${webAppConfig.ORGANIZATION_NAME}`; } else { - return 'Resigned'; + return 'Resigning'; } case 'isVacation': return 'Vacation'; diff --git a/src/js/models/PersonModel.jsx b/src/js/models/PersonModel.jsx index 179407f..5d3cfdd 100644 --- a/src/js/models/PersonModel.jsx +++ b/src/js/models/PersonModel.jsx @@ -7,7 +7,7 @@ import { useConnectAppContext } from '../contexts/ConnectAppContext'; import weConnectQueryFn, { METHOD } from '../react-query/WeConnectQuery'; // If you make any changes to the following, also update controllers/PersonController.js getPersonAwayLabel -export const PERSON_AWAY_REASONS = ['isLeaveOfAbsence', 'isMedicalLeave', 'isNotAttending', 'isResigned', 'isVacation', 'isWorkTrip']; +export const PERSON_AWAY_REASONS = ['isLeaveOfAbsence', 'isNotFeelingWell', 'isNotAttending', 'isResigned', 'isVacation', 'isWorkTrip']; export const PERSON_AWAY_REASONS_WITH_HR = [...PERSON_AWAY_REASONS, 'isNonResponsive']; export function capturePersonRetrieveData (incomingResults = {}, apiDataCache = {}, dispatch) { diff --git a/src/js/pages/SystemSettings/PermissionsAdministration.jsx b/src/js/pages/SystemSettings/PermissionsAdministration.jsx index 276fd5a..9339351 100644 --- a/src/js/pages/SystemSettings/PermissionsAdministration.jsx +++ b/src/js/pages/SystemSettings/PermissionsAdministration.jsx @@ -39,13 +39,13 @@ const PermissionsAdministration = ({ classes }) => { setPeopleWorkingArray(sorted); }, [allPeopleCache]); - const adminFldRef = useRef(''); - const hiringFldRef = useRef(''); - const leadFldRef = useRef(''); - const internFldRef = useRef(''); - const activeFldRef = useRef(''); - const leaveFldRef = useRef(''); - const resignedFldRef = useRef(''); + const adminInputRef = useRef(''); + const hiringInputRef = useRef(''); + const leadInputRef = useRef(''); + const internInputRef = useRef(''); + const activeInputRef = useRef(''); + const leaveInputRef = useRef(''); + const resignedInputRef = useRef(''); const SET = { ENABLE: true, @@ -203,7 +203,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-admin-${person.id}`} - inputRef={adminFldRef} + inputRef={adminInputRef} onChange={onClickCheckbox} /> @@ -213,7 +213,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-hiring-${person.id}`} - inputRef={hiringFldRef} + inputRef={hiringInputRef} inputProps={{ 'aria-label': 'controlled' }} onChange={onClickCheckbox} /> @@ -224,7 +224,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-lead-${person.id}`} - inputRef={leadFldRef} + inputRef={leadInputRef} onChange={onClickCheckbox} /> @@ -234,7 +234,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-intern-${person.id}`} - inputRef={internFldRef} + inputRef={internInputRef} onChange={onClickCheckbox} /> @@ -244,7 +244,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-active-${person.id}`} - inputRef={activeFldRef} + inputRef={activeInputRef} name="activeCheckBox" onChange={onClickCheckbox} /> @@ -255,7 +255,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-leave-${person.id}`} - inputRef={leaveFldRef} + inputRef={leaveInputRef} onChange={onClickCheckbox} /> @@ -265,7 +265,7 @@ const PermissionsAdministration = ({ classes }) => { className={classes.checkboxDoneRoot} color="primary" id={`checkbox-resigned-${person.id}`} - inputRef={resignedFldRef} + inputRef={resignedInputRef} // sx={{ display: 'block', margin: 'auto' }} onChange={onClickCheckbox} /> diff --git a/src/js/pages/TeamHome.jsx b/src/js/pages/TeamHome.jsx index 573d9b4..920d3e2 100644 --- a/src/js/pages/TeamHome.jsx +++ b/src/js/pages/TeamHome.jsx @@ -7,6 +7,7 @@ import { Link, useParams } from 'react-router'; import convertToInteger from '../common/utils/convertToInteger'; import { renderLog } from '../common/utils/logging'; import { PageContentContainer } from '../components/Style/pageLayoutStyles'; +import EditMeetingForm from '../components/Meeting/EditMeetingForm'; import TeamHeader from '../components/Team/TeamHeader'; import TeamMemberList from '../components/Team/TeamMemberList'; import webAppConfig from '../config'; @@ -59,6 +60,13 @@ const TeamHome = ({ classes }) => { } }, [allTeamsCache, teamId]); + const addMeetingClick = () => { + console.log('TeamHome addMeetingClick, teamId:', teamId); + setAppContextValue('editMeetingDrawerOpen', true); + setAppContextValue('editMeetingDrawerLabel', 'Add Meeting'); + setAppContextValue('editMeetingDrawerTeamId', teamId); + }; + const addTeamMemberClick = () => { // console.log('TeamHome addTeamMemberClick, teamId:', teamId); setAppContextValue('addPersonDrawerOpen', true); @@ -121,6 +129,19 @@ const TeamHome = ({ classes }) => { )} + {viewerCanSeeOrDo('canAddTeamMemberAnyTeam', viewerAccessRights) && ( +
+ +
+ )} {viewerCanSeeOrDo('canRemoveTeam', viewerAccessRights) && (