From ee4b281b7bd835f6e5bc6f427eaa60f236ca96e4 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 15:16:44 +0100
Subject: [PATCH 01/12] Add padding on the right of the text input depending on
 the size of the buttons div

---
 .../js/interview/components/main/widget/TextInput.js     | 9 ++++++++-
 rdmo/projects/assets/scss/interview.scss                 | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
index 44b4f3ef57..6e16be15b9 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
@@ -15,6 +15,13 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   useEffect(() => {setInputValue(value.text)}, [value.text])
   useFocusEffect(ref, value.focus)
+  useLayoutEffect(() => {
+    if (ref.current) {
+      // add a right padding of the size of the buttons div, plus some space for the success indicator
+      const buttonsWidth = ref.current.previousElementSibling.offsetWidth + 20
+      ref.current.style.paddingRight = `${buttonsWidth}px`
+    }
+  }, [buttons])
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 8e601ea3ec..0b11c17eaa 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -227,6 +227,10 @@
         text-overflow: ellipsis;
     }
 
+    input[type="text"] {
+        text-overflow:ellipsis;
+    }
+
     .radio,
     .checkbox {
         margin: 0;

From bb8c9c782d12d73f938286098c229dfef67e44ae Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 16:05:43 +0100
Subject: [PATCH 02/12] Move buttons to the bottom for the TextareaInput
 component

---
 .../components/main/widget/CheckboxWidget.js       |  2 +-
 .../interview/components/main/widget/DateInput.js  |  2 +-
 .../interview/components/main/widget/FileInput.js  |  2 +-
 .../interview/components/main/widget/RadioInput.js |  2 +-
 .../interview/components/main/widget/RangeInput.js |  1 +
 .../components/main/widget/SelectInput.js          |  2 +-
 .../interview/components/main/widget/TextInput.js  |  2 +-
 .../components/main/widget/TextareaInput.js        |  4 ++--
 .../interview/components/main/widget/YesNoInput.js |  2 +-
 rdmo/projects/assets/scss/interview.scss           | 14 ++++++++++++--
 10 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
index 6c411c3abb..d7652c44b2 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -39,7 +39,7 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
   return (
     <div className="interview-widgets">
       <div className="interview-widget">
-        <div className="interview-input">
+        <div className="interview-input checkbox-input">
           <div className="buttons-wrapper">
             <div className="checkbox-control">
               {
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
index 20e5f89b69..da4d37b26c 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
@@ -52,7 +52,7 @@ const DateInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input date-input">
       <div className="buttons-wrapper">
         {buttons}
         <DatePicker
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
index 51fa03202c..cfeeaa0e49 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
@@ -17,7 +17,7 @@ const FileInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input file-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className="file-control">
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
index d119a81452..1590ac4bb4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
@@ -44,7 +44,7 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input radio-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
index 7f28d9f28b..dc86dc4e16 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -18,6 +18,7 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   const classnames = classNames({
     'interview-input': true,
+    'range-input': true,
     'range': true,
     'default': isDefaultValue(question, value)
   })
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
index b53f1f6baf..a037a5eeff 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
@@ -105,7 +105,7 @@ const SelectInput = ({ question, value, options, disabled, creatable, updateValu
   }
 
   return (
-    <div className="interview-input">
+    <div className="interview-input select-input">
       {
         creatable ? (
           isAsync ? (
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
index 6e16be15b9..3a122f35e7 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -33,7 +33,7 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input text-input">
       <div className="buttons-wrapper">
         {buttons}
         <input
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
index bc8cf49437..d3e2136728 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
@@ -26,9 +26,8 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input textarea-input">
       <div className="buttons-wrapper">
-        {buttons}
         <textarea
           ref={ref}
           rows={6}
@@ -40,6 +39,7 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
             handleChange(value, event.target.value)
           }}
         />
+        {buttons}
       </div>
       <Unit unit={question.unit} />
     </div>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
index 7216673298..edd2add2b4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
@@ -22,7 +22,7 @@ const YesNoInput = ({ question, value, disabled, updateValue, buttons }) => {
   })
 
   return (
-    <div className="interview-input">
+    <div className="interview-input yesno-input">
       <div className="buttons-wrapper">
         {buttons}
         <div className={classnames}>
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 0b11c17eaa..6cd678e37d 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -165,8 +165,9 @@
         }
     }
 
-    &:has(.react-select) {
+    &.select-input {
         .buttons {
+            // in a select widget, additional space is reserved for the dropdown icon
             position: absolute;
             right: 62px;
             margin-top: 2px;
@@ -174,6 +175,15 @@
         }
     }
 
+    &.textarea-input {
+        .buttons {
+            // in a textarea widget, the buttons are positioned at the bottom
+            top: auto;
+            height: 32px;
+            bottom: 0;
+        }
+    }
+
     .buttons {
         display: flex;
         gap: 10px;
@@ -228,7 +238,7 @@
     }
 
     input[type="text"] {
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
     }
 
     .radio,

From 58243a81fdde91aaa45d7bb2eb704cb46efdaa9f Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 18:20:37 +0100
Subject: [PATCH 03/12] Improve range input component

---
 .../components/main/widget/RangeInput.js      | 30 ++++++++++++++-----
 rdmo/projects/assets/scss/interview.scss      | 18 ++++++-----
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
index dc86dc4e16..ed4fb438ac 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -1,16 +1,32 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useDebouncedCallback } from 'use-debounce'
 import classNames from 'classnames'
-import { isEmpty } from 'lodash'
+import { isNil, toString } from 'lodash'
 
 import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
 
 const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
+  const ref = useRef(null)
   const [inputValue, setInputValue] = useState('')
-  useEffect(() => {setInputValue(value.text)}, [value.text])
+
+  useEffect(() => setInputValue(value.text), [value.text])
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const unitElement = ref.current.nextElementSibling
+
+      const unitWidth = (
+        isNil(unitElement.lastChild) ? unitElement.lastChild.offsetWidth : 0
+      ) + (
+        isNil(question.maximum) ? 30 : toString(question.maximum).length * 10
+      )
+
+      unitElement.style.flex = `0 0 ${unitWidth}px`
+    }
+  }, [question])
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
@@ -19,17 +35,17 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
   const classnames = classNames({
     'interview-input': true,
     'range-input': true,
-    'range': true,
     'default': isDefaultValue(question, value)
   })
 
   return (
     <div className={classnames}>
       <input
+        ref={ref}
         type="range"
-        min={isEmpty(question.minimum) ? '0' : question.minimum}
-        max={isEmpty(question.maximum) ? '100' : question.maximum}
-        step={isEmpty(question.step) ? '1' : question.step}
+        min={isNil(question.minimum) ? '0' : question.minimum}
+        max={isNil(question.maximum) ? '100' : question.maximum}
+        step={isNil(question.step) ? '1' : question.step}
         disabled={disabled}
         value={inputValue}
         onChange={(event) => {
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 6cd678e37d..c459208555 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -165,6 +165,12 @@
         }
     }
 
+    .text-input {
+        input[type="text"] {
+            text-overflow: ellipsis;
+        }
+    }
+
     &.select-input {
         .buttons {
             // in a select widget, additional space is reserved for the dropdown icon
@@ -226,19 +232,15 @@
     }
 
     .unit {
-        padding: 6px 12px;
-        width: 120px;
+        padding: 6px 0;
         height: 34px;
 
         cursor: help;
 
+        text-align: right;
+
         white-space: nowrap;
         overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    input[type="text"] {
-        text-overflow: ellipsis;
     }
 
     .radio,
@@ -277,7 +279,7 @@
         }
     }
 
-    .range {
+    .range-input {
         height: 34px;  // same as form-control
 
         input[type='range'] {

From 009022a5c4bd89c3e979cf58f16bda71759241a6 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 31 Jan 2025 19:02:03 +0100
Subject: [PATCH 04/12] Move question contact button

---
 .../components/main/question/Question.js      |  6 ++++--
 .../main/question/QuestionContact.js          |  2 +-
 rdmo/projects/assets/scss/interview.scss      | 19 +++++++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
index d760d32bf3..6827a12a5c 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/Question.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -17,9 +17,11 @@ 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} />
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
index 32b3cd1382..06b7a00697 100644
--- 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/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index c459208555..e61981ab45 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -131,6 +131,14 @@
     p {
         margin-bottom: 5px;
     }
+
+    .interview-question-text {
+        margin-bottom: 10px;
+
+        .form-label {
+            display: inline;
+        }
+    }
 }
 
 .interview-questionset {
@@ -401,13 +409,16 @@
     color: #777;
 }
 
-.btn-contact {
-    float: right;
+.btn.btn-contact {
     opacity: 0.8;
-    line-height: 20px;
-    font-size: 14px;
+    line-height: 16px;
 
     padding: 0;
+    border: none;
+    border-radius: 0;
+
+    margin-left: 10px;
+    margin-top: -3px;
 
     &:hover {
         opacity: 1;

From a532e8b60ab268dc1d7ffa5dcd39755dfd15ea78 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 14:04:17 +0100
Subject: [PATCH 05/12] Fix use optionIndex as collection_index for checkboxes

---
 .../js/interview/actions/interviewActions.js    | 14 ++++++++------
 .../components/main/widget/CheckboxInput.js     | 15 +++++++++------
 .../components/main/widget/CheckboxWidget.js    |  7 +------
 .../projects/assets/js/interview/utils/value.js | 17 ++++++++++++-----
 rdmo/projects/validators.py                     |  9 ++++++---
 5 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index 31d43a85c2..66e57e8732 100644
--- 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/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
index 23d1311494..ff665bc20f 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
@@ -8,20 +8,22 @@ import AdditionalTextareaInput from './common/AdditionalTextareaInput'
 import OptionHelp from './common/OptionHelp'
 import OptionText from './common/OptionText'
 
-const CheckboxInput = ({ question, value, option, disabled, onCreate, onUpdate, onDelete }) => {
+const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreate, onUpdate, onDelete }) => {
 
   const checked = !isNil(value)
 
-  const handleCreate = (option, additionalInput) => {
+  const handleCreate = (option, optionIndex, additionalInput) => {
   if (option.has_provider) {
       onCreate([{
         external_id: option.id,
-        text: option.text
+        text: option.text,
+        collection_index: optionIndex
       }])
     } else {
       onCreate([{
         option: option.id,
-        text: additionalInput
+        text: additionalInput,
+        collection_index: optionIndex
       }])
     }
   }
@@ -30,7 +32,7 @@ const CheckboxInput = ({ question, value, option, disabled, onCreate, onUpdate,
     if (checked) {
       onDelete(value)
     } else {
-      handleCreate(option)
+      handleCreate(option, optionIndex)
     }
   }
 
@@ -52,7 +54,7 @@ const CheckboxInput = ({ question, value, option, disabled, onCreate, onUpdate,
         })
       }
     } else {
-      handleCreate(option, additionalInput)
+      handleCreate(option, optionIndex, additionalInput)
     }
   }, 500)
 
@@ -100,6 +102,7 @@ CheckboxInput.propTypes = {
   question: PropTypes.object,
   value: PropTypes.object,
   option: PropTypes.object,
+  optionIndex: PropTypes.object,
   disabled: PropTypes.bool,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
index d7652c44b2..68f0d0935f 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { maxBy } from 'lodash'
 
 import { gatherOptions } from '../../../utils/options'
 
@@ -16,21 +15,16 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
                           createValue, updateValue, deleteValue, copyValue }) => {
 
   const handleCreateValue = (attrsList) => {
-    const lastValue = maxBy(values, (v) => v.collection_index)
-
-    let collectionIndex = lastValue ? lastValue.collection_index + 1 : 0
     attrsList.forEach(attrs => {
       createValue({
         attribute: question.attribute,
         set_prefix: currentSet.set_prefix,
         set_index: currentSet.set_index,
-        collection_index: collectionIndex,
         set_collection: question.set_collection,
         unit: question.unit,
         value_type: question.value_type,
         ...attrs
       }, true)
-      collectionIndex += 1
     })
   }
 
@@ -54,6 +48,7 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
                         question={question}
                         value={value}
                         option={option}
+                        optionIndex={optionIndex}
                         disabled={disabled}
                         onCreate={handleCreateValue}
                         onUpdate={updateValue}
diff --git a/rdmo/projects/assets/js/interview/utils/value.js b/rdmo/projects/assets/js/interview/utils/value.js
index 5723f8644b..aaa2b6538b 100644
--- a/rdmo/projects/assets/js/interview/utils/value.js
+++ b/rdmo/projects/assets/js/interview/utils/value.js
@@ -91,12 +91,19 @@ const activateFirstValue = (page, values) => {
   }
 }
 
-const compareValues = (a, b) => {
+const compareValues = (a, b, widget_type = null) => {
   if (isNil(a.id) || isNil(b.id)) {
-    return (a.attribute == b.attribute) &&
-           (a.set_prefix == b.set_prefix) &&
-           (a.set_index == b.set_index) &&
-           (a.collection_index == b.collection_index)
+    if (widget_type === 'checkbox') {
+      return (a.attribute == b.attribute) &&
+             (a.set_prefix == b.set_prefix) &&
+             (a.set_index == b.set_index) &&
+             (a.option == b.option)
+    } else {
+      return (a.attribute == b.attribute) &&
+             (a.set_prefix == b.set_prefix) &&
+             (a.set_index == b.set_index) &&
+             (a.collection_index == b.collection_index)
+    }
   } else {
     return a.id == b.id
   }
diff --git a/rdmo/projects/validators.py b/rdmo/projects/validators.py
index e3bd382923..6153d650d1 100644
--- a/rdmo/projects/validators.py
+++ b/rdmo/projects/validators.py
@@ -55,14 +55,17 @@ def __call__(self, data, serializer):
             get_kwargs = {
                 'attribute': data.get('attribute'),
                 'set_prefix': data.get('set_prefix'),
-                'set_index': data.get('set_index'),
-                'collection_index': data.get('collection_index')
+                'set_index': data.get('set_index')
             }
 
-            # for checkboxes, check only values with the same option. the widget_type is provided with the post request
+            # check the widget type, which is provided with the post request
             widget_type = serializer.context['view'].request.data.get('widget_type')
             if widget_type == 'checkbox':
+                # for checkboxes, fail if a value with the same option exist
                 get_kwargs['option'] = data.get('option')
+            else:
+                # for all other widget_types, fail if a value with the same collection_index exist
+                get_kwargs['collection_index'] = data.get('collection_index')
 
             try:
                 serializer.context['view'].project.values.filter(snapshot=None).get(**get_kwargs)

From 1017b1e3e4e14028c4f95df4a2eb650038eb8009 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 14:17:19 +0100
Subject: [PATCH 06/12] Fix sidebar

---
 .../assets/js/interview/components/sidebar/Navigation.js   | 7 ++++---
 rdmo/projects/assets/js/interview/containers/Sidebar.js    | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
index aea883f470..c7f5826aa5 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
@@ -6,7 +6,7 @@ import Html from 'rdmo/core/assets/js/components/Html'
 
 import NavigationLink from './NavigationLink'
 
-const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
+const Navigation = ({ overview, currentPage, navigation, help, fetchPage }) => {
   return (
     <>
       <h2>{gettext('Navigation')}</h2>
@@ -18,7 +18,7 @@ const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
               <li key={sectionIndex}>
                 <NavigationLink
                   element={section}
-                  href={`/projects/12/interview/${section.first}/`}
+                  href={`/projects/${overview.id}/interview/${section.first}/`}
                   onClick={() => fetchPage(section.first)}
                 />
                 {
@@ -33,7 +33,7 @@ const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
                                 page.show ? (
                                   <NavigationLink
                                     element={page}
-                                    href={`/projects/12/interview/${page.id}/`}
+                                    href={`/projects/${overview.id}/interview/${page.id}/`}
                                     onClick={() => fetchPage(page.id)}
                                   />
                                 ) : (
@@ -57,6 +57,7 @@ const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
 }
 
 Navigation.propTypes = {
+  overview: PropTypes.object.isRequired,
   currentPage: PropTypes.object,
   navigation: PropTypes.array.isRequired,
   help: PropTypes.string.isRequired,
diff --git a/rdmo/projects/assets/js/interview/containers/Sidebar.js b/rdmo/projects/assets/js/interview/containers/Sidebar.js
index 6c209eb41e..2ef8d5aa22 100644
--- a/rdmo/projects/assets/js/interview/containers/Sidebar.js
+++ b/rdmo/projects/assets/js/interview/containers/Sidebar.js
@@ -33,6 +33,7 @@ const Sidebar = ({ config, settings, templates, user, project, interview, config
           help={templates.project_interview_buttons_help}
           fetchPage={interviewActions.fetchPage} />
         <Navigation
+          overview={project.overview}
           currentPage={interview.page}
           navigation={interview.navigation}
           help={templates.project_interview_navigation_help}

From 32abdd334d19c49592e2135cc9b5e7ad31fc249c Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 14:58:08 +0100
Subject: [PATCH 07/12] Fix copy_project

---
 rdmo/projects/utils.py | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/rdmo/projects/utils.py b/rdmo/projects/utils.py
index 8a446deb2d..15cf7c1c25 100644
--- a/rdmo/projects/utils.py
+++ b/rdmo/projects/utils.py
@@ -61,27 +61,29 @@ def check_options(project, value):
     return True
 
 
-def copy_project(project, site, owners):
-    from .models import Membership, Value  # to prevent circular inclusion
+def copy_project(instance, site, owners):
+    from .models import Membership, Project, Value  # to prevent circular inclusion
 
     timestamp = now()
 
-    tasks = project.tasks.all()
-    views = project.views.all()
+    tasks = instance.tasks.all()
+    views = instance.views.all()
 
-    values = project.values.filter(snapshot=None)
+    values = instance.values.filter(snapshot=None)
     snapshots = {
-        snapshot: project.values.filter(snapshot=snapshot)
-        for snapshot in project.snapshots.all()
+        snapshot: instance.values.filter(snapshot=snapshot)
+        for snapshot in instance.snapshots.all()
     }
 
-    # unset the id, set current site and update timestamps
-    project.id = None
-    project.site = site
-    project.created = timestamp
-
-    # save the new project
-    project.save()
+    # a completely new project instance needs to be created in order for mptt to work
+    project = Project.objects.create(
+        parent=instance.parent,
+        site=instance.site,
+        title=instance.title,
+        description=instance.description,
+        catalog=instance.catalog,
+        created=timestamp
+    )
 
     # save project tasks
     for task in tasks:

From be2badd884907382e8065d9c74c187d795dcf57a Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 15:12:29 +0100
Subject: [PATCH 08/12] Fix checkbox validator test

---
 rdmo/projects/tests/test_validator_conflict.py | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/rdmo/projects/tests/test_validator_conflict.py b/rdmo/projects/tests/test_validator_conflict.py
index c6b97761b4..17f2e31bab 100644
--- a/rdmo/projects/tests/test_validator_conflict.py
+++ b/rdmo/projects/tests/test_validator_conflict.py
@@ -4,12 +4,15 @@
 
 from rest_framework.exceptions import ValidationError as RestFameworkValidationError
 
+from rdmo.options.models import Option
+
 from ..models import Project, Value
 from ..serializers.v1 import ValueSerializer
 from ..validators import ValueConflictValidator
 
 project_id = 1
 attribute_path = attribute__path='individual/single/text'
+option_path = 'one_two_three/one'
 
 
 def test_serializer_create(db):
@@ -138,12 +141,7 @@ def test_serializer_create_checkbox(db):
         attribute__path='individual/collection/checkbox',
         collection_index=0
     )
-    value2 = Value.objects.get(
-        project_id=project_id,
-        snapshot=None,
-        attribute__path='individual/collection/checkbox',
-        collection_index=2
-    )
+    option = Option.objects.get(uri_path=option_path)
 
     class MockedRequest:
         data = {
@@ -163,7 +161,7 @@ class MockedView:
         'set_prefix': value.set_prefix,
         'set_index': value.set_index,
         'collection_index': value.collection_index,
-        'option': value2.option
+        'option': option.id
     }, serializer)
 
 

From b44ea2cee36176fde0761c13347d6ac047d57c1a Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 15:14:33 +0100
Subject: [PATCH 09/12] Rename Breadcrump to Breadcrumb

---
 .../components/main/{Breadcrump.js => Breadcrumb.js}        | 6 +++---
 rdmo/projects/assets/js/interview/containers/Main.js        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename rdmo/projects/assets/js/interview/components/main/{Breadcrump.js => Breadcrumb.js} (89%)

diff --git a/rdmo/projects/assets/js/interview/components/main/Breadcrump.js b/rdmo/projects/assets/js/interview/components/main/Breadcrumb.js
similarity index 89%
rename from rdmo/projects/assets/js/interview/components/main/Breadcrump.js
rename to rdmo/projects/assets/js/interview/components/main/Breadcrumb.js
index 9479b63873..a47394aa97 100644
--- a/rdmo/projects/assets/js/interview/components/main/Breadcrump.js
+++ b/rdmo/projects/assets/js/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/containers/Main.js b/rdmo/projects/assets/js/interview/containers/Main.js
index 0d675e9241..5fb0ada894 100644
--- a/rdmo/projects/assets/js/interview/containers/Main.js
+++ b/rdmo/projects/assets/js/interview/containers/Main.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 
 import { hasErrors, isReady } from '../utils/interview'
 
-import Breadcrump from '../components/main/Breadcrump'
+import Breadcrumb from '../components/main/Breadcrumb'
 import Contact from '../components/main/Contact'
 import Done from '../components/main/Done'
 import Page from '../components/main/page/Page'
@@ -29,7 +29,7 @@ const Main = ({ config, settings, templates, project, interview, contact,
   } else if (isReady(interview)) {
     return (
       <div>
-        <Breadcrump
+        <Breadcrumb
           overview={project.overview}
           page={interview.page}
           fetchPage={interviewActions.fetchPage}

From 30ca324df2e40f55125449edfa19ac2830b9f5a3 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 16:15:53 +0100
Subject: [PATCH 10/12] Fix interview for read only access

---
 .../js/interview/components/main/page/Page.js |   1 +
 .../components/main/page/PageHead.js          | 148 ++++++++++--------
 .../components/main/question/Question.js      |   2 +-
 .../main/question/QuestionAddValueHelp.js     |   5 +-
 .../main/question/QuestionReuseValue.js       |   5 +-
 .../main/question/QuestionReuseValues.js      |   5 +-
 .../main/questionset/QuestionSet.js           |  14 +-
 .../main/questionset/QuestionSetAddSet.js     |   5 +-
 .../main/questionset/QuestionSetAddSetHelp.js |   7 +-
 .../main/questionset/QuestionSetCopySet.js    |   5 +-
 .../main/questionset/QuestionSetRemoveSet.js  |   5 +-
 .../components/main/widget/CheckboxInput.js   |   7 +-
 .../components/main/widget/CheckboxWidget.js  |   1 +
 .../components/main/widget/DateWidget.js      |   8 +-
 .../components/main/widget/FileInput.js       |   2 +-
 .../components/main/widget/RadioInput.js      |   4 +-
 .../components/main/widget/RadioWidget.js     |   8 +-
 .../components/main/widget/RangeWidget.js     |   8 +-
 .../components/main/widget/SelectWidget.js    |   8 +-
 .../components/main/widget/TextWidget.js      |   8 +-
 .../components/main/widget/TextareaWidget.js  |   8 +-
 .../components/main/widget/YesNoInput.js      |   6 +-
 .../components/main/widget/YesNoWidget.js     |   8 +-
 rdmo/projects/assets/scss/interview.scss      |   4 +
 24 files changed, 184 insertions(+), 98 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
index d276ff8c3c..6358fb7e5a 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/Page.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -36,6 +36,7 @@ const Page = ({ config, settings, templates, overview, page, sets, values, fetch
         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
index f30e0547d5..7cbb5f4b6b 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
@@ -10,7 +10,7 @@ import PageHeadDeleteModal from './PageHeadDeleteModal'
 import PageHeadFormModal from './PageHeadFormModal'
 import PageHeadReuseModal from './PageHeadReuseModal'
 
-const PageHead = ({ templates, page, sets, values, currentSet,
+const PageHead = ({ templates, page, sets, values, disabled, currentSet,
                     activateSet, createSet, updateSet, deleteSet, copySet }) => {
 
   const currentSetValue = isNil(currentSet) ? null : (
@@ -84,7 +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} />
+      {!disabled && <Html html={templates.project_interview_page_tabs_help} />}
       {
         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/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
index 6827a12a5c..c902d1a18e 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/Question.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -24,7 +24,7 @@ const Question = ({ settings, templates, page, question, sets, values, siblings,
       </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
index 8a6428ee32..0d8e636663 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
@@ -3,8 +3,8 @@ 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} />
   )
 }
@@ -12,6 +12,7 @@ const QuestionAddValueHelp = ({ templates, question }) => {
 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/QuestionReuseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js
index c8346d8661..5505091755 100644
--- 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
 }
 
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
index 6c1c3a73aa..c2bb8bec7d 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
@@ -9,7 +9,7 @@ import Modal from 'rdmo/core/assets/js/components/Modal'
 
 import Search from '../Search'
 
-const QuestionReuseValues = ({ page, question, values, createValues, updateValue, deleteValue }) => {
+const QuestionReuseValues = ({ page, question, values, disabled, createValues, updateValue, deleteValue }) => {
 
   const initialFormValues = {
     value: '',
@@ -75,7 +75,7 @@ const QuestionReuseValues = ({ page, question, values, createValues, updateValue
     }
   }, [formValues, formValues.value])
 
-  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>
@@ -110,6 +110,7 @@ QuestionReuseValues.propTypes = {
   page: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired,
+  disabled: PropTypes.bool.isRequired,
   createValues: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,
   deleteValue: PropTypes.func.isRequired
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
index 57b2cbd691..6c92a4c4bf 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
@@ -30,14 +30,14 @@ const QuestionSet = ({ settings, templates, page, questionset, sets, values, dis
       </div>
       <QuestionSetHelp questionset={questionset} />
       <QuestionSetHelpTemplate templates={templates} />
-      <QuestionSetAddSetHelp templates={templates} questionset={questionset} />
+      <QuestionSetAddSetHelp templates={templates} questionset={questionset} disabled={disabled} />
       <div>
         {
           currentSets.map((set, setIndex) => (
             <div key={setIndex} className="interview-block">
               <div className="interview-block-options">
-                <QuestionSetCopySet questionset={questionset} sets={sets} currentSet={set} copySet={copySet} />
-                <QuestionSetRemoveSet questionset={questionset} currentSet={set} deleteSet={deleteSet} />
+                <QuestionSetCopySet questionset={questionset} sets={sets} currentSet={set} disabled={disabled} copySet={copySet} />
+                <QuestionSetRemoveSet questionset={questionset} currentSet={set} disabled={disabled} deleteSet={deleteSet} />
               </div>
               <div className="row">
                 {
@@ -108,7 +108,13 @@ const QuestionSet = ({ settings, templates, page, questionset, sets, values, dis
         }
       </div>
 
-      <QuestionSetAddSet questionset={questionset} sets={currentSets} setPrefix={setPrefix} createSet={createSet} />
+      <QuestionSetAddSet
+        questionset={questionset}
+        sets={currentSets}
+        setPrefix={setPrefix}
+        disabled={disabled}
+        createSet={createSet}
+      />
     </div>
   )
 }
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
index 2141af09eb..e7434998bf 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { capitalize, maxBy } from 'lodash'
 
-const QuestionSetAddSet = ({ questionset, sets, setPrefix, createSet }) => {
+const QuestionSetAddSet = ({ questionset, sets, setPrefix, disabled, createSet }) => {
   const handleClick = () => {
     const lastSet = maxBy(sets, (s) => s.set_index)
     const setIndex = lastSet ? lastSet.set_index + 1 : 0
@@ -13,7 +13,7 @@ const QuestionSetAddSet = ({ questionset, sets, setPrefix, createSet }) => {
     })
   }
 
-  return questionset.is_collection && (
+  return !disabled && questionset.is_collection && (
     <button type="button" className="btn btn-success btn-add-set" onClick={handleClick}>
       <i className="fa fa-plus fa-btn"></i> {capitalize(questionset.verbose_name)}
     </button>
@@ -24,6 +24,7 @@ QuestionSetAddSet.propTypes = {
   questionset: PropTypes.object.isRequired,
   sets: PropTypes.array.isRequired,
   setPrefix: PropTypes.string.isRequired,
+  disabled: PropTypes.bool.isRequired,
   createSet: PropTypes.func.isRequired
 }
 
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js
index adbd972755..5374b0708d 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
 
 import Html from 'rdmo/core/assets/js/components/Html'
 
-const QuestionSetAddSetHelp = ({ templates, questionset }) => {
-  return questionset.is_collection && (
+const QuestionSetAddSetHelp = ({ templates, questionset, disabled }) => {
+  return !disabled && questionset.is_collection && (
     <Html html={templates.project_interview_add_set_help} />
   )
 }
 
 QuestionSetAddSetHelp.propTypes = {
   templates: PropTypes.object.isRequired,
-  questionset: PropTypes.object.isRequired
+  questionset: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired
 }
 
 export default QuestionSetAddSetHelp
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
index 3c5b1fc24b..44370dc259 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
@@ -6,7 +6,7 @@ import Modal from 'rdmo/core/assets/js/components/Modal'
 
 import useModal from 'rdmo/core/assets/js/hooks/useModal'
 
-const QuestionCopySet = ({ questionset, sets, currentSet, copySet }) => {
+const QuestionCopySet = ({ questionset, sets, currentSet, disabled, copySet }) => {
 
   const modal = useModal()
 
@@ -18,7 +18,7 @@ const QuestionCopySet = ({ questionset, sets, currentSet, copySet }) => {
     modal.close()
   }
 
-  return questionset.is_collection && (
+  return !disabled && questionset.is_collection && (
     <>
       <button type="button" className="btn btn-link btn-copy-set" onClick={modal.open}>
         <i className="fa fa-copy fa-btn"></i>
@@ -36,6 +36,7 @@ QuestionCopySet.propTypes = {
   questionset: PropTypes.object.isRequired,
   sets: PropTypes.array.isRequired,
   currentSet: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   copySet: PropTypes.func.isRequired
 }
 
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
index de8bc8377b..e2cb2d66c0 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
@@ -5,7 +5,7 @@ import useModal from 'rdmo/core/assets/js/hooks/useModal'
 
 import Modal from 'rdmo/core/assets/js/components/Modal'
 
-const QuestionRemoveSet = ({ questionset, currentSet, deleteSet }) => {
+const QuestionRemoveSet = ({ questionset, currentSet, disabled, deleteSet }) => {
 
   const modal = useModal()
 
@@ -14,7 +14,7 @@ const QuestionRemoveSet = ({ questionset, currentSet, deleteSet }) => {
     modal.close()
   }
 
-  return questionset.is_collection && (
+  return !disabled && questionset.is_collection && (
     <>
       <button type="button" className="btn btn-link btn-remove-set" onClick={modal.open}>
         <i className="fa fa-times fa-btn"></i>
@@ -33,6 +33,7 @@ const QuestionRemoveSet = ({ questionset, currentSet, deleteSet }) => {
 QuestionRemoveSet.propTypes = {
   questionset: PropTypes.object.isRequired,
   currentSet: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   deleteSet: PropTypes.func.isRequired
 }
 
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
index ff665bc20f..c6e04773b5 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
 import { isEmpty, isNil } from 'lodash'
 
@@ -12,6 +13,10 @@ const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreat
 
   const checked = !isNil(value)
 
+  const classnames = classNames('checkbox', {
+    'text-muted': disabled
+  })
+
   const handleCreate = (option, optionIndex, additionalInput) => {
   if (option.has_provider) {
       onCreate([{
@@ -59,7 +64,7 @@ const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreat
   }, 500)
 
   return (
-    <div className="checkbox">
+    <div className={classnames}>
       <label>
         <input
           type="checkbox"
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
index 68f0d0935f..3e1ffdf0d2 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -71,6 +71,7 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
                 page={page}
                 question={question}
                 values={values}
+                disabled={disabled}
                 createValues={handleCreateValue}
                 updateValue={updateValue}
                 deleteValue={deleteValue}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
index fca215b288..ddaa333d40 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
@@ -29,7 +29,13 @@ const DateWidget = ({ page, question, sets, values, siblings, currentSet, disabl
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
index cfeeaa0e49..b170ea8c11 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
@@ -24,7 +24,7 @@ const FileInput = ({ question, value, disabled, updateValue, buttons }) => {
           {
             value.file_name ? (
               <div>
-                <span>{gettext('Current file: ')}</span>
+                <span className={classNames({'text-muted': disabled})}>{gettext('Current file: ')}</span>
                 <a href={value.file_url} onClick={(event) => event.stopPropagation()}>
                   {value.file_name}
                 </a>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
index 1590ac4bb4..1861ee1e74 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
@@ -38,8 +38,8 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
     })
   }, 500)
 
-  const classnames = classNames({
-    'radio-control': true,
+  const classnames = classNames('radio-control', {
+    'text-muted': disabled,
     'default': isDefaultValue(question, value)
   })
 
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
index 36716eb07a..5a33130ee7 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
@@ -32,7 +32,13 @@ const RadioWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
index bf45391e4f..07313c5705 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
@@ -42,7 +42,13 @@ const RangeWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={handleEraseValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
index e90898a32c..91f63bc994 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
@@ -32,7 +32,13 @@ const SelectWidget = ({ page, question, sets, values, siblings, currentSet, disa
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionRemoveValue
                       question={question}
                       values={values}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
index f5585d5ec0..32c9cc7740 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
@@ -28,7 +28,13 @@ const TextWidget = ({ page, question, sets, values, siblings, currentSet, disabl
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionRemoveValue
                       question={question}
                       values={values}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
index 890e2bd63e..f2aa544f54 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
@@ -28,7 +28,13 @@ const TextareaWidget = ({ page, question, sets, values, siblings, currentSet, di
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionRemoveValue
                       question={question}
                       values={values}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
index edd2add2b4..c466ab2eae 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
@@ -14,10 +14,8 @@ const YesNoInput = ({ question, value, disabled, updateValue, buttons }) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
   }
 
-  const classnames = classNames({
-    'radio-control': true,
-    'radio': true,
-    'yesno': true,
+  const classnames = classNames('radio-control radio yesno', {
+    'text-muted': disabled,
     'default': isDefaultValue(question, value)
   })
 
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
index a53cf56b3e..f71854d421 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
@@ -29,7 +29,13 @@ const YesNoWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue
+                      page={page}
+                      question={question}
+                      value={value}
+                      disabled={disabled}
+                      updateValue={updateValue}
+                    />
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index e61981ab45..d276a900d3 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -335,6 +335,10 @@
             padding: 20px;
             margin-top: 6px;
             cursor: copy;
+
+            &.disabled {
+                cursor: not-allowed;
+            }
         }
     }
 

From 607e5c22070c894938faa7ecfc4afcf401c8a5e5 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 16:49:15 +0100
Subject: [PATCH 11/12] Fix/improve help texts in interview

---
 .../js/interview/components/main/page/Page.js    |  5 ++---
 .../interview/components/main/page/PageHead.js   |  6 +++---
 .../interview/components/main/page/PageHelp.js   | 16 ++++++++++++++++
 .../components/main/page/PageTabsHelp.js         | 15 +++++++++++++++
 .../components/main/question/QuestionHelp.js     |  7 ++++---
 .../main/questionset/QuestionSetHelp.js          |  9 +++------
 rdmo/projects/assets/scss/interview.scss         | 16 ++++++++++++++--
 .../projects/project_interview_add_set_help.html |  2 +-
 .../project_interview_add_value_help.html        |  2 +-
 .../project_interview_navigation_help.html       |  2 +-
 .../project_interview_page_tabs_help.html        |  2 +-
 11 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
 create mode 100644 rdmo/projects/assets/js/interview/components/main/page/PageTabsHelp.js

diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
index 6358fb7e5a..0aea9662f9 100644
--- 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,7 +29,7 @@ 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}
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
index 7cbb5f4b6b..ca9e9ffdb9 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
@@ -3,13 +3,14 @@ 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'
 
+import PageTabsHelp from './PageTabsHelp'
+
 const PageHead = ({ templates, page, sets, values, disabled, currentSet,
                     activateSet, createSet, updateSet, deleteSet, copySet }) => {
 
@@ -83,8 +84,7 @@ const PageHead = ({ templates, page, sets, values, disabled, currentSet,
 
   return page.is_collection && (
     <div className="interview-page-tabs">
-      <Html html={templates.project_interview_page_help} />
-      {!disabled && <Html html={templates.project_interview_page_tabs_help} />}
+      <PageTabsHelp templates={templates} page={page} disabled={disabled} />
       {
         currentSet ? (
           <>
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js b/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
new file mode 100644
index 0000000000..00d9ab1d05
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..ac5f5af391
--- /dev/null
+++ 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/QuestionHelp.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
index eec017251a..2c29b1ed05 100644
--- 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/questionset/QuestionSetHelp.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelp.js
index 23e0fb04e2..d9cbcee5bd 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelp.js
@@ -1,17 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 import { isEmpty } from 'lodash'
 
 import Html from 'rdmo/core/assets/js/components/Html'
 
 const QuestionSetHelp = ({ questionset }) => {
-  const classnames = classNames({
-    'help-text': true
-  })
-
   return !isEmpty(questionset.help) && (
-    <Html className={classnames} html={questionset.help} />
+    <div className="interview-questionset-help">
+      <Html html={questionset.help} />
+    </div>
   )
 }
 
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index d276a900d3..9b453d8694 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -60,6 +60,10 @@
     .btn-add-set {
         margin-bottom: 20px;
     }
+
+    .interview-page-help {
+        margin-bottom: 10px;
+    }
 }
 
 .interview-page-tabs {
@@ -129,7 +133,7 @@
     margin-bottom: 20px;
 
     p {
-        margin-bottom: 5px;
+        margin-bottom: 10px;
     }
 
     .interview-question-text {
@@ -139,11 +143,19 @@
             display: inline;
         }
     }
+
+    .interview-question-help {
+        margin-bottom: 10px;
+    }
 }
 
 .interview-questionset {
     .interview-questionset-label {
-        margin-bottom: 5px;
+        margin-bottom: 10px;
+    }
+
+    .interview-questionset-help {
+        margin-bottom: 10px;
     }
 }
 
diff --git a/rdmo/projects/templates/projects/project_interview_add_set_help.html b/rdmo/projects/templates/projects/project_interview_add_set_help.html
index b7de24781e..de277c5aec 100644
--- a/rdmo/projects/templates/projects/project_interview_add_set_help.html
+++ b/rdmo/projects/templates/projects/project_interview_add_set_help.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-    <p class="help-block">
+    <p class="text-muted">
         {% blocktrans trimmed %}
         Please enter your entries block by block. You can add blocks using the green button and remove them using the blue cross (&times;).
         {% endblocktrans %}
diff --git a/rdmo/projects/templates/projects/project_interview_add_value_help.html b/rdmo/projects/templates/projects/project_interview_add_value_help.html
index 345c258226..c5745550e0 100644
--- a/rdmo/projects/templates/projects/project_interview_add_value_help.html
+++ b/rdmo/projects/templates/projects/project_interview_add_value_help.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-    <p class="help-block">
+    <p class="text-muted">
         {% blocktrans trimmed %}
         Please enter your entries line by line. You can add lines using the green button and remove them using the blue cross (&times;).
         {% endblocktrans %}
diff --git a/rdmo/projects/templates/projects/project_interview_navigation_help.html b/rdmo/projects/templates/projects/project_interview_navigation_help.html
index be49c8673d..e5b8864e0f 100644
--- a/rdmo/projects/templates/projects/project_interview_navigation_help.html
+++ b/rdmo/projects/templates/projects/project_interview_navigation_help.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<p class="help-block">
+<p class="text-muted">
 {% blocktrans trimmed %}
 Grey entries will be conditionally skipped based on your input.
 {% endblocktrans %}
diff --git a/rdmo/projects/templates/projects/project_interview_page_tabs_help.html b/rdmo/projects/templates/projects/project_interview_page_tabs_help.html
index 00aac3ba6f..065dbf43b3 100644
--- a/rdmo/projects/templates/projects/project_interview_page_tabs_help.html
+++ b/rdmo/projects/templates/projects/project_interview_page_tabs_help.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-    <p class="help-block">
+    <p class="text-muted">
         {% blocktrans trimmed %}
         Please fill in the form for each tab. The same tabs may be used later on other pages. You can add a new tab using the green button. Once created, you can edit or delete tabs using the buttons in the top right corner.
         {% endblocktrans %}

From fd2a662b65a2da2d0965c1d8f4d4511d077ff4f1 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 4 Feb 2025 17:02:54 +0100
Subject: [PATCH 12/12] Fix copy_project

---
 rdmo/projects/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rdmo/projects/utils.py b/rdmo/projects/utils.py
index 15cf7c1c25..f699ed4885 100644
--- a/rdmo/projects/utils.py
+++ b/rdmo/projects/utils.py
@@ -78,7 +78,7 @@ def copy_project(instance, site, owners):
     # a completely new project instance needs to be created in order for mptt to work
     project = Project.objects.create(
         parent=instance.parent,
-        site=instance.site,
+        site=site,
         title=instance.title,
         description=instance.description,
         catalog=instance.catalog,