Implement section identifying question

src/Constants.js

@@ -8,6 +8,7 @@ export default class Constants {
     static HAS_UNIT_OF_MEASURE = 'http://onto.fel.cvut.cz/ontologies/form/has-unit-of-measure-question';
     static HAS_TYPE_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/has-type-question';
 
+    static HAS_IDENTIFYING_QUESTION = 'http://onto.fel.cvut.cz/ontologies/form/has-identifying-question';
     static HAS_NON_SELECTABLE_VALUE = 'http://onto.fel.cvut.cz/ontologies/form/has-non-selectable-value';
 
     static LAYOUT_TYPE_QUESTION = 'type-question';

src/Utils.js

@@ -28,6 +28,30 @@ export default class Utils {
     return null;
   }
 
+  static findChild(parent, id) {
+
+    if (!parent) {
+      return null;
+    }
+
+    if (parent['@id'] === id) {
+      return parent;
+    }
+
+    const subQuestions = parent[SConstants.HAS_SUBQUESTION];
+    if (subQuestions && subQuestions.length) {
+
+      for (let subQuestion of subQuestions) {
+        let found = Utils.findChild(subQuestion, id);
+        if (found) {
+          return found;
+        }
+      }
+    }
+
+    return null;
+  }
+
   static findDirectChild(parent, id) {
 
     if (!parent) {

src/components/SectionComponent.jsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import SmartComponents from "../SmartComponents";
 import ShowAdvancedSwitch from "./ShowAdvancedSwitch";
 import TypeQuestionAnswer from "./TypeQuestionAnswer";
+import SectionIdentifier from "./SectionIdentifier";
 
 export default class SectionComponent extends Question {
 
@@ -25,6 +26,12 @@ export default class SectionComponent extends Question {
     }
   }
 
+  _renderIdentifierText() {
+    return (
+      <SectionIdentifier question={this.props.question} />
+    );
+  }
+
   _renderShowAdvanced() {
     const question = this.props.question;
 
@@ -38,17 +45,13 @@ export default class SectionComponent extends Question {
   }
 
   _renderQuestionHelp() {
-    const advancedSwitch = this._renderShowAdvanced();
-    if (advancedSwitch) {
-      return (
-        <>
-          {super._renderQuestionHelp()}
-          {advancedSwitch}
-        </>
-      );
-    }
-
-    return super._renderQuestionHelp();
+    return (
+      <>
+        {super._renderQuestionHelp()}
+        {this._renderIdentifierText()}
+        {this._renderShowAdvanced()}
+      </>
+    );
   }
 
   _renderAnswer(index, answer) {
@@ -104,6 +107,7 @@ export default class SectionComponent extends Question {
           </div>
           {this._renderUnits()}
           {this._renderPrefixes()}
+          {this._renderIdentifierText()}
 
           {this._renderShowAdvanced()}
         </div>

src/components/SectionIdentifier.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import {FormUtils, Constants as SConstants, JsonLdObjectMap, ConfigurationContext} from "s-forms";
+import Constants from "../Constants";
+import Utils from "../Utils";
+import JsonLdUtils from "jsonld-utils";
+
+export default class SectionIdentifier extends React.Component {
+
+  static contextType = ConfigurationContext;
+
+  static propTypes = {
+    question: PropTypes.object.isRequired
+  }
+
+  _getIdentifyingQuestionId() {
+    const question = this.props.question;
+    let id = question[Constants.HAS_IDENTIFYING_QUESTION];
+    if (!id) {
+      return null;
+    }
+
+    if (Array.isArray(id)) {
+      id = id[0];
+    }
+
+    return id;
+  }
+
+  _getLabelText() {
+    //return "Pavel Novotný";
+    const question = this.props.question;
+    const id = this._getIdentifyingQuestionId();
+    if (!id) {
+      return null;
+    }
+
+    const identifyingQuestion = Utils.findChild(question, id);
+    if (!identifyingQuestion) {
+      return null;
+    }
+
+    const answers = identifyingQuestion[SConstants.HAS_ANSWER];
+    if (!answers || !answers.length) {
+      return null;
+    }
+
+    const answer = FormUtils.resolveValueObject(answers[0]);
+    if (!answer) {
+      return null;
+    }
+
+    console.log(answer);
+
+    if (answer['@value']) {
+
+      if (FormUtils.isCheckbox(identifyingQuestion)) {
+        return JsonLdUtils.getLocalized(identifyingQuestion[SConstants.RDFS_LABEL], this.context.options.intl);
+      }
+
+      return answer['@value'];
+    }
+
+    if (answer['@id']) {
+      // answer is object with id
+      let def = JsonLdObjectMap.getObject(id);
+      if (!def) {
+        return null;
+      }
+
+      let label = JsonLdUtils.getLocalized(def[SConstants.RDFS_LABEL], this.context.options.intl);
+      if (label) {
+        return label;
+      }
+    }
+
+    return null;
+  }
+
+  render() {
+    const text = this._getLabelText();
+    if (text) {
+      return (
+        <span className="section-identifier">{text}</span>
+      );
+    }
+
+    return null;
+  }
+
+
+}
+

src/components/WizardStepComponent.jsx

@@ -5,12 +5,19 @@ import JsonLdUtils from 'jsonld-utils';
 import ShowAdvancedSwitch from "./ShowAdvancedSwitch";
 import Utils from "../Utils";
 import Constants from "../Constants";
+import SectionIdentifier from "./SectionIdentifier";
 
 
 export default class WizardStepComponent extends WizardStep {
 
   static mappingRule = q => FormUtils.isWizardStep(q);
 
+  _renderIdentifierText() {
+    return (
+      <SectionIdentifier question={this.props.step} />
+    );
+  }
+
   _renderShowAdvanced() {
     const question = this.props.step;
 
@@ -38,6 +45,7 @@ export default class WizardStepComponent extends WizardStep {
             {JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}
             {this._renderHelpIcon()}
 
+            {this._renderIdentifierText()}
             {this._renderShowAdvanced()}
 
           </Card.Header>

src/styles/components.css

@@ -91,3 +91,12 @@
 .type-answer .Select--multi .Select-value {
     margin-top: 4px;
 }
+
+.section-identifier {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+    pointer-events: none;
+}

test/form2.json

@@ -122,6 +122,9 @@
     },
     "has-non-selectable-value": {
       "@id": "http://onto.fel.cvut.cz/ontologies/form/has-non-selectable-value"
+    },
+    "has-identifying-question": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-identifying-question"
     }
   },
   "@graph": [
@@ -354,6 +357,9 @@
         "test-field-3887",
         "sectionfoo-1592"
       ],
+      "has-identifying-question": [
+        "test-field-3887"
+      ],
       "has-layout-class": "section",
       "has-preceding-question": "cena-6557",
       "label": "parent-section"