adds substantial completion date tooltip

moped-editor/src/constants/projects.js

@@ -0,0 +1,2 @@
+export const substantialCompletionDateTooltipText =
+ "The earliest confirmed start date of a project phase that has a simple phase name of Complete (Complete or Post-construction)";

moped-editor/src/queries/project.js

@@ -1021,3 +1021,12 @@ export const GET_PROJECTS_GEOGRAPHIES = gql`
  }
  }
 `;
+
+export const GET_PROJECT_SUBSTANTIAL_COMPLETION_DATE = gql`
+ query MopedProjectCompletionDate($projectId: Int) {
+ project_list_view(where: { project_id: { _eq: $projectId } }) {
+ substantial_completion_date
+ project_id
+ }
+ }
+`;

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

@@ -73,7 +73,6 @@ const useStyles = makeStyles((theme) => ({
  width: "100%",
  color: theme.palette.text.secondary,
  fontSize: ".8rem",
- margin: "8px 0",
  },
  fieldBox: {
  maxWidth: "10rem",

moped-editor/src/views/projects/projectView/ProjectPhaseToolbar.js

@@ -1,13 +1,16 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import { Box, Typography } from "@mui/material";
 import ButtonDropdownMenu from "src/components/ButtonDropdownMenu";
+import ProjectSubstantialCompletionDate from "./ProjectSubstantialCompletionDate";
 
 /** Custom toolbar title that resembles material table titles */
-const ProjectPhaseToolbar = ({ addAction, setIsDialogOpen }) => (
- <Box display="flex" justifyContent="space-between">
- <Typography variant="h2" color="primary" style={{ padding: "1em" }}>
- Phases
- </Typography>
+const ProjectPhaseToolbar = ({ addAction, setIsDialogOpen, completionDate }) => (
+ <Box display="flex" justifyContent="space-between" sx={{ margin: "1em" }}>
+ <div>
+ <Typography variant="h2" color="primary" style={{ paddingTop: "1em" }}>
+ Phases
+ </Typography>
+ <ProjectSubstantialCompletionDate completionDate={completionDate} />
+ </div>
  <div style={{ padding: "1rem" }}>
  <ButtonDropdownMenu
  addAction={addAction}

moped-editor/src/views/projects/projectView/ProjectPhases.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { useMutation } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import { CircularProgress, Box, IconButton } from "@mui/material";
 import { DataGridPro } from "@mui/x-data-grid-pro";
 import { green } from "@mui/material/colors";
@@ -12,7 +12,10 @@ import ProjectPhaseToolbar from "./ProjectPhaseToolbar";
 import PhaseTemplateModal from "./PhaseTemplateModal";
 import ProjectPhaseDialog from "./ProjectPhaseDialog";
 import ProjectPhaseDateConfirmationPopover from "./ProjectPhaseDateConfirmationPopover";
-import { DELETE_PROJECT_PHASE } from "src/queries/project";
+import {
+ DELETE_PROJECT_PHASE,
+ GET_PROJECT_SUBSTANTIAL_COMPLETION_DATE,
+} from "src/queries/project";
 import {
  useCurrentProjectPhaseIDs,
  useCurrentPhaseIds,
@@ -157,6 +160,13 @@ const ProjectPhases = ({ projectId, data, refetch }) => {
  const [deletePhase, { loading: deleteInProgress }] =
  useMutation(DELETE_PROJECT_PHASE);
 
+ const { data: completionDateData, refetch: refetchCompletionDate } = useQuery(
+ GET_PROJECT_SUBSTANTIAL_COMPLETION_DATE,
+ {
+ variables: { projectId: Number(projectId) },
+ }
+ );
+
  const onClickAddPhase = () => setEditPhase({ project_id: projectId });
 
  const onDeletePhase = useCallback(
@@ -167,9 +177,10 @@ const ProjectPhases = ({ projectId, data, refetch }) => {
  refetchQueries: ["ProjectSummary"],
  }).then(() => {
  refetch();
+ refetchCompletionDate();
  });
  },
- [deletePhase, refetch]
+ [deletePhase, refetch, refetchCompletionDate]
  );
 
  const columns = useColumns({
@@ -187,8 +198,13 @@ const ProjectPhases = ({ projectId, data, refetch }) => {
 
  const subphaseNameLookup = useSubphaseNameLookup(data?.moped_subphases || []);
 
+ const completionDate =
+ completionDateData?.project_list_view[0]["substantial_completion_date"];
+
  const onSubmitCallback = () => {
- refetch().then(() => setEditPhase(null));
+ refetchCompletionDate().then(() =>
+ refetch().then(() => setEditPhase(null))
+ );
  };
 
  return (
@@ -212,6 +228,7 @@ const ProjectPhases = ({ projectId, data, refetch }) => {
  toolbar: {
  addAction: onClickAddPhase,
  setIsDialogOpen: setIsTemplateDialogOpen,
+ completionDate: completionDate,
  },
  }}
  />

moped-editor/src/views/projects/projectView/ProjectSubstantialCompletionDate.js

@@ -0,0 +1,48 @@
+import { Box, Typography, Tooltip } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import { formatDateType } from "src/utils/dateAndTime";
+import { substantialCompletionDateTooltipText } from "src/constants/projects";
+
+const useStyles = makeStyles((theme) => ({
+ fieldLabel: {
+ width: "100%",
+ color: theme.palette.text.secondary,
+ fontSize: ".8rem",
+ },
+ fieldBox: {
+ maxWidth: "10rem",
+ },
+ fieldLabelText: {
+ width: "calc(100% - 2rem)",
+ },
+}));
+
+const ProjectSubstantialCompletionDate = ({ completionDate }) => {
+ const classes = useStyles();
+ return (
+ <>
+ <Typography className={classes.fieldLabel}>
+ Substantial completion date
+ </Typography>
+ <Box
+ display="flex"
+ justifyContent="flex-start"
+ className={classes.fieldBox}
+ >
+ <Tooltip
+ placement="bottom-start"
+ title={substantialCompletionDateTooltipText}
+ >
+ <Typography className={classes.fieldLabelText} component="span">
+ {
+ // If there is no input, render a "-"
+ completionDate ? formatDateType(completionDate) : "-"
+ }
+ </Typography>
+ </Tooltip>
+ </Box>
+ </>
+ );
+};
+
+export default ProjectSubstantialCompletionDate;

moped-editor/src/views/projects/projectsListView/helpers.js

@@ -315,6 +315,7 @@ export const useColumns = ({ hiddenColumns }) => {
  {
  headerName: "Substantial completion date",
  field: "substantial_completion_date",
+ description: "The earliest confirmed start date of a project phase that has a simple phase name of Complete (Complete or Post-construction)",
  valueFormatter: (value) => value && formatDateType(value),
  width: COLUMN_WIDTHS.small,
  },