From 5d29e83b762212104a32b8a7b39b04eb8209919e Mon Sep 17 00:00:00 2001 From: rose Date: Fri, 28 Feb 2025 17:02:47 -0600 Subject: [PATCH 01/25] add options to docstring and remove outdated params --- .../projectView/ProjectTeam/TeamAutocompleteComponent.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js index 0c90a28040..b00477f960 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js @@ -14,10 +14,9 @@ import { useTheme } from "@mui/material/styles"; * @param {String} value - field value * @param {String} field - name of field * @param {Boolean} hasFocus - does this field have focus - * @param {Object} nameLookup - maps user id to user name * @param {Boolean} error - toggles error style in textfield * @param {Object} name - name of the field - * @param {Object} userWorkgroupLookup - mapping of user ids to their corresponding workgroup ids + * @param {Object} options - moped users to use in team member select * @return {JSX.Element} */ const TeamAutocompleteComponent = ({ From 688f020f775ffc1773b66cab9ef15856856ad44b Mon Sep 17 00:00:00 2001 From: rose Date: Fri, 28 Feb 2025 17:03:17 -0600 Subject: [PATCH 02/25] filter to only include team members that arent duplicates --- .../projectView/ProjectTeam/ProjectTeamTable.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 935f894347..580464fc66 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -73,12 +73,22 @@ const useColumns = ({ return user ? `${user.first_name} ${user.last_name}` : ""; }, renderEditCell: (props) => { + const currentTeamMembers = + data?.moped_project_by_pk?.moped_proj_personnel.map( + (option) => option.moped_user.email + ); + // filter out current team members from list of moped users unless they are the row.moped_user.email + const teamMembersWithoutDuplicates = data?.moped_users.filter( + (user) => + !currentTeamMembers.includes(user.email) || + user.email === props.row.moped_user.email + ); return ( ); From 0c28d4d73ff8ca65e869dc1f713a1ce29193581d Mon Sep 17 00:00:00 2001 From: rose Date: Mon, 3 Mar 2025 21:08:25 -0600 Subject: [PATCH 03/25] add workgroup_name to row.moped_workgroup so we dont have the flashing object thing and also fixes other bugs --- .../projectView/ProjectTeam/TeamAutocompleteComponent.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js index b00477f960..8b5f0ffa85 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js @@ -27,6 +27,7 @@ const TeamAutocompleteComponent = ({ error, name, options, + workgroupLookup, }) => { const theme = useTheme(); const apiRef = useGridApiContext(); @@ -48,7 +49,10 @@ const TeamAutocompleteComponent = ({ apiRef.current.setEditCellValue({ id, field: "moped_workgroup", - value: { workgroup_id: newValue?.workgroup_id }, + value: { + workgroup_id: newValue?.workgroup_id, + workgroup_name: workgroupLookup[newValue?.workgroup_id], + }, }); }; From b3f1bb8fb0d6f2753c9aa89f28fdcad315155948 Mon Sep 17 00:00:00 2001 From: rose Date: Mon, 3 Mar 2025 21:09:20 -0600 Subject: [PATCH 04/25] use currentRowMember to add current team member as option when editing a row --- .../ProjectTeam/ProjectTeamTable.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 580464fc66..3c65a8045c 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -73,15 +73,22 @@ const useColumns = ({ return user ? `${user.first_name} ${user.last_name}` : ""; }, renderEditCell: (props) => { - const currentTeamMembers = + const currentRowMember = + data?.moped_project_by_pk?.moped_proj_personnel.filter( + (user) => user.project_personnel_id === props.id + ); + const existingTeamMembers = data?.moped_project_by_pk?.moped_proj_personnel.map( (option) => option.moped_user.email ); - // filter out current team members from list of moped users unless they are the row.moped_user.email + // filter out existing team members from list of options unless they are the current row member const teamMembersWithoutDuplicates = data?.moped_users.filter( - (user) => - !currentTeamMembers.includes(user.email) || - user.email === props.row.moped_user.email + (user) => { + return ( + !existingTeamMembers.includes(user.email) || + user.email === currentRowMember?.[0]?.moped_user.email + ); + } ); return ( ); }, From a7b3fb07a08701ad8dcb727fd567cb2b7c608247 Mon Sep 17 00:00:00 2001 From: rose Date: Mon, 3 Mar 2025 21:16:26 -0600 Subject: [PATCH 05/25] add comments --- .../views/projects/projectView/ProjectTeam/ProjectTeamTable.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 3c65a8045c..6623dcb33c 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -73,15 +73,18 @@ const useColumns = ({ return user ? `${user.first_name} ${user.last_name}` : ""; }, renderEditCell: (props) => { + // the team member object for the current row const currentRowMember = data?.moped_project_by_pk?.moped_proj_personnel.filter( (user) => user.project_personnel_id === props.id ); + // the existing team members on this project const existingTeamMembers = data?.moped_project_by_pk?.moped_proj_personnel.map( (option) => option.moped_user.email ); // filter out existing team members from list of options unless they are the current row member + // that way the current member remains an option when editing a row const teamMembersWithoutDuplicates = data?.moped_users.filter( (user) => { return ( From fc445be91a4ab3c9f64967dffcad501ab5bf0022 Mon Sep 17 00:00:00 2001 From: rose Date: Mon, 3 Mar 2025 21:16:41 -0600 Subject: [PATCH 06/25] add docstring for workgrouplookup --- .../projectView/ProjectTeam/TeamAutocompleteComponent.js | 1 + 1 file changed, 1 insertion(+) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js index 8b5f0ffa85..2139c7b017 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js @@ -17,6 +17,7 @@ import { useTheme } from "@mui/material/styles"; * @param {Boolean} error - toggles error style in textfield * @param {Object} name - name of the field * @param {Object} options - moped users to use in team member select + * @param {Object} workgroupLookup - lookup object to map workgroup ids to names * @return {JSX.Element} */ const TeamAutocompleteComponent = ({ From 4327216e6cccf3fee4c3bd16e5bc4b576db758e7 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Tue, 4 Mar 2025 13:06:27 -0600 Subject: [PATCH 07/25] make the milestones autocomplete look more like the other ones --- .../projects/projectView/ProjectMilestones.js | 19 +++++++++++------- .../MilestoneAutocompleteComponent.js | 20 +++++++++++++------ 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index 5028d306ca..42af613e16 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -54,9 +54,10 @@ const useMilestoneRelatedPhaseLookup = (data) => ); }, [data]); -const requiredFields = ["milestone_id"]; +const requiredFields = ["moped_milestone"]; const useColumns = ({ + data, rowModesModel, handleEditClick, handleSaveClick, @@ -71,17 +72,19 @@ const useColumns = ({ return [ { headerName: "Milestone", - field: "milestone_id", + field: "moped_milestone", renderCell: ({ row }) => row.moped_milestone?.milestone_name, // input validation: preProcessEditCellProps: (params) => ({ ...params.props, - error: !params.props.value, + error: !params.props.value?.milestone_id, }), editable: true, renderEditCell: (props) => ( { - return phaseNameLookup[value?.related_phase_id] ?? ""; - }, + renderCell: (props) => + phaseNameLookup[props.row.moped_milestone?.related_phase_id] ?? "", width: 150, renderEditCell: (props) => ( { const apiRef = useGridApiContext(); const ref = React.useRef(null); + const theme = useTheme(); React.useEffect(() => { if (hasFocus) { @@ -39,21 +43,25 @@ const MilestoneAutocompleteComponent = ({ // Also update the moped_milestone field aka the Related Phase apiRef.current.setEditCellValue({ id, - field: "moped_milestone", - value: { related_phase_id: relatedPhaseLookup[newValue] }, + field: "moped_milestone_related_phase", + value: { related_phase_id: newValue?.related_phase_id }, }); }; + console.log(value); + return ( milestoneNameLookup[option]} - isOptionEqualToValue={(option, value) => option === String(value)} + options={options} + getOptionLabel={(option) => option[`${name}_name`]} + isOptionEqualToValue={(option, value) => + value[`${name}_id`] === option[`${name}_id`] + } value={value} - sx={{ paddingTop: "8px" }} + sx={{ paddingTop: theme.spacing(1) }} onChange={handleChange} renderInput={(params) => ( Date: Tue, 4 Mar 2025 13:57:52 -0600 Subject: [PATCH 08/25] actually save the updated milestone --- .../src/views/projects/projectView/ProjectMilestones.js | 3 +++ .../ProjectMilestones/MilestoneAutocompleteComponent.js | 2 -- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index 42af613e16..326599f741 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -306,6 +306,9 @@ const ProjectMilestones = ({ ? null : updatedMilestoneData.description; + updatedMilestoneData.milestone_id = + updatedMilestoneData.moped_milestone?.milestone_id || null; + if (updatedRow.isNew) { delete updatedMilestoneData.isNew; delete updatedMilestoneData.id; diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js index 823aab8264..3978861e31 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js @@ -48,8 +48,6 @@ const MilestoneAutocompleteComponent = ({ }); }; - console.log(value); - return ( Date: Tue, 4 Mar 2025 15:40:00 -0600 Subject: [PATCH 09/25] memoize and move existingteamemmbers up in scope, use find instead of filter, update to use user_ids --- .../ProjectTeam/ProjectTeamTable.js | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 6623dcb33c..2e3e226d88 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -49,6 +49,14 @@ const useWorkgroupLookup = (data) => }, {}); }, [data]); +// returns a list of user ids for the existing team members on this project +const useExistingTeamMembers = (data) => + useMemo(() => { + return data?.moped_project_by_pk?.moped_proj_personnel.map( + (option) => option.moped_user.user_id + ); + }, [data]); + const requiredFields = ["moped_user", "moped_proj_personnel_roles"]; const useColumns = ({ @@ -61,6 +69,7 @@ const useColumns = ({ classes, usingShiftKey, workgroupLookup, + existingTeamMembers, }) => useMemo(() => { return [ @@ -75,21 +84,16 @@ const useColumns = ({ renderEditCell: (props) => { // the team member object for the current row const currentRowMember = - data?.moped_project_by_pk?.moped_proj_personnel.filter( + data?.moped_project_by_pk?.moped_proj_personnel.find( (user) => user.project_personnel_id === props.id ); - // the existing team members on this project - const existingTeamMembers = - data?.moped_project_by_pk?.moped_proj_personnel.map( - (option) => option.moped_user.email - ); // filter out existing team members from list of options unless they are the current row member // that way the current member remains an option when editing a row const teamMembersWithoutDuplicates = data?.moped_users.filter( (user) => { return ( - !existingTeamMembers.includes(user.email) || - user.email === currentRowMember?.[0]?.moped_user.email + !existingTeamMembers.includes(user.user_id) || + user.user_id === currentRowMember?.moped_user.user_id ); } ); @@ -215,6 +219,7 @@ const useColumns = ({ classes, usingShiftKey, workgroupLookup, + existingTeamMembers, ]); const ProjectTeamTable = ({ projectId, handleSnackbar }) => { @@ -254,6 +259,8 @@ const ProjectTeamTable = ({ projectId, handleSnackbar }) => { const workgroupLookup = useWorkgroupLookup(data); + const existingTeamMembers = useExistingTeamMembers(data); + /** * Construct a moped_project_personnel object that can be passed to an insert mutation * @param {Object} newData - a table row object with { moped_user, notes, roleIds } @@ -517,6 +524,7 @@ const ProjectTeamTable = ({ projectId, handleSnackbar }) => { classes, usingShiftKey, workgroupLookup, + existingTeamMembers, }); const processRowUpdateMemoized = useCallback( From 798d261fcb1b78182c381be0b6c9bf086a8afc8c Mon Sep 17 00:00:00 2001 From: rose Date: Tue, 4 Mar 2025 16:18:16 -0600 Subject: [PATCH 10/25] apdate var name --- .../projectView/ProjectTeam/ProjectTeamTable.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 2e3e226d88..546e265ee0 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -89,20 +89,18 @@ const useColumns = ({ ); // filter out existing team members from list of options unless they are the current row member // that way the current member remains an option when editing a row - const teamMembersWithoutDuplicates = data?.moped_users.filter( - (user) => { - return ( - !existingTeamMembers.includes(user.user_id) || - user.user_id === currentRowMember?.moped_user.user_id - ); - } - ); + const unassignedTeamMembers = data?.moped_users.filter((user) => { + return ( + !existingTeamMembers.includes(user.user_id) || + user.user_id === currentRowMember?.moped_user.user_id + ); + }); return ( From 7919ee9624426f9d7c77600ee86be4b20be9efd8 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Wed, 5 Mar 2025 13:47:29 -0600 Subject: [PATCH 11/25] fallback to blank if no workgroup name --- .../AutocompleteWithDependentField.js | 112 ++++++++++++++++++ .../ProjectTeam/ProjectTeamTable.js | 2 +- 2 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js new file mode 100644 index 0000000000..6d3b005cb5 --- /dev/null +++ b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js @@ -0,0 +1,112 @@ +import React from "react"; +import { + Autocomplete, + TextField, + FormControl, + ListItem, + ListItemText, +} from "@mui/material"; +import { useGridApiContext } from "@mui/x-data-grid-pro"; +import { useTheme } from "@mui/material/styles"; + +/** + * @param {Integer} id - Data Grid row id (same as record id) + * @param {String} value - field value + * @param {String} field - name of field + * @param {Boolean} hasFocus - does this field have focus + * @param {Boolean} error - toggles error style in textfield + * @param {Object} name - name of the field + * @param {Object} options - moped users to use in team member select + * @param {Object} workgroupLookup - lookup object to map workgroup ids to names + * @return {JSX.Element} + */ +const AutcompleteWithDependentField = ({ + id, + value, + field, + hasFocus, + error, + name, + options, + workgroupLookup, +}) => { + const theme = useTheme(); + const apiRef = useGridApiContext(); + const ref = React.useRef(null); + + React.useEffect(() => { + if (hasFocus) { + ref.current.focus(); + } + }, [hasFocus]); + + console.log(name) + + const handleChange = (event, newValue) => { + apiRef.current.setEditCellValue({ + id, + field, + value: newValue, + }); + // Also update the corresponding workgroup field with the selected user's workgroup id + apiRef.current.setEditCellValue({ + id, + field: "moped_workgroup", + value: { + workgroup_id: newValue?.workgroup_id, + workgroup_name: workgroupLookup[newValue?.workgroup_id], + }, + }); + }; + + const isOptionEqualToValue = (option, value) => { + return value?.user_id === option?.user_id; + }; + + const getOptionLabel = (option) => { + return option.user_id ? `${option.first_name} ${option.last_name}` : ""; + }; + + const renderOption = (props, option) => { + return ( + + + + ); + }; + + return ( + + option.user_id} + isOptionEqualToValue={(option, value) => + isOptionEqualToValue(option, value) + } + renderOption={renderOption} + value={value?.user_id ? value : null} + sx={{ paddingTop: theme.spacing(1) }} + onChange={(event, newValue) => { + handleChange(event, newValue); + }} + renderInput={(params) => ( + + )} + /> + + ); +}; + +export default AutcompleteWithDependentField; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 2e3e226d88..0f392dcd92 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -120,7 +120,7 @@ const useColumns = ({ field: "moped_workgroup", editable: true, width: 200, - valueFormatter: (workgroup) => workgroup?.workgroup_name, + valueFormatter: (workgroup) => workgroup?.workgroup_name ?? "", renderEditCell: (props) => ( Date: Wed, 5 Mar 2025 13:56:32 -0600 Subject: [PATCH 12/25] use the new component wip --- .../projectView/ProjectTeam/ProjectTeamTable.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 0f20e6b63e..32d9c700b2 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -23,6 +23,7 @@ import DataGridActions from "src/components/DataGridPro/DataGridActions"; import DataGridTextField from "src/components/DataGridPro/DataGridTextField"; import DeleteConfirmationModal from "../DeleteConfirmationModal"; import ViewOnlyTextField from "src/components/DataGridPro/ViewOnlyTextField"; +import AutocompleteWithDependentField from "src/components/DataGridPro/AutocompleteWithDependentField"; const useStyles = makeStyles((theme) => ({ infoIcon: { @@ -96,7 +97,7 @@ const useColumns = ({ ); }); return ( - + // ); }, preProcessEditCellProps: (params) => { @@ -118,7 +127,7 @@ const useColumns = ({ field: "moped_workgroup", editable: true, width: 200, - valueFormatter: (workgroup) => workgroup?.workgroup_name ?? "", + valueFormatter: (workgroup) => workgroup?.workgroup_name ?? "", renderEditCell: (props) => ( Date: Wed, 5 Mar 2025 15:14:33 -0600 Subject: [PATCH 13/25] update team autocomplete to use autocompleteprops --- .../AutocompleteWithDependentField.js | 51 ++++++++----------- .../ProjectTeam/ProjectTeamTable.js | 28 +++++++++- 2 files changed, 49 insertions(+), 30 deletions(-) diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js index 6d3b005cb5..044039f6ed 100644 --- a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js +++ b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useCallback } from "react"; import { Autocomplete, TextField, @@ -29,6 +29,7 @@ const AutcompleteWithDependentField = ({ name, options, workgroupLookup, + autocompleteProps, }) => { const theme = useTheme(); const apiRef = useGridApiContext(); @@ -40,8 +41,6 @@ const AutcompleteWithDependentField = ({ } }, [hasFocus]); - console.log(name) - const handleChange = (event, newValue) => { apiRef.current.setEditCellValue({ id, @@ -59,42 +58,36 @@ const AutcompleteWithDependentField = ({ }); }; - const isOptionEqualToValue = (option, value) => { - return value?.user_id === option?.user_id; - }; - - const getOptionLabel = (option) => { - return option.user_id ? `${option.first_name} ${option.last_name}` : ""; - }; + const defaultGetOptionLabel = useCallback( + (option) => option[`${name}_name`], + [name] + ); - const renderOption = (props, option) => { - return ( - - - - ); - }; + const defaultIsOptionEqualToValue = useCallback( + (value, option) => value[`${name}_id`] === option[`${name}_id`], + [name] + ); return ( option.user_id} - isOptionEqualToValue={(option, value) => - isOptionEqualToValue(option, value) + {...autocompleteProps} + getOptionLabel={ + autocompleteProps?.getOptionLabel + ? autocompleteProps.getOptionLabel + : defaultGetOptionLabel + } + isOptionEqualToValue={ + autocompleteProps?.isOptionEqualToValue + ? autocompleteProps.isOptionEqualToValue + : defaultIsOptionEqualToValue } - renderOption={renderOption} value={value?.user_id ? value : null} - sx={{ paddingTop: theme.spacing(1) }} - onChange={(event, newValue) => { - handleChange(event, newValue); - }} + onChange={handleChange} renderInput={(params) => ( { + return option.user_id + ? `${option.first_name} ${option.last_name}` + : ""; + }, + getOptionKey: (option) => option.user_id, + renderOption: (props, option) => { + return ( + + + + ); + }, + }} /> // Date: Wed, 5 Mar 2025 16:31:25 -0600 Subject: [PATCH 14/25] use textfield props --- .../DataGridPro/AutocompleteWithDependentField.js | 9 +++------ .../projects/projectView/ProjectTeam/ProjectTeamTable.js | 5 ++++- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js index 044039f6ed..eaa3c27375 100644 --- a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js +++ b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js @@ -2,9 +2,7 @@ import React, { useCallback } from "react"; import { Autocomplete, TextField, - FormControl, - ListItem, - ListItemText, + FormControl } from "@mui/material"; import { useGridApiContext } from "@mui/x-data-grid-pro"; import { useTheme } from "@mui/material/styles"; @@ -25,11 +23,11 @@ const AutcompleteWithDependentField = ({ value, field, hasFocus, - error, name, options, workgroupLookup, autocompleteProps, + textFieldProps, }) => { const theme = useTheme(); const apiRef = useGridApiContext(); @@ -93,8 +91,7 @@ const AutcompleteWithDependentField = ({ variant="standard" {...params} inputRef={ref} - error={error} - helperText="Required" + {...textFieldProps} /> )} /> diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 2decf8e9b4..cc31110506 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -26,7 +26,6 @@ import { import dataGridProStyleOverrides from "src/styles/dataGridProStylesOverrides"; import ProjectTeamToolbar from "./ProjectTeamToolbar"; import ProjectTeamRoleMultiselect from "./ProjectTeamRoleMultiselect"; -import TeamAutocompleteComponent from "./TeamAutocompleteComponent"; import DataGridActions from "src/components/DataGridPro/DataGridActions"; import DataGridTextField from "src/components/DataGridPro/DataGridTextField"; import DeleteConfirmationModal from "../DeleteConfirmationModal"; @@ -130,6 +129,10 @@ const useColumns = ({ ); }, }} + textFieldProps={{ + error: props.error, + helperText: "Required", + }} /> // Date: Wed, 5 Mar 2025 16:49:56 -0600 Subject: [PATCH 15/25] move dependent fields out --- .../DataGridPro/AutocompleteWithDependentField.js | 10 ++++------ .../projectView/ProjectTeam/ProjectTeamTable.js | 6 +++++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js index eaa3c27375..361de4b621 100644 --- a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js +++ b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js @@ -25,9 +25,10 @@ const AutcompleteWithDependentField = ({ hasFocus, name, options, - workgroupLookup, autocompleteProps, textFieldProps, + dependentFieldName, + dependentFieldValue, }) => { const theme = useTheme(); const apiRef = useGridApiContext(); @@ -48,11 +49,8 @@ const AutcompleteWithDependentField = ({ // Also update the corresponding workgroup field with the selected user's workgroup id apiRef.current.setEditCellValue({ id, - field: "moped_workgroup", - value: { - workgroup_id: newValue?.workgroup_id, - workgroup_name: workgroupLookup[newValue?.workgroup_id], - }, + field: dependentFieldName, + value: dependentFieldValue(newValue), }); }; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index cc31110506..6a61ef7288 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -110,7 +110,6 @@ const useColumns = ({ value={props.row.moped_user} options={unassignedTeamMembers} error={props.error} - workgroupLookup={workgroupLookup} autocompleteProps={{ getOptionLabel: (option) => { return option.user_id @@ -133,6 +132,11 @@ const useColumns = ({ error: props.error, helperText: "Required", }} + dependentFieldName="moped_workgroup" + dependentFieldValue={(newValue) => ({ + workgroup_id: newValue?.workgroup_id, + workgroup_name: workgroupLookup[newValue?.workgroup_id], + })} /> // Date: Wed, 5 Mar 2025 18:26:05 -0600 Subject: [PATCH 16/25] milestone to generic autocomplete too --- .../AutocompleteWithDependentField.js | 8 ++----- .../projects/projectView/ProjectMilestones.js | 23 +++++++++++++++---- .../ProjectTeam/ProjectTeamTable.js | 1 - 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js index 361de4b621..b764cddcb9 100644 --- a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js +++ b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js @@ -1,9 +1,5 @@ import React, { useCallback } from "react"; -import { - Autocomplete, - TextField, - FormControl -} from "@mui/material"; +import { Autocomplete, TextField, FormControl } from "@mui/material"; import { useGridApiContext } from "@mui/x-data-grid-pro"; import { useTheme } from "@mui/material/styles"; @@ -82,7 +78,7 @@ const AutcompleteWithDependentField = ({ ? autocompleteProps.isOptionEqualToValue : defaultIsOptionEqualToValue } - value={value?.user_id ? value : null} + value={value?.[`${name}_id`] ? value : null} onChange={handleChange} renderInput={(params) => ( ( - ({ + related_phase_id: newValue?.related_phase_id, + })} /> + // ), width: 250, }, @@ -307,7 +320,7 @@ const ProjectMilestones = ({ : updatedMilestoneData.description; updatedMilestoneData.milestone_id = - updatedMilestoneData.moped_milestone?.milestone_id || null; + updatedMilestoneData.moped_milestone?.milestone_id || null; if (updatedRow.isNew) { delete updatedMilestoneData.isNew; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 6a61ef7288..e044739585 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -109,7 +109,6 @@ const useColumns = ({ name={"user"} value={props.row.moped_user} options={unassignedTeamMembers} - error={props.error} autocompleteProps={{ getOptionLabel: (option) => { return option.user_id From 375bc53b7b55189504d3fae8fc4d150b7f83d1b5 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Thu, 6 Mar 2025 08:13:02 -0600 Subject: [PATCH 17/25] remove unused lookups from usememo --- .../projects/projectView/ProjectMilestones.js | 36 ++++++++----------- .../ProjectTeam/ProjectTeamTable.js | 8 ----- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index 502867f5fb..0e6feac362 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -22,7 +22,7 @@ import parseISO from "date-fns/parseISO"; import { usePhaseNameLookup } from "./ProjectPhase/helpers"; import ToggleEditComponent from "./ToggleEditComponent"; import MilestoneTemplateModal from "./ProjectMilestones/MilestoneTemplateModal"; -import MilestoneAutocompleteComponent from "./ProjectMilestones/MilestoneAutocompleteComponent"; +// import MilestoneAutocompleteComponent from "./ProjectMilestones/MilestoneAutocompleteComponent"; import DataGridDateFieldEdit from "./ProjectMilestones/DataGridDateFieldEdit"; import DeleteConfirmationModal from "./DeleteConfirmationModal"; import DataGridActions from "src/components/DataGridPro/DataGridActions"; @@ -41,19 +41,19 @@ const useMilestoneNameLookup = (data) => ); }, [data]); -const useMilestoneRelatedPhaseLookup = (data) => - useMemo(() => { - if (!data) { - return {}; - } - return data.moped_milestones.reduce( - (obj, item) => - Object.assign(obj, { - [item.milestone_id]: item.related_phase_id, - }), - {} - ); - }, [data]); +// const useMilestoneRelatedPhaseLookup = (data) => +// useMemo(() => { +// if (!data) { +// return {}; +// } +// return data.moped_milestones.reduce( +// (obj, item) => +// Object.assign(obj, { +// [item.milestone_id]: item.related_phase_id, +// }), +// {} +// ); +// }, [data]); const requiredFields = ["moped_milestone"]; @@ -64,8 +64,6 @@ const useColumns = ({ handleSaveClick, handleCancelClick, handleDeleteOpen, - milestoneNameLookup, - relatedPhaseLookup, usingShiftKey, phaseNameLookup, }) => @@ -198,8 +196,6 @@ const useColumns = ({ handleCancelClick, handleEditClick, handleDeleteOpen, - milestoneNameLookup, - relatedPhaseLookup, usingShiftKey, phaseNameLookup, ]); @@ -241,7 +237,7 @@ const ProjectMilestones = ({ }, [data]); const milestoneNameLookup = useMilestoneNameLookup(data); - const relatedPhaseLookup = useMilestoneRelatedPhaseLookup(data); + // const relatedPhaseLookup = useMilestoneRelatedPhaseLookup(data); // check the bug in team table isnt here const phaseNameLookup = usePhaseNameLookup(data?.moped_phases || []); const handleDeleteOpen = useCallback( @@ -428,8 +424,6 @@ const ProjectMilestones = ({ handleSaveClick, handleCancelClick, handleEditClick, - milestoneNameLookup, - relatedPhaseLookup, usingShiftKey, phaseNameLookup, }); diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index e044739585..7d36e132aa 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -137,14 +137,6 @@ const useColumns = ({ workgroup_name: workgroupLookup[newValue?.workgroup_id], })} /> - // ); }, preProcessEditCellProps: (params) => { From f0ca5a8ddfff9e569040adc048eec528a27b2615 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Thu, 6 Mar 2025 10:59:29 -0600 Subject: [PATCH 18/25] add dependent fields to lookup autocomplete --- .../DataGridPro/LookupAutocompleteComponent.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js b/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js index 6de3e262ca..f5929c4039 100644 --- a/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js +++ b/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js @@ -26,6 +26,9 @@ const LookupAutocompleteComponent = ({ options, fullWidthPopper, autocompleteProps, + textFieldProps, + dependentFieldName, + dependentFieldValue, }) => { const apiRef = useGridApiContext(); const ref = React.useRef(null); @@ -42,6 +45,13 @@ const LookupAutocompleteComponent = ({ field, value: newValue, }); + if (dependentFieldName) { + apiRef.current.setEditCellValue({ + id, + field: dependentFieldName, + value: dependentFieldValue(newValue), + }); + } }; const defaultGetOptionLabel = useCallback( @@ -57,6 +67,7 @@ const LookupAutocompleteComponent = ({ return ( ( - + )} {...autocompleteProps} getOptionLabel={ From fdcb3ca9d28eb7460823d68c9afa4e1c00d9a5d7 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Thu, 6 Mar 2025 14:03:11 -0600 Subject: [PATCH 19/25] use the lookup one --- .../projects/projectView/ProjectMilestones.js | 27 ++----------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index 0e6feac362..d51031b248 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -8,7 +8,7 @@ import dataGridProStyleOverrides from "src/styles/dataGridProStylesOverrides"; import ProjectMilestoneToolbar from "./ProjectMilestones/ProjectMilestoneToolbar"; import DataGridTextField from "src/components/DataGridPro/DataGridTextField"; import ViewOnlyTextField from "src/components/DataGridPro/ViewOnlyTextField"; -import AutocompleteWithDependentField from "src/components/DataGridPro/AutocompleteWithDependentField"; +import LookupAutocompleteComponent from "src/components/DataGridPro/LookupAutocompleteComponent"; import { UPDATE_PROJECT_MILESTONES_MUTATION, @@ -22,7 +22,6 @@ import parseISO from "date-fns/parseISO"; import { usePhaseNameLookup } from "./ProjectPhase/helpers"; import ToggleEditComponent from "./ToggleEditComponent"; import MilestoneTemplateModal from "./ProjectMilestones/MilestoneTemplateModal"; -// import MilestoneAutocompleteComponent from "./ProjectMilestones/MilestoneAutocompleteComponent"; import DataGridDateFieldEdit from "./ProjectMilestones/DataGridDateFieldEdit"; import DeleteConfirmationModal from "./DeleteConfirmationModal"; import DataGridActions from "src/components/DataGridPro/DataGridActions"; @@ -41,20 +40,6 @@ const useMilestoneNameLookup = (data) => ); }, [data]); -// const useMilestoneRelatedPhaseLookup = (data) => -// useMemo(() => { -// if (!data) { -// return {}; -// } -// return data.moped_milestones.reduce( -// (obj, item) => -// Object.assign(obj, { -// [item.milestone_id]: item.related_phase_id, -// }), -// {} -// ); -// }, [data]); - const requiredFields = ["moped_milestone"]; const useColumns = ({ @@ -80,7 +65,7 @@ const useColumns = ({ }), editable: true, renderEditCell: (props) => ( - - // ), width: 250, }, From 1749aa3985433c318ac5efb99334dce027a48828 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Fri, 7 Mar 2025 10:06:53 -0600 Subject: [PATCH 20/25] use lookupautocomplete in teams table --- .../AutocompleteWithDependentField.js | 96 ------------------- .../ProjectTeam/ProjectTeamTable.js | 4 +- 2 files changed, 2 insertions(+), 98 deletions(-) delete mode 100644 moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js diff --git a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js b/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js deleted file mode 100644 index b764cddcb9..0000000000 --- a/moped-editor/src/components/DataGridPro/AutocompleteWithDependentField.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, { useCallback } from "react"; -import { Autocomplete, TextField, FormControl } from "@mui/material"; -import { useGridApiContext } from "@mui/x-data-grid-pro"; -import { useTheme } from "@mui/material/styles"; - -/** - * @param {Integer} id - Data Grid row id (same as record id) - * @param {String} value - field value - * @param {String} field - name of field - * @param {Boolean} hasFocus - does this field have focus - * @param {Boolean} error - toggles error style in textfield - * @param {Object} name - name of the field - * @param {Object} options - moped users to use in team member select - * @param {Object} workgroupLookup - lookup object to map workgroup ids to names - * @return {JSX.Element} - */ -const AutcompleteWithDependentField = ({ - id, - value, - field, - hasFocus, - name, - options, - autocompleteProps, - textFieldProps, - dependentFieldName, - dependentFieldValue, -}) => { - const theme = useTheme(); - const apiRef = useGridApiContext(); - const ref = React.useRef(null); - - React.useEffect(() => { - if (hasFocus) { - ref.current.focus(); - } - }, [hasFocus]); - - const handleChange = (event, newValue) => { - apiRef.current.setEditCellValue({ - id, - field, - value: newValue, - }); - // Also update the corresponding workgroup field with the selected user's workgroup id - apiRef.current.setEditCellValue({ - id, - field: dependentFieldName, - value: dependentFieldValue(newValue), - }); - }; - - const defaultGetOptionLabel = useCallback( - (option) => option[`${name}_name`], - [name] - ); - - const defaultIsOptionEqualToValue = useCallback( - (value, option) => value[`${name}_id`] === option[`${name}_id`], - [name] - ); - - return ( - - ( - - )} - /> - - ); -}; - -export default AutcompleteWithDependentField; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 7d36e132aa..c724363431 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -30,7 +30,7 @@ import DataGridActions from "src/components/DataGridPro/DataGridActions"; import DataGridTextField from "src/components/DataGridPro/DataGridTextField"; import DeleteConfirmationModal from "../DeleteConfirmationModal"; import ViewOnlyTextField from "src/components/DataGridPro/ViewOnlyTextField"; -import AutocompleteWithDependentField from "src/components/DataGridPro/AutocompleteWithDependentField"; +import LookupAutocompleteComponent from "src/components/DataGridPro/LookupAutocompleteComponent"; const useStyles = makeStyles((theme) => ({ infoIcon: { @@ -104,7 +104,7 @@ const useColumns = ({ ); }); return ( - Date: Fri, 7 Mar 2025 10:09:10 -0600 Subject: [PATCH 21/25] remove other autocomplete components --- .../MilestoneAutocompleteComponent.js | 78 ------------- .../ProjectTeam/TeamAutocompleteComponent.js | 110 ------------------ 2 files changed, 188 deletions(-) delete mode 100644 moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js delete mode 100644 moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js deleted file mode 100644 index 3978861e31..0000000000 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; -import { Autocomplete, TextField, FormControl } from "@mui/material"; -import { useGridApiContext } from "@mui/x-data-grid-pro"; -import { useTheme } from "@mui/material/styles"; - -/** - * @param {Integer} id - Data Grid row id (same as record id) - * @param {String} value - field value - * @param {String} field - name of field - * @param {Boolean} hasFocus - does this field have focus - * @param {Boolean} error - toggles error style in textfield - * @param {Object} milestoneNameLookup - maps milestone id to milestone name - * @param {Object} relatedPhaseLookup - maps milestone id to related phase id - * @return {JSX.Element} - */ -const MilestoneAutocompleteComponent = ({ - id, - value, - field, - hasFocus, - name, - milestoneNameLookup, - error, - relatedPhaseLookup, - options, -}) => { - const apiRef = useGridApiContext(); - const ref = React.useRef(null); - const theme = useTheme(); - - React.useEffect(() => { - if (hasFocus) { - ref.current.focus(); - } - }, [hasFocus]); - - const handleChange = (event, newValue) => { - apiRef.current.setEditCellValue({ - id, - field, - value: newValue ?? null, - }); - // Also update the moped_milestone field aka the Related Phase - apiRef.current.setEditCellValue({ - id, - field: "moped_milestone_related_phase", - value: { related_phase_id: newValue?.related_phase_id }, - }); - }; - - return ( - - option[`${name}_name`]} - isOptionEqualToValue={(option, value) => - value[`${name}_id`] === option[`${name}_id`] - } - value={value} - sx={{ paddingTop: theme.spacing(1) }} - onChange={handleChange} - renderInput={(params) => ( - - )} - /> - - ); -}; - -export default MilestoneAutocompleteComponent; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js deleted file mode 100644 index 2139c7b017..0000000000 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/TeamAutocompleteComponent.js +++ /dev/null @@ -1,110 +0,0 @@ -import React from "react"; -import { - Autocomplete, - TextField, - FormControl, - ListItem, - ListItemText, -} from "@mui/material"; -import { useGridApiContext } from "@mui/x-data-grid-pro"; -import { useTheme } from "@mui/material/styles"; - -/** - * @param {Integer} id - Data Grid row id (same as record id) - * @param {String} value - field value - * @param {String} field - name of field - * @param {Boolean} hasFocus - does this field have focus - * @param {Boolean} error - toggles error style in textfield - * @param {Object} name - name of the field - * @param {Object} options - moped users to use in team member select - * @param {Object} workgroupLookup - lookup object to map workgroup ids to names - * @return {JSX.Element} - */ -const TeamAutocompleteComponent = ({ - id, - value, - field, - hasFocus, - error, - name, - options, - workgroupLookup, -}) => { - const theme = useTheme(); - const apiRef = useGridApiContext(); - const ref = React.useRef(null); - - React.useEffect(() => { - if (hasFocus) { - ref.current.focus(); - } - }, [hasFocus]); - - const handleChange = (event, newValue) => { - apiRef.current.setEditCellValue({ - id, - field, - value: newValue, - }); - // Also update the corresponding workgroup field with the selected user's workgroup id - apiRef.current.setEditCellValue({ - id, - field: "moped_workgroup", - value: { - workgroup_id: newValue?.workgroup_id, - workgroup_name: workgroupLookup[newValue?.workgroup_id], - }, - }); - }; - - const isOptionEqualToValue = (option, value) => { - return value?.user_id === option?.user_id; - }; - - const getOptionLabel = (option) => { - return option.user_id ? `${option.first_name} ${option.last_name}` : ""; - }; - - const renderOption = (props, option) => { - return ( - - - - ); - }; - - return ( - - option.user_id} - isOptionEqualToValue={(option, value) => - isOptionEqualToValue(option, value) - } - renderOption={renderOption} - value={value?.user_id ? value : null} - sx={{ paddingTop: theme.spacing(1) }} - onChange={(event, newValue) => { - handleChange(event, newValue); - }} - renderInput={(params) => ( - - )} - /> - - ); -}; - -export default TeamAutocompleteComponent; From 9fd4d50f847af0abd8e2762fa0510a318e39b7a6 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Fri, 7 Mar 2025 10:46:55 -0600 Subject: [PATCH 22/25] move the props into a different file --- .../ProjectTeam/ProjectTeamTable.js | 22 ++----------------- .../projects/projectView/ProjectTeam/utils.js | 18 +++++++++++++++ 2 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 moped-editor/src/views/projects/projectView/ProjectTeam/utils.js diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index c724363431..9adf41d63a 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -8,8 +8,6 @@ import { Link, CircularProgress, Typography, - ListItem, - ListItemText, } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; @@ -31,6 +29,7 @@ import DataGridTextField from "src/components/DataGridPro/DataGridTextField"; import DeleteConfirmationModal from "../DeleteConfirmationModal"; import ViewOnlyTextField from "src/components/DataGridPro/ViewOnlyTextField"; import LookupAutocompleteComponent from "src/components/DataGridPro/LookupAutocompleteComponent"; +import { mopedUserAutocompleteProps } from "./utils"; const useStyles = makeStyles((theme) => ({ infoIcon: { @@ -109,24 +108,7 @@ const useColumns = ({ name={"user"} value={props.row.moped_user} options={unassignedTeamMembers} - autocompleteProps={{ - getOptionLabel: (option) => { - return option.user_id - ? `${option.first_name} ${option.last_name}` - : ""; - }, - getOptionKey: (option) => option.user_id, - renderOption: (props, option) => { - return ( - - - - ); - }, - }} + autocompleteProps={mopedUserAutocompleteProps} textFieldProps={{ error: props.error, helperText: "Required", diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js b/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js new file mode 100644 index 0000000000..ec961129c5 --- /dev/null +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js @@ -0,0 +1,18 @@ +import { ListItem, ListItemText } from "@mui/material"; + +export const mopedUserAutocompleteProps = { + getOptionLabel: (option) => { + return option.user_id ? `${option.first_name} ${option.last_name}` : ""; + }, + getOptionKey: (option) => option.user_id, + renderOption: (props, option) => { + return ( + + + + ); + }, +}; From c343d7d274ed761c4c2bff03d26ca8c84ed4df85 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Fri, 7 Mar 2025 11:04:57 -0600 Subject: [PATCH 23/25] cleaning up some comments and docstrings --- .../DataGridPro/LookupAutocompleteComponent.js | 13 ++++++++++--- .../projectView/ProjectTeam/ProjectTeamTable.js | 8 +------- .../views/projects/projectView/ProjectTeam/utils.js | 2 ++ 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js b/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js index f5929c4039..5dcead70a0 100644 --- a/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js +++ b/moped-editor/src/components/DataGridPro/LookupAutocompleteComponent.js @@ -12,8 +12,11 @@ import { filterOptions } from "src/utils/autocompleteHelpers"; * @param {Boolean} hasFocus - does field have focus in table * @param {String} name - name of lookup table relationship * @param {Array|Objects} options - the lookup table data - * @param {Object} autocompleteProps - props passed to the MUI Autcomplete Component * @param {Boolean} fullWidthPopper - should component use custom Popper component + * @param {Object} autocompleteProps - props passed to the MUI Autocomplete Component + * @param {Object} textFieldProps - props passed to the renderInput TextField + * @param {string} dependentFieldName - optional, if another field should be updated on change, name of field + * @param {function} dependentFieldValue - optional, takes newValue as input and returns the dependent fields change * * @returns {React component} */ @@ -67,7 +70,6 @@ const LookupAutocompleteComponent = ({ return ( ( - + )} {...autocompleteProps} getOptionLabel={ diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js index 9adf41d63a..2fd9a95749 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js @@ -2,13 +2,7 @@ import { useState, useMemo, useEffect, useCallback } from "react"; import isEqual from "lodash/isEqual"; import { v4 as uuidv4 } from "uuid"; -import { - Box, - Icon, - Link, - CircularProgress, - Typography, -} from "@mui/material"; +import { Box, Icon, Link, CircularProgress, Typography } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import { DataGridPro, GridRowModes, useGridApiRef } from "@mui/x-data-grid-pro"; diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js b/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js index ec961129c5..c84cb3e996 100644 --- a/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js +++ b/moped-editor/src/views/projects/projectView/ProjectTeam/utils.js @@ -4,7 +4,9 @@ export const mopedUserAutocompleteProps = { getOptionLabel: (option) => { return option.user_id ? `${option.first_name} ${option.last_name}` : ""; }, + // default is using the optionLabel as key, this prevents an error since users can have the same name getOptionKey: (option) => option.user_id, + // custom renderOption prop to render user's email along with user name renderOption: (props, option) => { return ( From 7730fc1c4fa676364e0668fa098140a8fdbd1b61 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Fri, 7 Mar 2025 11:05:56 -0600 Subject: [PATCH 24/25] one more thing to remove --- moped-editor/src/views/projects/projectView/ProjectMilestones.js | 1 - 1 file changed, 1 deletion(-) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index d51031b248..42951e551c 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -214,7 +214,6 @@ const ProjectMilestones = ({ }, [data]); const milestoneNameLookup = useMilestoneNameLookup(data); - // const relatedPhaseLookup = useMilestoneRelatedPhaseLookup(data); // check the bug in team table isnt here const phaseNameLookup = usePhaseNameLookup(data?.moped_phases || []); const handleDeleteOpen = useCallback( From e23992e51877c1baa6489c3770c2f76a92157d44 Mon Sep 17 00:00:00 2001 From: chiaberry Date: Fri, 7 Mar 2025 11:24:30 -0600 Subject: [PATCH 25/25] need to delete the thing i made up --- .../src/views/projects/projectView/ProjectMilestones.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js index 42951e551c..499b5b752d 100644 --- a/moped-editor/src/views/projects/projectView/ProjectMilestones.js +++ b/moped-editor/src/views/projects/projectView/ProjectMilestones.js @@ -294,6 +294,10 @@ const ProjectMilestones = ({ updatedMilestoneData.milestone_id = updatedMilestoneData.moped_milestone?.milestone_id || null; + // "moped_milestone_related_phase" is a column name only for rendering in DataGrid, the pertinent information is in the + // moped_milestone object. Deleting from the payload since the db is not expecting it in this shape + delete updatedMilestoneData.moped_milestone_related_phase; + if (updatedRow.isNew) { delete updatedMilestoneData.isNew; delete updatedMilestoneData.id;