Merge pull request #20 from DiSSCo/ImplementTaxonomicServiceForm

Implement taxonomic service form

package.json

@@ -22,6 +22,7 @@
     "bootstrap-css": "^4.0.0-alpha.5",
     "formik": "^2.4.5",
     "json-schema-to-typescript": "^13.1.2",
+    "jsonpath": "^1.1.1",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "moment": "^2.30.1",
@@ -40,6 +41,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jsonpath": "^0.2.4",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/App.css

@@ -225,6 +225,10 @@ p {
   border: 1px solid var(--primary);
 }
 
+.b-grey {
+  border: 1px solid var(--grey);
+}
+
 .b-none {
   border: none;
 }

src/app/Types.ts

@@ -59,6 +59,19 @@ export type Filter = {
     }[]
 };
 
+/* Type for a form field */
+export type FormField = {
+    jsonPath: string,
+    title: string,
+    description: string,
+    type: string,
+    options?: string[],
+    mapping?: {
+        [option: string]: string
+    },
+    required?: boolean
+};
+
 /* Type for a Dropdown item */
 export type DropdownItem = {
     label: string,

src/app/types/TaxonomicService.d.ts

@@ -282,7 +282,7 @@ export interface TaxonomicService {
      * A unique identifier to identify the author; ORCID identifiers are valid
      */
     "schema:identifier": string;
-    "schema:affiliation": {
+    "schema:Affiliation"?: {
       /**
        * The type of the affiliation
        */
@@ -324,7 +324,7 @@ export interface TaxonomicService {
     /**
      * The organisation the maintainer is affiliated with
      */
-    "schema:affiliation": {
+    "schema:Affiliation"?: {
       /**
        * The type of the affiliation
        */

src/components/general/formElements/InputField.tsx

@@ -0,0 +1,33 @@
+/* Import Dependencies */
+import { Field } from "formik";
+
+
+/* Props Type */
+type Props = {
+    name: string,
+    title: string
+};
+
+
+/**
+ * Component that renders an input field for a free text insert
+ * @param name The name of the form field
+ * @param title The title that should be displayed along the form field
+ * @returns JSX Component
+ */
+const InputField = (props: Props) => {
+    const { name, title } = props;
+
+    return (
+        <div>
+            <p>
+                {title}
+            </p>
+            <Field name={name}
+                className="w-100"
+            />
+        </div>
+    );
+};
+
+export default InputField;

src/components/search/components/TopBar.tsx

@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { useState, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { Row, Col } from 'react-bootstrap';
 
 /* Import Hooks */
@@ -25,6 +25,7 @@ import { Button } from 'components/general/CustomComponents';
 const TopBar = () => {
     /* Hooks */
     const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
 
     /* Base variables */
     const [filtersToggle, setFiltersToggle] = useState<boolean>(false);
@@ -76,10 +77,7 @@ const TopBar = () => {
                     <Button type="button"
                         variant={searchParams.get('serviceType') === 'referenceCollection' ? 'secondary' : 'primary'}
                         className="fs-5 fs-lg-4"
-                        OnClick={() => window.open('https://docs.google.com/forms/d/e/1FAIpQLSf6ug3jMZnZaZrP0WYv7GgFvnn06QIdi2GFekEqynwsoTCfUQ/viewform?usp=sf_link',
-                            '_blank',
-                            'noopener'
-                        )}
+                        OnClick={() => navigate('/ts/suggestNewTaxonomicService')}
                     >
                         Suggest a new service
                     </Button>

src/components/taxonomicService/Routes.tsx

@@ -3,11 +3,13 @@ import { Route } from "react-router-dom";
 
 /* Import Components */
 import TaxonomicService from "./TaxonomicService";
+import TaxonomicServiceForm from "./TaxonomicServiceForm";
 
 
 /* Routes associated with the Taxonomic Service page */
 const routes = [
-    <Route key="taxonomicService" path="/ts/:prefix/:suffix" element={<TaxonomicService />} />
+    <Route key="taxonomicService" path="/ts/:prefix/:suffix" element={<TaxonomicService />} />,
+    <Route key="taxonomicServiceForm" path="/ts/suggestNewTaxonomicService" element={<TaxonomicServiceForm />} />
 ];
 
 export default routes;