Merge pull request #1516 from cityofaustin/mike/20357_team_required

Add validation of required fields to Team table and combine DataGridTextField components
cityofaustin · Jan 2, 2025 · 03faf33 · 03faf33
2 parents 47f49bc + 9375c8b
commit 03faf33
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 156 deletions.
diff --git a/moped-editor/src/components/DataGridPro/DataGridActions.js b/moped-editor/src/components/DataGridPro/DataGridActions.js
@@ -45,8 +45,12 @@ const DataGridActions = ({
    */
   const hasRequiredFields = useGridSelector(apiRef, () => {
     const editState = apiRef.current.state.editRows;
+
     for (const field of requiredFields) {
-      if (!editState[id]?.[field]?.value) {
+      const hasError = Boolean(editState[id]?.[field]?.error);
+      const hasValue = Boolean(editState[id]?.[field]?.value);
+
+      if (hasError || !hasValue) {
         return false;
       }
     }
@@ -58,6 +62,7 @@ const DataGridActions = ({
       <GridActionsCellItem
         icon={<CheckIcon sx={defaultEditColumnIconStyle} />}
         label="Save"
+        key="save"
         sx={{
           color: "primary.main",
         }}
@@ -67,6 +72,7 @@ const DataGridActions = ({
       <GridActionsCellItem
         icon={<CloseIcon sx={defaultEditColumnIconStyle} />}
         label="Cancel"
+        key="cancel"
         className="textPrimary"
         onClick={handleCancelClick(id)}
         color="inherit"
@@ -79,6 +85,7 @@ const DataGridActions = ({
       <GridActionsCellItem
         icon={<EditOutlinedIcon sx={defaultEditColumnIconStyle} />}
         label="Edit"
+        key="edit"
         className="textPrimary"
         onClick={handleEditClick(id)}
         color="inherit"
@@ -87,6 +94,7 @@ const DataGridActions = ({
     <GridActionsCellItem
       icon={<DeleteOutlineIcon sx={defaultEditColumnIconStyle} />}
       label="Delete"
+      key="delete"
       onClick={handleDeleteOpen(id)}
       color="inherit"
     />,

diff --git a/moped-editor/src/components/DataGridPro/DataGridTextField.js b/moped-editor/src/components/DataGridPro/DataGridTextField.js
@@ -42,7 +42,7 @@ const DataGridTextField = ({
   return (
     <TextField
       variant="standard"
-      style={{ width: "inherit", paddingTop: "inherit" }}
+      sx={{ width: "100%", mx: 1, pt: 1 }}
       id={field}
       inputRef={ref}
       name={field}

diff --git a/moped-editor/src/components/FileUpload/FileUploadDialogSingle.js b/moped-editor/src/components/FileUpload/FileUploadDialogSingle.js
@@ -189,6 +189,7 @@ const FileUploadDialogSingle = (props) => {
               value={undefined}
               onChange={handleFileNameChange}
               fullWidth
+              helperText={"Required"}
             />
 
             <FormControl>
@@ -244,7 +245,7 @@ const FileUploadDialogSingle = (props) => {
                 value={undefined}
                 onChange={handleExternalLinkChange}
                 fullWidth
-                helperText={"Enter URL or network location"}
+                helperText={"Required. Enter URL or network location"}
               />
             ) : (
               <FileUpload

diff --git a/moped-editor/src/views/projects/projectView/DataGridTextField.js b/moped-editor/src/views/projects/projectView/DataGridTextField.js
diff --git a/moped-editor/src/views/projects/projectView/ProjectFiles.js b/moped-editor/src/views/projects/projectView/ProjectFiles.js
@@ -29,7 +29,7 @@ import downloadFileAttachment from "../../../utils/downloadFileAttachment";
 import { FormattedDateString } from "src/utils/dateAndTime";
 import { isValidUrl } from "src/utils/urls";
 import ProjectFilesToolbar from "./ProjectFilesToolbar";
-import DataGridTextField from "./DataGridTextField";
+import DataGridTextField from "src/components/DataGridPro/DataGridTextField";
 import ProjectFilesTypeSelect from "./ProjectFilesTypeSelect";
 import DeleteConfirmationModal from "./DeleteConfirmationModal";
 import DataGridActions from "src/components/DataGridPro/DataGridActions";
@@ -64,7 +64,7 @@ const fileTypes = ["", "Funding", "Plans", "Estimates", "Other"];
 // 'private/project/65/80_04072022191747_40d4c982e064d0f9_1800halfscofieldridgepwkydesignprint.pdf'
 const cleanUpFileKey = (str) => str.replace(/^(?:[^_]*_){3}/g, "");
 
-const requiredFields = ["file_name", "file_url", "file_type"];
+const requiredFields = ["file_name", "file_type"];
 
 const useColumns = ({
   classes,
@@ -161,7 +161,7 @@ const useColumns = ({
         field: "file_description",
         editable: true,
         width: 200,
-        renderEditCell: (props) => <DataGridTextField {...props} />,
+        renderEditCell: (props) => <DataGridTextField {...props} multiline />,
       },
       {
         headerName: "Uploaded by",

diff --git a/moped-editor/src/views/projects/projectView/ProjectFilesTypeSelect.js b/moped-editor/src/views/projects/projectView/ProjectFilesTypeSelect.js
@@ -30,7 +30,7 @@ const ProjectFilesTypeSelect = ({ id, value, field, hasFocus }) => {
   };
 
   return (
-    <FormControl variant="standard" sx={{ paddingTop: "8px", width: "90%" }}>
+    <FormControl variant="standard" sx={{ width: "100%", mx: 1 }}>
       <Select
         variant="standard"
         id={field}

diff --git a/moped-editor/src/views/projects/projectView/ProjectFunding/LookupAutocompleteComponent.js b/moped-editor/src/views/projects/projectView/ProjectFunding/LookupAutocompleteComponent.js
@@ -1,18 +1,9 @@
 import React from "react";
 import { Autocomplete, TextField } from "@mui/material";
 import { useGridApiContext } from "@mui/x-data-grid-pro";
-import makeStyles from "@mui/styles/makeStyles";
 import { getLookupValueByID } from "src/components/DataGridPro/utils/helpers";
 import CustomPopper from "src/components/CustomPopper";
 
-const useStyles = makeStyles((theme) => ({
-  autocompleteLookupInput: {
-    minWidth: "200px",
-    alignContent: "center",
-    padding: theme.spacing(1),
-  },
-}));
-
 /**
  * Component for dropdown select using a lookup table as options
  * @param {Number} id - row id in Data Grid
@@ -31,7 +22,6 @@ const LookupAutocompleteComponent = ({
   name,
   lookupTable,
 }) => {
-  const classes = useStyles();
   const apiRef = useGridApiContext();
   const ref = React.useRef(null);
 
@@ -51,7 +41,7 @@ const LookupAutocompleteComponent = ({
 
   return (
     <Autocomplete
-      className={classes.autocompleteLookupInput}
+      sx={{ width: "100%", mx: 1 }}
       value={
         // if we are editing, the autocomplete has the value provided by the material table, which is the record id
         // need to get its corresponding text value

diff --git a/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingTable.js b/moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingTable.js
@@ -27,7 +27,7 @@ import {
 import { getDatabaseId, useUser } from "../../../../auth/user";
 import FundingDeptUnitAutocomplete from "./FundingDeptUnitAutocomplete";
 import DollarAmountIntegerField from "./DollarAmountIntegerField";
-import DataGridTextField from "../DataGridTextField";
+import DataGridTextField from "src/components/DataGridPro/DataGridTextField";
 import SubprojectFundingModal from "./SubprojectFundingModal";
 import ProjectFundingToolbar from "./ProjectFundingToolbar";
 import LookupSelectComponent from "../../../../components/LookupSelectComponent";
@@ -156,7 +156,7 @@ const useColumns = ({
         field: "funding_description",
         width: 200,
         editable: true,
-        renderEditCell: (props) => <DataGridTextField {...props} />,
+        renderEditCell: (props) => <DataGridTextField {...props} multiline />,
       },
       {
         headerName: "Status",

diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones.js b/moped-editor/src/views/projects/projectView/ProjectMilestones.js
@@ -6,7 +6,7 @@ import { CircularProgress } from "@mui/material";
 import { DataGridPro, GridRowModes, useGridApiRef } from "@mui/x-data-grid-pro";
 import dataGridProStyleOverrides from "src/styles/dataGridProStylesOverrides";
 import ProjectMilestoneToolbar from "./ProjectMilestones/ProjectMilestoneToolbar";
-import DataGridTextField from "./DataGridTextField";
+import DataGridTextField from "src/components/DataGridPro/DataGridTextField";
 import RelatedPhaseTextField from "./ProjectMilestones/RelatedPhaseTextField";
 
 import {
@@ -84,6 +84,7 @@ const useColumns = ({
             {...props}
             milestoneNameLookup={milestoneNameLookup}
             relatedPhaseLookup={relatedPhaseLookup}
+            error={props.error}
           />
         ),
         width: 250,
@@ -93,7 +94,7 @@ const useColumns = ({
         field: "description",
         width: 200,
         editable: true,
-        renderEditCell: (props) => <DataGridTextField {...props} />,
+        renderEditCell: (props) => <DataGridTextField {...props} multiline />,
       },
       {
         headerName: "Related phase",

diff --git a/moped-editor/src/views/projects/projectView/ProjectMilestones/DataGridDateFieldEdit.js b/moped-editor/src/views/projects/projectView/ProjectMilestones/DataGridDateFieldEdit.js
@@ -2,7 +2,6 @@ import React from "react";
 import { MobileDatePicker } from "@mui/x-date-pickers";
 import { parseISO, format } from "date-fns";
 import { useGridApiContext } from "@mui/x-data-grid-pro";
-import theme from "src/theme";
 
 /**
  * DataGridDateFieldEdit - renders a Date type Calendar select for use in DataGrid
@@ -34,7 +33,7 @@ const DataGridDateFieldEdit = ({ value, hasFocus, id, field, ...props }) => {
 
   return (
     <MobileDatePicker
-      sx={{ mx: theme.spacing(1) }}
+      sx={{ mx: 1 }}
       inputRef={ref}
       format="MM/dd/yyyy"
       value={value ? parseISO(value) : null}

diff --git a/...editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js b/...editor/src/views/projects/projectView/ProjectMilestones/MilestoneAutocompleteComponent.js
@@ -45,10 +45,7 @@ const MilestoneAutocompleteComponent = ({
   };
 
   return (
-    <FormControl
-      variant="standard"
-      style={{ width: "100%", marginLeft: "10px", marginRight: "10px" }}
-    >
+    <FormControl variant="standard" sx={{ width: "100%", mx: 1 }}>
       <Autocomplete
         id={"milestone_name"}
         name={"milestone_name"}
@@ -63,7 +60,7 @@ const MilestoneAutocompleteComponent = ({
             variant="standard"
             {...params}
             inputRef={ref}
-            error={error || !value}
+            error={error}
             helperText="Required"
           />
         )}

diff --git a/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamRoleMultiselect.js b/moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamRoleMultiselect.js
@@ -14,7 +14,7 @@ import { useGridApiContext } from "@mui/x-data-grid-pro";
 
 import theme from "src/theme";
 
-const ProjectTeamRoleMultiselect = ({ id, field, roles, value }) => {
+const ProjectTeamRoleMultiselect = ({ id, field, roles, value, error }) => {
   const rolesArray = React.useMemo(
     () => value.map((role) => role.project_role_id),
     [value]
@@ -45,6 +45,7 @@ const ProjectTeamRoleMultiselect = ({ id, field, roles, value }) => {
         labelId="team-role-multiselect-label"
         id={String(id)}
         multiple
+        error={error}
         value={selectedValues}
         onChange={handleChange}
         input={<Input id="select-multiple" />}
@@ -88,7 +89,7 @@ const ProjectTeamRoleMultiselect = ({ id, field, roles, value }) => {
           }
         )}
       </Select>
-      <FormHelperText>Required</FormHelperText>
+      <FormHelperText error={error}>Required</FormHelperText>
     </FormControl>
   );
 };