Reorganize interview store, components and add read_only view

rdmorganiser · Aug 25, 2024 · dcc0242 · dcc0242
1 parent 31196f2
commit dcc0242
Show file tree

Hide file tree

Showing 30 changed files with 351 additions and 270 deletions.
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -18,12 +18,8 @@ import {
   NOOP,
   FETCH_NAVIGATION_ERROR,
   FETCH_NAVIGATION_SUCCESS,
-  FETCH_OVERVIEW_ERROR,
-  FETCH_OVERVIEW_SUCCESS,
   FETCH_PAGE_ERROR,
   FETCH_PAGE_SUCCESS,
-  FETCH_PROGRESS_ERROR,
-  FETCH_PROGRESS_SUCCESS,
   FETCH_VALUES_SUCCESS,
   FETCH_VALUES_ERROR,
   CREATE_VALUE,
@@ -38,73 +34,47 @@ import {
 
 import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
 
-export function fetchOverview() {
-  return (dispatch) => ProjectApi.fetchOverview(projectId)
-    .then((overview) => dispatch(fetchOverviewSuccess(overview)))
-    .catch((errors) => dispatch(fetchOverviewError(errors)))
-}
-
-export function fetchOverviewSuccess(overview) {
-  return {type: FETCH_OVERVIEW_SUCCESS, overview}
-}
-
-export function fetchOverviewError(errors) {
-  return {type: FETCH_OVERVIEW_ERROR, errors}
-}
-
-export function fetchProgress() {
-  return (dispatch) => ProjectApi.fetchProgress(projectId)
-    .then((progress) => dispatch(fetchProgressSuccess(progress)))
-    .catch((errors) => dispatch(fetchProgressError(errors)))
-}
-
-export function fetchProgressSuccess(progress) {
-  return {type: FETCH_PROGRESS_SUCCESS, progress}
-}
-
-export function fetchProgressError(errors) {
-  return {type: FETCH_PROGRESS_ERROR, errors}
-}
-
-export function fetchNavigation(sectionId) {
-  return (dispatch) => ProjectApi.fetchNavigation(projectId, sectionId)
-    .then((navigation) => dispatch(fetchNavigationSuccess(navigation)))
-    .catch((errors) => dispatch(fetchNavigationError(errors)))
-}
-
-export function fetchNavigationSuccess(navigation) {
-  return {type: FETCH_NAVIGATION_SUCCESS, navigation}
-}
-
-export function fetchNavigationError(errors) {
-  return {type: FETCH_NAVIGATION_ERROR, errors}
-}
-
 export function fetchPage(pageId) {
   return (dispatch) => {
     const promise = isNil(pageId) ? PageApi.fetchContinue(projectId)
                                   : PageApi.fetchPage(projectId, pageId)
     return promise.then((page) => {
       updateLocation(page.id)
-      dispatch(fetchNavigation(page.section.id))
+      initPage(page)
+      dispatch(fetchNavigation(page))
+      dispatch(fetchValues(page))
       dispatch(fetchPageSuccess(page))
-      dispatch(fetchValues())
     })
   }
 }
 
 export function fetchPageSuccess(page) {
-  return {type: FETCH_PAGE_SUCCESS, page: initPage(page)}
+  return {type: FETCH_PAGE_SUCCESS, page}
 }
 
 export function fetchPageError(errors) {
   return {type: FETCH_PAGE_ERROR, errors}
 }
 
-export function fetchValues() {
-  return (dispatch, getStore) => {
-    const page = getStore().interview.page
+export function fetchNavigation(page) {
+  return (dispatch) => {
+    return ProjectApi.fetchNavigation(projectId, page.section.id)
+      .then((navigation) => dispatch(fetchNavigationSuccess(navigation)))
+      .catch((errors) => dispatch(fetchNavigationError(errors)))
+
+  }
+}
 
+export function fetchNavigationSuccess(navigation) {
+  return {type: FETCH_NAVIGATION_SUCCESS, navigation}
+}
+
+export function fetchNavigationError(errors) {
+  return {type: FETCH_NAVIGATION_ERROR, errors}
+}
+
+export function fetchValues(page) {
+  return (dispatch) => {
     return ValueApi.fetchValues(projectId, { attribute: page.attributes })
       .then((values) => dispatch(fetchValuesSuccess(values, page)))
       .catch((errors) => dispatch(fetchValuesError(errors)))

diff --git a/rdmo/projects/assets/js/interview/actions/projectActions.js b/rdmo/projects/assets/js/interview/actions/projectActions.js
@@ -0,0 +1,38 @@
+import ProjectApi from '../api/ProjectApi'
+
+import projectId from '../utils/projectId'
+
+import {
+  FETCH_OVERVIEW_ERROR,
+  FETCH_OVERVIEW_SUCCESS,
+  FETCH_PROGRESS_ERROR,
+  FETCH_PROGRESS_SUCCESS,
+} from './actionTypes'
+
+export function fetchOverview() {
+  return (dispatch) => ProjectApi.fetchOverview(projectId)
+    .then((overview) => dispatch(fetchOverviewSuccess(overview)))
+    .catch((errors) => dispatch(fetchOverviewError(errors)))
+}
+
+export function fetchOverviewSuccess(overview) {
+  return {type: FETCH_OVERVIEW_SUCCESS, overview}
+}
+
+export function fetchOverviewError(errors) {
+  return {type: FETCH_OVERVIEW_ERROR, errors}
+}
+
+export function fetchProgress() {
+  return (dispatch) => ProjectApi.fetchProgress(projectId)
+    .then((progress) => dispatch(fetchProgressSuccess(progress)))
+    .catch((errors) => dispatch(fetchProgressError(errors)))
+}
+
+export function fetchProgressSuccess(progress) {
+  return {type: FETCH_PROGRESS_SUCCESS, progress}
+}
+
+export function fetchProgressError(errors) {
+  return {type: FETCH_PROGRESS_ERROR, errors}
+}
diff --git a/rdmo/projects/assets/js/interview/components/main/Breadcrump.js b/rdmo/projects/assets/js/interview/components/main/Breadcrump.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 
 import baseUrl from 'rdmo/core/assets/js/utils/baseUrl'
 
-const Breadcrump = ({ overview, currentPage, fetchPage }) => {
+const Breadcrump = ({ overview, page, fetchPage }) => {
 
   const handleClick = (event) => {
     event.preventDefault()
-    fetchPage(currentPage.section.first)
+    fetchPage(page.section.first)
   }
 
   return (
@@ -23,8 +23,8 @@ const Breadcrump = ({ overview, currentPage, fetchPage }) => {
         </a>
       </li>
       <li>
-        <a href={`${baseUrl}/projects/${overview.id}/interview/${currentPage.section.first}/`} onClick={handleClick}>
-          {currentPage.section.title}
+        <a href={`${baseUrl}/projects/${overview.id}/interview/${page.section.first}/`} onClick={handleClick}>
+          {page.section.title}
         </a>
       </li>
     </ul>
@@ -33,7 +33,7 @@ const Breadcrump = ({ overview, currentPage, fetchPage }) => {
 
 Breadcrump.propTypes = {
   overview: PropTypes.object.isRequired,
-  currentPage: PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
   fetchPage: PropTypes.func.isRequired
 }
 

diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -10,7 +10,7 @@ import PageButtons from './PageButtons'
 import PageHead from './PageHead'
 import PageHelp from './PageHelp'
 
-const Page = ({ config, templates, page, sets, values, fetchPage,
+const Page = ({ config, templates, project, page, sets, values, fetchPage,
                 createValue, updateValue, deleteValue,
                 activateSet, createSet, updateSet, deleteSet }) => {
 
@@ -50,6 +50,7 @@ const Page = ({ config, templates, page, sets, values, fetchPage,
                     questionset={element}
                     sets={sets}
                     values={values.filter((value) => element.attributes.includes(value.attribute))}
+                    disabled={project.overview.read_only}
                     focus={elementIndex == 0}
                     parentSet={currentSet}
                     createSet={createSet}
@@ -71,6 +72,7 @@ const Page = ({ config, templates, page, sets, values, fetchPage,
                       value.set_prefix == currentSetPrefix &&
                       value.set_index == currentSetIndex
                     ))}
+                    disabled={project.overview.read_only}
                     focus={elementIndex == 0}
                     currentSet={currentSet}
                     createValue={createValue}
@@ -92,6 +94,7 @@ const Page = ({ config, templates, page, sets, values, fetchPage,
 Page.propTypes = {
   config: PropTypes.object.isRequired,
   templates: PropTypes.object.isRequired,
+  project: PropTypes.object.isRequired,
   page: PropTypes.object.isRequired,
   sets: PropTypes.array.isRequired,
   values: PropTypes.array.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
@@ -9,7 +9,7 @@ import QuestionText from './QuestionText'
 import QuestionWidget from './QuestionWidget'
 import QuestionOptional from './QuestionOptional'
 
-const Question = ({ templates, question, values, focus, currentSet, createValue, updateValue, deleteValue }) => {
+const Question = ({ templates, question, values, disabled, focus, currentSet, createValue, updateValue, deleteValue }) => {
   return (
     <div className={`interview-question col-md-${question.width || '12'}`}>
       {
@@ -33,6 +33,7 @@ const Question = ({ templates, question, values, focus, currentSet, createValue,
       <QuestionWidget
         question={question}
         values={values}
+        disabled={disabled}
         focus={focus}
         currentSet={currentSet}
         createValue={createValue}
@@ -47,6 +48,7 @@ Question.propTypes = {
   templates: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired,
+  disabled: PropTypes.bool.isRequired,
   focus: PropTypes.bool.isRequired,
   currentSet: PropTypes.object.isRequired,
   createValue: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { capitalize, maxBy } from 'lodash'
 
-const AddValue = ({ question, values, currentSet, createValue }) => {
+const AddValue = ({ question, values, currentSet, disabled, createValue }) => {
   const handleClick = () => {
     const lastValue = maxBy(values, (v) => v.collection_index)
     const collectionIndex = lastValue ? lastValue.collection_index + 1 : 0
@@ -15,7 +15,7 @@ const AddValue = ({ question, values, currentSet, createValue }) => {
     })
   }
 
-  return (
+  return !disabled && question.is_collection && (
     <button type="button" className="btn btn-success add-value-button" onClick={handleClick}>
       <i className="fa fa-plus fa-btn"></i> {capitalize(question.verbose_name)}
     </button>
@@ -26,6 +26,7 @@ AddValue.propTypes = {
   question: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired,
   currentSet: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   createValue: PropTypes.func.isRequired
 }
 

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionDefault.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionDefault.js
@@ -1,11 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const QuestionDefault = () => {
-  return (
+const QuestionDefault = ({ isDefault }) => {
+  return isDefault && (
     <div className="badge badge-default" title={gettext('This is a default answer that can be customized.')}>
       {gettext('Default')}
     </div>
   )
 }
 
+QuestionDefault.propTypes = {
+  isDefault: PropTypes.bool.isRequired
+}
+
 export default QuestionDefault
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const QuestionEraseValue = ({ value, updateValue }) => {
+const QuestionEraseValue = ({ value, disabled, updateValue }) => {
   const handleEraseValue = () => {
     updateValue(value, {})
   }
 
-  return (
+  return !disabled && (
     <button type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
             title={gettext('Erase input')}>
       <i className="fa fa-eraser fa-btn"></i>
@@ -16,6 +16,7 @@ const QuestionEraseValue = ({ value, updateValue }) => {
 
 QuestionEraseValue.propTypes = {
   value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   updateValue: PropTypes.func.isRequired
 }
 

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js
@@ -1,16 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const QuestionRemoveValue = ({ value, deleteValue }) => {
-  return (
+const QuestionRemoveValue = ({ question, values, value, disabled, deleteValue }) => {
+  return !disabled && (question.is_collection || values.length > 1) && (
     <button type="button" className="btn btn-link btn-remove-value" onClick={() => deleteValue(value)}>
       <i className="fa fa-times fa-btn"></i>
     </button>
   )
 }
 
 QuestionRemoveValue.propTypes = {
+  question: PropTypes.object.isRequired,
+  values: PropTypes.array.isRequired,
   value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool.isRequired,
   deleteValue: PropTypes.func.isRequired
 }
 

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js
@@ -19,14 +19,14 @@ const AutocompleteWidget = ({ question, values, currentSet, disabled, createValu
           return (
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
-                {
-                  isDefault && <QuestionDefault />
-                }
-                {
-                  (question.is_collection || values.length > 1) && (
-                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                  )
-                }
+                <QuestionDefault isDefault={isDefault} />
+                <QuestionRemoveValue
+                  question={question}
+                  values={values}
+                  value={value}
+                  disabled={disabled}
+                  deleteValue={deleteValue}
+                />
               </div>
               <AutocompleteInput
                 value={value}
@@ -39,11 +39,13 @@ const AutocompleteWidget = ({ question, values, currentSet, disabled, createValu
           )
         })
       }
-      {
-        question.is_collection && (
-          <QuestionAddValue question={question} values={values} currentSet={currentSet} createValue={createValue} />
-        )
-      }
+      <QuestionAddValue
+        question={question}
+        values={values}
+        currentSet={currentSet}
+        disabled={disabled}
+        createValue={createValue}
+      />
     </div>
   )
 }