-
-
RTP Projects
-
-
+
);
}
diff --git a/src/bootstrap.scss b/src/bootstrap.scss
index a9ac9da..57b846f 100644
--- 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';
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..789f166
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,184 @@
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ky from 'ky';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { Alert, Button, Collapse, Form, FormGroup, Input, Label } from 'reactstrap';
+import config from '../services/config';
+import { useSpecialTranslation } from '../services/i18n';
+
+export default function Comments({ globalId }) {
+ const [isNewCommentFormOpen, setIsNewCommentFormOpen] = useState(false);
+ const [isPublicCommentsOpen, setIsPublicCommentsOpen] = useState(false);
+
+ const clientId = `existing-comments-${globalId}`;
+ const fetchComments = async () => {
+ const response = await ky
+ .get(`${config.projectInformation.commentsTableUrl}/query`, {
+ searchParams: {
+ f: 'json',
+ where: `${config.projectInformation.fieldNames.guid} = '${globalId}'`,
+ outFields: '*',
+ orderByFields: `${config.projectInformation.fieldNames.commentDt} DESC`,
+ },
+ })
+ .json();
+
+ return response.features ?? [];
+ };
+
+ const existingCommentsQuery = useQuery([clientId], fetchComments);
+
+ const t = useSpecialTranslation();
+
+ const { handleSubmit, formState, reset, control } = useForm({ mode: 'onChange' });
+ const queryClient = useQueryClient();
+ const submitComment = async (data) => {
+ await ky
+ .post(`${config.projectInformation.commentsTableUrl}/addFeatures`, {
+ searchParams: {
+ f: 'json',
+ features: JSON.stringify([
+ {
+ attributes: {
+ ...data,
+ [config.projectInformation.fieldNames.guid]: globalId,
+ [config.projectInformation.fieldNames.commentDt]: new Date(),
+ },
+ },
+ ]),
+ },
+ })
+ .json();
+
+ queryClient.invalidateQueries([clientId]);
+
+ reset();
+ };
+ const submitMutation = useMutation(submitComment, { retry: 3 });
+
+ const toggleNewCommentForm = () => {
+ setIsNewCommentFormOpen((current) => !current);
+ };
+ const togglePublicComments = () => {
+ setIsPublicCommentsOpen((current) => !current);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {existingCommentsQuery.isError ? There was an error loading the comments. : null}
+ {!existingCommentsQuery.isLoading && existingCommentsQuery.data?.length ? (
+ existingCommentsQuery.data.map((comment) => (
+
+ {comment.attributes[config.projectInformation.fieldNames.comment]}
+
+ {new Date(comment.attributes[config.projectInformation.fieldNames.commentDt]).toLocaleString()}
+
+
+ ))
+ ) : (
+ No comments yet.
+ )}
+
+
+ );
+}
+
+Comments.propTypes = {
+ globalId: PropTypes.string.isRequired,
+};
diff --git a/src/components/Comments.stories.jsx b/src/components/Comments.stories.jsx
new file mode 100644
index 0000000..fafd795
--- /dev/null
+++ b/src/components/Comments.stories.jsx
@@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import Comments from './Comments';
+
+export default {
+ component: Comments,
+ decorators: [
+ (Story) => {
+ const queryClient = new QueryClient();
+ return (
+
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
;
+export const ExistingComments = () =>
;
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index b3932a5..ac9a6c2 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -3,12 +3,15 @@ import Feature from '@arcgis/core/widgets/Feature';
import PropTypes from 'prop-types';
import { useEffect, useRef, useState } from 'react';
import { Collapse } from 'reactstrap';
+import config from '../services/config';
+import Comments from './Comments';
import './Details.scss';
export default function Details({ graphic, highlightGraphic }) {
const [collapsed, setCollapsed] = useState(true);
const containerRef = useRef();
- const [title, setTitle] = useState();
+ const [title, setTitle] = useState(null);
+ const [featureWidgetGraphic, setFeatureWidgetGraphic] = useState(null);
const toggle = () => setCollapsed(!collapsed);
@@ -29,6 +32,8 @@ export default function Details({ graphic, highlightGraphic }) {
setTitle(feature.title);
containerRef.current.appendChild(feature.container);
+
+ setFeatureWidgetGraphic(feature.graphic);
};
if (graphic) {
@@ -50,11 +55,16 @@ export default function Details({ graphic, highlightGraphic }) {
- {graphics.length === 0 && !showLoader &&
{t('trans:projectInformationPrompt')}
}
+ {graphics.length === 0 && !showLoader &&
{t('trans:projectInformationPrompt')}
}
{showLoader && (
diff --git a/src/components/ProjectInformation.scss b/src/components/ProjectInformation.scss
index 76748ee..ad45520 100644
--- a/src/components/ProjectInformation.scss
+++ b/src/components/ProjectInformation.scss
@@ -1,14 +1,4 @@
.project-information {
height: 100%;
margin: -1.25rem;
- p {
- margin: 1.25rem;
- }
- .loader {
- margin-top: 1.25rem;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
}
diff --git a/src/i18n.js b/src/services/i18n.js
similarity index 100%
rename from src/i18n.js
rename to src/services/i18n.js
diff --git a/src/i18n.test.js b/src/services/i18n.test.js
similarity index 100%
rename from src/i18n.test.js
rename to src/services/i18n.test.js