Merge pull request #274 from cityofaustin/5309_replace_phase_on_proje…

…ct_summary_page

Creates new "current phase" table on timeline (user can select one active phase)

moped-database/migrations/1620237571753_alter_table_public_moped_proj_phases_alter_column_is_current_phase/down.sql

@@ -0,0 +1 @@
+ALTER TABLE ONLY "public"."moped_proj_phases" ALTER COLUMN "is_current_phase" DROP DEFAULT;

moped-database/migrations/1620237571753_alter_table_public_moped_proj_phases_alter_column_is_current_phase/up.sql

@@ -0,0 +1 @@
+ALTER TABLE ONLY "public"."moped_proj_phases" ALTER COLUMN "is_current_phase" SET DEFAULT false;

moped-editor/src/components/DataTable/DataTable.js

@@ -175,7 +175,9 @@ const DataTable = ({ fieldConfiguration, data, loading, error, refetch }) => {
    */
   const getValue = field => {
     const tableName = fieldConfiguration.table.name;
-    return data[tableName][0][field] ?? null;
+    return data[tableName].length > 0 && data[tableName][0][field]
+      ? data[tableName][0][field]
+      : null;
   };
 
   /**

moped-editor/src/queries/project.js

@@ -1,13 +1,5 @@
 import { gql } from "@apollo/client";
 
-export const PROJECT_NAME = gql`
-  query ProjectName($projectId: Int) {
-    moped_project(where: { project_id: { _eq: $projectId } }) {
-      project_name
-    }
-  }
-`;
-
 export const ADD_PROJECT = gql`
   mutation AddProject(
     $object: moped_project_insert_input!
@@ -48,6 +40,23 @@ export const SUMMARY_QUERY = gql`
         location
       }
     }
+    moped_phases {
+      phase_id
+      phase_name
+    }
+    moped_proj_phases(
+      where: {
+        project_id: { _eq: $projectId }
+        is_current_phase: { _eq: true }
+      }
+    ) {
+      phase_name
+      project_phase_id
+      is_current_phase
+      project_id
+      phase_start
+      phase_end
+    }
   }
 `;
 

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

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useQuery } from "@apollo/client";
 import { useParams } from "react-router-dom";
 
 import ProjectSummaryTable from "./ProjectSummaryTable";
@@ -8,7 +7,6 @@ import ProjectSummaryEditMap from "./ProjectSummaryEditMap";
 import { createFeatureCollectionFromProjectFeatures } from "../../../utils/mapHelpers";
 
 import { Grid, CardContent, CircularProgress } from "@material-ui/core";
-import { SUMMARY_QUERY } from "../../../queries/project";
 import ApolloErrorHandler from "../../../components/ApolloErrorHandler";
 
 /*
@@ -17,16 +15,12 @@ import ApolloErrorHandler from "../../../components/ApolloErrorHandler";
 import ProjectSummaryMapFallback from "./ProjectSummaryMapFallback";
 import { ErrorBoundary } from "react-error-boundary";
 
-const ProjectSummary = () => {
+const ProjectSummary = ({ loading, error, data, refetch }) => {
   const { projectId } = useParams();
 
   const [isEditing, setIsEditing] = useState(false);
   const [mapError, setMapError] = useState(false);
 
-  const { loading, error, data, refetch } = useQuery(SUMMARY_QUERY, {
-    variables: { projectId },
-  });
-
   if (loading) return <CircularProgress />;
   if (error) return `Error! ${error.message}`;
 

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

@@ -2,6 +2,7 @@ import React from "react";
 
 import DataTable from "../../../components/DataTable/DataTable";
 import makeStyles from "@material-ui/core/styles/makeStyles";
+import { Box, Grid } from '@material-ui/core';
 
 import ExternalLink from "../../../components/ExternalLink";
 
@@ -43,22 +44,6 @@ const ProjectSummaryTable = ({ data, loading, error, refetch }) => {
         },
         style: classes.fieldSelectCapitalize,
       },
-      current_phase: {
-        label: "Current phase",
-        labelStyle: classes.fieldSelectCapitalize,
-        placeholder: "Select phase",
-        type: "select",
-        editable: true,
-        lookup: {
-          table: "moped_phases",
-          fieldLabel: "phase_name",
-          fieldValue: "phase_name",
-          relationship: "where: {phase_id: {_gt: 0}}, order_by: {phase_order: asc}",
-          style: classes.fieldSelectCapitalize,
-          format: value => String(value).toLowerCase(),
-        },
-        style: classes.fieldSelectCapitalize,
-      },
       project_description: {
         label: "Description",
         type: "string",
@@ -109,15 +94,53 @@ const ProjectSummaryTable = ({ data, loading, error, refetch }) => {
     },
   };
 
+  const fieldConfigurationPhases = {
+    table: {
+      name: "moped_proj_phases",
+    },
+    fields: {
+      phase_name: {
+        label: "Current phase",
+        labelStyle: classes.fieldSelectCapitalize,
+        type: "string",
+        emptyValue: "None",
+        editable: false,
+        lookup: {
+          table: "moped_phases",
+          fieldLabel: "phase_name",
+          fieldValue: "phase_name",
+          relationship: "where: {phase_id: {_gt: 0}}, order_by: {phase_order: asc}",
+          style: classes.fieldSelectCapitalize,
+          format: value => String(value).toLowerCase(),
+        },
+        style: classes.fieldSelectCapitalize,
+      },
+    },
+  };
+
   return (
-    <DataTable
-      fieldConfiguration={fieldConfiguration}
-      tableName={"moped_project"}
-      loading={loading}
-      error={error}
-      data={data}
-      refetch={refetch}
-    />
+    <Grid>
+      <Box mb={2}>
+        <DataTable
+          fieldConfiguration={fieldConfigurationPhases}
+          tableName={"moped_proj_phases"}
+          loading={loading}
+          error={error}
+          data={data}
+          refetch={refetch}
+        />
+      </Box>
+      <Box>
+        <DataTable
+          fieldConfiguration={fieldConfiguration}
+          tableName={"moped_project"}
+          loading={loading}
+          error={error}
+          data={data}
+          refetch={refetch}
+        />
+      </Box>
+    </Grid>
   );
 };
 

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

@@ -32,7 +32,7 @@ import ApolloErrorHandler from "../../../components/ApolloErrorHandler";
  * @return {JSX.Element}
  * @constructor
  */
-const ProjectTimeline = () => {
+const ProjectTimeline = ({ refetch: refetchSummary }) => {
   /** Params Hook
    * @type {integer} projectId
    * */
@@ -79,6 +79,30 @@ const ProjectTimeline = () => {
     {}
   );
 
+  const updateExistingPhases = phaseObject => {
+    // If new or updated phase has a current phase of true,
+    // set current phase of any other true phases to false
+    // to ensure there is only one active phase
+    if (phaseObject.is_current_phase) {
+      data.moped_proj_phases.forEach(phase => {
+        if (
+          phase.is_current_phase &&
+          phase.project_phase_id !== phaseObject.project_phase_id
+        ) {
+          phase.is_current_phase = false;
+          // Execute update mutation, returns promise
+          return updateProjectPhase({
+            variables: phase,
+          }).then(() => {
+            // Refetch data
+            refetch();
+            refetchSummary();
+          });
+        }
+      });
+    }
+  };
+
   /**
    * Phase table lookup object formatted into the shape that <MaterialTable>
    * expects.
@@ -192,7 +216,7 @@ const ProjectTimeline = () => {
             (props.rowData?.phase_name ?? "").toLowerCase()
         )
         .reduce(
-            // Then using reduce, aggregate the sub-phase ids from whatever array is left
+          // Then using reduce, aggregate the sub-phase ids from whatever array is left
           (accumulator, item) =>
             (accumulator = [...accumulator, ...(item?.subphases ?? [])]),
           []
@@ -295,7 +319,7 @@ const ProjectTimeline = () => {
                 // https://github.com/mbrn/material-table/issues/2133
                 components={{
                   Action: props => {
-                    //If isn't the add action
+                    // If isn't the add action
                     if (
                       typeof props.action === typeof Function ||
                       props.action.tooltip !== "Add"
@@ -323,12 +347,18 @@ const ProjectTimeline = () => {
                       newData
                     );
 
-                    // Execute insert mutation, return promise
+                    updateExistingPhases(newPhaseObject);
+
+                    // Execute insert mutation, returns promise
                     return addProjectPhase({
                       variables: {
                         objects: [newPhaseObject],
                       },
-                    }).then(() => refetch());
+                    }).then(() => {
+                      // Refetch data
+                      refetch();
+                      refetchSummary();
+                    });
                   },
                   onRowUpdate: (newData, oldData) => {
                     const updatedPhaseObject = {
@@ -340,7 +370,6 @@ const ProjectTimeline = () => {
                       key => oldData[key] !== newData[key]
                     );
 
-
                     // Loop through the differences and assign newData values.
                     // If one of the Date fields is blanked out, coerce empty
                     // string to null.
@@ -362,18 +391,36 @@ const ProjectTimeline = () => {
                     delete updatedPhaseObject.project_id;
                     delete updatedPhaseObject.__typename;
 
+                    updateExistingPhases(updatedPhaseObject);
+
                     // Execute update mutation, returns promise
                     return updateProjectPhase({
                       variables: updatedPhaseObject,
-                    }).then(() => refetch());
+                    }).then(() => {
+                      // Refetch data
+                      refetch();
+                      refetchSummary();
+                    });
+                  },
+                  onRowDelete: oldData => {
+                    // Execute mutation to set current phase of phase to be deleted to false
+                    // to ensure summary table stays up to date
+                    oldData.is_current_phase = false;
+                    return updateProjectPhase({
+                      variables: oldData,
+                    }).then(() => {
+                      // Execute delete mutation, returns promise
+                      return deleteProjectPhase({
+                        variables: {
+                          project_phase_id: oldData.project_phase_id,
+                        },
+                      }).then(() => {
+                        // Refetch data
+                        refetch();
+                        refetchSummary();
+                      });
+                    });
                   },
-                  onRowDelete: oldData =>
-                    // Return promise
-                    deleteProjectPhase({
-                      variables: {
-                        project_phase_id: oldData.project_phase_id,
-                      },
-                    }).then(() => refetch()),
                 }}
                 options={{
                   actionsColumnIndex: -1,

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

@@ -36,7 +36,7 @@ import ProjectTimeline from "./ProjectTimeline";
 import ProjectTabPlaceholder from "./ProjectTabPlaceholder";
 import ProjectFiles from "./ProjectFiles";
 import TabPanel from "./TabPanel";
-import { PROJECT_NAME, PROJECT_ARCHIVE } from "../../../queries/project";
+import { PROJECT_ARCHIVE, SUMMARY_QUERY } from "../../../queries/project";
 import ProjectActivityLog from "./ProjectActivityLog";
 import ApolloErrorHandler from "../../../components/ApolloErrorHandler";
 import ProjectNameEditable from "./ProjectNameEditable";
@@ -150,9 +150,9 @@ const ProjectView = () => {
   };
 
   /**
-   * The query to gather the project name
+   * The query to gather the project summary data
    */
-  const { loading, error, data } = useQuery(PROJECT_NAME, {
+  const { loading, error, data, refetch } = useQuery(SUMMARY_QUERY, {
     variables: { projectId },
   });
 
@@ -380,7 +380,12 @@ const ProjectView = () => {
                   const TabComponent = tab.Component;
                   return (
                     <TabPanel key={tab.label} value={activeTab} index={i}>
-                      <TabComponent />
+                      <TabComponent 
+                        loading={loading}
+                        data={data}
+                        error={error}
+                        refetch={refetch}
+                      />
                     </TabPanel>
                   );
                 })}