Merge pull request #1511 from cityofaustin/mike/20019_comp_work_types…

…_summary

Add component work types summary field to project summary view

moped-database/metadata/tables.yaml

@@ -5557,6 +5557,7 @@
         columns:
           - added_by
           - children_project_ids
+          - component_work_type_names
           - components
           - construction_start_date
           - contract_numbers
@@ -5609,6 +5610,7 @@
         columns:
           - added_by
           - children_project_ids
+          - component_work_type_names
           - components
           - construction_start_date
           - contract_numbers
@@ -5661,6 +5663,7 @@
         columns:
           - added_by
           - children_project_ids
+          - component_work_type_names
           - components
           - construction_start_date
           - contract_numbers

moped-editor/src/queries/project.js

@@ -151,6 +151,10 @@ export const SUMMARY_QUERY = gql`
         ...projectComponentFields
       }
     }
+    project_list_view(where: { project_id: { _eq: $projectId } }) {
+      component_work_type_names
+      project_id
+    }
   }
 `;
 

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

@@ -20,6 +20,7 @@ import ProjectSummaryInterimID from "./ProjectSummaryInterimID";
 import ProjectSummaryAutocomplete from "./ProjectSummaryAutocomplete";
 import ProjectSummaryProjectPartners from "./ProjectSummaryProjectPartners";
 import ProjectSummaryCouncilDistricts from "./ProjectSummaryCouncilDistricts";
+import ProjectSummaryComponentWorkTypes from "./ProjectSummaryComponentWorkTypes";
 
 import SubprojectsTable from "./SubprojectsTable";
 import TagsSection from "./TagsSection";
@@ -233,6 +234,12 @@ const ProjectSummary = ({ loading, error, data, refetch, listViewQuery }) => {
                   snackbarHandle={snackbarHandle}
                 />
               </Grid>
+              <Grid item xs={12}>
+                <ProjectSummaryComponentWorkTypes
+                  data={data}
+                  classes={classes}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <ProjectSummaryAutocomplete
                   field="Public process"
@@ -288,8 +295,6 @@ const ProjectSummary = ({ loading, error, data, refetch, listViewQuery }) => {
                 <ProjectSummaryWorkOrders
                   classes={classes}
                   project={data?.moped_project?.[0]}
-                  refetch={refetch}
-                  snackbarHandle={snackbarHandle}
                 />
               </Grid>
             </Grid>

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Box, Typography, Icon, TextField } from "@mui/material";
 import ProjectSummaryLabel from "./ProjectSummaryLabel";
-import { Autocomplete } from '@mui/material';
+import { Autocomplete } from "@mui/material";
 
 import { useMutation } from "@apollo/client";
 

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

@@ -0,0 +1,37 @@
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import ProjectSummaryLabel from "src/views/projects/projectView/ProjectSummary/ProjectSummaryLabel";
+
+/**
+ * @param {Object} data - The query data
+ * @param {Object} classes - The shared style settings
+ * @return {JSX.Element}
+ * @constructor
+ */
+const ProjectSummaryComponentWorkTypes = ({ classes, data }) => {
+  const componentWorkTypes =
+    data?.project_list_view?.[0]?.component_work_type_names;
+  /* component_work_type_names is a comma-separated list in the database view */
+  const componentWorkTypesArray = componentWorkTypes?.split(", ") ?? [];
+
+  return (
+    <Grid item xs={12} className={classes.fieldGridItem}>
+      <Typography className={classes.fieldLabel}>
+        Component work types
+      </Typography>
+      <Box
+        display="flex"
+        justifyContent="flex-start"
+        className={classes.fieldBox}
+      >
+        <ProjectSummaryLabel
+          text={componentWorkTypesArray}
+          className={classes.fieldLabelTextNoHover}
+        />
+      </Box>
+    </Grid>
+  );
+};
+
+export default ProjectSummaryComponentWorkTypes;

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

@@ -148,7 +148,8 @@ const ProjectSummaryProjectPartners = ({
                   width: 450,
                 },
               }}
-              className={classes.fieldSelectItem}>
+              className={classes.fieldSelectItem}
+            >
               {entityList.map((entity) => (
                 <MenuItem key={entity.entity_id} value={entity.entity_id}>
                   <Checkbox

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

@@ -8,18 +8,11 @@ import ExternalLink from "src/components/ExternalLink";
 /**
  * ProjectSummaryWorkOrders Component
  * @param {Object} project - Current project being viewed
- * @param {function} refetch - The refetch function from apollo
  * @param {Object} classes - The shared style settings
- * @param {function} snackbarHandle - The function to show the snackbar
  * @returns {JSX.Element}
  * @constructor
  */
-const ProjectSummaryWorkOrders = ({
-  project,
-  refetch,
-  classes,
-  snackbarHandle,
-}) => {
+const ProjectSummaryWorkOrders = ({ project, classes }) => {
   const knackProjectURL = project?.knack_project_id
     ? `https://atd.knack.com/amd#work-orders/?view_713_filters=%7B%22match%22%3A%22and%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22field_4133%22%2C%22operator%22%3A%22is%22%2C%22value%22%3A%22${project.project_id}%22%7D%5D%7D`
     : "";