making the form functional; some styling. natcap#1662

davemfish · Jan 27, 2025 · 865b2da · 865b2da
1 parent e802bd5
commit 865b2da
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 30 deletions.
diff --git a/workbench/src/renderer/components/SettingsModal/MetadataForm/index.jsx b/workbench/src/renderer/components/SettingsModal/MetadataForm/index.jsx
@@ -1,49 +1,103 @@
-import React from 'react';
+import React, { useState, useEffect, } from 'react';
 import PropTypes from 'prop-types';
 
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 
-function FormRow(label) {
+import {
+  getGeoMetaMakerProfile,
+  setGeoMetaMakerProfile,
+} from '../../../server_requests';
+
+function FormRow(label, value, handler) {
   return (
     <Row>
-      <Col sm="4"><Form.Label>{label}</Form.Label></Col>
-      <Col sm="8"><Form.Control /></Col>
+      <Col sm="4">
+        <Form.Label>{label}</Form.Label>
+      </Col>
+      <Col sm="8">
+        <Form.Control
+          type="text"
+          value={value}
+          onChange={(e) => handler(e.currentTarget.value)}
+        />
+      </Col>
     </Row>
   );
 }
 
-export default function MetadataForm(props) {
+export default function MetadataForm() {
+  const [contactName, setContactName] = useState('');
+  const [contactEmail, setContactEmail] = useState('');
+  const [contactOrg, setContactOrg] = useState('');
+  const [contactPosition, setContactPosition] = useState('');
+  const [licenseTitle, setLicenseTitle] = useState('');
+  const [licenseURL, setLicenseURL] = useState('');
+
+  useEffect(() => {
+    async function loadProfile() {
+      const profile = await getGeoMetaMakerProfile();
+      console.log(profile);
+      if (profile.contact) {
+        setContactName(profile.contact.individual_name);
+        setContactEmail(profile.contact.email);
+        setContactOrg(profile.contact.organization);
+        setContactPosition(profile.contact.position_name);
+      }
+      if (profile.license) {
+        setLicenseTitle(profile.license.title);
+        setLicenseURL(profile.license.path);
+      }
+    }
+    loadProfile();
+  }, []);
 
   function handleSubmit(event) {
     event.preventDefault();
+    setGeoMetaMakerProfile({
+      contact: {
+        individual_name: contactName,
+        email: contactEmail,
+        organization: contactOrg,
+        position_name: contactPosition,
+      },
+      license: {
+        title: licenseTitle,
+        path: licenseURL,
+      },
+    });
   }
 
   return (
-    <Form>
-      <Form.Group controlId="name">
-        {FormRow('Name')}
-      </Form.Group>
-      <Form.Group controlId="email">
-        {FormRow('Email address')}
-      </Form.Group>
-      <Form.Group controlId="job title">
-        {FormRow('Job title')}
-      </Form.Group>
-      <Form.Group controlId="organization">
-        {FormRow('Organization name')}
-      </Form.Group>
-      <Form.Group controlId="license title">
-        {FormRow('Data license title')}
-      </Form.Group>
-      <Form.Group controlId="license url">
-        {FormRow('Data license URL')}
-      </Form.Group>
-
-      <Button variant="primary" onClick={handleSubmit}>
-        Submit Metadata
+    <Form onSubmit={handleSubmit} id="metadata-form">
+      <fieldset>
+        <legend>Contact Information</legend>
+        <Form.Group controlId="name">
+          {FormRow('Name', contactName, setContactName)}
+        </Form.Group>
+        <Form.Group controlId="email">
+          {FormRow('Email address', contactEmail, setContactEmail)}
+        </Form.Group>
+        <Form.Group controlId="job-title">
+          {FormRow('Job title', contactPosition, setContactPosition)}
+        </Form.Group>
+        <Form.Group controlId="organization">
+          {FormRow('Organization name', contactOrg, setContactOrg)}
+        </Form.Group>
+      </fieldset>
+      <fieldset>
+        <legend>Data License Information</legend>
+        <Form.Group controlId="license-title">
+          {FormRow('Title', licenseTitle, setLicenseTitle)}
+        </Form.Group>
+        <Form.Group controlId="license-url">
+          {FormRow('URL', licenseURL, setLicenseURL)}
+        </Form.Group>
+      </fieldset>
+      <Button variant="primary" type="submit">
+        Save Metadata
       </Button>
     </Form>
   );

diff --git a/workbench/src/renderer/components/SettingsModal/index.jsx b/workbench/src/renderer/components/SettingsModal/index.jsx
@@ -185,6 +185,7 @@ class SettingsModal extends React.Component {
                 </Form.Group>
               ) : <React.Fragment />
             }
+            <hr />
             <Form.Group as={Row}>
               <Form.Label column sm="6" htmlFor="logging-select">
                 {t('Logging threshold')}
@@ -293,12 +294,12 @@ class SettingsModal extends React.Component {
             <Accordion>
               <Accordion.Toggle
                 as={Button}
-                variant="secondary-outline"
+                variant="secondary"
                 eventKey="0"
-                className="pt-0"
+                className="mr-2 w-50"
               >
-                <BsChevronExpand className="mx-1" />
                 <span><u>{t('Configure Metadata')}</u></span>
+                <BsChevronExpand className="mx-1" />
               </Accordion.Toggle>
               <Accordion.Collapse eventKey="0" className="pr-1">
                 <MetadataForm />

diff --git a/workbench/src/renderer/styles/style.css b/workbench/src/renderer/styles/style.css
@@ -632,3 +632,23 @@ input[type=text]::placeholder {
     background-size: 1rem 1rem;
   }
 }
+
+#metadata-form {
+  background-color: ghostwhite;
+  border: dotted;
+  border-width: thin;
+  padding: 0.5rem;
+}
+
+#metadata-form legend {
+  font-size: 1.1rem;
+  text-decoration-line: underline;
+}
+
+#metadata-form fieldset {
+}
+
+#metadata-form .form-group {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}