created DRO Selection Modal and changed the DRO displayed in the projects page (#2660)

Author: heejung-hong

client/src/components/Modals/DROSelectionModal.jsx

@@ -0,0 +1,125 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import { MdLaunch, MdLocationCity } from "react-icons/md";
+import ModalDialog from "../UI/Modal";
+import RadioButton from "../UI/RadioButton";
+import Button from "../Button/Button";
+
+const useStyles = createUseStyles(theme => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "40rem",
+    gap: "1rem",
+    padding: "1rem"
+  },
+  buttonFlexBox: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    margin: 0
+  },
+  heading1: theme.typography.heading1,
+  heading2: theme.typography.heading2,
+  subheading: {
+    ...theme.typography.subHeading,
+    width: "85%"
+  },
+  externalLinkIcon: {
+    fontSize: "20px",
+    padding: " 0 0.4em",
+    color: "#00F",
+    verticalAlign: "middle"
+  },
+  icon: {
+    height: "40px",
+    width: "40px",
+    color: theme.colorBlack,
+    marginBottom: "0",
+    verticalAlign: "middle",
+    marginRight: "1rem"
+  }
+}));
+
+export default function DROSelectionModal({
+  mounted,
+  onClose,
+  onConfirm,
+  selectedDro,
+  droOptions,
+  onChange
+}) {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+
+  return (
+    <ModalDialog
+      mounted={mounted}
+      onClose={onClose}
+      onConfirm={onConfirm}
+      onChange={onChange}
+    >
+      <div className={classes.container}>
+        <div className={classes.heading1}>
+          <MdLocationCity className={classes.icon} />
+          Select Development Review Office
+        </div>
+        <div className={classes.subheading}>
+          To submit your snapshot, select a Development Review Office based on
+          the location of your project
+        </div>
+        <div className={classes.heading2}>
+          Map of Development Review Offices
+          <a
+            href="https://ladot.lacity.gov/sites/default/files/documents/ladot-development-review-counter-info.pdf"
+            target="_blank"
+            className={classes.glossaryLink}
+            rel="noreferrer"
+          >
+            <MdLaunch className={classes.externalLinkIcon} />
+          </a>
+        </div>
+        {droOptions.map(dro => (
+          <div
+            key={dro.id}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              width: "100px",
+              margin: "auto"
+            }}
+          >
+            <RadioButton
+              label={dro.name}
+              value={dro.id}
+              checked={selectedDro === dro.id}
+              onChange={onChange}
+            />
+          </div>
+        ))}
+        <div className={classes.buttonFlexBox}>
+          <Button onClick={onClose} variant="secondary">
+            CANCEL
+          </Button>
+          <Button
+            onClick={() => onConfirm("ok", selectedDro)}
+            variant="primary"
+          >
+            CONFIRM
+          </Button>
+        </div>
+      </div>
+    </ModalDialog>
+  );
+}
+
+DROSelectionModal.propTypes = {
+  mounted: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  selectedDro: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  droOptions: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired
+};

client/src/components/Projects/ProjectTableRow.jsx

@@ -18,11 +18,12 @@ import ProjectContextMenu from "./ProjectContextMenu";
 import PdfPrint from "../PdfPrint/PdfPrint";
 import fetchEngineRules from "./fetchEngineRules";
 import * as droService from "../../services/dro.service";
-import UniversalSelect from "../UI/UniversalSelect";
+// import UniversalSelect from "../UI/UniversalSelect";
 import { ENABLE_UPDATE_TOTALS } from "../../helpers/Constants";
 import AdminNotesModal from "../Modals/ActionProjectAdminNotes";
 import WarningModal from "../Modals/WarningAdminNotesUnsavedChanges";
 import { Td, TdExpandable } from "../UI/TableData";
+import DROSelectionModal from "../Modals/DROSelectionModal";
 
 const useStyles = createUseStyles(theme => ({
   actionIcons: {
@@ -196,7 +197,9 @@ const ProjectTableRow = ({
   const printRef = useRef();
   const [projectRules, setProjectRules] = useState(null);
   const [selectedDro, setSelectedDro] = useState(project.droId || "");
+  const [committedDro, setCommittedDro] = useState(project.droId || "");
   const [droName, setDroName] = useState("N/A");
+  const [DROSelectionModalOpen, setDROSelectionModalOpen] = useState(false);
 
   // Download and process rules for PDF rendering
   useEffect(() => {
@@ -229,6 +232,27 @@ const ProjectTableRow = ({
     setSelectedDro(project.droId || "");
   }, [project.droId]);
 
+  const handleDROSelectionModalOpen = () => {
+    setDROSelectionModalOpen(true);
+  };
+
+  const handleDROSelectionModalClose = () => {
+    setSelectedDro(committedDro);
+    setDROSelectionModalOpen(false);
+  };
+
+  const handleDROSelection = action => {
+    if (action === "ok") {
+      setCommittedDro(selectedDro);
+    }
+    setDROSelectionModalOpen(false);
+  };
+
+  const getDroNameById = id => {
+    const dro = droOptions.find(d => String(d.id) === String(id));
+    return dro ? dro.name : "N/A";
+  };
+
   const handlePrintPdf = useReactToPrint({
     content: () => printRef.current,
     bodyClass: "printContainer",
@@ -314,7 +338,39 @@ const ProjectTableRow = ({
         {droOptions.length > 0 &&
         (isAdmin || (project.loginId === loginId && !project.dateSubmitted)) ? (
           <div style={{ width: "100px" }}>
-            <UniversalSelect
+            {!committedDro ? (
+              <MdAdd
+                onClick={handleDROSelectionModalOpen}
+                style={{
+                  cursor: "pointer"
+                }}
+              />
+            ) : (
+              <span
+                onClick={handleDROSelectionModalOpen}
+                style={{
+                  color: "#0000FF",
+                  textDecoration: "underline",
+                  cursor: "pointer"
+                }}
+              >
+                {getDroNameById(committedDro)}
+              </span>
+            )}
+
+            <DROSelectionModal
+              mounted={DROSelectionModalOpen}
+              onClose={handleDROSelectionModalClose}
+              onConfirm={handleDROSelection}
+              selectedDro={selectedDro}
+              droOptions={droOptions}
+              onChange={e => {
+                const newDroId = e.target.value;
+                setSelectedDro(newDroId);
+                onDroChange(project.id, newDroId);
+              }}
+            />
+            {/* <UniversalSelect
               value={selectedDro}
               onChange={e => {
                 const newDroId = e.target.value;
@@ -330,7 +386,7 @@ const ProjectTableRow = ({
               ]}
               name="droId"
               className={classes.selectBox}
-            />
+            /> */}
           </div>
         ) : (
           <span>{droName}</span>
@@ -443,6 +499,7 @@ ProjectTableRow.propTypes = {
   handleSubmitModalOpen: PropTypes.func.isRequired,
   handleHide: PropTypes.func.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
+  handleDROSelectionModalOpen: PropTypes.func,
   checkedProjectIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   droOptions: PropTypes.arrayOf(
     PropTypes.shape({