Merge branch 'main' into explode-multipoint-for-agol

moped-database/README.md

@@ -1,6 +1,6 @@
 # MOPED Database
 
-You will want to check the documentation in the [MOPED Technical Docs](https://app.gitbook.com/@atd-dts/s/moped-technical-docs/dev-guides/hasura-migrations)
+You will want to check the documentation in the [MOPED Technical Docs](https://atd-dts.gitbook.io/moped-documentation/dev-guides/hasura)
 
 ## Architecture Description
 
@@ -138,10 +138,26 @@ which contains the connection information for the local cluster. Notice the form
 
 To version control database views, SQL files are stored in `/views/` and the steps to modify a view and create a migration are available [here](/views/README.md).
 
+### SQL Formatting
+
+We use [SQLFluff](https://sqlfluff.com/) to format SQL code. You'll need to get `sqlfluff` installed on your computer and in the path. If you're using `brew`, you can `brew install sqlfluff`. Make sure it's in your path by doing `which sqlfluff` in your terminal, and if it gives you the path to program, then you're good to go. 
+
+VSCode users: The extension I'm using to provide linting and formatting capabilities in VSCode is [here](https://marketplace.visualstudio.com/items?itemName=dorzey.vscode-sqlfluff).
+
+Users of other editors can adapt the following commands to best suit their needs. These are being run from the `moped-editor/moped-database/views` folder. 
+
+Lint (ie, tell me what i'm doing wrong):
+
+`sqlfluff lint --config ../../.sqlfluff project_list_view.sql`
+
+Format (ie, clean up all my indention and fix things you can fix automatically):
+
+`sqlfluff format --config ../../.sqlfluff project_list_view.sql`
+
 ## Read the docs
 
-More documentation is available in the [MOPED Technical Docs](https://app.gitbook.com/@atd-dts/s/moped-technical-docs/dev-guides/hasura-migrations)
+More documentation is available in the [MOPED Technical Docs](https://atd-dts.gitbook.io/moped-documentation/dev-guides/hasura)
 
-You are also encouraged to learn [Hasura Migrations from their documentation](https://hasura.io/docs/1.0/graphql/core/migrations/index.html). 
+You are also encouraged to learn [Hasura Migrations from their documentation](https://hasura.io/docs/2.0/migrations-metadata-seeds/overview/). 
 
 [SchemaSpy Analysis of moped](https://db-docs.austinmobility.io/atd-moped-production/index.html)

moped-database/docker-compose.yml

@@ -1,7 +1,7 @@
 # Architecture Independent Docker Stack Components for Moped Development Environment
 services:
     hasura:
-        image: hasura/graphql-engine:v2.41.0
+        image: hasura/graphql-engine:v2.43.0
         restart: always
         depends_on:
             - moped-pgsql

moped-database/metadata/tables.yaml

@@ -2820,56 +2820,62 @@
     - role: moped-admin
       permission:
         columns:
+          - created_at
           - created_by_user_id
+          - dept_unit
+          - fund
+          - fund_dept_unit
+          - fund_name
           - funding_amount
+          - funding_description
           - funding_program_id
           - funding_source_id
           - funding_status_id
-          - project_id
-          - proj_funding_id
-          - dept_unit
-          - fund
-          - funding_description
-          - created_at
           - is_deleted
+          - proj_funding_id
+          - project_id
           - updated_at
           - updated_by_user_id
         filter: {}
         allow_aggregations: true
     - role: moped-editor
       permission:
         columns:
+          - created_at
           - created_by_user_id
+          - dept_unit
+          - fund
+          - fund_dept_unit
+          - fund_name
           - funding_amount
+          - funding_description
           - funding_program_id
           - funding_source_id
           - funding_status_id
-          - project_id
-          - proj_funding_id
-          - dept_unit
-          - fund
-          - funding_description
-          - created_at
           - is_deleted
+          - proj_funding_id
+          - project_id
           - updated_at
           - updated_by_user_id
         filter: {}
         allow_aggregations: true
     - role: moped-viewer
       permission:
         columns:
+          - created_at
           - created_by_user_id
+          - dept_unit
+          - fund
+          - fund_dept_unit
+          - fund_name
           - funding_amount
+          - funding_description
           - funding_program_id
           - funding_source_id
           - funding_status_id
-          - project_id
-          - proj_funding_id
-          - dept_unit
-          - fund
-          - funding_description
-          - created_at
           - is_deleted
+          - proj_funding_id
+          - project_id
           - updated_at
           - updated_by_user_id
         filter: {}

moped-database/migrations/1723496266685_add_fdu_columns/down.sql

@@ -0,0 +1,2 @@
+-- Drop generated columns generated columns for fund_dept_unit and fund_name
+ALTER TABLE moped_proj_funding DROP COLUMN IF EXISTS fund_dept_unit, DROP COLUMN IF EXISTS fund_name;

moped-database/migrations/1723496266685_add_fdu_columns/up.sql

@@ -0,0 +1,11 @@
+-- Add generated columns for fund_dept_unit and fund_name
+ALTER TABLE moped_proj_funding
+ADD COLUMN fund_dept_unit text GENERATED ALWAYS AS (CASE WHEN (fund IS null OR dept_unit IS null) THEN null ELSE
+        coalesce(fund ->> 'fund_id', ' ') || ' ' || coalesce(dept_unit ->> 'dept', ' ') || ' ' || coalesce(dept_unit ->> 'unit', ' ')
+END) STORED,
+ADD COLUMN fund_name text GENERATED ALWAYS AS (
+    CASE WHEN fund IS null THEN null ELSE coalesce(fund ->> 'fund_name', ' ') END
+) STORED;
+
+COMMENT ON COLUMN moped_proj_funding.fund_dept_unit IS 'Fund, department, and unit numbers concatenated; null if fund or unit is not populated';
+COMMENT ON COLUMN moped_proj_funding.fund_name IS 'Fund name; null if fund is not populated';

moped-database/migrations/1723496266686_add_bike_share_station_comp/down.sql

@@ -0,0 +1,2 @@
+-- if we delete the component in the future, we will soft delete and leave existing data intact
+SELECT 0;

moped-database/migrations/1723496266686_add_bike_share_station_comp/up.sql

@@ -0,0 +1,37 @@
+-- add bike share station component type (point) to moped_components table if it doesn't already exist
+INSERT INTO moped_components (component_name, line_representation, feature_layer_id)
+SELECT
+    'Bike Share Station',
+    FALSE,
+    5
+WHERE NOT EXISTS (
+        SELECT *
+        FROM
+            moped_components
+        WHERE (component_name, line_representation, feature_layer_id) = ('Bike Share Station', FALSE, 5)
+    );
+
+-- insert new, mod, and replacement work types for bike share station in moped_component_work_types table
+WITH inserts_todo AS (
+    SELECT
+        mwt.id AS work_type_id,
+        mc.component_id AS component_id
+    FROM
+        moped_work_types AS mwt,
+        moped_components AS mc
+    WHERE
+        mwt.name IN (
+            'New',
+            'Modification',
+            'Replacement'
+        )
+        AND mc.component_name = 'Bike Share Station'
+)
+
+INSERT INTO moped_component_work_types (work_type_id, component_id)
+SELECT
+    work_type_id,
+    component_id
+FROM
+    inserts_todo
+ON CONFLICT DO NOTHING;

moped-editor/package.json

@@ -2,7 +2,7 @@
   "name": "atd-moped-editor",
   "author": "ATD Data & Technology Services",
   "license": "CC0-1.0",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "homepage": "/moped",
   "private": false,
   "repository": {

moped-editor/src/components/ExternalLink.js

@@ -1,29 +1,52 @@
 import React from "react";
 import Link from "@mui/material/Link";
-import makeStyles from '@mui/styles/makeStyles';
+import makeStyles from "@mui/styles/makeStyles";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   iconStyle: {
-    fontSize: "14px",
+    fontSize: "1rem",
     marginLeft: "2px",
     position: "relative",
     bottom: "-3px",
   },
 }));
 
-const ExternalLink = ({ url, text, linkColor, underline, iconStyle }) => {
+/**
+ * ExternalLink component
+ * @param {string} url - link url
+ * @param {string} text - link text
+ * @param {string} linkColor - color of the link
+ * @param {Object} linkProps - Props supported by MUI Link to override defaults or set other options
+ * @param {Boolean} stopPropagation - stop propagation of the click event from link click event or not
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const ExternalLink = ({
+  url,
+  text,
+  linkColor,
+  iconStyle,
+  linkProps,
+  stopPropagation = false,
+}) => {
   const classes = useStyles();
 
   return (
-    <span>
+    <span
+      onClick={(e) => {
+        if (stopPropagation) {
+          e.stopPropagation();
+        }
+      }}
+    >
       {!!text ? (
         <Link
           href={url}
           target="_blank"
           rel="noopener noreferrer"
           color={linkColor ?? "primary"}
-          underline={underline ?? "hover"}
+          {...linkProps}
         >
           {text}
           <OpenInNewIcon

moped-editor/src/components/GridTable/FiltersChips.js

@@ -93,6 +93,18 @@ const FiltersChips = ({
     }
   };
 
+  /**
+   * Triggered by Filter Chip any/all click
+   * Sets the IsOr state and the url params state to be the opposite of current isOr state
+   */
+  const toggleIsOrOnClick = () => {
+    setIsOr(!isOr);
+    setSearchParams((prevSearchParams) => {
+      prevSearchParams.set(advancedSearchIsOrParamName, !isOr);
+      return prevSearchParams;
+    });
+  };
+
   return (
     <Box className={classes.filtersList}>
       <Typography className={classes.filtersText} component="span">
@@ -101,6 +113,8 @@ const FiltersChips = ({
             <Grid item>
               <Chip
                 variant="outlined"
+                color="primary"
+                onClick={toggleIsOrOnClick}
                 label={
                   isOr ? (
                     <>

moped-editor/src/utils/dateAndTime.js

@@ -18,6 +18,8 @@ export const formatDateType = (dateString) => {
  * @return {String} Date formatted as MM/DD/YYYY
  */
 export const formatTimeStampTZType = (timeStampTZString) => {
+  if (timeStampTZString === null) return "";
+
   const dateObject = new Date(timeStampTZString);
   return dateObject.toLocaleDateString("en-US");
 };

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

@@ -43,7 +43,7 @@ const DeleteConfirmationModal = ({
             startIcon={<DeleteIcon />}
             onClick={() => {
               submitDelete();
-              handleDeleteClose();
+              // closing the confirmation modal should happen after the delete mutation completes
             }}
           >
             <span>Delete</span>

moped-editor/src/views/projects/projectView/ProjectComponents/CreateComponentModal.js

@@ -76,7 +76,9 @@ const CreateComponentModal = ({
     }
   };
 
-  const onClose = () => {
+  const onClose = (event, reason) => {
+    if (reason && reason === "backdropClick")
+      return;
     setLinkMode(null);
     createDispatch({ type: "cancel_create" });
   };

moped-editor/src/views/projects/projectView/ProjectComponents/EditAttributesModal.js

@@ -112,7 +112,9 @@ const EditAttributesModal = ({
       });
   };
 
-  const onClose = () => {
+  const onClose = (event, reason) => {
+    if (reason && reason === "backdropClick")
+      return;
     editDispatch({ type: "cancel_attributes_edit" });
   };
 

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Grid from "@mui/material/Grid";
 import CardContent from "@mui/material/CardContent";
-import ProjectFundingTable from "./ProjectFundingTable";
+import ProjectFundingTable from "./ProjectFunding/ProjectFundingTable";
 import ProjectWorkActivitiesTable from "./ProjectWorkActivity/ProjectWorkActivityTable";
 import { useParams } from "react-router-dom";
 

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

@@ -0,0 +1,59 @@
+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 CustomPopper from "src/components/CustomPopper";
+
+const useStyles = makeStyles((theme) => ({
+  fundSelectStyle: {
+    width: "190px",
+    alignContent: "center",
+  },
+}));
+
+const FundAutocompleteComponent = (props) => {
+  const classes = useStyles();
+  const { id, value, field, hasFocus } = props;
+  const apiRef = useGridApiContext();
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    if (hasFocus) {
+      ref.current.focus();
+    }
+  }, [hasFocus]);
+
+  const handleChange = (event, newValue) => {
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: newValue ?? null,
+    });
+  };
+
+  return (
+    <Autocomplete
+      className={classes.fundSelectStyle}
+      value={value ?? null}
+      // use customized popper component so menu expands to fullwidth
+      PopperComponent={CustomPopper}
+      id="moped_funds"
+      options={props.data}
+      renderInput={(params) => (
+        <TextField variant="standard" {...params} inputRef={ref} />
+      )}
+      getOptionLabel={(option) =>
+        // if our value is a string, just return the string
+        typeof option === "string"
+          ? option
+          : `${option.fund_id} | ${option.fund_name}`
+      }
+      isOptionEqualToValue={(value, option) =>
+        value.fund_id === option.fund_id && value.fund_name === option.fund_name
+      }
+      onChange={handleChange}
+    />
+  );
+};
+
+export default FundAutocompleteComponent;