feat: port comments widget from old wab app

Closes #19 Addresses more from #9
agrc · Jul 11, 2022 · e02835d · e02835d
1 parent 1b7997c
commit e02835d
Show file tree

Hide file tree

Showing 18 changed files with 602 additions and 89 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,7 @@
     "Sharrow",
     "sherlock",
     "softprops",
+    "tanstack",
     "TSQL"
   ],
   "cSpell.language": "en,es-ES"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "i18next": "^21.8.13",
     "i18next-browser-languagedetector": "^6.1.4",
     "jsonschema": "^1.4.1",
+    "ky": "^0.31.0",
     "lodash.debounce": "^4.0.8",
     "lodash.escaperegexp": "^4.1.2",
     "lodash.sortby": "^4.7.0",
@@ -73,8 +74,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
+    "react-hook-form": "^7.33.1",
     "react-i18next": "^11.18.0",
     "react-number-format": "^4.9.3",
+    "react-query": "^4.0.0-beta.23",
     "reactstrap": "^9.1.1",
     "sql-formatter": "^7.0.3",
     "typeface-montserrat": "^1.1.13",

diff --git a/public/config.json b/public/config.json
@@ -136,7 +136,18 @@
         },
         "projectInformation": "Project Information",
         "projectInformationPrompt": "Click on a feature for more information",
-        "transportation": "Transportation"
+        "transportation": "Transportation",
+        "comments": {
+          "leaveComment": "Leave comment",
+          "name": "Name",
+          "organization": "Organization",
+          "contact": "Contact Information (email/phone)",
+          "comment": "Comment*",
+          "submit": "Submit",
+          "cancel": "Cancel",
+          "required": "*Required",
+          "publicComments": "Public Comments"
+        }
       }
     },
     "es": {
@@ -151,8 +162,33 @@
         },
         "projectInformation": "Información del Proyecto",
         "projectInformationPrompt": "Haga clic en una función para obtener más información",
-        "transportation": "Transporte"
+        "transportation": "Transporte",
+        "comments": {
+          "leaveComment": "Comentar",
+          "name": "Nombre",
+          "organization": "Organización",
+          "contact": "Contacto (teléfono/correo electrónico)",
+          "comment": "Comentario*",
+          "submit": "Enviar",
+          "cancel": "Cancelar",
+          "required": "*Solicitado",
+          "publicComments": "Comentarios del Público"
+        }
       }
     }
+  },
+  "projectInformation": {
+    "commentsEnabled": true,
+    "commentsTableUrl": "https://services1.arcgis.com/taguadKoI1XFwivx/arcgis/rest/services/Draft_Projects_2023_2050_RTP_Phased_by_Need/FeatureServer/2",
+    "newCommentsOpenUntil": "9999-01-31T00:00:00.000Z",
+    "fieldNames": {
+      "globalId": "GlobalID",
+      "personName": "PersonName",
+      "personOrg": "PersonOrg",
+      "personCont": "PersonCont",
+      "comment": "Comment",
+      "commentDt": "CommentDT",
+      "guid": "GUID"
+    }
   }
 }
diff --git a/public/config.schema.json b/public/config.schema.json
@@ -57,7 +57,7 @@
   "title": "WFRC RTP Projects",
   "type": "object",
   "additionalProperties": false,
-  "required": ["infoText", "projectTypes", "sherlock", "openOnLoad", "translations"],
+  "required": ["infoText", "projectTypes", "sherlock", "openOnLoad", "translations", "projectInformation"],
   "properties": {
     "infoText": {
       "title": "Info Popup Content",
@@ -189,6 +189,67 @@
         "additionalProperties": false
       },
       "required": ["en"]
+    },
+    "projectInformation": {
+      "title": "Project Information Widget Config",
+      "description": "Configuration options for the project information widget",
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["commentsEnabled", "commentsTableUrl", "newCommentsOpenUntil", "fieldNames"],
+      "properties": {
+        "commentsEnabled": {
+          "title": "Comments Enabled",
+          "description": "Whether the comments widget is enabled",
+          "type": "boolean"
+        },
+        "commentsTableUrl": {
+          "title": "Comments Table URL",
+          "description": "The URL to the feature service endpoint for the comments table",
+          "type": "string"
+        },
+        "newCommentsOpenUntil": {
+          "title": "New Comments Open Until",
+          "description": "The date after which new comments will no longer be accepted.",
+          "type": "string"
+        },
+        "fieldNames": {
+          "title": "Field Names",
+          "description": "An object that contains the field names for the comments table",
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["globalId", "personName", "personOrg", "personCont", "comment", "commentDt", "guid"],
+          "properties": {
+            "globalId": {
+              "title": "Global ID",
+              "type": "string"
+            },
+            "personName": {
+              "title": "Person Name",
+              "type": "string"
+            },
+            "personOrg": {
+              "title": "Person Organization",
+              "type": "string"
+            },
+            "personCont": {
+              "title": "Person Contact",
+              "type": "string"
+            },
+            "comment": {
+              "title": "Comment",
+              "type": "string"
+            },
+            "commentDt": {
+              "title": "Comment Date",
+              "type": "string"
+            },
+            "guid": {
+              "title": "GUID",
+              "type": "string"
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,14 +5,17 @@ import WebMap from '@arcgis/core/WebMap';
 import Home from '@arcgis/core/widgets/Home';
 import { faFilter, faHandPointer } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import 'typeface-montserrat';
 import './App.scss';
 import Filter from './components/Filter';
 import MapWidget from './components/MapWidget';
 import ProjectInformation from './components/ProjectInformation';
 import { MapServiceProvider, Sherlock } from './components/Sherlock';
-import { useSpecialTranslation } from './i18n';
 import config from './services/config';
+import { useSpecialTranslation } from './services/i18n';
+
+const queryClient = new QueryClient();
 
 function App() {
   const [mapView, setMapView] = React.useState(null);
@@ -140,33 +143,35 @@ function App() {
   }, [mapView]);
 
   return (
-    <div className="d-flex flex-column w-100 h-100">
-      <div className="m-3 title">
-        <h4 className="my-0">RTP Projects</h4>
-      </div>
-      <div id="mapDiv" className="flex-fill border-top border position-relative">
-        <MapWidget
-          defaultOpen={config.openOnLoad.filter}
-          name={t('trans:filter')}
-          icon={faFilter}
-          position={0}
-          mapView={mapView}
-          showReset={true}
-        >
-          <Filter mapView={mapView} />
-        </MapWidget>
-        <MapWidget
-          defaultOpen={config.openOnLoad.projectInfo}
-          name={t('trans:projectInformation')}
-          icon={faHandPointer}
-          position={1}
-          mapView={mapView}
-        >
-          <ProjectInformation graphics={selectedGraphics} highlightGraphic={highlightGraphic} />
-        </MapWidget>
-        <Sherlock {...sherlockConfig}></Sherlock>
+    <QueryClientProvider client={queryClient}>
+      <div className="d-flex flex-column w-100 h-100">
+        <div className="m-3 title">
+          <h4 className="my-0">RTP Projects</h4>
+        </div>
+        <div id="mapDiv" className="flex-fill border-top border position-relative">
+          <MapWidget
+            defaultOpen={config.openOnLoad.filter}
+            name={t('trans:filter')}
+            icon={faFilter}
+            position={0}
+            mapView={mapView}
+            showReset={true}
+          >
+            <Filter mapView={mapView} />
+          </MapWidget>
+          <MapWidget
+            defaultOpen={config.openOnLoad.projectInfo}
+            name={t('trans:projectInformation')}
+            icon={faHandPointer}
+            position={1}
+            mapView={mapView}
+          >
+            <ProjectInformation graphics={selectedGraphics} highlightGraphic={highlightGraphic} />
+          </MapWidget>
+          <Sherlock {...sherlockConfig}></Sherlock>
+        </div>
       </div>
-    </div>
+    </QueryClientProvider>
   );
 }
 

diff --git a/src/bootstrap.scss b/src/bootstrap.scss
@@ -36,7 +36,7 @@ $nav-link-color: $gray-700;
 // @import '../node_modules/bootstrap/scss/breadcrumb';
 // @import '../node_modules/bootstrap/scss/pagination';
 // @import '../node_modules/bootstrap/scss/badge';
-// @import '../node_modules/bootstrap/scss/alert';
+@import '../node_modules/bootstrap/scss/alert';
 // @import '../node_modules/bootstrap/scss/progress';
 // @import '../node_modules/bootstrap/scss/list-group';
 @import '../node_modules/bootstrap/scss/close';