\n \n \n);\n\nexport default Close;\n","import React from \"react\";\nimport Constants from \"../constants/Constants.js\";\nimport HelpIcon from \"./HelpIcon.jsx\";\nimport LinkIcon from \"./LinkIcon.jsx\";\nimport QuestionCommentIcon from \"./comment/QuestionCommentIcon.jsx\";\nimport * as JsonLdUtils from \"jsonld-utils\";\n\nexport default class QuestionStatic {\n static renderIcons(question, options, onCommentChange, showIcon) {\n let icons;\n if (options.icons) icons = options.icons;\n else icons = Constants.DEFAULT_OPTIONS.icons;\n let iconsArray = [];\n const renderQuestionHelp = this.renderQuestionHelp(\n question,\n options,\n onCommentChange,\n showIcon\n );\n const renderQuestionComments = this.renderQuestionComments(\n question,\n options,\n onCommentChange,\n showIcon\n );\n\n const renderQuestionLink = this.renderQuestionLink(\n question,\n options,\n onCommentChange,\n showIcon\n );\n\n for (let i = 0; i < icons.length; i++) {\n if (icons[i].id === Constants.ICONS.QUESTION_COMMENTS) {\n iconsArray.push(\n \n {renderQuestionComments}\n \n );\n }\n if (icons[i].id === Constants.ICONS.QUESTION_HELP) {\n iconsArray.push(\n \n {renderQuestionHelp}\n \n );\n }\n if (icons[i].id === Constants.ICONS.QUESTION_LINK) {\n iconsArray.push(\n \n {renderQuestionLink}\n \n );\n }\n }\n\n return {iconsArray}
;\n }\n\n static renderQuestionHelp(question, options, onCommentChange, showIcon) {\n return this.getIconComponentFromName(\n Constants.ICONS.QUESTION_HELP,\n question,\n options,\n onCommentChange,\n showIcon\n );\n }\n\n static renderQuestionComments = (\n question,\n options,\n onCommentChange,\n showIcon\n ) => {\n return this.getIconComponentFromName(\n Constants.ICONS.QUESTION_COMMENTS,\n question,\n options,\n onCommentChange,\n showIcon\n );\n };\n\n static renderQuestionLink(question, options, onCommentChange, showIcon) {\n return this.getIconComponentFromName(\n Constants.ICONS.QUESTION_LINK,\n question,\n options,\n onCommentChange,\n showIcon\n );\n }\n\n static getIconComponentFromName(\n iconName,\n question,\n options,\n onCommentChange,\n showIcon\n ) {\n const iconList = options.icons\n ? options.icons\n : Constants.DEFAULT_OPTIONS.icons;\n const icon = this.getIconFromIconList(iconList, iconName);\n return this.getIconComponent(\n icon,\n question,\n options,\n onCommentChange,\n showIcon\n );\n }\n\n static getIconFromIconList = (iconList, iconName) => {\n if (iconList) return iconList.find((icon) => icon.id === iconName);\n return null;\n };\n\n static getIconComponent(icon, question, options, onCommentChange, showIcon) {\n let iconClassname;\n\n if (\n icon &&\n (icon.behavior === Constants.ICON_BEHAVIOR.ON_HOVER ||\n icon.behavior === Constants.ICON_BEHAVIOR.ENABLE)\n ) {\n if (icon.behavior === Constants.ICON_BEHAVIOR.ENABLE) {\n showIcon = true;\n iconClassname = \"\";\n } else iconClassname = \"emphasise-on-relevant-icon\";\n\n if (\n icon.id === Constants.ICONS.QUESTION_HELP &&\n question[Constants.HELP_DESCRIPTION]\n ) {\n if (showIcon) {\n return (\n \n \n
\n );\n }\n return null;\n }\n\n if (\n icon.id === Constants.ICONS.QUESTION_LINK &&\n question[Constants.SOURCE]\n ) {\n if (showIcon) {\n return (\n \n \n
\n );\n }\n return null;\n }\n\n if (icon.id === Constants.ICONS.QUESTION_COMMENTS) {\n if (showIcon) {\n return (\n \n \n
\n );\n }\n return null;\n }\n return null;\n }\n }\n}\n","import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport CommentBubble from \"../../styles/icons/CommentBubble\";\nimport { Badge, Overlay, Tooltip } from \"react-bootstrap\";\nimport CommentList from \"./CommentList\";\nimport PropTypes from \"prop-types\";\nimport Constants from \"../../constants/Constants\";\nimport { ConfigurationContext } from \"../../contexts/ConfigurationContext\";\nimport CommentForm from \"./CommentForm\";\nimport { motion } from \"framer-motion\";\nimport Close from \"../../styles/icons/Close\";\n\nconst QuestionCommentIcon = (props) => {\n const context = useContext(ConfigurationContext);\n const target = useRef(null);\n const dragRef = useRef(null);\n const overlayTarget = useRef(null);\n const [showOverlay, setShowOverlay] = useState(false);\n const [overlayPlacement, setOverlayPlacement] = useState(\"right\");\n\n useEffect(() => {\n getOverlayPlacement(overlayTarget.current);\n });\n\n const handleHideOverlayClick = () => {\n setShowOverlay(false);\n };\n\n // TODO make util function\n const _getComments = () => {\n const question = props.question;\n\n if (!question[Constants.HAS_COMMENT]) {\n question[Constants.HAS_COMMENT] = [];\n }\n if (!Array.isArray(question[Constants.HAS_COMMENT])) {\n question[Constants.HAS_COMMENT] = [question[Constants.HAS_COMMENT]];\n }\n\n return question[Constants.HAS_COMMENT];\n };\n\n const handleCommentValueChange = (value) => {\n const change = {};\n _setComment(change, value);\n props.onChange(getCommentsLength(), change);\n };\n\n const _setComment = (change, value) => {\n if (context.options.currentUser) {\n change[Constants.HAS_AUTHOR] = { \"@id\": context.options.currentUser };\n }\n change[Constants.HAS_COMMENT_VALUE] = value;\n change[Constants.HAS_TIMESTAMP] = Date.now().toString();\n };\n\n const handleDeleteQuestionCommentClick = (index) => {\n const comment = _getComments();\n comment.splice(index, 1);\n };\n\n const handleStopPropagationClick = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleOverlayClick = (e) => {\n handleStopPropagationClick(e);\n setShowOverlay(!showOverlay);\n };\n\n const getCommentsLength = () => {\n return _getComments().length;\n };\n\n const getOverlayPlacement = (overlayTarget) => {\n if (!overlayTarget) return;\n\n if (overlayTarget.getBoundingClientRect().x > window.innerWidth / 2) {\n setOverlayPlacement(\"left\");\n } else setOverlayPlacement(\"right\");\n };\n\n const handleEscapeKeyDown = (e) => {\n if (e.key === \"Escape\") {\n handleHideOverlayClick();\n }\n };\n\n return (\n \n \n \n {getCommentsLength() > 0 ? (\n \n {getCommentsLength()}\n \n ) : null}\n \n\n \n \n {(overlayProps) => (\n \n {\n handleEscapeKeyDown(e);\n }}\n >\n \n \n \n \n \n \n \n )}\n \n \n
\n );\n};\n\nQuestionCommentIcon.propTypes = {\n question: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default QuestionCommentIcon;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport CheckboxAnswer from \"./answer/CheckboxAnswer\";\nimport DateTimeAnswer from \"./answer/DateTimeAnswer\";\nimport InputAnswer from \"./answer/InputAnswer\";\nimport * as JsonldUtils from \"jsonld-utils\";\nimport MaskedInputAnswer from \"./answer/MaskedInputAnswer\";\nimport SelectAnswer from \"./answer/SelectAnswer\";\nimport FormUtils from \"../util/FormUtils\";\nimport Utils from \"../util/Utils\";\nimport TypeaheadAnswer from \"./answer/TypeaheadAnswer\";\nimport Constants from \"../constants/Constants\";\nimport { FormGenContext } from \"../contexts/FormGenContext\";\nimport { ConfigurationContext } from \"../contexts/ConfigurationContext\";\nimport QuestionStatic from \"./QuestionStatic.jsx\";\nimport { FormText } from \"react-bootstrap\";\n\nconst Answer = (props) => {\n const formGenContext = React.useContext(FormGenContext);\n const { options } = React.useContext(ConfigurationContext);\n const [validation, setValidation] = useState({\n severity: \"\",\n classname: \"\",\n message: null,\n });\n\n useEffect(() => {\n _resolveValidationProps();\n }, [props.question]);\n\n const handleValueChange = (value) => {\n const change = { ...props.answer };\n _setValue(change, value);\n props.onChange(props.index, change);\n };\n\n const _setValue = (change, value) => {\n if (value === null) {\n change[Constants.HAS_OBJECT_VALUE] = null;\n change[Constants.HAS_DATA_VALUE] = null;\n } else if (\n props.answer[Constants.HAS_OBJECT_VALUE] ||\n FormUtils.isTypeahead(props.question)\n ) {\n change[Constants.HAS_OBJECT_VALUE] = {\n \"@id\": value,\n };\n } else {\n change[Constants.HAS_DATA_VALUE] = {\n \"@value\": value,\n };\n }\n };\n\n const _hasOptions = (item) => {\n return (\n item[Constants.HAS_OPTION] && item[Constants.HAS_OPTION].length !== 0\n );\n };\n\n const _renderTypeahead = (value, label, title) => {\n const queryHash = Utils.getStringHash(\n FormUtils.getPossibleValuesQuery(props.question)\n );\n const options = formGenContext.getOptions(queryHash) || [];\n\n return (\n \n );\n };\n\n const _renderSelect = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderDateTimePicker = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderCheckbox = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderMaskedInput = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderRegularInput = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderSparqlInput = (value, label, title) => {\n return (\n \n );\n };\n\n const _renderTurtleInput = (value, label, title) => {\n return (\n \n );\n };\n\n const _getLabel = (question) => {\n const label = JsonldUtils.getLocalized(\n question[Constants.RDFS_LABEL],\n options.intl\n );\n\n return (\n \n {label}\n {QuestionStatic.renderIcons(\n props.question,\n options,\n props.onCommentChange,\n props.showIcon\n )}\n
\n );\n };\n\n const _resolveValidationProps = () => {\n setValidation({\n severity: \"\",\n classname: \"\",\n message: null,\n });\n if (question[Constants.HAS_VALID_ANSWER] === false) {\n if (\n question[Constants.HAS_VALIDATION_SEVERITY] ===\n Constants.VALIDATION.SEVERITY.WARNING\n ) {\n setValidation({\n severity: Constants.VALIDATION.SEVERITY.WARNING,\n classname: Constants.VALIDATION.CLASSNAME.WARNING,\n message: (\n \n {question[Constants.HAS_VALIDATION_MESSAGE]}\n \n ),\n });\n } else {\n setValidation({\n severity: Constants.VALIDATION.SEVERITY.ERROR,\n classname: Constants.VALIDATION.CLASSNAME.ERROR,\n message: (\n \n {question[Constants.HAS_VALIDATION_MESSAGE]}\n \n ),\n });\n }\n }\n };\n\n const question = props.question;\n const value = FormUtils.resolveValue(props.answer);\n\n const label = _getLabel(question);\n const title = JsonldUtils.getLocalized(\n question[Constants.RDFS_COMMENT],\n options.intl\n );\n let component;\n\n if (FormUtils.isTypeahead(question)) {\n component = _renderTypeahead(value, label, title, validation);\n } else if (_hasOptions(question)) {\n component = _renderSelect(value, label, title, validation);\n } else if (FormUtils.isCalendar(question)) {\n component = _renderDateTimePicker(value, label, title, validation);\n } else if (FormUtils.isCheckbox(question)) {\n component = _renderCheckbox(value, label, title, validation);\n } else if (FormUtils.isMaskedInput(question)) {\n component = _renderMaskedInput(value, label, title, validation);\n } else if (FormUtils.isSparqlInput(question)) {\n component = _renderSparqlInput(value, label, title, validation);\n } else if (FormUtils.isTurtleInput(question)) {\n component = _renderTurtleInput(value, label, title, validation);\n } else {\n component = _renderRegularInput(value, label, title, validation);\n }\n\n return component;\n};\n\nAnswer.propTypes = {\n answer: PropTypes.object.isRequired,\n question: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n onCommentChange: PropTypes.func.isRequired,\n index: PropTypes.number,\n icons: PropTypes.object,\n};\n\nexport default Answer;\n","/**\n * Created by blcha on 4.11.16.\n */\nimport Constants from \"../constants/Constants\";\nimport FormUtils from \"../util/FormUtils\";\n\nconst createValidator = (question, intl) => {\n const validators = [\n _intMaxInclusiveValidator,\n _intMinInclusiveValidator,\n _patternValidator,\n _checkboxValidator,\n _requiredValidator,\n _completenessValidator,\n ];\n\n return () => {\n if (FormUtils.hasValidationLogic(question, intl)) {\n const answerValue = FormUtils.getAnswerValue(question);\n // console.log(question);\n // console.log(intl);\n return _validateAnswer(question, intl, answerValue, validators);\n }\n };\n};\n\nconst _validateAnswer = (question, intl, answerValue, validators) => {\n const result = {};\n for (const validator of validators) {\n const validationResult = validator(question, intl);\n if (!validationResult.isValid) {\n result[Constants.HAS_VALID_ANSWER] = false;\n result[Constants.HAS_VALIDATION_MESSAGE] = validationResult.message;\n result[Constants.HAS_VALIDATION_SEVERITY] =\n validationResult.validationSeverity;\n return result;\n }\n if (result[Constants.HAS_VALID_ANSWER] === false) {\n break;\n }\n }\n result[Constants.HAS_VALID_ANSWER] = true;\n result[Constants.HAS_VALIDATION_MESSAGE] = \"\";\n result[Constants.HAS_VALIDATION_SEVERITY] = \"\";\n return result;\n};\n\nconst _patternValidator = (question, intl) => {\n const answerValue = FormUtils.getAnswerValue(question);\n if (answerValue && answerValue.length > 0) {\n if (question[Constants.PATTERN]) {\n let pattern = question[Constants.PATTERN];\n const regExp = new RegExp(pattern);\n const isValid =\n regExp.test(answerValue) || !FormUtils.hasAnswer(question);\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.ERROR,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({ id: \"validation.invalid\" }),\n };\n }\n }\n }\n return { isValid: true };\n};\n\nconst _requiredValidator = (question, intl) => {\n if (\n question[Constants.REQUIRES_ANSWER] &&\n !question[Constants.USED_ONLY_FOR_COMPLETENESS]\n ) {\n const isValid = FormUtils.hasAnswer(question);\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.ERROR,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({ id: \"validation.required\" }),\n };\n }\n }\n return { isValid: true };\n};\n\nconst _checkboxValidator = (question, intl) => {\n if (FormUtils.isCheckbox(question)) {\n if (question[Constants.REQUIRES_ANSWER]) {\n const isValid = FormUtils.hasAnswer(question);\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.ERROR,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({ id: \"validation.check\" }),\n };\n }\n }\n }\n return { isValid: true };\n};\n\nconst _completenessValidator = (question, intl) => {\n // console.log(intl);\n if (\n question[Constants.REQUIRES_ANSWER] &&\n question[Constants.USED_ONLY_FOR_COMPLETENESS]\n ) {\n const isValid = FormUtils.hasAnswer(question);\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.WARNING,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({\n id: \"validation.required_only_for_completeness\",\n }),\n };\n }\n }\n return { isValid: true };\n};\n\nconst _intMinInclusiveValidator = (question, intl) => {\n if (question[Constants.XSD.MIN_INCLUSIVE]) {\n const answerValue = FormUtils.getAnswerValue(question);\n if (answerValue && answerValue.length > 0) {\n const minInclusive = question[Constants.XSD.MIN_INCLUSIVE];\n\n const isValid =\n Number.isInteger(parseInt(answerValue)) && answerValue >= minInclusive;\n\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.ERROR,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({ id: \"validation.greater_or_equal\" }) +\n minInclusive +\n \".\",\n };\n }\n }\n }\n return { isValid: true };\n};\n\nconst _intMaxInclusiveValidator = (question, intl) => {\n const answerValue = FormUtils.getAnswerValue(question);\n if (question[Constants.XSD.MAX_INCLUSIVE]) {\n if (answerValue && answerValue.length > 0) {\n const maxInclusive = question[Constants.XSD.MAX_INCLUSIVE];\n\n const isValid =\n Number.isInteger(parseInt(answerValue)) && answerValue <= maxInclusive;\n\n if (!isValid) {\n return {\n isValid: false,\n validationSeverity: Constants.VALIDATION.SEVERITY.ERROR,\n message: question[Constants.HAS_VALIDATION_MESSAGE]\n ? question[Constants.HAS_VALIDATION_MESSAGE]\n : intl.formatMessage({ id: \"validation.lower_or_equal\" }) +\n maxInclusive +\n \".\",\n };\n }\n }\n }\n return { isValid: true };\n};\n\nexport { createValidator };\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n ListGroup,\n ListGroupItem,\n OverlayTrigger,\n Popover,\n} from \"react-bootstrap\";\nimport Constants from \"../constants/Constants\";\n\nclass PrefixIcon extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n prefixes: props.prefixes,\n };\n }\n\n render() {\n const p = (\n \n \n {this.state.prefixes\n .sort((l, r) => {\n const res = l[Constants.PREFIX] < r[Constants.PREFIX];\n if (res) return -1;\n return 1;\n })\n .map((p) => (\n \n {p[Constants.PREFIX]}: {p[Constants.NAMESPACE]}\n \n ))}\n \n \n );\n\n return (\n \n {this.props.children}\n \n );\n }\n}\n\nPrefixIcon.propTypes = {\n prefixes: PropTypes.array.isRequired,\n children: PropTypes.element.isRequired,\n iconClass: PropTypes.string,\n};\n\nPrefixIcon.defaultProps = {\n iconClass: \"\",\n};\n\nexport default PrefixIcon;\n","import React from \"react\";\nimport Constants from \"../constants/Constants\";\n\ninterface Props {\n question: object;\n}\n\nconst MediaContent = ({ question }: Props) => {\n const renderMedia = () => {\n // @ts-ignore\n const mediaContent = question[Constants.HAS_MEDIA_CONTENT];\n\n if (mediaContent) {\n if (Array.isArray(mediaContent)) {\n return (\n \n {mediaContent.map((src: string, index: number) => (\n
\n \n \n \n
\n );\n }\n return null;\n };\n\n return renderMedia();\n};\n\nexport default MediaContent;\n","import React from \"react\";\nimport { Card, Accordion } from \"react-bootstrap\";\nimport * as JsonLdUtils from \"jsonld-utils\";\nimport PropTypes from \"prop-types\";\nimport Answer from \"./Answer\";\nimport Constants from \"../constants/Constants\";\nimport FormUtils from \"../util/FormUtils\";\nimport JsonLdObjectMap from \"../util/JsonLdObjectMap\";\nimport QuestionAnswerProcessor from \"../model/QuestionAnswerProcessor\";\nimport { createValidator } from \"../model/ValidatorFactory\";\nimport JsonLdObjectUtils from \"../util/JsonLdObjectUtils\";\nimport PrefixIcon from \"./PrefixIcon\";\nimport MediaContent from \"./MediaContent\";\nimport { CaretSquareDown, CaretSquareUp, InfoCircle } from \"../styles/icons\";\nimport { ConfigurationContext } from \"../contexts/ConfigurationContext\";\nimport classNames from \"classnames\";\nimport QuestionStatic from \"./QuestionStatic.jsx\";\nimport Utils from \"../util/Utils.js\";\n\n// TODO Remove once the pretty layout is tested\nconst PRETTY_ANSWERABLE_LAYOUT = true;\n\nexport default class Question extends React.Component {\n constructor(props) {\n super(props);\n JsonLdObjectMap.putObject(props.question[\"@id\"], props.question);\n this.state = {\n validator: {},\n expanded: !FormUtils.isCollapsed(props.question),\n showIcon: false,\n };\n }\n\n componentDidMount() {\n this.setState({\n validator: createValidator(this.props.question, this.props.intl),\n });\n }\n\n componentDidUpdate() {\n const question = this.props.question;\n const startingQuestionId = this.context.options.startingQuestionId;\n const subQuestions = question[Constants.HAS_SUBQUESTION];\n const isSubQuestionStartingQuestionId = subQuestions.find(\n (o) => o[\"@id\"] === startingQuestionId\n );\n\n if (FormUtils.isSection(question) && FormUtils.isAnswerable(question)) {\n const answerValue = this._getFirstAnswerValue();\n\n // Irrelevant questions are expanded if debugMode is on\n if (this.context.options.debugMode) {\n return null;\n }\n\n if (isSubQuestionStartingQuestionId) {\n return null;\n } else if (this.state.expanded && !answerValue) {\n // close expanded answerable section that does not have positive answer\n this.setState({ expanded: false });\n }\n }\n }\n\n handleAnswerChange = (answerIndex, change) => {\n if (FormUtils.isSection(this.props.question)) {\n let expanded = !!FormUtils.resolveValue(change);\n this.setState({ expanded: expanded });\n }\n\n this._handleChange(Constants.HAS_ANSWER, answerIndex, change);\n };\n\n handleSubQuestionChange = (subQuestionIndex, change) => {\n this._handleChange(Constants.HAS_SUBQUESTION, subQuestionIndex, change);\n };\n\n handleCommentChange = (commentIndex, change) => {\n this._handleChange(Constants.HAS_COMMENT, commentIndex, change);\n };\n\n _handleChange(att, valueIndex, newValue) {\n let newState = { ...this.props.question };\n newState[att][valueIndex] = newValue;\n if (att === Constants.HAS_ANSWER) {\n const result = this.state.validator(newValue);\n newState = { ...newState, ...result };\n }\n\n JsonLdObjectMap.putObject(newState[\"@id\"], newState);\n this.props.onChange(this.props.index, newState);\n }\n\n isDebugged(question) {\n const startingQuestionId = this.context.options.startingQuestionId;\n\n if (FormUtils.isRelevant(question)) {\n return false;\n }\n if (this.context.options.debugMode) {\n return true;\n }\n\n if (startingQuestionId == null) {\n return false;\n }\n\n let questionById = Utils.findQuestionById(\n startingQuestionId,\n question,\n true,\n false,\n false\n );\n return !!questionById;\n }\n\n _toggleCollapse = () => {\n if (this.props.collapsible) {\n this.setState({ expanded: !this.state.expanded });\n }\n };\n\n _onEnterHandler = () => {\n this.setState({ showIcon: true });\n };\n\n _onLeaveHandler = () => {\n this.setState({ showIcon: false });\n };\n\n _getHeaderClassName = () => {\n const question = this.props.question;\n const collapsible = this.props.collapsible;\n\n let headerClassName = [];\n\n headerClassName.push(\n Question.getEmphasizedOnRelevantClass(question),\n \"question-header\"\n );\n\n if (FormUtils.isWizardStep(question))\n headerClassName.push(\"wizard-step bg-primary text-white\");\n if (FormUtils.isEmphasised(question))\n headerClassName.push(Question.getEmphasizedClass(question));\n if (FormUtils.isSection(question))\n headerClassName.push(\"section-background\");\n if (collapsible) headerClassName.push(\"cursor-pointer\");\n if (this.isDebugged(question)) {\n headerClassName.push(\"show-irrelevant\");\n }\n return headerClassName;\n };\n\n render() {\n const question = this.props.question;\n const questionComponent = this.renderQuestion(question);\n\n if (this.isDebugged(question)) {\n return {questionComponent}
;\n }\n if (FormUtils.isHidden(question)) {\n return null;\n }\n if (!FormUtils.isRelevant(question)) {\n return null;\n }\n return questionComponent;\n }\n\n renderQuestion(question) {\n if (FormUtils.isAnswerable(question) && !FormUtils.isSection(question)) {\n if (PRETTY_ANSWERABLE_LAYOUT) {\n return (\n \n
\n {this.renderAnswers()}\n
\n
\n {this.renderSubQuestions()}\n
\n
\n {this.renderAnswers()}\n
{this.renderSubQuestions()}
\n
{this._renderQuestionContent()}
;\n }\n const label = JsonLdUtils.getLocalized(\n question[JsonLdUtils.RDFS_LABEL],\n this.context.options.intl\n );\n\n const cardBody = (\n \n {this._renderQuestionContent()}\n \n );\n\n return (\n <>\n \n \n \n \n \n {collapsible &&\n !FormUtils.isWizardStep(question) &&\n this._renderCollapseToggle()}\n {label}\n
\n {this.renderQuestionIcons()}\n {this.props.children}\n \n \n {collapsible ? cardBody : <>{cardBody}}\n \n \n \n \n \n );\n } else {\n return {this._renderQuestionContent()}
;\n }\n }\n\n _renderQuestionContent() {\n let content = [];\n if (this.state.expanded) {\n content.push(\n \n );\n }\n content.push(this.renderAnswers());\n content.push(this.renderSubQuestions());\n return content;\n }\n\n renderQuestionIcons() {\n const question = this.props.question;\n const options = this.context.options;\n return QuestionStatic.renderIcons(\n question,\n options,\n this.handleCommentChange,\n this.state.showIcon\n );\n }\n\n renderAnswerableSection() {\n const question = this.props.question;\n const collapsible = this.props.collapsible;\n const categoryClass = Question._getQuestionCategoryClass(question);\n\n let classname = this.getShowIrrelevantClassname(question);\n\n const cardBody = (\n \n {this.renderSubQuestions(classname)}\n \n );\n const answerableSectionStyles = this._getHeaderClassName();\n\n if (this.state.expanded) answerableSectionStyles.push(\"text-primary\");\n\n return (\n \n \n \n {this.renderAnswers()}\n \n {collapsible ? (\n \n {cardBody}\n \n ) : (\n { cardBody }\n )}\n \n \n );\n }\n\n getShowIrrelevantClassname(question) {\n const debugMode = this.context.options.debugMode;\n const startingQuestionId = this.context.options.startingQuestionId;\n const subQuestion = question[Constants.HAS_SUBQUESTION];\n\n if (\n (debugMode ||\n JsonLdObjectUtils.checkId(subQuestion, startingQuestionId)) &&\n !FormUtils.hasAnswer(question)\n ) {\n return \"show-irrelevant\";\n }\n return \"\";\n }\n\n renderAnswers() {\n const question = this.props.question,\n children = [],\n answers = this._getAnswers(),\n options = this.context.options;\n let cls;\n let isTextarea;\n\n for (let i = 0, len = answers.length; i < len; i++) {\n isTextarea =\n FormUtils.isTextarea(question, FormUtils.resolveValue(answers[i])) ||\n FormUtils.isSparqlInput(question) ||\n FormUtils.isTurtleInput(question);\n cls = classNames(\n \"answer\",\n Question._getQuestionCategoryClass(question),\n Question.getEmphasizedOnRelevantClass(question)\n );\n children.push(\n \n \n {this._renderUnits()}\n {this._renderPrefixes()}\n \n );\n }\n return children;\n }\n\n _getAnswers() {\n const question = this.props.question;\n if (!question[Constants.HAS_ANSWER]) {\n question[Constants.HAS_ANSWER] = [];\n }\n if (!Array.isArray(question[Constants.HAS_ANSWER])) {\n question[Constants.HAS_ANSWER] = [question[Constants.HAS_ANSWER]];\n }\n if (question[Constants.HAS_ANSWER].length === 0) {\n if (FormUtils.isSection(question) && !FormUtils.isAnswerable(question)) {\n question[Constants.HAS_ANSWER] = [];\n } else {\n question[Constants.HAS_ANSWER] = [\n QuestionAnswerProcessor.generateAnswer(question),\n ];\n }\n }\n return question[Constants.HAS_ANSWER];\n }\n\n _getAnswerWidthStyle() {\n const length = Number(\n this.props.question[Constants.HAS_INITIAL_INPUT_LENGTH]\n );\n if (!length) {\n return {};\n }\n\n return {\n flexGrow: 0,\n maxWidth: \"none\",\n width: `calc(${length}ch + 1.5rem + 2px)`,\n };\n }\n\n static _getAnswerClass(question, isTextarea) {\n let columns = isTextarea\n ? \"col-12\"\n : Constants.GENERATED_ROW_SIZE === 1\n ? \"col-6\"\n : \"col-\" + Constants.COLUMN_COUNT / Constants.GENERATED_ROW_SIZE;\n\n return columns;\n }\n\n static _getQuestionCategoryClass(question) {\n const layoutCategory = FormUtils.getCategory(question);\n return layoutCategory ? \"question-\" + layoutCategory : \"\";\n }\n\n static getEmphasizedClass(question) {\n return FormUtils.isEmphasised(question) ? \"bg-warning\" : \"\";\n }\n\n static getEmphasizedOnRelevantClass(question) {\n if (\n JsonLdUtils.hasValue(\n question,\n Constants.LAYOUT_CLASS,\n Constants.LAYOUT.EMPHASISE_ON_RELEVANT\n )\n ) {\n return \"emphasise-on-relevant\";\n }\n\n return \"\";\n }\n\n _renderCollapseToggle() {\n const title = this.state.expanded\n ? this.props.intl.formatMessage({ id: \"section.collapse\" })\n : this.props.intl.formatMessage({ id: \"section.expand\" });\n\n return (\n \n {this.state.expanded ? (\n \n ) : (\n \n )}\n \n );\n }\n\n _renderPrefixes() {\n const question = this.props.question;\n return question[Constants.HAS_DECLARED_PREFIX] &&\n question[Constants.HAS_DECLARED_PREFIX].length ? (\n \n \n \n ) : null;\n }\n\n _renderUnits() {\n const question = this.props.question;\n return question[Constants.HAS_UNIT] ? (\n {question[Constants.HAS_UNIT]}
\n ) : null;\n }\n\n renderSubQuestions(classname) {\n const children = [];\n const subQuestions = this._getSubQuestions();\n const debugMode = this.context.options.debugMode;\n const startingQuestionId = this.context.options.startingQuestionId;\n\n for (let i = 0; i < subQuestions.length; i++) {\n let question = subQuestions[i];\n let component = this.context.mapComponent(question, Question);\n let element = null;\n\n if (\n debugMode ||\n classname !== \"show-irrelevant\" ||\n Utils.findQuestionById(startingQuestionId, question, true, false, false)\n ) {\n element = React.createElement(component, {\n key: \"sub-question-\" + i,\n question: question,\n onChange: this.handleSubQuestionChange,\n index: i,\n intl: this.props.intl,\n });\n }\n children.push(element);\n }\n return children;\n }\n\n _getSubQuestions() {\n const question = this.props.question;\n if (!question[Constants.HAS_SUBQUESTION]) {\n question[Constants.HAS_SUBQUESTION] = [];\n }\n if (!Array.isArray(question[Constants.HAS_SUBQUESTION])) {\n question[Constants.HAS_SUBQUESTION] = [\n question[Constants.HAS_SUBQUESTION],\n ];\n }\n\n // sort by label\n JsonLdObjectUtils.orderByLocalizedLabels(\n question[Constants.HAS_SUBQUESTION],\n this.context.options.intl\n );\n\n // sort by property\n JsonLdObjectUtils.orderPreservingToplogicalSort(\n question[Constants.HAS_SUBQUESTION],\n Constants.HAS_PRECEDING_QUESTION\n );\n\n return question[Constants.HAS_SUBQUESTION];\n }\n\n _getFirstAnswerValue() {\n return FormUtils.resolveValue(this._getAnswers()[0]);\n }\n}\n\nQuestion.contextType = ConfigurationContext;\n\nQuestion.propTypes = {\n question: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n index: PropTypes.number,\n withoutCard: PropTypes.bool,\n collapsible: PropTypes.bool, // Whether the section is collapsible (if the question is a section)\n};\n\nQuestion.defaultProps = {\n withoutCard: false,\n collapsible: true,\n};\n","import React, { useContext } from \"react\";\nimport { Button, ButtonToolbar } from \"react-bootstrap\";\nimport { FormQuestionsContext } from \"../../contexts/FormQuestionsContext\";\nimport Question from \"../Question\";\nimport PropTypes from \"prop-types\";\nimport FormUtils from \"../../util/FormUtils.js\";\nimport { useIntl } from \"react-intl\";\n\nconst WizardStep = (props) => {\n const { updateFormQuestionsData, getFormQuestionsData } =\n useContext(FormQuestionsContext);\n const intl = useIntl();\n\n const onNextStep = () => {\n updateFormQuestionsData(props.index, getFormQuestionsData());\n props.onNextStep();\n };\n\n const onPreviousStep = () => {\n props.onPreviousStep();\n };\n\n const _renderWizardStepButtons = () => {\n return (\n \n {!props.isFirstStep && (\n \n {intl.formatMessage({ id: \"wizard.previous\" })}\n \n )}\n {!props.isLastStep && (\n \n )}\n \n );\n };\n\n const onChange = (index, change) => {\n updateFormQuestionsData(props.index || index, {\n ...props.question,\n ...change,\n });\n };\n\n const question = getFormQuestionsData([props.index]);\n\n return (\n \n \n {props.options.wizardStepButtons && _renderWizardStepButtons()}\n \n );\n};\n\nWizardStep.propTypes = {\n options: PropTypes.object.isRequired,\n question: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n onNextStep: PropTypes.func,\n onPreviousStep: PropTypes.func,\n mapComponent: PropTypes.func,\n isFirstStep: PropTypes.bool,\n isLastStep: PropTypes.bool,\n};\n\nexport default WizardStep;\n","import React, { useContext } from \"react\";\nimport { Nav, NavItem, NavLink, Card } from \"react-bootstrap\";\nimport PropTypes from \"prop-types\";\nimport * as JsonLdUtils from \"jsonld-utils\";\nimport FormUtils from \"../../util/FormUtils\";\nimport { ConfigurationContext } from \"../../contexts/ConfigurationContext\";\nimport Question from \"../Question\";\nimport classNames from \"classnames\";\nimport IconOverlay from \"../IconOverlay.jsx\";\nimport { useIntl } from \"react-intl\";\n\nconst HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {\n const { options } = useContext(ConfigurationContext);\n const intl = useIntl();\n\n return (\n \n onNavigate(parseInt(key))}\n >\n {steps.map((step, index) => (\n \n \n \n {JsonLdUtils.getLocalized(\n step[JsonLdUtils.RDFS_LABEL],\n options.intl\n )}\n \n \n \n ))}\n \n \n );\n};\n\nHorizontalWizardNav.propTypes = {\n currentStep: PropTypes.number.isRequired,\n steps: PropTypes.array.isRequired,\n onNavigate: PropTypes.func.isRequired,\n};\n\nexport default HorizontalWizardNav;\n","import React, { useContext } from \"react\";\nimport { ListGroup, ListGroupItem } from \"react-bootstrap\";\nimport PropTypes from \"prop-types\";\nimport * as JsonLdUtils from \"jsonld-utils\";\nimport { ConfigurationContext } from \"../../contexts/ConfigurationContext\";\nimport FormUtils from \"../../util/FormUtils\";\nimport Question from \"../Question\";\nimport classNames from \"classnames\";\nimport IconOverlay from \"../IconOverlay.jsx\";\nimport { useIntl } from \"react-intl\";\n\nconst VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {\n const { options } = useContext(ConfigurationContext);\n const intl = useIntl();\n\n return (\n \n \n {steps.map((step, index) => (\n \n onNavigate(index)}\n id={\"wizard-nav-\" + index}\n action={true}\n active={index === currentStep ? \"active\" : \"\"}\n disabled={!options.enableWizardStepSkip}\n variant={\"default\"}\n className={classNames([\n options.debugMode && !FormUtils.isRelevant(step)\n ? \"show-irrelevant\"\n : Question.getEmphasizedClass(step),\n \"wizard-nav\",\n ])}\n >\n {JsonLdUtils.getLocalized(\n step[JsonLdUtils.RDFS_LABEL],\n options.intl\n )}\n \n \n ))}\n \n
\n );\n};\n\nVerticalWizardNav.propTypes = {\n currentStep: PropTypes.number.isRequired,\n steps: PropTypes.array.isRequired,\n onNavigate: PropTypes.func.isRequired,\n};\n\nexport default VerticalWizardNav;\n","import React, { useEffect } from \"react\";\nimport { Card } from \"react-bootstrap\";\nimport WizardStep from \"./WizardStep\";\nimport HorizontalWizardNav from \"./HorizontalWizardNav\";\nimport VerticalWizardNav from \"./VerticalWizardNav\";\nimport { ConfigurationContext } from \"../../contexts/ConfigurationContext\";\nimport { FormQuestionsContext } from \"../../contexts/FormQuestionsContext\";\nimport Utils from \"../../util/Utils\";\nimport Constants from \"../../constants/Constants\";\n\nconst findStepByQuestionId = (stepData, id) => {\n const findQuestionTraversal = (question, index) => {\n if (!question) {\n return -1;\n }\n\n if (question[\"@id\"] === id) {\n return index;\n }\n\n const subQuestions = Utils.asArray(question[Constants.HAS_SUBQUESTION]);\n\n return subQuestions.findIndex(\n (q, index) => findQuestionTraversal(q, index) !== -1\n );\n };\n\n return stepData.findIndex(\n (step, index) => findQuestionTraversal(step, index) !== -1\n );\n};\n\nconst Wizard = () => {\n const formQuestionsContext = React.useContext(FormQuestionsContext);\n const { options, mapComponent } = React.useContext(ConfigurationContext);\n\n let startingStep = 0;\n if (options.startingQuestionId) {\n startingStep = findStepByQuestionId(\n formQuestionsContext.getFormQuestionsData(),\n options.startingQuestionId\n );\n\n if (startingStep === -1) {\n console.warn(`Question with id ${options.startingQuestionId} not found!`);\n startingStep = 0;\n }\n } else if (options.startingStep) {\n startingStep =\n options.startingStep < formQuestionsContext.getFormQuestionsData().length\n ? options.startingStep\n : 0;\n }\n\n const [currentStep, setCurrentStep] = React.useState(startingStep);\n\n const [scrolledToStartingQuestionId, setScrolledToStartingQuestionId] =\n React.useState(false);\n\n useEffect(() => {\n if (options.startingQuestionId && !scrolledToStartingQuestionId) {\n const element = document.getElementById(options.startingQuestionId);\n if (element) {\n element.scrollIntoView();\n element.classList.add(\"text-danger\");\n setScrolledToStartingQuestionId(true);\n }\n }\n });\n\n const onNextStep = () => {\n const stepData = formQuestionsContext.getFormQuestionsData();\n if (currentStep !== stepData.length - 1) {\n stepData[currentStep + 1].visited = true;\n setCurrentStep((prevCurrentStep) => prevCurrentStep + 1);\n }\n };\n\n const onPreviousStep = () => {\n if (currentStep === 0) {\n return;\n }\n setCurrentStep((prevCurrentStep) => prevCurrentStep - 1);\n };\n\n const navigate = (stepIndex) => {\n const stepData = formQuestionsContext.getFormQuestionsData();\n\n if (stepIndex === currentStep || stepIndex >= stepData.length) {\n return;\n }\n // Can we jump forward?\n if (\n stepIndex > currentStep &&\n !stepData[stepIndex].visited &&\n !options.enableWizardStepSkip\n ) {\n return;\n }\n setCurrentStep(stepIndex);\n };\n\n const renderNav = () => {\n const formQuestionsData = formQuestionsContext.getFormQuestionsData();\n\n return options.horizontalWizardNav ? (\n \n ) : (\n \n );\n };\n\n const initComponent = () => {\n const stepData = formQuestionsContext.getFormQuestionsData();\n\n const step = stepData[currentStep];\n\n let stepComponent = mapComponent(step, WizardStep);\n return React.createElement(stepComponent, {\n options: options,\n key: \"step\" + currentStep,\n question: step,\n onNextStep: onNextStep,\n onPreviousStep: onPreviousStep,\n mapComponent: mapComponent,\n index: currentStep,\n isFirstStep: currentStep === 0,\n isLastStep:\n currentStep === formQuestionsContext.getFormQuestionsData().length - 1,\n });\n };\n\n let nav = null;\n if (formQuestionsContext.getFormQuestionsData().length > 1) {\n nav = renderNav();\n }\n\n const isHorizontal = options.horizontalWizardNav;\n const cardClassname = isHorizontal ? \"\" : \"flex-row p-3\";\n const containerClassname = isHorizontal\n ? \"card-body p-3\"\n : nav\n ? \"col-10 p-0 pl-3\"\n : \"col-12 p-0\";\n\n return (\n \n {nav}\n {initComponent()}
\n \n );\n};\n\nexport default Wizard;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Modal } from \"react-bootstrap\";\nimport { ConfigurationContext } from \"../contexts/ConfigurationContext\";\n\nconst FormWindow = React.forwardRef((props, ref) => {\n const { options } = React.useContext(ConfigurationContext);\n\n return (\n \n \n {options.modalProps.title}\n \n\n {props.children}\n \n );\n});\n\nFormWindow.propTypes = {\n children: PropTypes.element.isRequired,\n};\n\nexport default FormWindow;\n","import Constants from \"../constants/Constants\";\nimport { createValidator } from \"./ValidatorFactory.js\";\nimport Utils from \"../util/Utils.js\";\n\nexport default class ValidationProcessor {\n /**\n * Updates the validation status of a question within an array of questions.\n * @param {Array} questions - The array of questions to update.\n * @param {Object} question - The question object to validate and update.\n * @param {number} index - The index of the question in the array.\n * @param {Object} intl - The object used for internationalization.\n */\n static updateQuestionValidation = (questions, question, index, intl) => {\n if (question[Constants.HAS_ANSWER]) {\n const validator = createValidator(question, intl);\n const update = validator();\n\n if (update) {\n questions[index] = { ...question, ...update };\n }\n }\n for (const question of questions) {\n this.updateSubQuestionsValidation(question, intl);\n }\n };\n\n /**\n * Updates the validation status of sub-questions within a parent question.\n * @param {Object} question - The parent question object containing sub-questions.\n * @param {Object} intl - The object used for internationalization.\n */\n static updateSubQuestionsValidation = (question, intl) => {\n const subQuestions = Utils.asArray(question[Constants.HAS_SUBQUESTION]);\n for (let index = 0; index < subQuestions.length; index++) {\n const subQuestion = subQuestions[index];\n this.updateQuestionValidation(subQuestions, subQuestion, index, intl);\n }\n };\n}\n","import React, { forwardRef, useContext, useImperativeHandle } from \"react\";\nimport QuestionAnswerProcessor from \"../model/QuestionAnswerProcessor\";\nimport { FormQuestionsContext } from \"../contexts/FormQuestionsContext\";\nimport Wizard from \"./wizard/Wizard\";\nimport FormWindow from \"./FormWindow\";\nimport { Card } from \"react-bootstrap\";\nimport Question from \"./Question\";\nimport FormUtils from \"../util/FormUtils.js\";\nimport ValidationProcessor from \"../model/ValidationProcessor.js\";\nimport { useIntl } from \"react-intl\";\n\nconst FormManager = forwardRef((props, ref) => {\n const { getFormQuestionsData, updateFormQuestionsData, getData } =\n useContext(FormQuestionsContext);\n const intl = useIntl();\n\n // Used to expose function as a ref.\n // See https://react.dev/reference/react/useImperativeHandle\n useImperativeHandle(\n ref,\n () => {\n return {\n validateForm,\n getFormSpecification,\n getFormQuestionsData,\n getFormData,\n };\n },\n []\n );\n\n const getFormData = () => {\n const data = getData();\n const formQuestionsData = getFormQuestionsData();\n\n return QuestionAnswerProcessor.buildQuestionAnswerModel(\n data,\n formQuestionsData\n );\n };\n\n //TODO: Add optional argument \"isRequiredForCompleteness\"\n const validateForm = () => {\n const questions = getFormQuestionsData();\n\n for (let i = 0; i < questions.length; i++) {\n const question = questions[i];\n ValidationProcessor.updateQuestionValidation(\n questions,\n question,\n i,\n intl\n );\n }\n\n updateFormQuestionsData(null, questions);\n };\n\n const getFormSpecification = () => {\n const questions = getFormQuestionsData();\n return FormUtils.getFormSpecification(questions);\n };\n\n const handleStepChange = (question, index, change) => {\n updateFormQuestionsData(index, { ...question, ...change });\n };\n\n const renderWizardlessForm = () => {\n const formQuestionsData = getFormQuestionsData();\n\n return (\n \n {formQuestionsData.map((q, i) => _mapQuestion(q, i))}\n \n );\n };\n\n const _mapQuestion = (question, index) => {\n let component = props.mapComponent(question, Question);\n return React.createElement(component, {\n key: question[\"@id\"],\n question: question,\n onChange: (index, change) => handleStepChange(question, index, change),\n index: index,\n intl: intl,\n });\n };\n\n const { modalView } = props;\n\n const formQuestionsData = getFormQuestionsData();\n\n if (!formQuestionsData.length) {\n return (\n \n There are no questions available...\n \n );\n }\n\n const isWizardless = formQuestionsData.every(\n (question) => !FormUtils.isWizardStep(question)\n );\n\n if (modalView) {\n return (\n \n {isWizardless ? renderWizardlessForm() : }\n \n );\n }\n\n return isWizardless ? renderWizardlessForm() : ;\n});\n\nexport default FormManager;\n","import React from \"react\";\nimport { Alert, Accordion, Card, Button } from \"react-bootstrap\";\nimport { IntlContext } from \"../contexts/IntlContextProvider\";\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n errorLabel: null,\n errorDetails: null,\n };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true, error: error };\n }\n\n componentDidCatch(errorLabel, errorDetails) {\n this.setState({\n errorLabel: errorLabel,\n errorDetails: errorDetails,\n });\n }\n\n render() {\n if (this.state.hasError) {\n const { lang } = this.context;\n return (\n \n
\n \n {lang[\"error.default_message\"] || \"Something went wrong.\"}\n \n {this.state.errorLabel && this.state.errorLabel.toString()}
\n \n
\n \n \n \n {lang[\"error.view_details\"] || \"View Error Details\"}\n \n \n \n \n \n {this.state.errorDetails &&\n this.state.errorDetails.componentStack}\n \n \n \n \n \n