Skip to content

Commit

Permalink
Implement question with unit
Browse files Browse the repository at this point in the history
  • Loading branch information
holubv committed Apr 21, 2021
1 parent bf739a7 commit a388673
Show file tree
Hide file tree
Showing 8 changed files with 211 additions and 13 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "s-forms-smart-components",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"scripts": {
"dev": "parcel serve ./test/index.html --port 8080",
Expand All @@ -21,6 +21,7 @@
"jsonld": "^0.4.12",
"jsonld-utils": "https://kbss.felk.cvut.cz/dist/jsonld-utils-0.0.11.tgz",
"parcel": "^2.0.0-beta.2",
"prop-types": "^15.7.2",
"query-string": "^6.13.5",
"react": "~16.9.0",
"react-bootstrap": "1.0.1",
Expand Down
1 change: 1 addition & 0 deletions src/Constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ export default class Constants {
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 HAS_UNIT_OF_MEASURE = 'http://onto.fel.cvut.cz/ontologies/form/has-unit-of-measure';

}
14 changes: 14 additions & 0 deletions src/SmartComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import Constants from "./Constants";
import QuestionWithAdvanced from "./components/QuestionWithAdvanced";
import {Constants as SConstants, FormUtils} from "s-forms";
import WizardStepWithAdvanced from "./components/WizardStepWithAdvanced";
import QuestionWithUnit from "./components/QuestionWithUnit";
import NullQuestion from "./components/NullQuestion";

export default class SmartComponents {

Expand All @@ -24,6 +26,18 @@ export default class SmartComponents {
mapRule: q => {
return SmartComponents._hasAdvancedQuestion(q) && FormUtils.isWizardStep(q);
}
},
{
component: NullQuestion,
mapRule: q => {
return !!q['http://onto.fel.cvut.cz/ontologies/form/is-unit-of-measure']
}
},
{
component: QuestionWithUnit,
mapRule: q => {
return !!q[Constants.HAS_UNIT_OF_MEASURE]
}
}
];
}
Expand Down
8 changes: 8 additions & 0 deletions src/components/NullQuestion.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';

export default class NullQuestion extends React.Component {

render() {
return null;
}
}
132 changes: 132 additions & 0 deletions src/components/QuestionWithUnit.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from 'react';
import { Question, Answer, Constants as SConstants, FormQuestionsContext } from 's-forms';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Constants from "../Constants";


class _QuestionWithUnit extends Question {

constructor(props) {
super(props);

}

// static _findQuestion(question, id) {
//
// if (question['@id'] === id) {
// return question;
// }
//
// const subQuestions = question[SConstants.HAS_SUBQUESTION];
// if (subQuestions && subQuestions.length) {
//
// for (const subQuestion of subQuestions) {
// const found = _QuestionWithUnit._findQuestion(subQuestion, id);
// if (found) {
// return found;
// }
// }
// }
//
// return null;
// }

static _findParent(root, id) {

const subQuestions = root[SConstants.HAS_SUBQUESTION];
if (subQuestions && subQuestions.length) {

for (const subQuestion of subQuestions) {

if (subQuestion['@id'] === id) {
return root;
}

const found = _QuestionWithUnit._findParent(subQuestion, id);
if (found) {
return found;
}
}
}

return null;
}

static _findDirectChild(parent, id) {
const subQuestions = parent[SConstants.HAS_SUBQUESTION];
if (subQuestions && subQuestions.length) {

for (let i = 0; i < subQuestions.length; i++) {
if (subQuestions[i]['@id'] === id) {
return { q: subQuestions[i], index: i };
}
}
}

return null;
}

_onUnitQuestionChange = (index, change) => {
// pass change to the parent
this.props.onChange(index, change);
}

renderAnswers() {

if (!this.props.formData) {
return null;
}

const question = this.props.question;
const unitId = question[Constants.HAS_UNIT_OF_MEASURE];

const parent = _QuestionWithUnit._findParent(this.props.formData.root, question['@id']);
if (!parent) {
return null;
}

const unitQuestion = _QuestionWithUnit._findDirectChild(parent, unitId);
if (!unitQuestion) {
console.error('question with unit: cannot find question ' + unitId);
return null;
}

const answers = this._getAnswers();
const cls = classNames(
Question._getQuestionCategoryClass(question),
'answer'
);

return [
<div key={'row-item-0'} className={cls} id={question['@id']}>
<div className="question-with-unit">
<div className="base-question">
<Answer index={0} answer={answers[0]} question={question} onChange={this.onAnswerChange} />
{this._renderUnits()}
{this._renderPrefixes()}
</div>

<div className="unit-question">
<Question question={unitQuestion.q} onChange={this._onUnitQuestionChange} index={unitQuestion.index}/>
</div>
</div>
</div>
];
}

}

_QuestionWithUnit.propTypes.formData = PropTypes.object;

const QuestionWithUnit = (props) => {

const formQuestionsContext = React.useContext(FormQuestionsContext);
const formData = formQuestionsContext.getData();

return (
<_QuestionWithUnit formData={formData} {...props} />
);
};

export default QuestionWithUnit;
17 changes: 17 additions & 0 deletions src/styles/components.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,20 @@
.answerable-section .show-advanced-switch {
padding-right: 15px;
}

.question-with-unit {
display: flex;
max-width: 500px;
flex-grow: 1;
}

.question-with-unit > .base-question {
flex-grow: 1;
display: flex;
align-items: center;
}

.question-with-unit > .unit-question {
max-width: 40%;
margin-left: 20px;
}
2 changes: 1 addition & 1 deletion test/TestApp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class TestApp extends React.Component {
super(props);
this.state = {
isFormValid: false,
selectedForm: form1
selectedForm: form2
};
this.refForm = React.createRef();
}
Expand Down
47 changes: 36 additions & 11 deletions test/form2.json
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@
},
"show-advanced-question": {
"@id": "http://onto.fel.cvut.cz/ontologies/form/show-advanced-question"
},
"has-unit-of-measure": {
"@id": "http://onto.fel.cvut.cz/ontologies/form/has-unit-of-measure"
},
"is-unit-of-measure": {
"@id": "http://onto.fel.cvut.cz/ontologies/form/is-unit-of-measure"
}
},
"@graph": [
Expand Down Expand Up @@ -141,10 +147,18 @@
"has_related_question": [],
"has-layout-class": "text",
"has-datatype": "xsd:int",
"has-preceding-question": "last-name-1495",
"has-unit": "years",
"label": "Age"
},
{
"@id": "cena-6557",
"@type": "doc:question",
"has-unit-of-measure": "mena-8088",
"has-layout-class": "text",
"has-preceding-question": "age-1063",
"label": "cena",
"description" : "Tohle je cena s měnou"
},
{
"@id": "first-name-6663",
"@type": "doc:question",
Expand All @@ -168,10 +182,12 @@
"@id": "x:form-root",
"@type": "doc:question",
"has_related_question": [
"age-1063",
"first-name-6663",
"middle-name-4161",
"last-name-1495",
"age-1063",
"cena-6557",
"mena-8088",
"parent-section-1590",
"test-section-666"
],
Expand Down Expand Up @@ -204,6 +220,14 @@
"has-pattern": "([A-Za-z]+)",
"label": "Příjmení"
},
{
"@id": "mena-8088",
"@type": "doc:question",
"has_related_question": [],
"has-layout-class": "text",
"is-unit-of-measure": true,
"label": "mena"
},
{
"@id": "middle-name-4161",
"@type": "doc:question",
Expand All @@ -220,6 +244,7 @@
"sectionfoo-1592"
],
"has-layout-class": "section",
"has-preceding-question": "cena-6557",
"label": "parent-section"
},
{
Expand Down Expand Up @@ -255,31 +280,31 @@
"@id": "test-2-8331",
"@type": "doc:question",
"has_related_question": [],
"has-layout-class": [
"text",
"emphasise-on-relevant"
],
"has-preceding-question": "test-5278",
"is-relevant-if": [
"_:b0",
"_:b1"
],
"has-layout-class": [
"text",
"emphasise-on-relevant"
],
"label": "test 2 advanced"
},
{
"@id": "test-3-8331",
"@type": "doc:question",
"has_related_question": [],
"has-preceding-question": "test-2-8331",
"is-relevant-if": [
"_:b2",
"_:b3"
],
"has-layout-class": [
"text",
"advanced-question",
"emphasise-on-relevant"
],
"has-preceding-question": "test-2-8331",
"is-relevant-if": [
"_:b2",
"_:b3"
],
"label": "test 3 advanced"
},
{
Expand Down

0 comments on commit a388673

Please sign in to comment.