From 4b6395dafc8ac46a46c3f5c68da2b15bb4384cee Mon Sep 17 00:00:00 2001
From: mwigham <38520885+mwigham@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:14:35 +0200
Subject: [PATCH] form for sending to SANE

---
 .../projects/crud/ProjectExportView.jsx       | 114 ++++++++++++++++--
 app/workspace/projects/crud/ProjectTable.jsx  |   1 -
 2 files changed, 102 insertions(+), 13 deletions(-)

diff --git a/app/workspace/projects/crud/ProjectExportView.jsx b/app/workspace/projects/crud/ProjectExportView.jsx
index b031f6d..bf59f5b 100644
--- a/app/workspace/projects/crud/ProjectExportView.jsx
+++ b/app/workspace/projects/crud/ProjectExportView.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Link, useParams, useNavigate, useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
 import IDUtil from "../../../util/IDUtil";
@@ -22,6 +22,13 @@ const ProjectExportView = ({ recipe, params, user, clientId }) => {
   const [exportType, setExportType] = useState('projectMetadata')
   const [project, setProject] = useState(null);
 
+  const nameExportRef = useRef(null);
+  const namePersonRef = useRef(null);
+  const emailRef = useRef(null);
+  const affiliationRef = useRef(null);
+  const collaborativeOrganisationRef = useRef(null);
+  const descRef = useRef(null);
+
   // React hooks
   useEffect(() => {
     setBreadCrumbsFromMatch(location.pathname);
@@ -46,7 +53,7 @@ const ProjectExportView = ({ recipe, params, user, clientId }) => {
     });
   };
 
-  const handleSubmit = (e, proj) => {
+  const handleProjectMetadataSubmit = (e, proj) => {
     e.preventDefault();
 
     exportDataAsJSON(proj)
@@ -54,6 +61,13 @@ const ProjectExportView = ({ recipe, params, user, clientId }) => {
     return false;
   };
 
+  const handleCorpusSubmit = (e, proj) => {
+    e.preventDefault();
+    alert("Need to implement sending \"" + nameExportRef.current?.value + "\" to the Set API and email data provider")
+
+    return false;
+  };
+
   let cancelButton = null;
   if (cancelLink && cancelLink !== "") {
     cancelButton = (
@@ -75,6 +89,8 @@ const ProjectExportView = ({ recipe, params, user, clientId }) => {
   } else if (project) {
     contents = (
       <div>
+      <h2>Export User Project "{project.name}"</h2>
+      <p>On this page you can export the metadata describing "{project.name}" or request to send your corpus, consisting of the metadata of the items in your bookmark groups and queries, to the SANE environment for analysis</p>
           <table>
             <tbody>
               <tr>
@@ -87,17 +103,91 @@ const ProjectExportView = ({ recipe, params, user, clientId }) => {
           </table>
         {exportType === 'projectMetadata' ? 
           <div>
-          <form
-          className={IDUtil.cssClassName("project-form")}
-          onSubmit={(e) => handleSubmit(e, project)}>
-            <div className="actions">
-          {cancelButton}
-          <input type="submit" className="btn primary add" value={submitButton} />
-        </div>
-      </form>
+            <form
+            className={IDUtil.cssClassName("project-form")}
+            onSubmit={(e) => handleProjectMetadataSubmit(e, project)}>
+              <div className="actions">
+                {cancelButton}
+                <input type="submit" className="btn primary add" value={submitButton} />
+              </div>
+            </form>
           </div> : 
-          <div>Add form here
-            </div>}
+          <div>
+            <form
+            className={IDUtil.cssClassName("project-form")}
+            onSubmit={(e) => handleCorpusSubmit(e, project)}>
+                <div className="new-project-container">
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">Name of export</label>
+                    <input
+                      type="text"
+                      name="nameExport"
+                      required={true}
+                      className="project-modal-right"
+                      placeholder="Name of export"
+                      ref={nameExportRef}
+                    />
+                  </span>
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">Name of person requesting data export</label>
+                    <input
+                      type="text"
+                      name="namePerson"
+                      required={true}
+                      className="project-modal-right"
+                      placeholder="Your name"
+                      ref={namePersonRef}
+                    />
+                  </span>
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">Email address</label>
+                    <input
+                      type="text"
+                      name="email"
+                      required={true}
+                      className="project-modal-right"
+                      placeholder="Your email address"
+                      ref={emailRef}
+                    />
+                  </span>
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">Affiliation</label>
+                    <input
+                      type="text"
+                      name="affiliation"
+                      required={true}
+                      className="project-modal-right"
+                      placeholder="Your affiliation"
+                      ref={affiliationRef}
+                    />
+                  </span>
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">SANE collaborative organisation</label>
+                    <input
+                      type="text"
+                      name="affiliation"
+                      className="project-modal-right"
+                      placeholder="ID of your SANE collaborative organisation (if you have this)"
+                      ref={collaborativeOrganisationRef}
+                    />
+                  </span>
+                  <span className="bg__new-project-wrapper">
+                    <label className="label project-modal-left">Description of project/plans</label>
+                    <textarea
+                      name="description"
+                      required={true}
+                      className="project-modal-right"
+                      placeholder="A description of your project, in particular what analysis you plan to do and what results you want"
+                      ref={descRef}
+                    />
+                  </span>
+              </div>
+              <div className="actions">
+                {cancelButton}
+                <input type="submit" className="btn primary add" value={submitButton} />
+              </div>
+            </form>
+          </div>}
         </div>
   )
   } else {
diff --git a/app/workspace/projects/crud/ProjectTable.jsx b/app/workspace/projects/crud/ProjectTable.jsx
index 453c732..dfe4123 100644
--- a/app/workspace/projects/crud/ProjectTable.jsx
+++ b/app/workspace/projects/crud/ProjectTable.jsx
@@ -284,7 +284,6 @@ class ProjectTable extends React.PureComponent {
             <Link
               onClick={() => this.setActiveProject(project)}
               to={"/workspace/projects/" + project.id + "/export"}
-              className="btn"
             >Export</Link></li>
               </ul>
             </div>