#351: used input tag component in Form for project topics

src/components/Project/Community/CommunityTags.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { default as portalData } from "../../../services/portalData.json";
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 
 class Community extends React.Component {
   state = {
@@ -38,54 +43,56 @@ class Community extends React.Component {
     return (
       <div>
         <h5 className="mt-2">Community</h5>
+        <Form>
         {
-          canUpdate &&         <div className="form-row">
-          <div className="form-group slice-builder-form-group col-md-4">
-            <label htmlFor="inputCommunityAgency" className="slice-builder-label">
-              Science Domain
-            </label>
-            <select
-              className="form-control form-control-sm"
-              id="communityAgencySelect"
-              value={selected_domain}
-              onChange={this.handleDomainChange}
-            >
-              <option value="">Choose...</option>
-              { 
-                domain_options.map((domain, index) => 
-                  <option value={domain} key={`community-domain-${index}`}>{domain}</option>
-                )
-              }
-            </select>
-          </div>
-          <div className="form-group slice-builder-form-group col-md-7">
-            <label htmlFor="inputComponent" className="slice-builder-label">Subdomain</label>
-            <select
-              className="form-control form-control-sm"
-              id="directorateSelect"
-              value={selected_subdomain}
-              onChange={this.handleSubdomainChange}
-              disabled={subdomain_options.length === 0}
-            >
-              <option value="">Choose...</option>
-              { 
-                subdomain_options.length > 0 &&
-                subdomain_options.map((directorate, index) => 
-                  <option value={directorate} key={`community-directorate-${index}`}>{directorate}</option>
-                )
-              }
-            </select>
-          </div>
-          <div className="form-group slice-builder-form-group col-md-1">
-            <button
-              className="btn btn-sm btn-outline-success mt-4"
-              type="button"
-              onClick={this.handleCommunityAdd}
-            >
-              Add
-            </button>
-          </div>
-        </div>
+          canUpdate &&         
+          <Container>
+            <Row>
+              <Col xs={4}>
+                <Form.Group className="mb-3" controlId="communityAgencySelect">
+                  <Form.Label>Science Domain</Form.Label>
+                  <Form.Select
+                    aria-label="Community agency select"
+                    id="communityAgencySelect"
+                    value={selected_domain}
+                    onChange={this.handleDomainChange}
+                  >
+                    <option value="">Choose...</option>
+                    { 
+                      domain_options.map((domain, index) => 
+                        <option value={domain} key={`community-domain-${index}`}>{domain}</option>
+                      )
+                    }
+                  </Form.Select>
+                </Form.Group>
+              </Col>
+              <Col xs={7}>
+                <Form.Group className="mb-3" controlId="subdomainSelect">
+                  <Form.Label>Science Domain</Form.Label>
+                  <Form.Select
+                    aria-label="Community subdomain select"
+                    id="directorateSelect"
+                    value={selected_subdomain}
+                    onChange={this.handleSubdomainChange}
+                    disabled={subdomain_options.length === 0}
+                  >
+                    <option value="">Choose...</option>
+                    { 
+                      subdomain_options.length > 0 &&
+                      subdomain_options.map((directorate, index) => 
+                        <option value={directorate} key={`community-directorate-${index}`}>{directorate}</option>
+                      )
+                    }
+                  </Form.Select>
+                </Form.Group>
+              </Col>
+              <Col xs={1}>
+                <Button variant="primary" type="button" onClick={this.handleCommunityAdd}>
+                Add
+                </Button>
+              </Col>
+            </Row>
+          </Container>
         }
         <div className="ms-1">
             <ul className="input-tag__tags">
@@ -118,6 +125,7 @@ class Community extends React.Component {
             This project has no community tag added yet.
           </div>
         }
+      </Form>
       </div>
     )
   }

src/components/Project/Community/ProjectTopics.jsx

@@ -1,20 +1,46 @@
-import React, { useState } from "react";
-import { TagsInput } from "react-tag-input-component-2";
+import React from "react";
 
-const ProjectTopics = (topics, onTopicsUpdate) => {
-  const [selected, setSelected] = useState(topics);
+class ProjectTopics extends React.Component {
+  constructor() {
+    super();
+  }
+
+  removeTag = (i) => {
+    const newTags = [ ...this.state.tags ];
+    newTags.splice(i, 1);
+    this.setState({ tags: newTags });
+  }
 
-  return (
-    <div>
-      <h1>Project Topics</h1>
-      <TagsInput
-        value={selected}
-        onChange={setSelected(selected, () => onTopicsUpdate(selected))}
-        name="topics"
-        placeHolder="enter topics"
-      />
-    </div>
-  );
-};
+  inputKeyDown = (e) => {
+    const val = e.target.value;
+    if (e.key === 'Enter' && val) {
+      if (this.state.tags.find(tag => tag.toLowerCase() === val.toLowerCase())) {
+        return;
+      }
+      this.setState({ tags: [...this.state.tags, val]});
+      this.tagInput.value = null;
+    } else if (e.key === 'Backspace' && !val) {
+      this.removeTag(this.state.tags.length - 1);
+    }
+  }
 
-export default ProjectTopics;
+  render() {
+    const { tags } = this.props.topics;
+
+    return (
+      <div className="input-tag">
+        <ul className="input-tag__tags">
+          { tags.map((tag, i) => (
+            <li key={tag}>
+              {tag}
+              <button type="button" onClick={() => { this.removeTag(i); }}>+</button>
+            </li>
+          ))}
+          <li className="input-tag__tags__input"><input type="text" onKeyDown={this.inputKeyDown} ref={c => { this.tagInput = c; }} /></li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default ProjectTopics;

src/components/Project/ProjectBasicInfoTable.jsx

@@ -7,7 +7,7 @@ import utcToLocalTimeParser from "../../utils/utcToLocalTimeParser.js";
 import CalendarDateTime from "../common/CalendarDateTime.jsx";
 import Funding from "./Community/Funding.jsx";
 import CommunityTags from "./Community/CommunityTags.jsx";
-import ProjectTopics from "./Community/ProjectTopics.jsx";
+// import ProjectTopics from "./Community/ProjectTopics.jsx";
 import { toast } from "react-toastify";
 import { default as portalData } from "../../services/portalData.json";
 import sleep from "../../utils/sleep";
@@ -105,11 +105,11 @@ class ProjectBasicInfoTable extends Component {
           canUpdate={canUpdate}
           onCommunityUpdate={this.props.onCommunityUpdate}
         />
-        <ProjectTopics
+        {/* <ProjectTopics
           topics={topics}
           canUpdate={canUpdate}
           onTopicsUpdate={this.props.onTopicsUpdate}
-        />
+        /> */}
         {
           canUpdate && 
           <button

src/components/common/Form/Form.jsx

@@ -166,13 +166,13 @@ class Form extends Component {
     );
   }
 
-  renderInputTag(name, label) {
-    const { data } = this.state;
+  renderInputTag(name, label, tags, notDisabled) {
     return (
       <InputTag
         name={name}
-        tags={data.tags}
+        tags={tags}
         label={label}
+        disabled={!notDisabled}
         onTagChange={this.handleTagChange}
       />
     );

src/components/common/Form/InputTag.jsx

@@ -34,9 +34,9 @@ class InputTag extends React.Component {
   };
 
   render() {
-    const { name, label, tags } = this.props;
+    const { name, label, tags, disabled } = this.props;
     return (
-      <div className="form-group">
+       !disabled ? <div className="form-group">
         <label htmlFor={name}>{label}</label>
         <div className="input-tag form-control">
           <ul className="input-tag__tags">
@@ -61,7 +61,20 @@ class InputTag extends React.Component {
             </li>
           </ul>
         </div>
-      </div>
+      </div> :
+      <ul className="input-tag__tags">
+      {tags.map((tag, i) => (
+        <li key={tag}>
+          {tag}
+          <i
+            className="fa fa-times ms-2"
+            onClick={() => {
+              this.raiseRemoveTag(i);
+            }}
+          ></i>
+        </li>
+      ))}
+      </ul>
     );
   }
 }

src/pages/ProjectForm.jsx

@@ -763,6 +763,9 @@ class ProjectForm extends Form {
                       portalData.helperText.privacyPreferencesDescription
                     )
                   }
+                  {
+                    this.renderInputTag("topics", "Project Topics", topics, canUpdate)
+                  }
               </form>
               <ProjectBasicInfoTable
                 project={data}

src/pages/User.jsx

@@ -8,6 +8,9 @@ import Slices from "../components/Experiment/Slices";
 import { toast } from "react-toastify";
 import { getCurrentUser, getWhoAmI } from "../services/peopleService.js";
 import { getActiveKeys } from "../services/sshKeyService";
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 
 class User extends React.Component {
   state = {
@@ -68,24 +71,27 @@ class User extends React.Component {
     const { sliverKeys, bastionKeys } = this.getKeysData();
 
     return (
-      <div className="container">
-        <div className="row">
-          <SideNav
-            items={this.state.SideNavItems}
-            handleChange={this.handleChange}
-          />
-          <SpinnerFullPage text={"Refreshing user roles..."} showSpinner={showFullPageSpinner}/>
-          <TagName
-            user={user}
-            onRoleRefresh={this.handleRoleRefresh}
-            sliverKeys={sliverKeys}
-            bastionKeys={bastionKeys}
-            disableKeyDelete={true}
-            styleProp={"col-9"}
-            parent={"UserProfile"}
-          />
-        </div>
-      </div>
+      <Container>
+        <SpinnerFullPage text={"Refreshing user roles..."} showSpinner={showFullPageSpinner}/>
+        <Row>
+          <Col xs={3}>
+            <SideNav
+              items={this.state.SideNavItems}
+              handleChange={this.handleChange}
+            />
+          </Col>
+          <Col xs={9}>
+            <TagName
+              user={user}
+              onRoleRefresh={this.handleRoleRefresh}
+              sliverKeys={sliverKeys}
+              bastionKeys={bastionKeys}
+              disableKeyDelete={true}
+              parent={"UserProfile"}
+            />
+          </Col>
+        </Row>
+      </Container>
     );
   }
 }