From 3660f8ce34948f5023be40164fa875de19562ee9 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Thu, 1 Aug 2024 13:10:25 +0200
Subject: [PATCH 1/8] Refactor Template to Html component and add
 page/questionset/question help templates

---
 rdmo/core/assets/js/components/Html.js        | 20 +++++++++++++++++++
 rdmo/core/assets/js/components/Template.js    | 15 --------------
 rdmo/core/settings.py                         |  3 +++
 .../js/interview/components/main/Done.js      |  4 ++--
 .../js/interview/components/main/Errors.js    |  4 ++--
 .../js/interview/components/main/page/Page.js |  7 ++++---
 .../components/main/page/PageHead.js          |  9 +++++----
 .../components/main/page/PageHelp.js          | 15 --------------
 .../components/main/question/Question.js      |  2 ++
 .../main/question/QuestionAddValueHelp.js     |  4 ++--
 .../components/main/question/QuestionHelp.js  |  7 +++----
 .../main/question/QuestionHelpTemplate.js     | 14 +++++++++++++
 .../main/question/QuestionWarning.js          |  4 ++--
 .../main/questionset/QuestionSet.js           |  6 +++++-
 .../main/questionset/QuestionSetAddSetHelp.js |  4 ++--
 .../main/questionset/QuestionSetHelp.js       |  4 +++-
 .../questionset/QuestionSetHelpTemplate.js    | 14 +++++++++++++
 .../main/widget/common/OptionHelp.js          |  4 +++-
 .../main/widget/common/OptionText.js          |  4 +++-
 .../interview/components/sidebar/Buttons.js   |  4 ++--
 .../components/sidebar/Navigation.js          |  4 ++--
 .../interview/components/sidebar/Overview.js  |  4 ++--
 .../interview/components/sidebar/Progress.js  |  4 ++--
 rdmo/projects/assets/scss/interview.scss      | 10 ++++++++++
 .../projects/project_interview_page_help.html |  0
 .../project_interview_question_help.html      |  0
 .../project_interview_questionset_help.html   |  0
 27 files changed, 107 insertions(+), 63 deletions(-)
 create mode 100644 rdmo/core/assets/js/components/Html.js
 delete mode 100644 rdmo/core/assets/js/components/Template.js
 delete mode 100644 rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
 create mode 100644 rdmo/projects/assets/js/interview/components/main/question/QuestionHelpTemplate.js
 create mode 100644 rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelpTemplate.js
 create mode 100644 rdmo/projects/templates/projects/project_interview_page_help.html
 create mode 100644 rdmo/projects/templates/projects/project_interview_question_help.html
 create mode 100644 rdmo/projects/templates/projects/project_interview_questionset_help.html

diff --git a/rdmo/core/assets/js/components/Html.js b/rdmo/core/assets/js/components/Html.js
new file mode 100644
index 0000000000..d0f18d4fe0
--- /dev/null
+++ b/rdmo/core/assets/js/components/Html.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+const Html = ({ html }) => {
+  return !isEmpty(html) && (
+    <div dangerouslySetInnerHTML={{ __html: html }} />
+  )
+}
+
+Html.defaultProps = {
+  className: ''
+}
+
+Html.propTypes = {
+  className: PropTypes.string,
+  html: PropTypes.string
+}
+
+export default Html
diff --git a/rdmo/core/assets/js/components/Template.js b/rdmo/core/assets/js/components/Template.js
deleted file mode 100644
index 75aaaf90d6..0000000000
--- a/rdmo/core/assets/js/components/Template.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const Template = ({ template }) => {
-
-  return (
-    <div dangerouslySetInnerHTML={{ __html: template }} />
-  )
-}
-
-Template.propTypes = {
-  template: PropTypes.string.isRequired
-}
-
-export default Template
diff --git a/rdmo/core/settings.py b/rdmo/core/settings.py
index 1ff40524cb..9b1c482ad0 100644
--- a/rdmo/core/settings.py
+++ b/rdmo/core/settings.py
@@ -225,8 +225,11 @@
     'projects/project_interview_multiple_values_warning.html',
     'projects/project_interview_navigation_help.html',
     'projects/project_interview_overview_help.html',
+    'projects/project_interview_page_help.html',
     'projects/project_interview_page_tabs_help.html',
     'projects/project_interview_progress_help.html',
+    'projects/project_interview_question_help.html',
+    'projects/project_interview_questionset_help.html',
 ]
 
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
diff --git a/rdmo/projects/assets/js/interview/components/main/Done.js b/rdmo/projects/assets/js/interview/components/main/Done.js
index 3bd277e28c..7ffe6095bb 100644
--- a/rdmo/projects/assets/js/interview/components/main/Done.js
+++ b/rdmo/projects/assets/js/interview/components/main/Done.js
@@ -5,7 +5,7 @@ import baseUrl from 'rdmo/core/assets/js/utils/baseUrl'
 
 import projectId from '../../utils/projectId'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const Done = ({ templates }) => {
 
@@ -14,7 +14,7 @@ const Done = ({ templates }) => {
 
   return (
     <>
-      <Template template={templates.project_interview_done} />
+      <Html html={templates.project_interview_done} />
 
       <p>
         <a href={answersUrl}>{gettext('View answers')}</a>
diff --git a/rdmo/projects/assets/js/interview/components/main/Errors.js b/rdmo/projects/assets/js/interview/components/main/Errors.js
index d10ac5c776..3b34bc57e7 100644
--- a/rdmo/projects/assets/js/interview/components/main/Errors.js
+++ b/rdmo/projects/assets/js/interview/components/main/Errors.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import baseUrl from 'rdmo/core/assets/js/utils/baseUrl'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 import projectId from '../../utils/projectId'
 
@@ -12,7 +12,7 @@ const Errors = ({ templates, errors }) => {
 
   return (
     <>
-      <Template template={templates.project_interview_error} />
+      <Html html={templates.project_interview_error} />
 
       <ul className="well list-unstyled text-danger">
         {
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 f8c87e8fe7..8a6155c8cf 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/Page.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'
 import get from 'lodash/get'
 import { isNil } 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, templates, overview, page, sets, values, fetchPage,
                 createValue, updateValue, deleteValue,
@@ -24,10 +25,10 @@ const Page = ({ config, templates, overview, page, sets, values, fetchPage,
   return (
     <div className="interview-page">
       <h2>{page.title}</h2>
-      <PageHelp page={page} />
+      <Html html={page.help} />
       <PageHead
+        templates={templates}
         page={page}
-        help={templates.project_interview_page_tabs_help}
         sets={sets.filter((set) => (set.set_prefix == currentSetPrefix))}
         values={isNil(page.attribute) ? [] : values.filter((value) => (value.attribute == page.attribute))}
         currentSet={currentSet}
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 29776e8340..abd1f336f8 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,13 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { capitalize, isNil, last } from 'lodash'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+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'
 
-const PageHead = ({ page, help, sets, values, currentSet, activateSet, createSet, updateSet, deleteSet }) => {
+const PageHead = ({ templates, page, sets, values, currentSet, activateSet, createSet, updateSet, deleteSet }) => {
 
   const currentSetValue = isNil(currentSet) ? null : (
     values.find((value) => (
@@ -50,7 +50,8 @@ const PageHead = ({ page, help, sets, values, currentSet, activateSet, createSet
 
   return page.is_collection && (
     <div className="interview-page-tabs">
-      <Template template={help} />
+      <Html html={templates.project_interview_page_help} />
+      <Html html={templates.project_interview_page_tabs_help} />
       {
         currentSet ? (
           <>
@@ -120,8 +121,8 @@ const PageHead = ({ page, help, sets, values, currentSet, activateSet, createSet
 }
 
 PageHead.propTypes = {
+  templates: PropTypes.object.isRequired,
   page: PropTypes.object.isRequired,
-  help: PropTypes.string.isRequired,
   sets: PropTypes.array.isRequired,
   values: PropTypes.array.isRequired,
   currentSet: PropTypes.object,
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js b/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
deleted file mode 100644
index b6f197d5f2..0000000000
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { isEmpty } from 'lodash'
-
-const PageHelp = ({ page }) => {
-  return !isEmpty(page.help) && (
-    <div dangerouslySetInnerHTML={{ __html: page.help }} />
-  )
-}
-
-PageHelp.propTypes = {
-  page: PropTypes.object.isRequired
-}
-
-export default PageHelp
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 651cb4e262..cea3c70ff4 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/Question.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -5,6 +5,7 @@ import { checkQuestion } from '../../../utils/page'
 
 import QuestionAddValueHelp from './QuestionAddValueHelp'
 import QuestionHelp from './QuestionHelp'
+import QuestionHelpTemplate from './QuestionHelpTemplate'
 import QuestionManagement from './QuestionManagement'
 import QuestionOptional from './QuestionOptional'
 import QuestionText from './QuestionText'
@@ -18,6 +19,7 @@ const Question = ({ templates, question, values, disabled, isManager,
       <QuestionOptional question={question} />
       <QuestionText question={question} />
       <QuestionHelp question={question} />
+      <QuestionHelpTemplate templates={templates} />
       <QuestionAddValueHelp templates={templates} question={question} />
       <QuestionWarning templates={templates} question={question} values={values} />
       <QuestionManagement question={question} isManager={isManager} />
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 47912e57bf..8a6428ee32 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValueHelp.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const QuestionAddValueHelp = ({ templates, question }) => {
   return question.is_collection && (
-    <Template template={templates.project_interview_add_value_help} />
+    <Html html={templates.project_interview_add_value_help} />
   )
 }
 
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 620e560b6a..eec017251a 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
@@ -1,7 +1,8 @@
 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 QuestionHelp = ({ question }) => {
   const classnames = classNames({
@@ -9,9 +10,7 @@ const QuestionHelp = ({ question }) => {
     'text-muted': question.is_optional
   })
 
-  return !isEmpty(question.help) && (
-    <div className={classnames} dangerouslySetInnerHTML={{ __html: question.help }}></div>
-  )
+  return <Html className={classnames} html={question.help} />
 }
 
 QuestionHelp.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionHelpTemplate.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelpTemplate.js
new file mode 100644
index 0000000000..bcf3ef469f
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelpTemplate.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const QuestionHelpTemplate = ({ templates }) => {
+  return <Html html={templates.project_interview_question_help} />
+}
+
+QuestionHelpTemplate.propTypes = {
+  templates: PropTypes.object.isRequired
+}
+
+export default QuestionHelpTemplate
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionWarning.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionWarning.js
index 54245fbd6d..dfc91b8a49 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionWarning.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionWarning.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const QuestionWarning = ({ templates, question, values }) => {
   return !question.is_collection && values.length > 1 && (
-    <Template template={templates.project_interview_multiple_values_warning} />
+    <Html html={templates.project_interview_multiple_values_warning} />
   )
 }
 
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 52a2b7ca7f..cf52efc93f 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
@@ -9,6 +9,7 @@ import Question from '../question/Question'
 import QuestionSetAddSet from './QuestionSetAddSet'
 import QuestionSetAddSetHelp from './QuestionSetAddSetHelp'
 import QuestionSetHelp from './QuestionSetHelp'
+import QuestionSetHelpTemplate from './QuestionSetHelpTemplate'
 import QuestionSetRemoveSet from './QuestionSetRemoveSet'
 
 const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager,
@@ -23,8 +24,11 @@ const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager
 
   return checkQuestionSet(questionset, parentSet) && (
     <div className="interview-questionset col-md-12">
-      <strong>{questionset.title}</strong>
+      <div className="interview-questionset-label">
+        <strong>{questionset.title}</strong>
+      </div>
       <QuestionSetHelp questionset={questionset} />
+      <QuestionSetHelpTemplate templates={templates} />
       <QuestionSetAddSetHelp templates={templates} questionset={questionset} />
       <div>
         {
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 8a8b511265..adbd972755 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSetHelp.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const QuestionSetAddSetHelp = ({ templates, questionset }) => {
   return questionset.is_collection && (
-    <Template template={templates.project_interview_add_set_help} />
+    <Html html={templates.project_interview_add_set_help} />
   )
 }
 
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 0b7c42d6a2..23e0fb04e2 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelp.js
@@ -3,13 +3,15 @@ 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) && (
-    <div className={classnames} dangerouslySetInnerHTML={{ __html: questionset.help }}></div>
+    <Html className={classnames} html={questionset.help} />
   )
 }
 
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelpTemplate.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelpTemplate.js
new file mode 100644
index 0000000000..04e688cc72
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetHelpTemplate.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+const QuestionSetHelpTemplate = ({ templates }) => {
+  return <Html html={templates.project_interview_questionset_help} />
+}
+
+QuestionSetHelpTemplate.propTypes = {
+  templates: PropTypes.object
+}
+
+export default QuestionSetHelpTemplate
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/common/OptionHelp.js b/rdmo/projects/assets/js/interview/components/main/widget/common/OptionHelp.js
index a2777ea6a9..21f0296c14 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/common/OptionHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/common/OptionHelp.js
@@ -2,10 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
 const OptionHelp = ({ className, option }) => {
   return !isEmpty(option.help) && (
     <span className={className}>
-      <span className="option-help text-muted" dangerouslySetInnerHTML={{ __html: option.help }}></span>
+      <Html className="option-help text-muted" html={option.help} />
     </span>
   )
 }
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/common/OptionText.js b/rdmo/projects/assets/js/interview/components/main/widget/common/OptionText.js
index 08e9fcf386..a9f497ba08 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/common/OptionText.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/common/OptionText.js
@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
 const OptionText = ({ className, option }) => {
   return (
     <span className={className}>
-      <span className="option-text" dangerouslySetInnerHTML={{ __html: option.text }}></span>
+      <Html className="option-text" html={option.text} />
     </span>
   )
 }
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js b/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
index ac05e8fd12..0ead61f78e 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const Buttons = ({ next, prev, help, fetchPage }) => {
   return (
     <>
-      <Template template={help} />
+      <Html html={help} />
 
       <div className="interview-buttons">
         <div className="pull-right">
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
index ff58af2d19..bccc461178 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
 
@@ -14,7 +14,7 @@ const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
   return (
     <>
       <h2>{gettext('Navigation')}</h2>
-      <Template template={help} />
+      <Html html={help} />
 
       <ul className="list-unstyled interview-navigation">
         {
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Overview.js b/rdmo/projects/assets/js/interview/components/sidebar/Overview.js
index 1b3211238c..1843565ddb 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Overview.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Overview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import baseUrl from 'rdmo/core/assets/js/utils/baseUrl'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const Overview = ({ overview, help }) => {
 
@@ -13,7 +13,7 @@ const Overview = ({ overview, help }) => {
   return (
     <>
       <h2>{gettext('Overview')}</h2>
-      <Template template={help} />
+      <Html html={help} />
 
       <div className="interview-overview">
         <ul className="list-unstyled">
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Progress.js b/rdmo/projects/assets/js/interview/components/sidebar/Progress.js
index e5bf30a4e6..0bc6aa69c3 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Progress.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Progress.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Template from 'rdmo/core/assets/js/components/Template'
+import Html from 'rdmo/core/assets/js/components/Html'
 
 const Progress = ({ progress, help }) => {
 
@@ -12,7 +12,7 @@ const Progress = ({ progress, help }) => {
   return (
     <>
       <h2>{gettext('Progress')}</h2>
-      <Template template={help} />
+      <Html html={help} />
 
       <div className="interview-progress">
         {low && <div className="interview-progress-count">{label}</div>}
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 2cff49031c..e00e32e21f 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -129,6 +129,16 @@
 
 .interview-question {
     margin-bottom: 20px;
+
+    p {
+        margin-bottom: 5px;
+    }
+}
+
+.interview-questionset {
+    .interview-questionset-label {
+        margin-bottom: 5px;
+    }
 }
 
 .interview-widgets {
diff --git a/rdmo/projects/templates/projects/project_interview_page_help.html b/rdmo/projects/templates/projects/project_interview_page_help.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/rdmo/projects/templates/projects/project_interview_question_help.html b/rdmo/projects/templates/projects/project_interview_question_help.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/rdmo/projects/templates/projects/project_interview_questionset_help.html b/rdmo/projects/templates/projects/project_interview_questionset_help.html
new file mode 100644
index 0000000000..e69de29bb2

From 245467c1d8a74184c42b8c8e894fb9f88da23c6f Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 21 Jun 2024 15:15:09 +0200
Subject: [PATCH 2/8] Add type validation to interview

---
 .../js/interview/components/main/question/QuestionError.js      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
index b111fa39ca..85f2233e28 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
@@ -9,6 +9,8 @@ const getMessage = (error) => {
                      ' You will need to reload the page to make changes, but your input will be overwritten.')
     } else if (error.errors.quota) {
        return gettext('You reached the file quota for this project.')
+    } else if (error.errors.text) {
+      return error.errors.text
     }
   } else if (error.constructor.name === 'ApiError') {
     if (error.status === 404) {

From d043db5a6c715d34f57ed638d868b9db6b256fb1 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 2 Aug 2024 16:08:39 +0200
Subject: [PATCH 3/8] Refactor config redux store

---
 rdmo/core/assets/js/actions/configActions.js         | 12 ++++--------
 rdmo/core/assets/js/reducers/configReducer.js        |  8 +++++++-
 .../assets/js/interview/actions/interviewActions.js  |  6 +++---
 .../assets/js/interview/store/configureStore.js      |  9 ++++++++-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/rdmo/core/assets/js/actions/configActions.js b/rdmo/core/assets/js/actions/configActions.js
index 7161bba43c..0aaebe47b9 100644
--- a/rdmo/core/assets/js/actions/configActions.js
+++ b/rdmo/core/assets/js/actions/configActions.js
@@ -1,13 +1,9 @@
-import { setConfigInLocalStorage, deleteConfigInLocalStorage } from '../utils/config'
-
 import { UPDATE_CONFIG, DELETE_CONFIG } from './actionTypes'
 
-export function updateConfig(prefix, path, value) {
-  setConfigInLocalStorage(prefix, path, value)
-  return {type: UPDATE_CONFIG, path, value}
+export function updateConfig(path, value, ls = false) {
+  return {type: UPDATE_CONFIG, path, value, ls}
 }
 
-export function deleteConfig(prefix, path) {
-  deleteConfigInLocalStorage(prefix, path)
-  return {type: DELETE_CONFIG, path}
+export function deleteConfig(path, ls = false) {
+  return {type: DELETE_CONFIG, path, ls}
 }
diff --git a/rdmo/core/assets/js/reducers/configReducer.js b/rdmo/core/assets/js/reducers/configReducer.js
index 0d27d67dfd..9001d4e8c4 100644
--- a/rdmo/core/assets/js/reducers/configReducer.js
+++ b/rdmo/core/assets/js/reducers/configReducer.js
@@ -1,4 +1,4 @@
-import { updateConfig, deleteConfig } from '../utils/config'
+import { updateConfig, deleteConfig, setConfigInLocalStorage, deleteConfigInLocalStorage } from '../utils/config'
 
 import { DELETE_CONFIG, UPDATE_CONFIG } from '../actions/actionTypes'
 
@@ -7,8 +7,14 @@ const initialState = {}
 export default function configReducer(state = initialState, action) {
   switch(action.type) {
     case UPDATE_CONFIG:
+      if (action.ls) {
+        setConfigInLocalStorage(state.prefix, action.path, action.value)
+      }
       return updateConfig(state, action.path, action.value)
     case DELETE_CONFIG:
+      if (action.ls) {
+        deleteConfigInLocalStorage(state.prefix, action.path)
+      }
       return deleteConfig(state, action.path)
     default:
       return state
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index 5e37c5a0db..3103dd748b 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -59,13 +59,13 @@ export function fetchPage(pageId, back) {
       ValueApi.storeValue(projectId, value)
     })
 
+    dispatch(fetchPageInit())
+
     if (pageId === 'done') {
-      dispatch(fetchPageInit())
       updateLocation('done')
       dispatch(fetchNavigation(null))
       dispatch(fetchPageSuccess(null, true))
     } else {
-      dispatch(fetchPageInit())
       const promise = isNil(pageId) ? PageApi.fetchContinue(projectId)
                                     : PageApi.fetchPage(projectId, pageId, back)
       return promise
@@ -338,7 +338,7 @@ export function deleteValueError(errors) {
 
 export function activateSet(set) {
   if (isEmpty(set.set_prefix)) {
-    return updateConfig('rdmo.interview', 'page.currentSetIndex', set.set_index)
+    return updateConfig('page.currentSetIndex', set.set_index, true)
   } else {
     return { type: NOOP }
   }
diff --git a/rdmo/projects/assets/js/interview/store/configureStore.js b/rdmo/projects/assets/js/interview/store/configureStore.js
index 6646da1552..92bd963bb1 100644
--- a/rdmo/projects/assets/js/interview/store/configureStore.js
+++ b/rdmo/projects/assets/js/interview/store/configureStore.js
@@ -42,8 +42,15 @@ export default function configureStore() {
     user: userReducer,
   })
 
+  const initialState = {
+    config: {
+      prefix: 'rdmo.interview'
+    }
+  }
+
   const store = createStore(
     rootReducer,
+    initialState,
     applyMiddleware(...middlewares)
   )
 
@@ -55,7 +62,7 @@ export default function configureStore() {
   // this event is triggered when the page first loads
   window.addEventListener('load', () => {
     getConfigFromLocalStorage('rdmo.interview').forEach(([path, value]) => {
-      store.dispatch(configActions.updateConfig('rdmo.interview', path, value))
+      store.dispatch(configActions.updateConfig(path, value))
     })
 
     Promise.all([

From a07ff05757037cc38a70d3c2b11bad313218cb71 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 2 Aug 2024 18:53:18 +0200
Subject: [PATCH 4/8] Add pending redux store and refactor interview and
 project actions

---
 rdmo/core/assets/js/actions/actionTypes.js    |   3 +
 rdmo/core/assets/js/actions/pendingActions.js |   9 ++
 rdmo/core/assets/js/containers/Pending.js     |  17 +--
 .../core/assets/js/reducers/pendingReducer.js |  16 +++
 .../js/interview/actions/interviewActions.js  | 115 ++++++++++++++----
 .../js/interview/actions/projectActions.js    |  36 ++++--
 .../js/interview/store/configureStore.js      |   2 +
 7 files changed, 160 insertions(+), 38 deletions(-)
 create mode 100644 rdmo/core/assets/js/actions/pendingActions.js
 create mode 100644 rdmo/core/assets/js/reducers/pendingReducer.js

diff --git a/rdmo/core/assets/js/actions/actionTypes.js b/rdmo/core/assets/js/actions/actionTypes.js
index 5b5a8aaed9..1f97c54f3d 100644
--- a/rdmo/core/assets/js/actions/actionTypes.js
+++ b/rdmo/core/assets/js/actions/actionTypes.js
@@ -1,6 +1,9 @@
 export const UPDATE_CONFIG = 'UPDATE_CONFIG'
 export const DELETE_CONFIG = 'DELETE_CONFIG'
 
+export const ADD_TO_PENDING = 'ADD_TO_PENDING'
+export const REMOVE_FROM_PENDING = 'REMOVE_FROM_PENDING'
+
 export const FETCH_SETTINGS_ERROR = 'FETCH_SETTINGS_ERROR'
 export const FETCH_SETTINGS_INIT = 'FETCH_SETTINGS_INIT'
 export const FETCH_SETTINGS_SUCCESS = 'FETCH_SETTINGS_SUCCESS'
diff --git a/rdmo/core/assets/js/actions/pendingActions.js b/rdmo/core/assets/js/actions/pendingActions.js
new file mode 100644
index 0000000000..2ee4aaf514
--- /dev/null
+++ b/rdmo/core/assets/js/actions/pendingActions.js
@@ -0,0 +1,9 @@
+import { ADD_TO_PENDING, REMOVE_FROM_PENDING } from './actionTypes'
+
+export function addToPending(item) {
+  return {type: ADD_TO_PENDING, item}
+}
+
+export function removeFromPending(item) {
+  return {type: REMOVE_FROM_PENDING, item}
+}
diff --git a/rdmo/core/assets/js/containers/Pending.js b/rdmo/core/assets/js/containers/Pending.js
index 7b421c49df..07609f8a79 100644
--- a/rdmo/core/assets/js/containers/Pending.js
+++ b/rdmo/core/assets/js/containers/Pending.js
@@ -1,22 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { isEmpty } from 'lodash'
 
-const Pending = ({ config }) => {
-  if (config.pending) {
-    return <i className="fa fa-circle-o-notch fa-spin fa-fw"></i>
-  } else {
-    return null
-  }
+const Pending = ({ pending }) => {
+  return (
+    !isEmpty(pending.items) && (
+      <i className="fa fa-circle-o-notch fa-spin fa-fw"></i>
+    )
+  )
 }
 
 Pending.propTypes = {
-  config: PropTypes.object.isRequired,
+  pending: PropTypes.object.isRequired,
 }
 
 function mapStateToProps(state) {
   return {
-    config: state.config,
+    pending: state.pending,
   }
 }
 
diff --git a/rdmo/core/assets/js/reducers/pendingReducer.js b/rdmo/core/assets/js/reducers/pendingReducer.js
new file mode 100644
index 0000000000..7f5b9de1cc
--- /dev/null
+++ b/rdmo/core/assets/js/reducers/pendingReducer.js
@@ -0,0 +1,16 @@
+import { ADD_TO_PENDING, REMOVE_FROM_PENDING } from '../actions/actionTypes'
+
+const initialState = {
+  items: []
+}
+
+export default function pendingReducer(state = initialState, action) {
+  switch(action.type) {
+    case ADD_TO_PENDING:
+      return { ...state, items: [...state.items, action.item] }
+    case REMOVE_FROM_PENDING:
+      return { ...state, items: state.items.filter((item) => (item != action.item)) }
+    default:
+      return state
+  }
+}
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index 3103dd748b..da865039b9 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -50,8 +50,10 @@ import {
 } from './actionTypes'
 
 import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 
 export function fetchPage(pageId, back) {
+  const pendingId = 'fetchPage'
 
   return (dispatch, getState) => {
     // store unsaved defaults on this page before loading the new page
@@ -59,6 +61,7 @@ export function fetchPage(pageId, back) {
       ValueApi.storeValue(projectId, value)
     })
 
+    dispatch(addToPending(pendingId))
     dispatch(fetchPageInit())
 
     if (pageId === 'done') {
@@ -78,9 +81,13 @@ export function fetchPage(pageId, back) {
           dispatch(fetchValues(page))
           dispatch(fetchOptionsets(page))
 
+          dispatch(removeFromPending(pendingId))
           dispatch(fetchPageSuccess(page, false))
         })
-        .catch((error) => dispatch(fetchPageError(error)))
+        .catch((error) => {
+          dispatch(removeFromPending(pendingId))
+          dispatch(fetchPageError(error))
+        })
     }
   }
 }
@@ -98,11 +105,21 @@ export function fetchPageError(error) {
 }
 
 export function fetchNavigation(page) {
+  const pendingId = `fetchNavigation/${page.id}`
+
   return (dispatch) => {
+    dispatch(addToPending(pendingId))
     dispatch(fetchNavigationInit())
+
     return ProjectApi.fetchNavigation(projectId, page && page.section.id)
-      .then((navigation) => dispatch(fetchNavigationSuccess(navigation)))
-      .catch((error) => dispatch(fetchNavigationError(error)))
+      .then((navigation) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(fetchNavigationSuccess(navigation))
+      })
+      .catch((error) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(fetchNavigationError(error))
+      })
   }
 }
 
@@ -126,14 +143,23 @@ export function fetchOptionsets(page) {
 }
 
 export function fetchOptions(page, optionset) {
+  const pendingId = `fetchOptions/${page.id}/${optionset.id}`
+
   return (dispatch) => {
+    dispatch(addToPending(pendingId))
     dispatch(fetchOptionsInit())
+
     return ProjectApi.fetchOptions(projectId, optionset.id)
       .then((options) => {
         updateOptions(page, optionset, options)
+
+        dispatch(removeFromPending(pendingId))
         dispatch(fetchOptionsSuccess(page, optionset, options))
       })
-      .catch((error) => dispatch(fetchOptionsError(error)))
+      .catch((error) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(fetchOptionsError(error))
+      })
   }
 }
 
@@ -150,7 +176,10 @@ export function fetchOptionsError(error) {
 }
 
 export function fetchValues(page) {
+  const pendingId = `fetchValues/${page.id}`
+
   return (dispatch) => {
+    dispatch(addToPending(pendingId))
     dispatch(fetchValuesInit())
     return ValueApi.fetchValues(projectId, { attribute: page.attributes })
       .then((values) => {
@@ -161,10 +190,14 @@ export function fetchValues(page) {
 
         activateFirstValue(page, values)
 
+        dispatch(removeFromPending(pendingId))
         dispatch(resolveConditions(page, sets))
         dispatch(fetchValuesSuccess(values, sets))
       })
-      .catch((error) => dispatch(fetchValuesError(error)))
+      .catch((error) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(fetchValuesError(error))
+      })
   }
 }
 
@@ -197,7 +230,10 @@ export function resolveConditions(page, sets) {
 }
 
 export function resolveCondition(element, set) {
+  const pendingId = `resolveCondition/${element.model}/${element.id}/${set.set_prefix}/${set.set_index}`
+
   return (dispatch, getState) => {
+    dispatch(addToPending(pendingId))
     dispatch(resolveConditionInit())
 
     return ProjectApi.resolveCondition(projectId, set, element)
@@ -206,9 +242,13 @@ export function resolveCondition(element, set) {
         const setIndex = getState().interview.sets.indexOf(set)
         const results = { ...set[elementType], [element.id]: response.result }
 
+        dispatch(removeFromPending(pendingId))
         dispatch(resolveConditionSuccess({ ...set, [elementType]: results }, setIndex))
       })
-      .catch((error) => dispatch(resolveConditionError(error)))
+      .catch((error) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(resolveConditionError(error))
+      })
   }
 }
 
@@ -225,10 +265,13 @@ export function resolveConditionError(error) {
 }
 
 export function storeValue(value) {
+  const pendingId = `storeValue/${value.attribute}/${value.set_prefix}/${value.set_index}/${value.collection_index}`
+
   return (dispatch, getState) => {
     const valueIndex = getState().interview.values.indexOf(value)
     const valueFile = value.file
 
+    dispatch(addToPending(pendingId))
     dispatch(storeValueInit(valueIndex))
 
     return ValueApi.storeValue(projectId, value)
@@ -251,15 +294,25 @@ export function storeValue(value) {
 
         // check if there is a file or if a filename is set (when the file was just erased)
         if (isNil(valueFile) && isNil(value.file_name)) {
-          return dispatch(storeValueSuccess(value, valueIndex))
+          dispatch(removeFromPending(pendingId))
+          dispatch(storeValueSuccess(value, valueIndex))
         } else {
           // upload file after the value is created
           return ValueApi.storeFile(projectId, value, valueFile)
-            .then((value) => dispatch(storeValueSuccess(value, valueIndex)))
-            .catch((error) => dispatch(storeValueError(error, valueIndex)))
+            .then((value) => {
+              dispatch(removeFromPending(pendingId))
+              dispatch(storeValueSuccess(value, valueIndex))
+            })
+            .catch((error) => {
+              dispatch(removeFromPending(pendingId))
+              dispatch(storeValueError(error, valueIndex))
+            })
         }
       })
-      .catch((error) => dispatch(storeValueError(error, valueIndex)))
+      .catch((error) => {
+        dispatch(removeFromPending(pendingId))
+        dispatch(storeValueError(error, valueIndex))
+      })
   }
 }
 
@@ -293,7 +346,10 @@ export function updateValue(value, attrs) {
 }
 
 export function deleteValue(value) {
+  const pendingId = `deleteValue/${value.id}`
+
   return (dispatch, getState) => {
+    dispatch(addToPending(pendingId))
     dispatch(deleteValueInit())
 
     if (isNil(value.id)) {
@@ -317,9 +373,13 @@ export function deleteValue(value) {
             dispatch(resolveConditions(page, sets))
           }
 
+          dispatch(removeFromPending(pendingId))
           dispatch(deleteValueSuccess(value))
         })
-        .catch((errors) => dispatch(deleteValueError(errors)))
+        .catch((errors) => {
+          dispatch(removeFromPending(pendingId))
+          dispatch(deleteValueError(errors))
+        })
     }
   }
 }
@@ -385,21 +445,26 @@ export function updateSet(setValue, attrs) {
 }
 
 export function deleteSet(set, setValue) {
-  if (isNil(setValue)) {
-    return (dispatch, getState) => {
+  const pendingId = `deleteSet/${set.set_prefix}/${set.set_index}`
+
+  return (dispatch, getState) => {
+    dispatch(addToPending(pendingId))
+    dispatch(deleteSetInit())
+
+    if (isNil(setValue)) {
       // gather all values for this set and it's descendants
       const values = getDescendants(getState().interview.values, set)
 
-      dispatch(deleteSetInit())
-
       return Promise.all(values.map((value) => ValueApi.deleteValue(projectId, value)))
-        .then(() => dispatch(deleteSetSuccess(set)))
-        .catch((errors) => dispatch(deleteSetError(errors)))
-    }
-  } else {
-    return (dispatch, getState) => {
-      dispatch(deleteSetInit())
-
+        .then(() => {
+          dispatch(removeFromPending(pendingId))
+          dispatch(deleteSetSuccess(set))
+        })
+        .catch((errors) => {
+          dispatch(removeFromPending(pendingId))
+          dispatch(deleteSetError(errors))
+        })
+    } else {
       return ValueApi.deleteSet(projectId, setValue)
         .then(() => {
           const page = getState().interview.page
@@ -418,9 +483,13 @@ export function deleteSet(set, setValue) {
             }
           }
 
+          dispatch(removeFromPending(pendingId))
           dispatch(deleteSetSuccess(set))
         })
-        .catch((errors) => dispatch(deleteSetError(errors)))
+        .catch((errors) => {
+          dispatch(removeFromPending(pendingId))
+          dispatch(deleteSetError(errors))
+        })
     }
   }
 }
diff --git a/rdmo/projects/assets/js/interview/actions/projectActions.js b/rdmo/projects/assets/js/interview/actions/projectActions.js
index ba0b2899cf..a3b3834407 100644
--- a/rdmo/projects/assets/js/interview/actions/projectActions.js
+++ b/rdmo/projects/assets/js/interview/actions/projectActions.js
@@ -14,13 +14,22 @@ import {
   UPDATE_PROGRESS_ERROR,
 } from './actionTypes'
 
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
+
 export function fetchOverview() {
   return (dispatch) => {
+    dispatch(addToPending('fetchOverview'))
     dispatch(fetchOverviewInit())
 
     return ProjectApi.fetchOverview(projectId)
-      .then((overview) => dispatch(fetchOverviewSuccess(overview)))
-      .catch((error) => dispatch(fetchOverviewError(error)))
+      .then((overview) => {
+        dispatch(removeFromPending('fetchOverview'))
+        dispatch(fetchOverviewSuccess(overview))
+      })
+      .catch((error) => {
+        dispatch(removeFromPending('fetchOverview'))
+        dispatch(fetchOverviewError(error))
+      })
   }
 }
 
@@ -38,11 +47,18 @@ export function fetchOverviewError(error) {
 
 export function fetchProgress() {
   return (dispatch) => {
+    dispatch(addToPending('fetchProgress'))
     dispatch(fetchProgressInit())
 
     return ProjectApi.fetchProgress(projectId)
-    .then((progress) => dispatch(fetchProgressSuccess(progress)))
-    .catch((error) => dispatch(fetchProgressError(error)))
+    .then((progress) => {
+      dispatch(removeFromPending('fetchProgress'))
+      dispatch(fetchProgressSuccess(progress))
+    })
+    .catch((error) => {
+      dispatch(removeFromPending('fetchProgress'))
+      dispatch(fetchProgressError(error))
+    })
   }
 }
 
@@ -59,13 +75,19 @@ export function fetchProgressError(error) {
 }
 
 export function updateProgress() {
-
   return (dispatch) => {
+    dispatch(addToPending('updateProgress'))
     dispatch(updateProgressInit())
 
     return ProjectApi.updateProgress(projectId)
-      .then((progress) => dispatch(updateProgressSuccess(progress)))
-      .catch((error) => dispatch(updateProgressError(error)))
+      .then((progress) => {
+        dispatch(removeFromPending('updateProgress'))
+        dispatch(updateProgressSuccess(progress))
+      })
+      .catch((error) => {
+        dispatch(removeFromPending('updateProgress'))
+        dispatch(updateProgressError(error))
+      })
   }
 }
 
diff --git a/rdmo/projects/assets/js/interview/store/configureStore.js b/rdmo/projects/assets/js/interview/store/configureStore.js
index 92bd963bb1..a813ee929b 100644
--- a/rdmo/projects/assets/js/interview/store/configureStore.js
+++ b/rdmo/projects/assets/js/interview/store/configureStore.js
@@ -5,6 +5,7 @@ import thunk from 'redux-thunk'
 import { getConfigFromLocalStorage } from 'rdmo/core/assets/js/utils/config'
 
 import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
+import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
 import settingsReducer from 'rdmo/core/assets/js/reducers/settingsReducer'
 import templateReducer from 'rdmo/core/assets/js/reducers/templateReducer'
 import userReducer from 'rdmo/core/assets/js/reducers/userReducer'
@@ -36,6 +37,7 @@ export default function configureStore() {
   const rootReducer = combineReducers({
     config: configReducer,
     interview: interviewReducer,
+    pending: pendingReducer,
     project: projectReducer,
     settings: settingsReducer,
     templates: templateReducer,

From da808b93a5bf088665d017b6adae6956807d1f77 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 6 Aug 2024 14:30:03 +0200
Subject: [PATCH 5/8] Add success indicator to values and refactor updateValue
 action and widgets

---
 .../js/interview/actions/actionTypes.js       |  1 +
 .../js/interview/actions/interviewActions.js  | 18 ++++++-
 .../main/question/QuestionSuccess.js          | 19 +++++++
 .../components/main/widget/CheckboxWidget.js  | 52 +++++++++++--------
 .../components/main/widget/DateWidget.js      |  2 +
 .../components/main/widget/FileWidget.js      |  2 +
 .../components/main/widget/RadioWidget.js     |  2 +
 .../components/main/widget/RangeInput.js      |  2 +-
 .../components/main/widget/RangeWidget.js     |  2 +
 .../components/main/widget/SelectInput.js     | 12 +----
 .../components/main/widget/SelectWidget.js    |  4 ++
 .../components/main/widget/TextWidget.js      |  2 +
 .../components/main/widget/TextareaWidget.js  |  2 +
 .../components/main/widget/YesNoWidget.js     |  2 +
 .../js/interview/reducers/interviewReducer.js |  5 ++
 rdmo/projects/assets/scss/interview.scss      | 32 +++++++++---
 16 files changed, 116 insertions(+), 43 deletions(-)
 create mode 100644 rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js

diff --git a/rdmo/projects/assets/js/interview/actions/actionTypes.js b/rdmo/projects/assets/js/interview/actions/actionTypes.js
index 8b2eeb7326..d8025bf3ad 100644
--- a/rdmo/projects/assets/js/interview/actions/actionTypes.js
+++ b/rdmo/projects/assets/js/interview/actions/actionTypes.js
@@ -33,6 +33,7 @@ export const RESOLVE_CONDITION_SUCCESS = 'RESOLVE_CONDITION_SUCCESS'
 export const RESOLVE_CONDITION_ERROR = 'RESOLVE_CONDITION_ERROR'
 
 export const CREATE_VALUE = 'CREATE_VALUE'
+export const UPDATE_VALUE = 'UPDATE_VALUE'
 
 export const STORE_VALUE_INIT = 'STORE_VALUE_INIT'
 export const STORE_VALUE_SUCCESS = 'STORE_VALUE_SUCCESS'
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index da865039b9..cc51bde6ea 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -37,6 +37,7 @@ import {
   RESOLVE_CONDITION_SUCCESS,
   RESOLVE_CONDITION_ERROR,
   CREATE_VALUE,
+  UPDATE_VALUE,
   STORE_VALUE_INIT,
   STORE_VALUE_SUCCESS,
   STORE_VALUE_ERROR,
@@ -270,6 +271,7 @@ export function storeValue(value) {
   return (dispatch, getState) => {
     const valueIndex = getState().interview.values.indexOf(value)
     const valueFile = value.file
+    const valueSuccess = value.success
 
     dispatch(addToPending(pendingId))
     dispatch(storeValueInit(valueIndex))
@@ -292,6 +294,14 @@ export function storeValue(value) {
           dispatch(resolveConditions(page, sets))
         }
 
+        // set the success flag and start the timeout to remove it. the flag is actually
+        // the stored timeout, so we can cancel any old timeout before starting the a new
+        // one in order to prolong the time the indicator is show with each save
+        clearTimeout(valueSuccess)
+        value.success = setTimeout(() => {
+          dispatch(updateValue(value, {success: false}, false))
+        }, 1000)
+
         // check if there is a file or if a filename is set (when the file was just erased)
         if (isNil(valueFile) && isNil(value.file_name)) {
           dispatch(removeFromPending(pendingId))
@@ -341,8 +351,12 @@ export function createValue(attrs, store) {
   }
 }
 
-export function updateValue(value, attrs) {
-  return storeValue(ValueFactory.update(value, attrs))
+export function updateValue(value, attrs, store = true) {
+  if (store) {
+    return storeValue(ValueFactory.update(value, attrs))
+  } else {
+     return {type: UPDATE_VALUE, value, attrs}
+  }
 }
 
 export function deleteValue(value) {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js
new file mode 100644
index 0000000000..831e6c7b3f
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const QuestionSuccess = ({ value }) => {
+  return (
+    <div className={classNames('success-indicator text-success', {
+      'show': value.success
+    })}>
+      <i className="fa fa-check fa-btn"></i>
+    </div>
+  )
+}
+
+QuestionSuccess.propTypes = {
+  value: PropTypes.object.isRequired,
+}
+
+export default QuestionSuccess
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 35f7bc55ed..e7d8ee71cb 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -5,6 +5,7 @@ import { maxBy } from 'lodash'
 import { gatherOptions } from '../../../utils/options'
 
 import QuestionError from '../question/QuestionError'
+import QuestionSuccess from '../question/QuestionSuccess'
 
 import CheckboxInput from './CheckboxInput'
 
@@ -35,33 +36,40 @@ const CheckboxWidget = ({ question, values, currentSet, disabled, createValue, u
     createValue(value, true)
   }
 
+  const success = values.some((value) => value.success)
+
   return (
     <div className="interview-widgets">
       <div className="interview-widget">
         <div className="interview-input">
-          <div className="checkbox-control">
-            {
-              gatherOptions(question).map((option, optionIndex) => {
-                const value = values.find((value) => (
-                  option.has_provider ? (value.external_id === option.id) : (value.option === option.id)
-                ))
+          <div className="buttons-wrapper">
+            <div className="checkbox-control">
+              {
+                gatherOptions(question).map((option, optionIndex) => {
+                  const value = values.find((value) => (
+                    option.has_provider ? (value.external_id === option.id) : (value.option === option.id)
+                  ))
 
-                return (
-                  <React.Fragment key={optionIndex}>
-                    <CheckboxInput
-                      question={question}
-                      value={value}
-                      option={option}
-                      disabled={disabled}
-                      onCreate={handleCreateValue}
-                      onUpdate={updateValue}
-                      onDelete={deleteValue}
-                    />
-                    <QuestionError value={value} />
-                  </React.Fragment>
-                )
-              })
-            }
+                  return (
+                    <React.Fragment key={optionIndex}>
+                      <CheckboxInput
+                        question={question}
+                        value={value}
+                        option={option}
+                        disabled={disabled}
+                        onCreate={handleCreateValue}
+                        onUpdate={updateValue}
+                        onDelete={deleteValue}
+                      />
+                      <QuestionError value={value} />
+                    </React.Fragment>
+                  )
+                })
+              }
+            </div>
+            <div className="buttons">
+              <QuestionSuccess value={{ success }} />
+            </div>
           </div>
         </div>
       </div>
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 441103ff36..09010cbc33 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
@@ -5,6 +5,7 @@ import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
 import QuestionEraseValue from '../question/QuestionEraseValue'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import DateInput from './DateInput'
@@ -23,6 +24,7 @@ const DateWidget = ({ question, values, currentSet, disabled, createValue, updat
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
index ba13d96ad1..d30b1a57d0 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionEraseValue from '../question/QuestionEraseValue'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionError from '../question/QuestionError'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
@@ -23,6 +24,7 @@ const FileWidget = ({ question, values, currentSet, disabled, createValue, updat
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
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 3d20fa6b5f..f1dd333a52 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
@@ -6,6 +6,7 @@ import { gatherOptions } from '../../../utils/options'
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionEraseValue from '../question/QuestionEraseValue'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
@@ -26,6 +27,7 @@ const RadioWidget = ({ question, values, currentSet, disabled, createValue, upda
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
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 1bc951e67a..7f28d9f28b 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -36,8 +36,8 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
           handleChange(value, event.target.value)
         }}
       />
-      {buttons}
       <Unit unit={question.unit} inputValue={inputValue} />
+      {buttons}
     </div>
   )
 }
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 dc966ea198..692f66d5a4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
@@ -6,6 +6,7 @@ import { initRange } from '../../../utils/value'
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionEraseValue from '../question/QuestionEraseValue'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
@@ -36,6 +37,7 @@ const RangeWidget = ({ question, values, currentSet, disabled, createValue, upda
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={handleEraseValue}/>
                     <QuestionRemoveValue
                       question={question}
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 6808318754..24666fbcb4 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
@@ -88,7 +88,6 @@ const SelectInput = ({ question, value, options, disabled, creatable, updateValu
     classNamePrefix: 'react-select',
     className: classnames,
     backspaceRemovesValue: false,
-    isClearable: true,
     isDisabled: disabled,
     placeholder: gettext('Select ...'),
     noOptionsMessage: () => gettext('No options found'),
@@ -98,19 +97,10 @@ const SelectInput = ({ question, value, options, disabled, creatable, updateValu
     inputValue: inputValue,
     onInputChange: setInputValue,
     onChange: handleChange,
-    // menuIsOpen: isOpen,
-    // onMenuOpen: () => {
-    //   setIsOpen(true)
-    //   if (valueOption) {
-    //     // replace the text shown in the select input with a plain text version
-    //     setInputValue(convert(valueOption.text))
-    //   }
-    // },
-    // onMenuClose: () => setIsOpen(false),
     getOptionValue: (option) => option.id,
     getOptionLabel: (option) => option.text,
     formatOptionLabel: (option) => (
-      <span>
+      <span className="interview-select-option">
         <OptionText option={option} />
         <OptionHelp className="ml-10" option={option} />
       </span>
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 c35a99968a..d1eb95347b 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
@@ -5,7 +5,9 @@ import { gatherOptions } from '../../../utils/options'
 
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
+import QuestionEraseValue from '../question/QuestionEraseValue'
 import QuestionError from '../question/QuestionError'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import SelectInput from './SelectInput'
@@ -27,6 +29,8 @@ const SelectWidget = ({ question, values, currentSet, disabled, creatable,
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
+                    <QuestionEraseValue 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 ede6f260f1..7eb55f8032 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
@@ -5,6 +5,7 @@ import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
+import QuestionSuccess from '../question/QuestionSuccess'
 
 import TextInput from './TextInput'
 
@@ -22,6 +23,7 @@ const TextWidget = ({ question, values, currentSet, disabled, createValue, updat
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <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 7ca5e4071b..751aef834d 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import TextareaInput from './TextareaInput'
@@ -22,6 +23,7 @@ const TextareaWidget = ({ question, values, currentSet, disabled, createValue, u
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionRemoveValue
                       question={question}
                       values={values}
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 795fd610e3..5ccc289ff8 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
@@ -5,6 +5,7 @@ import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
 import QuestionEraseValue from '../question/QuestionEraseValue'
+import QuestionSuccess from '../question/QuestionSuccess'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import YesNoInput from './YesNoInput'
@@ -23,6 +24,7 @@ const YesNoWidget = ({ question, values, currentSet, disabled, createValue, upda
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
+                    <QuestionSuccess value={value}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
diff --git a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
index 1ec02dc136..98b4e97ed8 100644
--- a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
@@ -15,6 +15,7 @@ import {
   RESOLVE_CONDITION_SUCCESS,
   RESOLVE_CONDITION_ERROR,
   CREATE_VALUE,
+  UPDATE_VALUE,
   STORE_VALUE_INIT,
   STORE_VALUE_SUCCESS,
   STORE_VALUE_ERROR,
@@ -53,6 +54,10 @@ export default function interviewReducer(state = initialState, action) {
       )}
     case CREATE_VALUE:
       return { ...state, values: [...state.values, action.value] }
+    case UPDATE_VALUE:
+        return { ...state, values: state.values.map(
+          (value) => value.id == action.value.id ? {...value, ...action.attrs} : value
+        )}
     case STORE_VALUE_SUCCESS:
       if (action.valueIndex > -1) {
         return { ...state, values: state.values.map(
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index e00e32e21f..4936fa30a7 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -142,7 +142,7 @@
 }
 
 .interview-widgets {
-    :last-child {
+    > :last-child {
         margin-bottom: 0;
     }
 }
@@ -169,6 +169,8 @@
 
     &:has(.react-select) {
         .buttons {
+            position: absolute;
+            right: 62px;
             margin-top: 2px;
             margin-bottom: 2px;
         }
@@ -179,7 +181,8 @@
         gap: 10px;
 
         .btn-erase-value,
-        .btn-remove-value {
+        .btn-remove-value,
+        .success-indicator {
             opacity: 0.8;
             line-height: 20px;
             font-size: 14px;
@@ -196,6 +199,17 @@
         .btn-remove-value:focus {
             outline: 0;
         }
+
+        .success-indicator {
+            padding-top: 7px;
+            opacity: 0;
+            transition: opacity 0.3s linear 2s;
+
+            &.show {
+                opacity: 1;
+                transition: opacity 0.5s ease-in-out;
+            }
+        }
     }
 
     .badge-default {
@@ -211,11 +225,6 @@
         width: 120px;
         height: 34px;
 
-        text-align: center;
-
-        border: 1px solid #ccc;
-        border-radius: 4px;
-
         cursor: help;
 
         white-space: nowrap;
@@ -357,6 +366,15 @@
             opacity: 0.5;
         }
     }
+
+    .radio,
+    .checkbox,
+    .interview-select-option {
+        div,
+        p {
+            display: inline;
+        }
+    }
 }
 
 .badge-optional {

From df9af16e5ef1179ba4eff2cbd6a4ed52aa213e99 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Thu, 15 Aug 2024 16:31:38 +0200
Subject: [PATCH 6/8] Add pendig flag to values

---
 .../js/interview/actions/interviewActions.js  | 172 +++++++++---------
 .../js/interview/reducers/interviewReducer.js |  28 +--
 2 files changed, 107 insertions(+), 93 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index cc51bde6ea..b0ca1945e7 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -268,61 +268,65 @@ export function resolveConditionError(error) {
 export function storeValue(value) {
   const pendingId = `storeValue/${value.attribute}/${value.set_prefix}/${value.set_index}/${value.collection_index}`
 
-  return (dispatch, getState) => {
-    const valueIndex = getState().interview.values.indexOf(value)
-    const valueFile = value.file
-    const valueSuccess = value.success
-
-    dispatch(addToPending(pendingId))
-    dispatch(storeValueInit(valueIndex))
+  if (value.pending) {
+    return {type: NOOP}
+  } else {
+    return (dispatch, getState) => {
+      const valueIndex = getState().interview.values.indexOf(value)
+      const valueFile = value.file
+      const valueSuccess = value.success
 
-    return ValueApi.storeValue(projectId, value)
-      .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(addToPending(pendingId))
+      dispatch(storeValueInit(valueIndex))
 
-        dispatch(fetchNavigation(page))
-        dispatch(updateProgress())
+      return ValueApi.storeValue(projectId, value)
+        .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)
 
-        if (refresh) {
-          // if the refresh flag is set, reload all values for the page,
-          // resolveConditions will be called in fetchValues
-          dispatch(fetchValues(page))
-        } else {
-          dispatch(resolveConditions(page, sets))
-        }
+          dispatch(fetchNavigation(page))
+          dispatch(updateProgress())
 
-        // set the success flag and start the timeout to remove it. the flag is actually
-        // the stored timeout, so we can cancel any old timeout before starting the a new
-        // one in order to prolong the time the indicator is show with each save
-        clearTimeout(valueSuccess)
-        value.success = setTimeout(() => {
-          dispatch(updateValue(value, {success: false}, false))
-        }, 1000)
+          if (refresh) {
+            // if the refresh flag is set, reload all values for the page,
+            // resolveConditions will be called in fetchValues
+            dispatch(fetchValues(page))
+          } else {
+            dispatch(resolveConditions(page, sets))
+          }
 
-        // check if there is a file or if a filename is set (when the file was just erased)
-        if (isNil(valueFile) && isNil(value.file_name)) {
+          // set the success flag and start the timeout to remove it. the flag is actually
+          // the stored timeout, so we can cancel any old timeout before starting the a new
+          // one in order to prolong the time the indicator is show with each save
+          clearTimeout(valueSuccess)
+          value.success = setTimeout(() => {
+            dispatch(updateValue(value, {success: false}, false))
+          }, 1000)
+
+          // check if there is a file or if a filename is set (when the file was just erased)
+          if (isNil(valueFile) && isNil(value.file_name)) {
+            dispatch(removeFromPending(pendingId))
+            dispatch(storeValueSuccess(value, valueIndex))
+          } else {
+            // upload file after the value is created
+            return ValueApi.storeFile(projectId, value, valueFile)
+              .then((value) => {
+                dispatch(removeFromPending(pendingId))
+                dispatch(storeValueSuccess(value, valueIndex))
+              })
+              .catch((error) => {
+                dispatch(removeFromPending(pendingId))
+                dispatch(storeValueError(error, valueIndex))
+              })
+          }
+        })
+        .catch((error) => {
           dispatch(removeFromPending(pendingId))
-          dispatch(storeValueSuccess(value, valueIndex))
-        } else {
-          // upload file after the value is created
-          return ValueApi.storeFile(projectId, value, valueFile)
-            .then((value) => {
-              dispatch(removeFromPending(pendingId))
-              dispatch(storeValueSuccess(value, valueIndex))
-            })
-            .catch((error) => {
-              dispatch(removeFromPending(pendingId))
-              dispatch(storeValueError(error, valueIndex))
-            })
-        }
-      })
-      .catch((error) => {
-        dispatch(removeFromPending(pendingId))
-        dispatch(storeValueError(error, valueIndex))
-      })
+          dispatch(storeValueError(error, valueIndex))
+        })
+    }
   }
 }
 
@@ -362,44 +366,48 @@ export function updateValue(value, attrs, store = true) {
 export function deleteValue(value) {
   const pendingId = `deleteValue/${value.id}`
 
-  return (dispatch, getState) => {
-    dispatch(addToPending(pendingId))
-    dispatch(deleteValueInit())
-
-    if (isNil(value.id)) {
-      return dispatch(deleteValueSuccess(value))
-    } else {
-      return ValueApi.deleteValue(projectId, value)
-        .then(() => {
-          const page = getState().interview.page
-          const sets = getState().interview.sets
-          const question = page.questions.find((question) => question.attribute === value.attribute)
-          const refresh = question.optionsets.some((optionset) => optionset.has_refresh)
-
-          dispatch(fetchNavigation(page))
-          dispatch(updateProgress())
-
-          if (refresh) {
-            // if the refresh flag is set, reload all values for the page,
-            // resolveConditions will be called in fetchValues
-            dispatch(fetchValues(page))
-          } else {
-            dispatch(resolveConditions(page, sets))
-          }
+  if (value.pending) {
+    return {type: NOOP}
+  } else {
+    return (dispatch, getState) => {
+      dispatch(addToPending(pendingId))
+      dispatch(deleteValueInit(value))
+
+      if (isNil(value.id)) {
+        return dispatch(deleteValueSuccess(value))
+      } else {
+        return ValueApi.deleteValue(projectId, value)
+          .then(() => {
+            const page = getState().interview.page
+            const sets = getState().interview.sets
+            const question = page.questions.find((question) => question.attribute === value.attribute)
+            const refresh = question.optionsets.some((optionset) => optionset.has_refresh)
+
+            dispatch(fetchNavigation(page))
+            dispatch(updateProgress())
+
+            if (refresh) {
+              // if the refresh flag is set, reload all values for the page,
+              // resolveConditions will be called in fetchValues
+              dispatch(fetchValues(page))
+            } else {
+              dispatch(resolveConditions(page, sets))
+            }
 
-          dispatch(removeFromPending(pendingId))
-          dispatch(deleteValueSuccess(value))
-        })
-        .catch((errors) => {
-          dispatch(removeFromPending(pendingId))
-          dispatch(deleteValueError(errors))
-        })
+            dispatch(removeFromPending(pendingId))
+            dispatch(deleteValueSuccess(value))
+          })
+          .catch((errors) => {
+            dispatch(removeFromPending(pendingId))
+            dispatch(deleteValueError(errors))
+          })
+      }
     }
   }
 }
 
-export function deleteValueInit() {
-  return {type: DELETE_VALUE_INIT}
+export function deleteValueInit(value) {
+  return {type: DELETE_VALUE_INIT, value}
 }
 
 export function deleteValueSuccess(value) {
diff --git a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
index 98b4e97ed8..0c5137913c 100644
--- a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
@@ -82,32 +82,38 @@ export default function interviewReducer(state = initialState, action) {
     case FETCH_VALUES_INIT:
     case RESOLVE_CONDITION_INIT:
       return { ...state, errors: [] }
-    case FETCH_PAGE_ERROR:
-    case FETCH_NAVIGATION_ERROR:
-    case FETCH_OPTIONS_ERROR:
-    case FETCH_VALUES_ERROR:
-    case RESOLVE_CONDITION_ERROR:
-      return { ...state, errors: [...state.errors, { actionType: action.type, ...action.error }] }
     case STORE_VALUE_INIT:
        return {
         ...state,
         values: state.values.map((value, valueIndex) => (
-          valueIndex == action.valueIndex ? {...value, error: null} : value
+          valueIndex == action.valueIndex ? {...value, error: null, pending: true} : value
+        ))
+      }
+    case DELETE_VALUE_INIT:
+       return {
+        ...state,
+        values: state.values.map((value) => (
+          value == action.value ? {...value, pending: true} : value
         ))
       }
+    case DELETE_SET_INIT:
+      return { ...state, errors: [] }
+    case FETCH_PAGE_ERROR:
+    case FETCH_NAVIGATION_ERROR:
+    case FETCH_OPTIONS_ERROR:
+    case FETCH_VALUES_ERROR:
+    case RESOLVE_CONDITION_ERROR:
+      return { ...state, errors: [...state.errors, { actionType: action.type, ...action.error }] }
     case STORE_VALUE_ERROR:
       if (action.valueIndex > -1) {
          return {
           ...state, values: state.values.map((value, valueIndex) => (
-            valueIndex == action.valueIndex ? {...value, error: action.error} : value
+            valueIndex == action.valueIndex ? {...value, error: action.error, pending: false} : value
           ))
         }
       } else {
         return { ...state, errors: [...state.errors, { actionType: action.type, ...action.error }] }
       }
-    case DELETE_VALUE_INIT:
-    case DELETE_SET_INIT:
-      return { ...state, errors: [] }
     case DELETE_VALUE_ERROR:
     case DELETE_SET_ERROR:
       return { ...state, errors: [...state.errors, { actionType: action.type, ...action.error }] }

From cb14ec8c98fadd6b1f2f3021030af84dd026650a Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Thu, 15 Aug 2024 17:15:32 +0200
Subject: [PATCH 7/8] Fix valueIndex computation

---
 rdmo/projects/assets/js/interview/actions/interviewActions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index b0ca1945e7..f915ee6bc4 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -272,7 +272,7 @@ export function storeValue(value) {
     return {type: NOOP}
   } else {
     return (dispatch, getState) => {
-      const valueIndex = getState().interview.values.indexOf(value)
+      const valueIndex = getState().interview.values.map((v) => v.id).indexOf(value.id)
       const valueFile = value.file
       const valueSuccess = value.success
 

From 32a3dfba04896bfebfe6a1ea0e44b2c15e91105c Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Thu, 15 Aug 2024 17:15:40 +0200
Subject: [PATCH 8/8] Fix value comparison

---
 .../assets/js/interview/reducers/interviewReducer.js      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
index 0c5137913c..1b48a12e97 100644
--- a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
@@ -55,9 +55,9 @@ export default function interviewReducer(state = initialState, action) {
     case CREATE_VALUE:
       return { ...state, values: [...state.values, action.value] }
     case UPDATE_VALUE:
-        return { ...state, values: state.values.map(
-          (value) => value.id == action.value.id ? {...value, ...action.attrs} : value
-        )}
+      return { ...state, values: state.values.map(
+        (value) => value.id == action.value.id ? {...value, ...action.attrs} : value
+      )}
     case STORE_VALUE_SUCCESS:
       if (action.valueIndex > -1) {
         return { ...state, values: state.values.map(
@@ -93,7 +93,7 @@ export default function interviewReducer(state = initialState, action) {
        return {
         ...state,
         values: state.values.map((value) => (
-          value == action.value ? {...value, pending: true} : value
+          value.id == action.value.id ? {...value, pending: true} : value
         ))
       }
     case DELETE_SET_INIT: