Implement question with advanced

src/components/FormManager.jsx

@@ -10,6 +10,7 @@ import JsonLdUtils from 'jsonld-utils';
 import Constants from '../constants/Constants';
 import CompositeQuestion from './CompositeQuestion';
 import ComponentRegistry from '../util/ComponentRegistry';
+import QuestionWithAdvanced from './QuestionWithAdvanced';
 
 class FormManager extends React.Component {
 
@@ -20,6 +21,24 @@ class FormManager extends React.Component {
       CompositeQuestion,
       q => JsonLdUtils.getJsonAttValue(q, Constants.COMPOSITE_PATTERN)
     );
+
+    ComponentRegistry.registerComponent(
+      QuestionWithAdvanced,
+      q => {
+        if (!FormUtils.isSection(q)) {
+          return false;
+        }
+        let subQuestions = q[Constants.HAS_SUBQUESTION];
+        if (subQuestions && subQuestions.length) {
+          for (let subQuestion of subQuestions) {
+            if (JsonLdUtils.hasValue(subQuestion, Constants.SHOW_ADVANCED_QUESTION, true)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+    )
   }
 
   getFormData = () => {

src/components/QuestionWithAdvanced.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Accordion, Card } from 'react-bootstrap';
+import JsonLdUtils from 'jsonld-utils';
+import Constants from '../constants/Constants';
+import FormUtils from '../util/FormUtils';
+import Question from './Question';
+import classNames from 'classnames';
+
+export default class QuestionWithAdvanced extends Question {
+
+  constructor(props) {
+    super(props);
+
+    this.state.showAdvanced = this._getShowAdvancedState();
+  }
+
+  onSubQuestionChange = (subQuestionIndex, change) => {
+    this._onChange(Constants.HAS_SUBQUESTION, subQuestionIndex, change);
+  };
+
+  componentDidMount() {
+    super.componentDidMount();
+
+    let { index, question } = this._getShowAdvancedQuestion();
+    if (question[Constants.LAYOUT_CLASS] !== Constants.LAYOUT.HIDDEN) {
+      question[Constants.LAYOUT_CLASS] = Constants.LAYOUT.HIDDEN;
+      this._onChange(Constants.HAS_SUBQUESTION, index, question);
+    }
+  }
+
+  _getShowAdvancedQuestion() {
+    const question = this.props.question;
+    let subQuestions = question[Constants.HAS_SUBQUESTION];
+    if (subQuestions && subQuestions.length) {
+      for (let i = 0; i < subQuestions.length; i++) {
+        if (JsonLdUtils.hasValue(subQuestions[i], Constants.SHOW_ADVANCED_QUESTION, true)) {
+          return { index: i, question: subQuestions[i] };
+        }
+      }
+    }
+    return null;
+  }
+
+  _getShowAdvancedState() {
+    let { question } = this._getShowAdvancedQuestion();
+
+    let value = false;
+
+    if (question[Constants.HAS_ANSWER] && question[Constants.HAS_ANSWER].length) {
+      let answer = question[Constants.HAS_ANSWER][0];
+      if (answer[Constants.HAS_DATA_VALUE]) {
+        value = !!answer[Constants.HAS_DATA_VALUE]['@value'];
+      }
+    }
+
+    return value;
+  }
+
+  _toggleAdvanced = (e) => {
+    e.stopPropagation();
+
+    let { index, question } = this._getShowAdvancedQuestion();
+
+    let value = this._getShowAdvancedState();
+
+    console.log(question);
+
+    question[Constants.HAS_ANSWER] = [{}];
+    question[Constants.HAS_ANSWER][0][Constants.HAS_DATA_VALUE] = { '@value': !value }
+    question[Constants.HAS_VALID_ANSWER] = true;
+
+    this.state.showAdvanced = !value;
+
+    this._onChange(Constants.HAS_SUBQUESTION, index, question);
+  };
+
+  render() {
+    const question = this.props.question;
+
+    if (FormUtils.isHidden(question)) {
+      return null;
+    }
+
+    if (!FormUtils.isRelevant(question)) {
+      return null;
+    }
+
+    const { collapsible, withoutCard } = this.props;
+    const categoryClass = Question._getQuestionCategoryClass(question);
+
+    if (withoutCard) {
+      return <div>{this._renderQuestionContent()}</div>;
+    }
+    const label = JsonLdUtils.getLocalized(question[JsonLdUtils.RDFS_LABEL], this.context.options.intl);
+
+    const cardBody = (
+      <Card.Body className={classNames('p-3', categoryClass)}>{this._renderQuestionContent()}</Card.Body>
+    );
+
+    const headerClassName = classNames(
+      FormUtils.isEmphasised(question) ? Question.getEmphasizedClass(question) : 'bg-info',
+      collapsible ? 'cursor-pointer' : ''
+    );
+
+    return (
+      <Accordion defaultActiveKey={!this.state.expanded ? label : undefined}>
+        <Card className="mb-3">
+          <Accordion.Toggle as={Card.Header} onClick={this._toggleCollapse} className={headerClassName}>
+            <h6 className="d-inline" id={question['@id']}>
+              {collapsible && this._renderCollapseToggle()}
+              {label}
+            </h6>
+            <button style={{float: 'right'}} onClick={this._toggleAdvanced}>{this.state.showAdvanced ? 'Hide advanced' : 'Show advanced'}</button>
+            {this._renderQuestionHelp()}
+          </Accordion.Toggle>
+          {collapsible ? <Accordion.Collapse>{cardBody}</Accordion.Collapse> : { cardBody }}
+
+        </Card>
+      </Accordion>
+    );
+  }
+
+}

src/constants/Constants.js

@@ -21,6 +21,7 @@ export default class Constants {
   static COMPOSITE_PATTERN = 'http://onto.fel.cvut.cz/ontologies/form/has-composite-pattern';
   static PATTERN = 'http://onto.fel.cvut.cz/ontologies/form/has-pattern';
   static COMPOSITE_VARIABLES = 'http://onto.fel.cvut.cz/ontologies/form/has-composite-variables';
+  static SHOW_ADVANCED_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/show-advanced-question';
   static LAYOUT = {
     FORM: 'form',
     QUESTION_SECTION: 'section',