gettext(
+ 'No projects matching your search.'
+ )}
+ loadingMessage={() => gettext('Loading ...')}
+ options={[]}
+ value={values.project}
+ onChange={(project) => setValues({
+ ...values,
+ value: (isEmpty(project) || project == values.project) ? values.value : '', // reset value
+ project: project
+ })}
+ getOptionValue={(project) => project}
+ getOptionLabel={(project) => project.title}
+ loadOptions={handleLoadProjects}
+ defaultOptions
+ isClearable
+ backspaceRemovesValue={true}
+ />
+
+
+
+
+
+}
+
+Search.propTypes = {
+ attribute: PropTypes.number.isRequired,
+ values: PropTypes.object.isRequired,
+ setValues: PropTypes.func.isRequired,
+ collection: PropTypes.bool
+}
+
+export default Search
diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
new file mode 100644
index 0000000000..a250256dbd
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -0,0 +1,126 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import get from 'lodash/get'
+import { isNil, minBy } from 'lodash'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import Question from '../question/Question'
+import QuestionSet from '../questionset/QuestionSet'
+
+import PageButtons from './PageButtons'
+import PageHead from './PageHead'
+
+const Page = ({ config, templates, overview, page, sets, values, fetchPage,
+ createValue, updateValue, deleteValue, copyValue,
+ activateSet, createSet, updateSet, deleteSet, copySet }) => {
+
+ const currentSetPrefix = ''
+ let currentSetIndex = page.is_collection ? get(config, 'page.currentSetIndex', 0) : 0
+ let currentSet = sets.find((set) => (set.set_prefix == currentSetPrefix && set.set_index == currentSetIndex))
+
+ // sanity check
+ if (isNil(currentSet)) {
+ currentSetIndex = get(minBy(sets, 'set_index'), 'set_index', 0)
+ currentSet = sets.find((set) => (set.set_prefix == currentSetPrefix && set.set_index == currentSetIndex))
+ }
+
+ const isManager = (overview.is_superuser || overview.is_editor || overview.is_reviewer)
+
+ return (
+
+
{page.title}
+
+ (set.set_prefix == currentSetPrefix))}
+ values={isNil(page.attribute) ? [] : values.filter((value) => (value.attribute == page.attribute))}
+ currentSet={currentSet}
+ activateSet={activateSet}
+ createSet={createSet}
+ updateSet={updateSet}
+ deleteSet={deleteSet}
+ copySet={copySet}
+ />
+
+ {
+ currentSet && (
+ page.elements.map((element, elementIndex) => {
+ if (element.model == 'questions.questionset') {
+ return (
+ element.attributes.includes(value.attribute))}
+ disabled={overview.read_only}
+ isManager={isManager}
+ parentSet={currentSet}
+ createSet={createSet}
+ updateSet={updateSet}
+ deleteSet={deleteSet}
+ copySet={copySet}
+ createValue={createValue}
+ updateValue={updateValue}
+ deleteValue={deleteValue}
+ copyValue={copyValue}
+ />
+ )
+ } else {
+ return (
+ (
+ value.attribute == element.attribute &&
+ value.set_prefix == currentSetPrefix &&
+ value.set_index == currentSetIndex
+ ))}
+ siblings={values.filter((value) => (
+ value.attribute == element.attribute &&
+ value.set_prefix == currentSetPrefix &&
+ value.set_index != currentSetIndex
+ ))}
+ disabled={overview.read_only}
+ isManager={isManager}
+ currentSet={currentSet}
+ createValue={createValue}
+ updateValue={updateValue}
+ deleteValue={deleteValue}
+ copyValue={copyValue}
+ />
+ )
+ }
+ })
+ )
+ }
+
+
+
+
+ )
+}
+
+Page.propTypes = {
+ config: PropTypes.object.isRequired,
+ templates: PropTypes.object.isRequired,
+ overview: PropTypes.object.isRequired,
+ page: PropTypes.object.isRequired,
+ sets: PropTypes.array.isRequired,
+ values: PropTypes.array.isRequired,
+ fetchPage: PropTypes.func.isRequired,
+ createValue: PropTypes.func.isRequired,
+ updateValue: PropTypes.func.isRequired,
+ deleteValue: PropTypes.func.isRequired,
+ copyValue: PropTypes.func.isRequired,
+ activateSet: PropTypes.func.isRequired,
+ createSet: PropTypes.func.isRequired,
+ updateSet: PropTypes.func.isRequired,
+ deleteSet: PropTypes.func.isRequired,
+ copySet: PropTypes.func.isRequired
+}
+
+export default Page
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js b/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js
new file mode 100644
index 0000000000..2edc0d5358
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const PageButtons = ({ page, fetchPage }) => {
+ return (
+ <>
+
+
+
+ {' '}
+ {
+ page.next_page ? (
+
+ ) : (
+
+ )
+ }
+
+
+
+
+ {
+ currentSet ? (
+ <>
+
+
+ {
+ page.attribute && (
+
+ )
+ }
+
+
+
+
+
+ ) : (
+
+ )
+ }
+
+
+
+ {
+ currentSetValue && (
+
+ )
+ }
+ {
+ currentSetValue && (
+
+ )
+ }
+
+
+ )
+}
+
+PageHead.propTypes = {
+ templates: PropTypes.object.isRequired,
+ page: PropTypes.object.isRequired,
+ sets: PropTypes.array.isRequired,
+ values: PropTypes.array.isRequired,
+ currentSet: PropTypes.object,
+ activateSet: PropTypes.func.isRequired,
+ createSet: PropTypes.func.isRequired,
+ updateSet: PropTypes.func.isRequired,
+ deleteSet: PropTypes.func.isRequired,
+ copySet: PropTypes.func.isRequired
+}
+
+export default PageHead
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js
new file mode 100644
index 0000000000..f39813f03f
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+const PageHeadDeleteModal = ({ show, onClose, onSubmit }) => {
+ return (
+
+ {gettext('You are about to permanently delete this tab.')}
+ {gettext('This includes all given answers for this tab on all pages, not just this one.')}
+ {gettext('This action cannot be undone!')}
+
+ )
+}
+
+PageHeadDeleteModal.propTypes = {
+ title: PropTypes.string.isRequired,
+ show: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+}
+
+export default PageHeadDeleteModal
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
new file mode 100644
index 0000000000..f77420583e
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, isNil } from 'lodash'
+
+import useLsState from 'rdmo/core/assets/js/hooks/useLsState'
+import useFocusEffect from '../../../hooks/useFocusEffect'
+
+import Modal from 'rdmo/core/assets/js/components/Modal'
+import Search from '../Search'
+
+const PageHeadFormModal = ({ title, submitLabel, submitColor, show, attribute, reuse, initial, onClose, onSubmit }) => {
+
+ const ref = useRef(null)
+
+ const initialValues = {
+ text: initial || '',
+ value: ''
+ }
+
+ const [values, setValues, initValues] = useLsState('rdmo.interview.reuse', initialValues, ['text', 'value'])
+ const [errors, setErrors] = useState([])
+
+ const handleSubmit = () => {
+ if (isEmpty(values.text)) {
+ setErrors({ text: true })
+ } else {
+ onSubmit(values.text, values.value)
+ }
+ }
+
+ // init the form values
+ useEffect(() => {
+ if (show && !isNil(attribute)) {
+ initValues()
+ }
+ }, [show])
+
+ // remove the hasError flag if an inputValue is entered
+ useEffect(() => {
+ if (!isEmpty(values.text)) {
+ setErrors({ text: false })
+ }
+ }, [values.text])
+
+ // focus when the modal is shown
+ useFocusEffect(ref, show)
+
+ return (
+
+ {
+ isNil(attribute) ? (
+
+ {gettext('You can add a new tab using the create button.')}
+
+ ) : (
+ <>
+
+
+
setValues({ ...values, text: event.target.value })}
+ onKeyPress={(event) => {
+ if (event.code === 'Enter') {
+ handleSubmit()
+ }
+ }}
+ />
+
+
{gettext('Please give the tab a meaningful name.')}
+
+
+
+
+
+
+ {gettext('You can populate this tab with answers from a similar tab in any ' +
+ 'project you are allowed to access.')}
+
+
+
+
+
+
+
+ {gettext('You can populate this tab with answers from a similar tab in any ' +
+ 'project you have access to. This only affects questions that ' +
+ 'don\'t already have an answer.')}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+Question.propTypes = {
+ templates: PropTypes.object.isRequired,
+ question: PropTypes.object.isRequired,
+ values: PropTypes.array.isRequired,
+ siblings: PropTypes.array,
+ disabled: PropTypes.bool.isRequired,
+ isManager: PropTypes.bool.isRequired,
+ currentSet: PropTypes.object.isRequired,
+ createValue: PropTypes.func.isRequired,
+ updateValue: PropTypes.func.isRequired,
+ deleteValue: PropTypes.func.isRequired,
+ copyValue: PropTypes.func.isRequired
+}
+
+export default Question
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
new file mode 100644
index 0000000000..bf2ee56604
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { capitalize, maxBy } from 'lodash'
+
+const AddValue = ({ question, values, currentSet, disabled, createValue }) => {
+ const handleClick = () => {
+ const lastValue = maxBy(values, (v) => v.collection_index)
+ const collectionIndex = lastValue ? lastValue.collection_index + 1 : 0
+
+ createValue({
+ attribute: question.attribute,
+ set_prefix: currentSet.set_prefix,
+ set_index: currentSet.set_index,
+ collection_index: collectionIndex,
+ set_collection: question.set_collection
+ })
+ }
+
+ return !disabled && question.is_collection && (
+
+ )
+}
+
+AddValue.propTypes = {
+ question: PropTypes.object.isRequired,
+ values: PropTypes.array.isRequired,
+ currentSet: PropTypes.object.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ createValue: PropTypes.func.isRequired
+}
+
+export default AddValue
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
new file mode 100644
index 0000000000..8a6428ee32
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const QuestionAddValueHelp = ({ templates, question }) => {
+ return question.is_collection && (
+
+ )
+}
+
+QuestionAddValueHelp.propTypes = {
+ templates: PropTypes.object.isRequired,
+ question: PropTypes.object.isRequired,
+}
+
+export default QuestionAddValueHelp
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js
new file mode 100644
index 0000000000..f943386117
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { isEmptyValue } from '../../../utils/value'
+
+const QuestionCopyValue = ({ question, value, siblings, copyValue }) => {
+ return (
+ question.set_collection &&
+ !question.is_collection &&
+ !isEmptyValue(value) &&
+ siblings.some((value) => isEmptyValue(value)) && (
+