Add QuestionEraseValue component

rdmorganiser · Apr 29, 2024 · 5355f24 · 5355f24
1 parent 2840a82
commit 5355f24
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 32 deletions.
diff --git a/...n/question/widgets/common/DefaultBadge.js → ...mponents/main/question/QuestionDefault.js b/...n/question/widgets/common/DefaultBadge.js → ...mponents/main/question/QuestionDefault.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
-const DefaultBadge = () => {
+const QuestionDefault = () => {
   return (
     <div className="badge badge-default" title={gettext('This is a default answer that can be customized.')}>
       {gettext('Default')}
     </div>
   )
 }
 
-export default DefaultBadge
+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
@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const QuestionEraseValue = ({ value, updateValue }) => {
+  const handleEraseValue = () => {
+    updateValue(value, {})
+  }
+
+  return (
+    <button type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
+            title={gettext('Erase input')}>
+      <i className="fa fa-eraser fa-btn"></i>
+    </button>
+  )
+}
+
+QuestionEraseValue.propTypes = {
+  value: PropTypes.object.isRequired,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default QuestionEraseValue
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
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import AutocompleteInput from './AutocompleteInput'
 
 const AutocompleteWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -21,7 +20,7 @@ const AutocompleteWidget = ({ question, values, currentSet, disabled, createValu
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
                 {
                   (question.is_collection || values.length > 1) && (

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
+import QuestionEraseValue from '../QuestionEraseValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import DateInput from './DateInput'
 
 const DateWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -21,8 +21,9 @@ const DateWidget = ({ question, values, currentSet, disabled, createValue, updat
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
+                <QuestionEraseValue value={value} updateValue={updateValue}/>
                 {
                   (question.is_collection || values.length > 1) && (
                     <QuestionRemoveValue value={value} deleteValue={deleteValue} />

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import FileInput from './FileInput'
 
 const FileWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -21,7 +20,7 @@ const FileWidget = ({ question, values, currentSet, disabled, createValue, updat
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
                 {
                   (question.is_collection || values.length > 1) && (

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js
@@ -4,11 +4,10 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
+import QuestionEraseValue from '../QuestionEraseValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
-
 import RadioInput from './RadioInput'
 
 const RadioWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -22,8 +21,9 @@ const RadioWidget = ({ question, values, currentSet, disabled, createValue, upda
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
+                <QuestionEraseValue value={value} updateValue={updateValue}/>
                 {
                   (question.is_collection || values.length > 1) && (
                     <QuestionRemoveValue value={value} deleteValue={deleteValue} />

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js
@@ -5,10 +5,10 @@ import {  isNil } from 'lodash'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
+import QuestionEraseValue from '../QuestionEraseValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import RangeInput from './RangeInput'
 
 const RangeWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -28,8 +28,9 @@ const RangeWidget = ({ question, values, currentSet, disabled, createValue, upda
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
+                <QuestionEraseValue value={value} updateValue={updateValue} />
                 {
                   (question.is_collection || values.length > 1) && (
                     <QuestionRemoveValue value={value} deleteValue={deleteValue} />

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import SelectInput from './SelectInput'
 
 const SelectWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -21,7 +20,7 @@ const SelectWidget = ({ question, values, currentSet, disabled, createValue, upd
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
                 {
                   (question.is_collection || values.length > 1) && (

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 
 import { isDefaultValue } from '../../../../utils/value'
 
-import DefaultBadge from './common/DefaultBadge'
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
 import TextInput from './TextInput'
@@ -20,7 +20,7 @@ const TextWidget = ({ question, values, currentSet, disabled, focus, createValue
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
                 {
                   (question.is_collection || values.length > 1) && (

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 
 import { isDefaultValue } from '../../../../utils/value'
 
-import DefaultBadge from './common/DefaultBadge'
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
 import TextareaInput from './TextareaInput'
@@ -20,7 +20,7 @@ const TextareaWidget = ({ question, values, currentSet, disabled, focus, createV
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
                 {
                   (question.is_collection || values.length > 1) && (

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 const YesNoInput = ({ value, disabled, isDefault, updateValue }) => {
   const [inputValue, setInputValue] = useState('')
-  useEffect(() => {setInputValue(value.text)}, [value.id])
+  useEffect(() => {setInputValue(value.text)}, [value.id, value.text])
 
   const handleChange = (value, text) => {
     updateValue(value, { text })

diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
+import QuestionDefault from '../QuestionDefault'
+import QuestionEraseValue from '../QuestionEraseValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import DefaultBadge from './common/DefaultBadge'
-
 import YesNoInput from './YesNoInput'
 
 const YesNoWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
@@ -21,8 +21,9 @@ const YesNoWidget = ({ question, values, currentSet, disabled, createValue, upda
             <div key={valueIndex} className="interview-input">
               <div className="interview-input-options">
                 {
-                  isDefault && <DefaultBadge />
+                  isDefault && <QuestionDefault />
                 }
+                <QuestionEraseValue value={value} updateValue={updateValue}/>
                 {
                   (question.is_collection || values.length > 1) && (
                     <QuestionRemoveValue value={value} deleteValue={deleteValue} />

diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
@@ -191,7 +191,7 @@
         z-index: 5;
         margin-right: 8px;
 
-        .btn-reset-value,
+        .btn-erase-value,
         .btn-remove-value {
             opacity: 0.8;
             line-height: 20px;
@@ -205,12 +205,12 @@
         //     margin-left: 2px;
         // }
 
-        .btn-reset-value:hover,
+        .btn-erase-value:hover,
         .btn-remove-value:hover {
             opacity: 1;
         }
 
-        .btn-reset-value:focus,
+        .btn-erase-value:focus,
         .btn-remove-value:focus {
             outline: 0;
         }