OCLOMRS-173: Changes to create concept form options for Q-and-A conce…

…pt (#133)

src/components/dictionaryConcepts/components/AnswersRow.jsx

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import autoBind from 'react-autobind';
+import PropTypes from 'prop-types';
+
+class AnswersRow extends Component {
+  static propTypes = {
+    newRow: PropTypes.object.isRequired,
+    addDataFromAnswer: PropTypes.func.isRequired,
+    removeAnswer: PropTypes.func.isRequired,
+    removeDataFromRow: PropTypes.func.isRequired,
+    existingConcept: PropTypes.object.isRequired,
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: this.props.newRow.uuid,
+      answer: [],
+    };
+    autoBind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.existingConcept) {
+      this.updateState();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState !== this.state) {
+      this.sendToTopComponent();
+    }
+  }
+
+  updateState() {
+    const { newRow } = this.props;
+    this.setState({
+      ...this.state,
+      id: newRow.uuid,
+      answer: newRow.answer || '',
+    });
+  }
+
+  handleChange(event) {
+    const {
+      target: { value, name },
+    } = event;
+    this.setState(() => ({ [name]: value }));
+    this.sendToTopComponent();
+  }
+
+  sendToTopComponent() {
+    this.props.addDataFromAnswer(this.state);
+  }
+
+  handleRemove(event, id) {
+    event.preventDefault();
+    const { removeAnswer, removeDataFromRow } = this.props;
+    removeAnswer(id);
+    removeDataFromRow(id, 'answers');
+  }
+
+  render() {
+    return (
+      <tr>
+        <td>
+          <input
+            type="text"
+            className="form-control answer"
+            placeholder="eg. /orgs/Regenstrief/sources/loinc2/concepts/32700-7/"
+            name="answer"
+            value={this.state.answer}
+            onChange={this.handleChange}
+            id="concept-answer"
+            required
+          />
+        </td>
+        <td>
+          <a
+            href="#!"
+            className="concept-form-table-link answer"
+            id="remove-answer"
+            onClick={event => this.handleRemove(event, this.props.newRow.uuid)}
+          >
+            remove
+          </a>
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default AnswersRow;

src/components/dictionaryConcepts/components/AnswersTable.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AnswersRow from './AnswersRow';
+
+const AnswersTable = props => (
+  <table className="table table-striped table-bordered concept-form-table">
+    <thead className="header text-white">
+      <tr>
+        <th scope="col">To Concept URL</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {props.answer.map(newRow => (
+        <AnswersRow
+          newRow={{ uuid: newRow }}
+          key={newRow}
+          {...props}
+        />))}
+    </tbody>
+  </table>
+);
+
+AnswersTable.propTypes = {
+  answer: PropTypes.array.isRequired,
+};
+
+export default AnswersTable;

src/components/dictionaryConcepts/components/ConceptNameRows.jsx

@@ -1,21 +1,12 @@
 import React, { Component } from 'react';
 import autoBind from 'react-autobind';
 import Select from 'react-select';
-import 'react-select/dist/react-select';
 import PropTypes from 'prop-types';
 import locale from '../../dashboard/components/dictionary/common/Languages';
 
 class ConceptNameRows extends Component {
   static propTypes = {
-    newRow: PropTypes.shape({
-      id: PropTypes.string,
-      uuid: PropTypes.string.isRequired,
-      name: PropTypes.string,
-      locale: PropTypes.string,
-      locale_full: PropTypes.string,
-      locale_preferred: PropTypes.bool,
-      name_type: PropTypes.string,
-    }),
+    newRow: PropTypes.object.isRequired,
     addDataFromRow: PropTypes.func.isRequired,
     removeRow: PropTypes.func.isRequired,
     removeDataFromRow: PropTypes.func.isRequired,
@@ -24,6 +15,7 @@ class ConceptNameRows extends Component {
   };
 
   static defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
     newRow: {
       id: '',
       name: '',

src/components/dictionaryConcepts/components/CreateConceptForm.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import CreateConceptTable from './CreateConceptTable';
 import DescriptionTable from './DescriptionTable';
+import AnswersTable from './AnswersTable';
 import { classes } from './helperFunction';
 
 const CreateConceptForm = props => (
@@ -132,6 +133,19 @@ const CreateConceptForm = props => (
           <option>Coded</option>
         </select>
       </div>
+
+      {props.concept.toString().trim() === 'question' ?
+        <div className="form-group answer">
+          <div className="row col-12 custom-concept-list">
+            <h6 className="text-left section-header">Answers</h6>
+            <AnswersTable {...props} />
+            <a href="#!" className="text-left add-more-answers" id="add-more-answers" onClick={props.addAnswer}>
+            Add a new answer mapping
+            </a>
+          </div>
+        </div>
+      : null}
+
       <div className="form-group">
         <div className="row col-12 custom-concept-list">
           <h6 className="text-left section-header">Names</h6>
@@ -190,6 +204,8 @@ CreateConceptForm.propTypes = {
   editable: PropTypes.bool.isRequired,
   isEditConcept: PropTypes.bool,
   existingConcept: PropTypes.object,
+  addAnswer: PropTypes.func.isRequired,
+  answer: PropTypes.array.isRequired,
 };
 
 CreateConceptForm.defaultProps = {

src/components/dictionaryConcepts/components/DescriptionRow.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import Select from 'react-select';
-import 'react-select/dist/react-select';
 import autoBind from 'react-autobind';
 import PropTypes from 'prop-types';
 import uuid from 'uuid/v4';

src/components/dictionaryConcepts/containers/CreateConcept.jsx

@@ -12,6 +12,8 @@ import {
   removeDescription,
   clearSelections,
   createNewConcept,
+  addNewAnswer,
+  removeAnswer,
 } from '../../../redux/actions/concepts/dictionaryConcepts';
 
 export class CreateConcept extends Component {
@@ -43,6 +45,9 @@ export class CreateConcept extends Component {
       descriptions: PropTypes.array,
     }).isRequired,
     addedConcept: PropTypes.array.isRequired,
+    addNewAnswer: PropTypes.func.isRequired,
+    removeAnswer: PropTypes.func.isRequired,
+    answer: PropTypes.array.isRequired,
   };
 
   constructor(props) {
@@ -54,6 +59,7 @@ export class CreateConcept extends Component {
       datatype: 'None',
       names: [],
       descriptions: [],
+      answers: [],
     };
 
     autoBind(this);
@@ -68,6 +74,7 @@ export class CreateConcept extends Component {
     const concept = conceptType || '';
     this.props.createNewName();
     this.props.addNewDescription();
+    this.props.addNewAnswer();
     // eslint-disable-next-line
     this.setState({ concept_class: concept });
   }
@@ -117,6 +124,13 @@ export class CreateConcept extends Component {
     this.props.removeDescription(id);
   }
 
+  addNewAnswer() {
+    this.props.addNewAnswer();
+  }
+  removeAnswer(id) {
+    this.props.removeAnswer(id);
+  }
+
   handleUUID(event) {
     event.preventDefault();
     this.setState(prevState => ({
@@ -193,6 +207,22 @@ export class CreateConcept extends Component {
     }
   }
 
+  addDataFromAnswer(data) {
+    const currentAnswer = this.state.answers.filter(answer => answer.id === data.id);
+    if (currentAnswer.length) {
+      const newList = this.state.answers.map(answer => (
+        answer.id === data.id ? data : answer
+      ));
+      this.setState(() => ({
+        answers: newList,
+      }));
+    } else {
+      this.setState(prevState => ({
+        answers: [...prevState.answers, data],
+      }));
+    }
+  }
+
   render() {
     const {
       match: {
@@ -241,6 +271,10 @@ Concept
                 addDataFromDescription={this.addDataFromDescription}
                 removeDataFromRow={this.removeDataFromRow}
                 pathName={this.props.match.params}
+                addAnswer={this.addNewAnswer}
+                answer={this.props.answer}
+                addDataFromAnswer={this.addDataFromAnswer}
+                removeAnswer={this.removeAnswer}
               />
             </div>
           </div>
@@ -255,6 +289,7 @@ export const mapStateToProps = state => ({
   description: state.concepts.description,
   newConcept: state.concepts.newConcept,
   addedConcept: state.concepts.addConceptToDictionary,
+  answer: state.concepts.answer,
 });
 export default connect(
   mapStateToProps,
@@ -265,5 +300,7 @@ export default connect(
     removeDescription,
     clearSelections,
     createNewConcept,
+    addNewAnswer,
+    removeAnswer,
   },
 )(CreateConcept);

src/components/dictionaryConcepts/containers/EditConcept.jsx

@@ -17,6 +17,8 @@ import {
   clearPreviousConcept,
   createNewNameForEditConcept,
   removeNameForEditConcept,
+  addNewAnswer,
+  removeAnswer,
 } from '../../../redux/actions/concepts/dictionaryConcepts';
 
 export class EditConcept extends Component {
@@ -45,6 +47,9 @@ export class EditConcept extends Component {
     removeNameForEditConcept: PropTypes.func.isRequired,
     existingConcept: PropTypes.object.isRequired,
     updateConcept: PropTypes.func.isRequired,
+    answer: PropTypes.array.isRequired,
+    addNewAnswer: PropTypes.func.isRequired,
+    removeAnswer: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -56,6 +61,7 @@ export class EditConcept extends Component {
       datatype: 'None',
       names: [],
       descriptions: [],
+      answers: [],
       isEditConcept: true,
     };
     this.conceptUrl = '';
@@ -117,6 +123,13 @@ export class EditConcept extends Component {
     this.props.removeDescriptionForEditConcept(descriptionRow.uuid);
   }
 
+  addNewAnswer() {
+    this.props.addNewAnswer();
+  }
+  removeAnswer(id) {
+    this.props.removeAnswer(id);
+  }
+
   handleUUID(event) {
     event.preventDefault();
     this.setState(prevState => ({
@@ -185,6 +198,22 @@ export class EditConcept extends Component {
     }
   }
 
+  addDataFromAnswer(data) {
+    const currentAnswer = this.state.answers.filter(answer => answer.id === data.id);
+    if (currentAnswer.length) {
+      const newList = this.state.answers.map(answer => (
+        answer.id === data.id ? data : answer
+      ));
+      this.setState(() => ({
+        answers: newList,
+      }));
+    } else {
+      this.setState(prevState => ({
+        answers: [...prevState.answers, data],
+      }));
+    }
+  }
+
   render() {
     const {
       match: {
@@ -238,6 +267,10 @@ Concept
                 pathName={this.props.match.params}
                 existingConcept={existingConcept}
                 isEditConcept={this.state.isEditConcept}
+                answer={this.props.answer}
+                addDataFromAnswer={this.addDataFromAnswer}
+                addAnswer={this.addNewAnswer}
+                removeAnswer={this.removeAnswer}
               />
               )
               }
@@ -255,6 +288,7 @@ export const mapStateToProps = state => ({
   newConcept: state.concepts.newConcept,
   addedConcept: state.concepts.addConceptToDictionary,
   existingConcept: state.concepts.existingConcept,
+  answer: state.concepts.answer,
 });
 export default connect(
   mapStateToProps,
@@ -271,5 +305,7 @@ export default connect(
     clearPreviousConcept,
     createNewNameForEditConcept,
     removeNameForEditConcept,
+    addNewAnswer,
+    removeAnswer,
   },
 )(EditConcept);