rdmorganiser · jochenklar · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -275,19 +275,21 @@ export function storeValue(value) {
     return {type: NOOP}
   } else {
     return (dispatch, getState) => {
-      const valueIndex = getState().interview.values.findIndex((v) => compareValues(v, value))
+      const page = getState().interview.page
+      const sets = getState().interview.sets
+      const question = page.questions.find((question) => question.attribute === value.attribute)
+      const refresh = question && question.optionsets.some((optionset) => optionset.has_refresh)
+      const widget_type = question && question.widget_type
+
+      const valueIndex = getState().interview.values.findIndex((v) => compareValues(v, value, widget_type))
       const valueFile = value.file
       const valueSuccess = value.success
 
       dispatch(addToPending(pendingId))
       dispatch(storeValueInit(valueIndex))
 
-      return ValueApi.storeValue(projectId, value)
+      return ValueApi.storeValue(projectId, { ...value, widget_type })
         .then((value) => {
-          const page = getState().interview.page
-          const sets = getState().interview.sets
-          const question = page.questions.find((question) => question.attribute === value.attribute)
-          const refresh = question && question.optionsets.some((optionset) => optionset.has_refresh)
 
           dispatch(fetchNavigation(page))
           dispatch(updateProgress())

diff --git a/...s/interview/components/main/Breadcrump.js → ...s/interview/components/main/Breadcrumb.js b/...s/interview/components/main/Breadcrump.js → ...s/interview/components/main/Breadcrumb.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 
-const Breadcrump = ({ overview, page, fetchPage }) => {
+const Breadcrumb = ({ overview, page, fetchPage }) => {
 
   const handleClick = (event) => {
     event.preventDefault()
@@ -35,10 +35,10 @@ const Breadcrump = ({ overview, page, fetchPage }) => {
   )
 }
 
-Breadcrump.propTypes = {
+Breadcrumb.propTypes = {
   overview: PropTypes.object.isRequired,
   page: PropTypes.object,
   fetchPage: PropTypes.func.isRequired
 }
 
-export default Breadcrump
+export default Breadcrumb
diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -3,13 +3,12 @@ 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'
+import PageHelp from './PageHelp'
 
 const Page = ({ config, settings, templates, overview, page, sets, values, fetchPage, fetchContact,
                 createValue, updateValue, deleteValue, copyValue,
@@ -30,12 +29,13 @@ const Page = ({ config, settings, templates, overview, page, sets, values, fetch
   return (
     <div className="interview-page">
       <h2>{page.title}</h2>
-      <Html html={page.help} />
+      <PageHelp page={page} />
       <PageHead
         templates={templates}
         page={page}
         sets={sets.filter((set) => (set.set_prefix == currentSetPrefix))}
         values={isNil(page.attribute) ? [] : values.filter((value) => (value.attribute == page.attribute))}
+        disabled={overview.read_only}
         currentSet={currentSet}
         activateSet={activateSet}
         createSet={createSet}

diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { capitalize, isEmpty, isNil, last } from 'lodash'
 
-import Html from 'rdmo/core/assets/js/components/Html'
 import useModal from 'rdmo/core/assets/js/hooks/useModal'
 
 import PageHeadDeleteModal from './PageHeadDeleteModal'
 import PageHeadFormModal from './PageHeadFormModal'
 import PageHeadReuseModal from './PageHeadReuseModal'
 
-const PageHead = ({ templates, page, sets, values, currentSet,
+import PageTabsHelp from './PageTabsHelp'
+
+const PageHead = ({ templates, page, sets, values, disabled, currentSet,
                     activateSet, createSet, updateSet, deleteSet, copySet }) => {
 
   const currentSetValue = isNil(currentSet) ? null : (
@@ -83,8 +84,7 @@ const PageHead = ({ templates, page, sets, values, currentSet,
 
   return page.is_collection && (
     <div className="interview-page-tabs">
-      <Html html={templates.project_interview_page_help} />
-      <Html html={templates.project_interview_page_tabs_help} />
+      <PageTabsHelp templates={templates} page={page} disabled={disabled} />
       {
         currentSet ? (
           <>
@@ -103,22 +103,39 @@ const PageHead = ({ templates, page, sets, values, currentSet,
                   )
                 })
               }
-              <li>
-                <a href="" title={gettext('Add tab')} className="add-set" onClick={handleOpenCreateModal}>
-                  <i className="fa fa-plus fa-btn"></i> {capitalize(page.verbose_name)}
-                </a>
-              </li>
-            </ul>
-            <div className="interview-page-tabs-buttons">
               {
-                page.attribute && (
-                  <button className="btn-link fa fa-pencil" title={gettext('Edit tab')} onClick={updateModal.open} />
+                !disabled && (
+                  <li>
+                    <a href="" title={gettext('Add tab')} className="add-set" onClick={handleOpenCreateModal}>
+                      <i className="fa fa-plus fa-btn"></i> {capitalize(page.verbose_name)}
+                    </a>
+                  </li>
                 )
               }
-              <button className="btn-link fa fa-copy" title={gettext('Copy tab')} onClick={copyModal.open} />
-              <button className="btn-link fa fa-arrow-circle-down" title={gettext('Reuse answers')} onClick={importModal.open} />
-              <button className="btn-link fa fa-trash" title={gettext('Remove tab')} onClick={deleteModal.open} />
-            </div>
+            </ul>
+            {
+              !disabled && (
+                <div className="interview-page-tabs-buttons">
+                  {
+                    page.attribute && (
+                      <button className="btn-link fa fa-pencil" title={gettext('Edit tab')} onClick={updateModal.open} />
+                    )
+                  }
+                  <button className="btn-link fa fa-copy"
+                    title={gettext('Copy tab')}
+                    onClick={copyModal.open}
+                  />
+                  <button className="btn-link fa fa-arrow-circle-down"
+                    title={gettext('Reuse answers')}
+                    onClick={importModal.open}
+                  />
+                  <button className="btn-link fa fa-trash"
+                    title={gettext('Remove tab')}
+                    onClick={deleteModal.open}
+                  />
+                </div>
+              )
+            }
           </>
         ) : (
           <button className="btn btn-success" title={gettext('Add tab')} onClick={createModal.open}>
@@ -127,55 +144,59 @@ const PageHead = ({ templates, page, sets, values, currentSet,
         )
       }
 
-      <PageHeadFormModal
-        title={gettext('Create tab')}
-        submitLabel={gettext('Create')}
-        submitColor="success"
-        show={createModal.show}
-        attribute={page.attribute}
-        reuse={true}
-        onClose={createModal.close}
-        onSubmit={handleCreate}
-      />
-      <PageHeadFormModal
-        title={gettext('Copy tab')}
-        submitLabel={gettext('Copy')}
-        submitColor="info"
-        show={copyModal.show}
-        attribute={page.attribute}
-        onClose={copyModal.close}
-        onSubmit={handleCopy}
-      />
       {
-        currentSetValue && (
-          <PageHeadFormModal
-            title={gettext('Update tab')}
-            submitLabel={gettext('Update')}
-            submitColor="primary"
-            show={updateModal.show}
-            attribute={page.attribute}
-            initial={currentSetValue.text}
-            onClose={updateModal.close}
-            onSubmit={handleUpdate}
-          />
-        )
-      }
-      {
-        currentSetValue && (
-          <PageHeadReuseModal
-            show={importModal.show}
-            attribute={page.attribute}
-            onClose={importModal.close}
-            onSubmit={handleImport}
-          />
-        )
-      }
-      <PageHeadDeleteModal
-        name={currentSetValue ? currentSetValue.text : null}
-        show={deleteModal.show}
-        onClose={deleteModal.close}
-        onSubmit={handleDelete}
-      />
+        !disabled && <>
+        <PageHeadFormModal
+          title={gettext('Create tab')}
+          submitLabel={gettext('Create')}
+          submitColor="success"
+          show={createModal.show}
+          attribute={page.attribute}
+          reuse={true}
+          onClose={createModal.close}
+          onSubmit={handleCreate}
+        />
+        <PageHeadFormModal
+          title={gettext('Copy tab')}
+          submitLabel={gettext('Copy')}
+          submitColor="info"
+          show={copyModal.show}
+          attribute={page.attribute}
+          onClose={copyModal.close}
+          onSubmit={handleCopy}
+        />
+        {
+          currentSetValue && (
+            <PageHeadFormModal
+              title={gettext('Update tab')}
+              submitLabel={gettext('Update')}
+              submitColor="primary"
+              show={updateModal.show}
+              attribute={page.attribute}
+              initial={currentSetValue.text}
+              onClose={updateModal.close}
+              onSubmit={handleUpdate}
+            />
+          )
+        }
+        {
+          currentSetValue && (
+            <PageHeadReuseModal
+              show={importModal.show}
+              attribute={page.attribute}
+              onClose={importModal.close}
+              onSubmit={handleImport}
+            />
+          )
+        }
+        <PageHeadDeleteModal
+          name={currentSetValue ? currentSetValue.text : null}
+          show={deleteModal.show}
+          onClose={deleteModal.close}
+          onSubmit={handleDelete}
+        />
+      </>
+    }
     </div>
   )
 }
@@ -185,6 +206,7 @@ PageHead.propTypes = {
   page: PropTypes.object.isRequired,
   sets: PropTypes.array.isRequired,
   values: PropTypes.array.isRequired,
+  disabled: PropTypes.bool.isRequired,
   currentSet: PropTypes.object,
   activateSet: PropTypes.func.isRequired,
   createSet: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js b/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const PageHelp = ({ page }) => {
+  return <div className="interview-page-help" >
+    <Html html={page.help} />
+  </div>
+}
+
+PageHelp.propTypes = {
+  page: PropTypes.object.isRequired
+}
+
+export default PageHelp
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageTabsHelp.js b/rdmo/projects/assets/js/interview/components/main/page/PageTabsHelp.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const PageTabsHelp = ({ templates, disabled }) => {
+  return !disabled && <Html html={templates.project_interview_page_tabs_help} />
+}
+
+PageTabsHelp.propTypes = {
+  templates: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired
+}
+
+export default PageTabsHelp
diff --git a/rdmo/projects/assets/js/interview/components/main/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -17,12 +17,14 @@ const Question = ({ settings, templates, page, question, sets, values, siblings,
                     currentSet, createValue, updateValue, deleteValue, copyValue, fetchContact }) => {
   return checkQuestion(question, currentSet) && (
     <div className={`interview-question col-md-${question.width || '12'}`}>
-      <QuestionContact settings={settings} question={question} values={values} fetchContact={fetchContact} />
       <QuestionOptional question={question} />
-      <QuestionText question={question} />
+      <div className="interview-question-text">
+        <QuestionText question={question} />
+        <QuestionContact settings={settings} question={question} values={values} fetchContact={fetchContact} />
+      </div>
       <QuestionHelp question={question} />
       <QuestionHelpTemplate templates={templates} />
-      <QuestionAddValueHelp templates={templates} question={question} />
+      <QuestionAddValueHelp templates={templates} question={question} disabled={disabled} />
       <QuestionWarning templates={templates} question={question} values={values} />
       <QuestionManagement question={question} isManager={isManager} />
       <QuestionWidget

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
 
 import Html from 'rdmo/core/assets/js/components/Html'
 
-const QuestionAddValueHelp = ({ templates, question }) => {
-  return question.is_collection && (
+const QuestionAddValueHelp = ({ templates, question, disabled }) => {
+  return !disabled && question.is_collection && (
     <Html html={templates.project_interview_add_value_help} />
   )
 }
 
 QuestionAddValueHelp.propTypes = {
   templates: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
 }
 
 export default QuestionAddValueHelp
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 const QuestionContact = ({ settings, question, values, fetchContact }) => {
   return settings.project_contact && (
-    <button className="btn btn-link btn-contact" title={gettext('Contact support.')}
+    <button className="btn btn-link btn-contact" title={gettext('Contact support')}
             onClick={() => fetchContact({ question, values })}>
       <i className="fa fa-commenting-o" aria-hidden="true"></i>
     </button>

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
@@ -5,12 +5,13 @@ import classNames from 'classnames'
 import Html from 'rdmo/core/assets/js/components/Html'
 
 const QuestionHelp = ({ question }) => {
-  const classnames = classNames({
-    'help-text': true,
+  const classnames = classNames('interview-question-help', {
     'text-muted': question.is_optional
   })
 
-  return <Html className={classnames} html={question.help} />
+  return <div className={classnames} >
+    <Html html={question.help} />
+  </div>
 }
 
 QuestionHelp.propTypes = {

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js
@@ -9,7 +9,7 @@ import Modal from 'rdmo/core/assets/js/components/Modal'
 
 import Search from '../Search'
 
-const QuestionReuseValue = ({ page, question, value, updateValue }) => {
+const QuestionReuseValue = ({ page, question, value, disabled, updateValue }) => {
   const initialFormValues = {
     value: ''
   }
@@ -63,7 +63,7 @@ const QuestionReuseValue = ({ page, question, value, updateValue }) => {
     </button>
   </>
 
-  return <>
+  return !disabled && <>
     <button type="button" className="btn btn-link btn-reuse-value" onClick={() => setShow(true)}>
       <i className="fa fa-arrow-circle-down fa-btn"></i>
     </button>
@@ -96,6 +96,7 @@ QuestionReuseValue.propTypes = {
   page: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   updateValue: PropTypes.func.isRequired
 }