[upd] Display forms without wizard-step layout class

src/components/FormManager.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import QuestionAnswerProcessor from '../model/QuestionAnswerProcessor';
 import { WizardContext } from '../contexts/WizardContext';
 import Wizard from './wizard/Wizard';
+import { FormUtils } from '../s-forms';
+import Question from './Question';
 
 class FormManager extends React.Component {
   getFormData = () => {
@@ -11,7 +13,28 @@ class FormManager extends React.Component {
     return QuestionAnswerProcessor.buildQuestionAnswerModel(data, stepData);
   };
 
+  onStepChange = (question, index, change) => {
+    this.context.updateStepData(index, { ...question, ...change });
+  };
+
   render() {
+    const stepData = this.context.getStepData();
+
+    if (stepData.every((step) => !FormUtils.isWizardStep(step))) {
+      return (
+        <div className="p-4">
+          {stepData.map((question, index) => (
+            <Question
+              key={question['@id']}
+              question={question}
+              onChange={(index, change) => this.onStepChange(question, index, change)}
+              index={index}
+            />
+          ))}
+        </div>
+      );
+    }
+
     return <Wizard {...this.props} />;
   }
 }

src/components/wizard/Wizard.jsx

@@ -74,10 +74,6 @@ const Wizard = () => {
   const initComponent = () => {
     const stepData = wizardContext.getStepData();
 
-    if (stepData.length === 0) {
-      return <div className="font-italic">There are no steps in this wizard.</div>;
-    }
-
     const step = stepData[currentStep];
 
     return (

src/components/wizard/WizardStep.jsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { Alert, Button, ButtonToolbar, Card } from 'react-bootstrap';
+import React from 'react';
+import { Button, ButtonToolbar, Card } from 'react-bootstrap';
 import JsonLdUtils from 'jsonld-utils';
 import PropTypes from 'prop-types';
 import * as Constants from '../../constants/Constants';
 import HelpIcon from '../HelpIcon';
 import { WizardContext } from '../../contexts/WizardContext';
-import GeneratedStep from '../GeneratedStep';
 import { ConfigurationContext } from '../../contexts/ConfigurationContext';
+import Question from '../Question';
 
 const WizardStep = (props) => {
   const wizardContext = React.useContext(WizardContext);
@@ -49,6 +49,10 @@ const WizardStep = (props) => {
     );
   };
 
+  const onChange = (index, change) => {
+    wizardContext.updateStepData(props.stepIndex || index, { ...props.step, ...change });
+  };
+
   return (
     <div className="wizard-step">
       <Card className="wizard-step-content">
@@ -57,7 +61,7 @@ const WizardStep = (props) => {
           {_renderHelpIcon()}
         </Card.Header>
         <Card.Body>
-          <GeneratedStep stepIndex={props.stepIndex} question={props.step} />
+          <Question question={props.step} onChange={onChange} withoutCard={true} index={props.stepIndex} />
         </Card.Body>
       </Card>
 

src/model/WizardGenerator.js

@@ -91,8 +91,9 @@ export default class WizardGenerator {
     });
 
     if (!stepQuestions.length) {
-      Logger.error('Could not find any wizard steps in the received data.');
-      throw 'No wizard steps in form';
+      Logger.log('Could not find any wizard steps in the received data. Building form without steps');
+
+      form[Constants.HAS_SUBQUESTION].forEach((question) => stepQuestions.push(question));
     }
 
     // sort by label

test/rendering/TestApp.jsx

@@ -5,7 +5,8 @@ import SForms from '../../src/components/SForms';
 import '../../src/styles/s-forms.css';
 import 'react-datepicker/dist/react-datepicker.css';
 
-const form = require('./form.json');
+const form1 = require('./form1.json'); // form with wizard steps
+const form2 = require('./form2.json'); // form without wizard steps (proudly assembled in Semantic Form Web Editor)
 
 class TestApp extends React.Component {
   constructor(props) {
@@ -50,7 +51,7 @@ class TestApp extends React.Component {
       <React.Fragment>
         <SForms
           ref={this.refForm}
-          form={form}
+          form={form1}
           options={options}
           fetchTypeAheadValues={this.fetchTypeAheadValues}
           isFormValid={(isFormValid) => this.setState({ isFormValid })}

test/rendering/form2.json

@@ -0,0 +1,174 @@
+{
+  "@context": {
+    "doc": "http://onto.fel.cvut.cz/ontologies/documentation/",
+    "x": "https://x.com/x/",
+    "rdfs": "http://www.w3.org/2000/01/rdf-schema#",
+    "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#",
+    "xml": "http://www.w3.org/XML/1998/namespace",
+    "xsd": "http://www.w3.org/2001/XMLSchema#",
+    "label": {
+      "@id": "http://www.w3.org/2000/01/rdf-schema#label"
+    },
+    "has_data_value": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/documentation/has_data_value"
+    },
+    "has_answer": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/documentation/has_answer"
+    },
+    "has-answer-origin": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-answer-origin"
+    },
+    "has-possible-values-query": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-possible-values-query"
+    },
+    "has-layout-class": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form-layout/has-layout-class"
+    },
+    "has_related_question": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/documentation/has_related_question",
+      "@type": "@id"
+    },
+    "has-question-origin": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-question-origin",
+      "@type": "@id"
+    },
+    "is-relevant-if": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/is-relevant-if",
+      "@type": "@id"
+    },
+    "has-tested-question": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-tested-question",
+      "@type": "@id"
+    },
+    "accepts-answer-value": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/accepts-answer-value",
+      "@type": "http://www.w3.org/2001/XMLSchema#boolean"
+    },
+    "minInclusive": {
+      "@id": "http://www.w3.org/2001/XMLSchema#minInclusive"
+    },
+    "maxInclusive": {
+      "@id": "http://www.w3.org/2001/XMLSchema#maxInclusive"
+    },
+    "has-datatype": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-datatype",
+      "@type": "@id"
+    },
+    "has-preceding-question": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-preceding-question",
+      "@type": "@id"
+    },
+    "comment": {
+      "@id": "http://www.w3.org/2000/01/rdf-schema#comment"
+    },
+    "has-unit": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-unit"
+    },
+    "has-input-mask": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-input-mask"
+    },
+    "description": {
+      "@id": "http://purl.org/dc/elements/1.1/description"
+    },
+    "is-relevant-if_removed": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/is-relevant-if_removed",
+      "@type": "@id"
+    },
+    "requires-answer": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/requires-answer",
+      "@type": "http://www.w3.org/2001/XMLSchema#boolean"
+    },
+    "accepts-validation-value": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/accepts-validation-value"
+    },
+    "imports": {
+      "@id": "http://www.w3.org/2002/07/owl#imports",
+      "@type": "@id"
+    },
+    "requires-answer-if": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/requires-answer-if",
+      "@type": "@id"
+    },
+    "has-media-content": {
+      "@id": "http://onto.fel.cvut.cz/ontologies/form/has-media-content"
+    }
+  },
+  "@graph": [
+    {
+      "@id": "age-1063",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": "text",
+      "has-datatype": "xsd:int",
+      "has-preceding-question": "last-name-1495",
+      "has-unit": "years",
+      "label": "Age"
+    },
+    {
+      "@id": "start-date-6817",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": [
+        "masked-input",
+        "disabled"
+      ],
+      "has-input-mask": "MM/YYYY",
+      "has-preceding-question": "profession-6006",
+      "requires-answer": true,
+      "description": "Disabled for now",
+      "label": "Starting date"
+    },
+    {
+      "@id": "profession-6006",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": "type-ahead",
+      "has-possible-values-query": "http://example.com/",
+      "requires-answer": true,
+      "label": "Profession"
+    },
+    {
+      "@id": "x:form-root",
+      "@type": "doc:question",
+      "has_related_question": [
+        "first-name-6663",
+        "last-name-1495",
+        "age-1063",
+        "job-9002"
+      ],
+      "has-layout-class": "form"
+    },
+    {
+      "@id": "first-name-6663",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": "text",
+      "label": "First name"
+    },
+    {
+      "@id": "last-name-1495",
+      "@type": "doc:question",
+      "has_related_question": [],
+      "has-layout-class": "text",
+      "has-preceding-question": "first-name-6663",
+      "label": "Last name"
+    },
+    {
+      "@id": "job-9002",
+      "@type": "doc:question",
+      "has_related_question": [
+        "profession-6006",
+        "start-date-6817"
+      ],
+      "has-layout-class": [
+        "section"
+      ],
+      "has-preceding-question": "age-1063",
+      "description": "This section is about your job",
+      "label": "Job",
+      "has-media-content": "https://www.youtube.com/embed/yzXRaJCZdFI"
+    }
+  ]
+}