Show units next to value inputs. Moved help icon next to the units la…

…bel. Bumped version to 0.0.9.
kbss-cvut · Aug 29, 2016 · 679660e · 679660e
1 parent 00119a9
commit 679660e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/css/semforms.css b/css/semforms.css
@@ -9,3 +9,8 @@
 .help-icon-checkbox {
     margin-top: 12px;
 }
+
+.has-unit-label {
+    margin-top: 30px;
+    font-weight: bold;
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semforms",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Semantic forms generator and processor",
   "keywords": [
     "react",

diff --git a/src/components/Question.js b/src/components/Question.js
@@ -81,13 +81,18 @@ export default class Question extends React.Component {
             isTextarea = FormUtils.isTextarea(this.props.question, FormUtils.resolveValue(answers[i]));
             cls = Question._getAnswerClass(isTextarea);
             row.push(<div key={'row-item-' + i} className={cls}>
-                <Answer index={i} answer={answers[i]} question={question} onChange={this.onAnswerChange}/>
+                <div className="row">
+                    <div className="col-xs-10">
+                        <Answer index={i} answer={answers[i]} question={question} onChange={this.onAnswerChange}/>
+                    </div>
+                    <div>
+                        {this._renderUnits()}
+                        {this._renderQuestionHelp()}
+                    </div>
+                </div>
             </div>);
             if (row.length === Constants.GENERATED_ROW_SIZE || isTextarea) {
-                children.push(<div className='row' key={'question-row-' + i}>
-                    {row}
-                    {this._renderQuestionHelp()}
-                </div>);
+                children.push(<div className='row' key={'question-row-' + i}>{row}</div>);
                 row = [];
             }
         }
@@ -126,6 +131,12 @@ export default class Question extends React.Component {
                 iconClass={helpClass}/> : null;
     }
 
+    _renderUnits() {
+        var question = this.props.question;
+        return question[Constants.HAS_UNIT] ?
+            <div className="has-unit-label">{question[Constants.HAS_UNIT]}</div> : null;
+    }
+
     renderSubQuestions() {
         var children = [],
             subQuestions = this._getSubQuestions();

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -14,6 +14,7 @@ const FORM = 'http://onto.fel.cvut.cz/ontologies/documentation/form',
     IS_DISABLED = 'http://onto.fel.cvut.cz/ontologies/aviation/form-376/is-disabled',
     INPUT_MASK = 'http://onto.fel.cvut.cz/ontologies/form/has-input-mask',
     HAS_DATATYPE = 'http://onto.fel.cvut.cz/ontologies/form/has-datatype',
+    HAS_UNIT = 'http://onto.fel.cvut.cz/ontologies/form/has-unit',
     LAYOUT_CLASS = 'http://onto.fel.cvut.cz/ontologies/form-layout/has-layout-class',
     LAYOUT = {
         FORM: 'form',
@@ -108,6 +109,10 @@ export default class Constants {
         return HAS_DATATYPE;
     }
 
+    static get HAS_UNIT() {
+        return HAS_UNIT;
+    }
+
     static get LAYOUT_CLASS() {
         return LAYOUT_CLASS;
     }

diff --git a/test/rendering/form.json b/test/rendering/form.json
@@ -18259,7 +18259,11 @@
     {
       "@id": "http://vfn.cz/ontologies/fss-form/primary-treatment--d-h--size-of-the-tumor--latero-lateral-q",
       "@type": "doc:question",
-      "label": "latero-lateral (LL)"
+      "label": "latero-lateral (LL)",
+      "has-datatype": "xsd:int",
+      "has-unit": "mm",
+      "maxInclusive": "20",
+      "minInclusive": "0"
     },
     {
       "@id": "http://vfn.cz/ontologies/fss-form/primary-treatment--d-h--size-of-the-tumor--vertical-q",
@@ -18508,6 +18512,19 @@
     "description": {
       "@id": "http://purl.org/dc/elements/1.1/description"
     },
+    "has-unit": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-unit"
+    },
+    "maxInclusive": {
+      "@id": "http://www.w3.org/2001/XMLSchema#maxInclusive"
+    },
+    "minInclusive": {
+      "@id": "http://www.w3.org/2001/XMLSchema#minInclusive"
+    },
+    "has-datatype": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-datatype",
+      "@type": "@id"
+    },
     "form": "http://onto.fel.cvut.cz/ontologies/form/",
     "owl": "http://www.w3.org/2002/07/owl#",
     "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
@@ -18520,4 +18537,4 @@
     "form-lt": "http://onto.fel.cvut.cz/ontologies/form-layout/",
     "ufo": "http://onto.fel.cvut.cz/ontologies/ufo/"
   }
-}
+}