Add append to reuse value functionality

Author: jochenklar

rdmo/core/assets/js/components/Modal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Modal as BootstrapModal } from 'react-bootstrap'
 
-const Modal = ({ title, show, modalProps, submitLabel, submitProps, onClose, onSubmit, children }) => {
+const Modal = ({ title, show, modalProps, submitLabel, submitProps, onClose, onSubmit, children, buttons }) => {
   return (
     <BootstrapModal className="element-modal" onHide={onClose} show={show} {...modalProps}>
       <BootstrapModal.Header closeButton>
@@ -19,6 +19,7 @@ const Modal = ({ title, show, modalProps, submitLabel, submitProps, onClose, onS
         <button type="button" className="btn btn-default" onClick={onClose}>
           {gettext('Close')}
         </button>
+        {buttons}
         {
           onSubmit && (
             <button type="button" className="btn btn-primary" onClick={onSubmit} {...submitProps}>
@@ -40,6 +41,7 @@ Modal.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSubmit: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  buttons: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 }
 
 export default Modal

rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js

@@ -9,7 +9,7 @@ import Modal from 'rdmo/core/assets/js/components/Modal'
 
 import Search from '../Search'
 
-const QuestionReuseValue = ({ page, value, updateValue }) => {
+const QuestionReuseValue = ({ page, question, value, updateValue }) => {
   const initialFormValues = {
     value: ''
   }
@@ -20,12 +20,18 @@ const QuestionReuseValue = ({ page, value, updateValue }) => {
   ] = useLsState('rdmo.interview.reuse', initialFormValues, ['value'])
   const [formErrors, setFormErrors] = useState([])
 
-  const handleSubmit = () => {
+  const handleSubmit = (mode) => {
     if (isEmpty(formValues.value)) {
       setFormErrors({ value: true })
     } else {
       const { text, option, external_id } = formValues.value
-      updateValue(value, { text, option, external_id })
+
+      if (mode == 'append') {
+        updateValue(value, { text: `${value.text} ${text}`, option, external_id })
+      } else if (mode == 'replace') {
+        updateValue(value, { text, option, external_id })
+      }
+
       setShow(false)
     }
   }
@@ -44,14 +50,26 @@ const QuestionReuseValue = ({ page, value, updateValue }) => {
     }
   }, [formValues, formValues.value])
 
+  const modalButtons = <>
+    {
+      ['text', 'textarea'].includes(question.widget_type) && (
+        <button type="button" className="btn btn-primary" onClick={() => handleSubmit('append')}>
+          {gettext('Append')}
+        </button>
+      )
+    }
+    <button type="button" className="btn btn-primary" onClick={() => handleSubmit('replace')}>
+      {gettext('Replace')}
+    </button>
+  </>
+
   return <>
     <button type="button" className="btn btn-link btn-reuse-value" onClick={() => setShow(true)}>
       <i className="fa fa-arrow-circle-down fa-btn"></i>
     </button>
 
-    <Modal title={gettext('Reuse answer')} show={show} submitLabel={gettext('Reuse')}
-           submitProps={{className: 'btn btn-primary'}}
-           onClose={() => setShow(false)} onSubmit={handleSubmit}>
+    <Modal title={gettext('Reuse answer')} show={show} buttons={modalButtons}
+           onClose={() => setShow(false)} >
       <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>
         <label className="control-label" htmlFor="interview-page-tabs-modal-form-import">
           {gettext('Answer')}
@@ -75,6 +93,7 @@ const QuestionReuseValue = ({ page, value, updateValue }) => {
 
 QuestionReuseValue.propTypes = {
   page: PropTypes.object.isRequired,
+  question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
   updateValue: PropTypes.func.isRequired
 }

rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js

@@ -80,7 +80,7 @@ const QuestionReuseValues = ({ page, question, values, createValues, updateValue
       <i className="fa fa-arrow-circle-down fa-btn"></i>
     </button>
 
-    <Modal title={gettext('Reuse answer')} show={show} submitLabel={gettext('Reuse')}
+    <Modal title={gettext('Reuse answer')} show={show} submitLabel={gettext('Replace')}
            submitProps={{className: 'btn btn-primary'}}
            onClose={() => setShow(false)} onSubmit={handleSubmit}>
       <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>

rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js

@@ -28,7 +28,7 @@ const DateWidget = ({ page, question, values, siblings, currentSet, disabled, cr
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}

rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js

@@ -32,7 +32,7 @@ const RadioWidget = ({ page, question, values, siblings, currentSet, disabled,
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}

rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js

@@ -42,7 +42,7 @@ const RangeWidget = ({ page, question, values, siblings, currentSet, disabled,
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={handleEraseValue}/>
                     <QuestionRemoveValue
                       question={question}

rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js

@@ -32,7 +32,7 @@ const SelectWidget = ({ page, question, values, siblings, currentSet, disabled,
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
                       values={values}

rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js

@@ -28,7 +28,7 @@ const TextWidget = ({ page, question, values, siblings, currentSet, disabled,
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
                       values={values}

rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js

@@ -28,7 +28,7 @@ const TextareaWidget = ({ page, question, values, siblings, currentSet, disabled
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}
                       values={values}

rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js

@@ -29,7 +29,7 @@ const YesNoWidget = ({ page, question, values, siblings, currentSet, disabled,
                 buttons={
                   <div className="buttons">
                     <QuestionSuccess value={value}/>
-                    <QuestionReuseValue page={page} value={value} updateValue={updateValue}/>
+                    <QuestionReuseValue page={page} question={question} value={value} updateValue={updateValue}/>
                     <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
                     <QuestionRemoveValue
                       question={question}