Refactor Widgets again and add units to interview

rdmorganiser · May 4, 2024 · 31c949e · 31c949e
1 parent a256fca
commit 31c949e
Show file tree

Hide file tree

Showing 23 changed files with 568 additions and 425 deletions.
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,16 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const QuestionDefault = ({ isDefault }) => {
-  return isDefault && (
+import { isDefaultValue } from '../../../utils/value'
+
+const QuestionDefault = ({ question, value }) => {
+  return isDefaultValue(question, value) && (
     <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
+  question: PropTypes.object.isRequired,
+  value: PropTypes.object.isRequired
 }
 
 export default QuestionDefault
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionUnit.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionUnit.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isUndefined } from 'lodash'
+
+const QuestionUnit = ({ question, inputValue }) => {
+  return (question.unit || !isUndefined(inputValue)) && (
+    <div className="unit">
+      {
+        !isUndefined(inputValue) && (
+          <>
+            <span>{inputValue}</span>
+            {' '}
+          </>
+        )
+      }
+      {
+        question.unit && !isUndefined(inputValue) && (' ')
+      }
+      {
+        question.unit && (
+          <span title={gettext('The unit for this answer.')}>{question.unit}</span>
+        )
+      }
+    </div>
+  )
+}
+
+QuestionUnit.propTypes = {
+  question: PropTypes.object.isRequired,
+  inputValue: PropTypes.string,
+}
+
+export default QuestionUnit
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/AutocompleteInput.js b/rdmo/projects/assets/js/interview/components/main/widget/AutocompleteInput.js
@@ -4,10 +4,12 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isNil } from 'lodash'
 
+import { isDefaultValue } from '../../../utils/value'
+
 import OptionHelp from './common/OptionHelp'
 import OptionText from './common/OptionText'
 
-const AutocompleteInput = ({ value, options, disabled, isDefault, updateValue }) => {
+const AutocompleteInput = ({ question, value, options, disabled, updateValue, buttons }) => {
   const selectOptions = options.map(option => ({
     value: option,
     label: option.text
@@ -35,37 +37,41 @@ const AutocompleteInput = ({ value, options, disabled, isDefault, updateValue })
 
   const classnames = classNames({
     'react-select': true,
-    'default': isDefault
+    'default': isDefaultValue(question, value)
   })
 
   return (
-    <ReactSelect
-      classNamePrefix="react-select"
-      className={classnames}
-      isClearable={true}
-      options={selectOptions}
-      value={inputValue}
-      onChange={(option) => {
-        setInputValue(option)
-        handleChange(option)
-      }}
-      isDisabled={disabled}
-      formatOptionLabel={({ value }) => (
-        <span>
-          <OptionText option={value} />
-          <OptionHelp className="ml-10" option={value} />
-        </span>
-      )}
-    />
+    <div className="interview-input">
+      <ReactSelect
+        classNamePrefix="react-select"
+        className={classnames}
+        isClearable={true}
+        options={selectOptions}
+        value={inputValue}
+        onChange={(option) => {
+          setInputValue(option)
+          handleChange(option)
+        }}
+        isDisabled={disabled}
+        formatOptionLabel={({ value }) => (
+          <span>
+            <OptionText option={value} />
+            <OptionHelp className="ml-10" option={value} />
+          </span>
+        )}
+      />
+      {buttons}
+    </div>
   )
 }
 
 AutocompleteInput.propTypes = {
+  question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
   options: PropTypes.array.isRequired,
   disabled: PropTypes.bool,
-  isDefault: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
+  updateValue: PropTypes.func.isRequired,
+  buttons: PropTypes.node.isRequired
 }
 
 export default AutocompleteInput
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/AutocompleteWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/AutocompleteWidget.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { isDefaultValue } from '../../../utils/value'
 import { gatherOptions } from '../../../utils/options'
 
 import QuestionAddValue from '../question/QuestionAddValue'
@@ -16,26 +15,26 @@ const AutocompleteWidget = ({ question, values, currentSet, disabled, createValu
     <div className="interview-widgets">
       {
         values.map((value, valueIndex) => {
-          const isDefault = isDefaultValue(question, value)
-
           return (
             <div key={valueIndex} className="interview-widget">
-              <div className="options">
-                <QuestionDefault isDefault={isDefault} />
-                <QuestionRemoveValue
-                  question={question}
-                  values={values}
-                  value={value}
-                  disabled={disabled}
-                  deleteValue={deleteValue}
-                />
-              </div>
               <AutocompleteInput
+                question={question}
                 value={value}
                 options={gatherOptions(question)}
                 disabled={disabled}
-                isDefault={isDefault}
                 updateValue={updateValue}
+                buttons={
+                  <div className="buttons">
+                    <QuestionRemoveValue
+                      question={question}
+                      values={values}
+                      value={value}
+                      disabled={disabled}
+                      deleteValue={deleteValue}
+                    />
+                    <QuestionDefault question={question} value={value} />
+                  </div>
+                }
               />
               <QuestionError value={value} />
             </div>

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -36,28 +36,30 @@ const CheckboxWidget = ({ question, values, currentSet, disabled, createValue, u
   return (
     <div className="interview-widgets">
       <div className="interview-widget">
-        <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="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)
+                ))
 
-              return (
-                <React.Fragment key={optionIndex}>
-                  <CheckboxInput
-                    value={value}
-                    option={option}
-                    disabled={disabled}
-                    onCreate={handleCreateValue}
-                    onUpdate={updateValue}
-                    onDelete={deleteValue}
-                  />
-                  <QuestionError value={value} />
-                </React.Fragment>
-              )
-            })
-          }
+                return (
+                  <React.Fragment key={optionIndex}>
+                    <CheckboxInput
+                      value={value}
+                      option={option}
+                      disabled={disabled}
+                      onCreate={handleCreateValue}
+                      onUpdate={updateValue}
+                      onDelete={deleteValue}
+                    />
+                    <QuestionError value={value} />
+                  </React.Fragment>
+                )
+              })
+            }
+          </div>
         </div>
       </div>
     </div>

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
@@ -6,7 +6,9 @@ import { enGB, de, it, es, fr } from 'date-fns/locale'
 
 import lang from 'rdmo/core/assets/js/utils/lang'
 
-const DateInput = ({ value, disabled, isDefault, updateValue }) => {
+import { isDefaultValue } from '../../../utils/value'
+
+const DateInput = ({ question, value, disabled, updateValue, buttons }) => {
 
   const getLocale = () => {
     switch (lang) {
@@ -46,28 +48,34 @@ const DateInput = ({ value, disabled, isDefault, updateValue }) => {
   const classnames = classNames({
     'form-control': true,
     'date-control': true,
-    'default': isDefault
+    'default': isDefaultValue(question, value)
   })
 
   return (
-    <DatePicker
-      className={classnames}
-      selected={value.text}
-      onChange={(date) => handleChange(date)}
-      locale={getLocale()}
-      dateFormat={getDateFormat()}
-      disabled={disabled}
-      popperPlacement="bottom-start"
-      showPopperArrow={false}
-    />
+    <div className="interview-input">
+      <div className="buttons-wrapper">
+        {buttons}
+        <DatePicker
+          className={classnames}
+          selected={value.text}
+          onChange={(date) => handleChange(date)}
+          locale={getLocale()}
+          dateFormat={getDateFormat()}
+          disabled={disabled}
+          popperPlacement="bottom-start"
+          showPopperArrow={false}
+        />
+      </div>
+    </div>
   )
 }
 
 DateInput.propTypes = {
+  question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
-  isDefault: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
+  updateValue: PropTypes.func.isRequired,
+  buttons: PropTypes.node.isRequired
 }
 
 export default DateInput
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { isDefaultValue } from '../../../utils/value'
-
 import QuestionAddValue from '../question/QuestionAddValue'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
@@ -16,26 +14,26 @@ const DateWidget = ({ question, values, currentSet, disabled, createValue, updat
     <div className="interview-widgets">
       {
         values.map((value, valueIndex) => {
-          const isDefault = isDefaultValue(question, value)
-
           return (
             <div key={valueIndex} className="interview-widget">
-              <div className="options">
-                <QuestionDefault isDefault={isDefault} />
-                <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                <QuestionRemoveValue
-                  question={question}
-                  values={values}
-                  value={value}
-                  disabled={disabled}
-                  deleteValue={deleteValue}
-                />
-              </div>
               <DateInput
+                question={question}
                 value={value}
                 disabled={disabled}
-                isDefault={isDefault}
                 updateValue={updateValue}
+                buttons={
+                  <div className="buttons">
+                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                    <QuestionRemoveValue
+                      question={question}
+                      values={values}
+                      value={value}
+                      disabled={disabled}
+                      deleteValue={deleteValue}
+                    />
+                    <QuestionDefault question={question} value={value} />
+                  </div>
+                }
               />
               <QuestionError value={value} />
             </div>