Merge pull request #1463 from cityofaustin/mateo/18178_dategridpro

Project Team DataGridPro migration

moped-editor/src/components/DataGridPro/DataGridTextField.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { useGridApiContext } from "@mui/x-data-grid-pro";
+
+/**
+ * @param {Integer} id - Data Grid row id
+ * @param {String} value - field value
+ * @param {String} field - name of field
+ * @param {Boolean} hasFocus - does this field have focus
+ * @param {String} helperText - optional helper text
+ * @param {Boolean} error - toggles error style in textfield
+ * @return {JSX.Element}
+ */
+const DataGridTextField = ({
+  id,
+  value,
+  field,
+  hasFocus,
+  helperText,
+  error,
+  multiline = false,
+}) => {
+  const apiRef = useGridApiContext();
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    if (hasFocus) {
+      ref.current.focus();
+    }
+  }, [hasFocus]);
+
+  const handleChange = (event, newValue) => {
+    const { value: inputValue } = event.target;
+
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: inputValue,
+    });
+  };
+
+  return (
+    <TextField
+      variant="standard"
+      style={{ width: "inherit", paddingTop: "inherit" }}
+      id={field}
+      inputRef={ref}
+      name={field}
+      type="text"
+      value={value ?? ""}
+      onChange={handleChange}
+      helperText={!!helperText && helperText}
+      error={error}
+      multiline={multiline}
+    />
+  );
+};
+
+export default DataGridTextField;

moped-editor/src/views/projects/projectView/ProjectFunding/LookupAutocompleteComponent.js

@@ -2,7 +2,7 @@ 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 "./utils/helpers";
+import { getLookupValueByID } from "src/components/DataGridPro/utils/helpers";
 import CustomPopper from "src/components/CustomPopper";
 
 const useStyles = makeStyles((theme) => ({

moped-editor/src/views/projects/projectView/ProjectFunding/ProjectFundingTable.js

@@ -35,7 +35,7 @@ import LookupAutocompleteComponent from "./LookupAutocompleteComponent";
 import FundAutocompleteComponent from "./FundAutocompleteComponent";
 import dataGridProStyleOverrides from "src/styles/dataGridProStylesOverrides";
 import DeleteConfirmationModal from "../DeleteConfirmationModal";
-import { getLookupValueByID } from "./utils/helpers";
+import { getLookupValueByID } from "src/components/DataGridPro/utils/helpers";
 import DataGridActions from "src/components/DataGridPro/DataGridActions";
 
 const useStyles = makeStyles((theme) => ({

moped-editor/src/views/projects/projectView/ProjectTeamRoleMultiselect.js → moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamRoleMultiselect.js

@@ -10,36 +10,47 @@ import {
   Select,
   Typography,
 } from "@mui/material";
-import makeStyles from '@mui/styles/makeStyles';
+import { useGridApiContext } from "@mui/x-data-grid-pro";
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    margin: theme.spacing(1),
-  },
-  noLabel: {
-    marginTop: theme.spacing(3),
-  },
-  infoIcon: {
-    color: theme.palette.action.disabled,
-  },
-}));
+import theme from "src/theme";
+
+const ProjectTeamRoleMultiselect = ({ id, field, roles, value }) => {
+  const rolesArray = React.useMemo(
+    () => value.map((role) => role.project_role_id),
+    [value]
+  );
+  const [selectedValues, setSelectedValues] = React.useState(rolesArray || []);
+
+  const apiRef = useGridApiContext();
+
+  const handleChange = (event) => {
+    const valueIds = event.target.value;
+    const newValue = roles.filter((role) =>
+      valueIds.includes(role.project_role_id)
+    );
+    const rolesArray = newValue.map((role) => role.project_role_id);
+    setSelectedValues(rolesArray);
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: newValue,
+    });
+  };
 
-const ProjectTeamRoleMultiselect = ({ roles, value, onChange }) => {
-  const classes = useStyles();
   return (
-    <FormControl variant="standard" className={classes.formControl}>
+    <FormControl variant="standard" sx={{ margin: theme.spacing(1) }}>
       <Select
         variant="standard"
-        style={{ minWidth: "8em" }}
+        sx={{ minWidth: theme.spacing(10) }}
         labelId="team-role-multiselect-label"
-        id="team-role-multiselect"
+        id={String(id)}
         multiple
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+        value={selectedValues}
+        onChange={handleChange}
         input={<Input id="select-multiple" />}
         renderValue={() => {
           const selectedRoles = roles.filter((role) =>
-            value.includes(role.project_role_id)
+            selectedValues.includes(role.project_role_id)
           );
           return selectedRoles.map(({ project_role_name }) => (
             <Typography key={project_role_name}>{project_role_name}</Typography>
@@ -52,16 +63,16 @@ const ProjectTeamRoleMultiselect = ({ roles, value, onChange }) => {
           PaperProps: { style: { width: "50%" } },
           anchorOrigin: { vertical: "bottom", horizontal: "center" },
           transformOrigin: { vertical: "top", horizontal: "center" },
-        }}>
+        }}
+      >
         {roles.map(
           ({
             project_role_id,
             project_role_name,
             project_role_description,
           }) => {
-            const isChecked = value.includes(project_role_id);
+            const isChecked = selectedValues.includes(project_role_id);
             return (
-              // ListItemClasses
               <MenuItem key={project_role_id} value={project_role_id}>
                 <Checkbox checked={isChecked} color={"primary"} />
                 <ListItemText