From cdb35a2672d4518c78af109785a28f9c6c39c692 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Tue, 20 Aug 2024 17:35:57 +0200
Subject: [PATCH] Add copy_set function to question sets

---
 rdmo/core/assets/js/components/Modal.js       | 10 +++--
 .../js/interview/components/main/page/Page.js |  1 +
 .../main/questionset/QuestionSet.js           |  8 +++-
 .../main/questionset/QuestionSetCopyModal.js  | 21 +++++++++
 .../main/questionset/QuestionSetCopySet.js    | 44 +++++++++++++++++++
 .../main/questionset/QuestionSetRemoveSet.js  | 10 ++---
 rdmo/projects/assets/scss/interview.scss      | 16 +++----
 7 files changed, 91 insertions(+), 19 deletions(-)
 create mode 100644 rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopyModal.js
 create mode 100644 rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js

diff --git a/rdmo/core/assets/js/components/Modal.js b/rdmo/core/assets/js/components/Modal.js
index 48de205a36..c672dce1f4 100644
--- a/rdmo/core/assets/js/components/Modal.js
+++ b/rdmo/core/assets/js/components/Modal.js
@@ -9,9 +9,13 @@ const Modal = ({ title, show, bsSize, submitText, submitColor, disableSubmit,
       <BootstrapModal.Header closeButton>
         <h2 className="modal-title">{title}</h2>
       </BootstrapModal.Header>
-      <BootstrapModal.Body>
-        { children }
-      </BootstrapModal.Body>
+      {
+        children && (
+          <BootstrapModal.Body>
+            { children }
+          </BootstrapModal.Body>
+        )
+      }
       <BootstrapModal.Footer>
         <button type="button" className="btn btn-default" onClick={onClose}>
           {gettext('Close')}
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 e2823a0abe..ff934eb845 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/Page.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -61,6 +61,7 @@ const Page = ({ config, templates, overview, page, sets, values, fetchPage,
                     createSet={createSet}
                     updateSet={updateSet}
                     deleteSet={deleteSet}
+                    copySet={copySet}
                     createValue={createValue}
                     updateValue={updateValue}
                     deleteValue={deleteValue}
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 a582ffaab5..a5697c475e 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
@@ -8,12 +8,13 @@ import Question from '../question/Question'
 
 import QuestionSetAddSet from './QuestionSetAddSet'
 import QuestionSetAddSetHelp from './QuestionSetAddSetHelp'
+import QuestionSetCopySet from './QuestionSetCopySet'
 import QuestionSetHelp from './QuestionSetHelp'
 import QuestionSetHelpTemplate from './QuestionSetHelpTemplate'
 import QuestionSetRemoveSet from './QuestionSetRemoveSet'
 
 const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager,
-                       parentSet, createSet, updateSet, deleteSet,
+                       parentSet, createSet, updateSet, deleteSet, copySet,
                        createValue, updateValue, deleteValue, copyValue }) => {
 
   const setPrefix = getChildPrefix(parentSet)
@@ -35,7 +36,8 @@ const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager
           currentSets.map((set, setIndex) => (
             <div key={setIndex} className="interview-block">
               <div className="interview-block-options">
-                <QuestionSetRemoveSet questionset={questionset} set={set} deleteSet={deleteSet} />
+                <QuestionSetCopySet questionset={questionset} sets={sets} currentSet={set} copySet={copySet} />
+                <QuestionSetRemoveSet questionset={questionset} currentSet={set} deleteSet={deleteSet} />
               </div>
               <div className="row">
                 {
@@ -55,6 +57,7 @@ const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager
                             createSet={createSet}
                             updateSet={updateSet}
                             deleteSet={deleteSet}
+                            copySet={copySet}
                             createValue={createValue}
                             updateValue={updateValue}
                             deleteValue={deleteValue}
@@ -107,6 +110,7 @@ QuestionSet.propTypes = {
   createSet: PropTypes.func.isRequired,
   updateSet: PropTypes.func.isRequired,
   deleteSet: PropTypes.func.isRequired,
+  copySet: PropTypes.func.isRequired,
   createValue: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,
   deleteValue: PropTypes.func.isRequired,
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopyModal.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopyModal.js
new file mode 100644
index 0000000000..151059eb60
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopyModal.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+const QuestionSetCopyModal = ({ title, show, onClose, onSubmit }) => {
+  return (
+    <Modal title={title} show={show} submitText={gettext('Copy')} submitColor="info"
+           onClose={onClose} onSubmit={onSubmit}>
+    </Modal>
+  )
+}
+
+QuestionSetCopyModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+}
+
+export default QuestionSetCopyModal
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
new file mode 100644
index 0000000000..f472b099c8
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { capitalize, last } from 'lodash'
+
+import useModal from 'rdmo/core/assets/js/hooks/useModal'
+
+import QuestionSetCopyModal from './QuestionSetCopyModal'
+
+const QuestionCopySet = ({ questionset, sets, currentSet, copySet }) => {
+
+  const [showCopyModal, openCopyModal, closeCopyModal] = useModal()
+
+  const handleCopySet = () => {
+    copySet(currentSet, null, {
+      set_prefix: currentSet.set_prefix,
+      set_index: last(sets) ? last(sets).set_index + 1 : 0,
+    })
+    closeCopyModal()
+  }
+
+  return questionset.is_collection && (
+    <>
+      <button type="button" className="btn btn-link btn-copy-set" onClick={openCopyModal}>
+        <i className="fa fa-copy fa-btn"></i>
+      </button>
+
+      <QuestionSetCopyModal
+        title={capitalize(questionset.verbose_name)}
+        show={showCopyModal}
+        onClose={closeCopyModal}
+        onSubmit={handleCopySet}
+      />
+    </>
+  )
+}
+
+QuestionCopySet.propTypes = {
+  questionset: PropTypes.object.isRequired,
+  sets: PropTypes.array.isRequired,
+  currentSet: PropTypes.object.isRequired,
+  copySet: PropTypes.func.isRequired
+}
+
+export default QuestionCopySet
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
index 9c97e488f7..2d77e9cb8e 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
@@ -6,12 +6,12 @@ import useModal from 'rdmo/core/assets/js/hooks/useModal'
 
 import QuestionSetDeleteModal from './QuestionSetDeleteModal'
 
-const QuestionAddSet = ({ questionset, set, deleteSet }) => {
+const QuestionRemoveSet = ({ questionset, currentSet, deleteSet }) => {
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useModal()
 
   const handleDeleteSet = () => {
-    deleteSet(set)
+    deleteSet(currentSet)
     closeDeleteModal()
   }
 
@@ -31,10 +31,10 @@ const QuestionAddSet = ({ questionset, set, deleteSet }) => {
   )
 }
 
-QuestionAddSet.propTypes = {
+QuestionRemoveSet.propTypes = {
   questionset: PropTypes.object.isRequired,
-  set: PropTypes.object.isRequired,
+  currentSet: PropTypes.object.isRequired,
   deleteSet: PropTypes.func.isRequired
 }
 
-export default QuestionAddSet
+export default QuestionRemoveSet
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 20eb128e67..b26bd10373 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -100,22 +100,20 @@
 
     .interview-block-options {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: 6px;
+        right: 8px;
         z-index: 5;
 
+        display: flex;
+        gap: 4px;
+
+        .btn-copy-set,
         .btn-remove-set {
             opacity: 0.8;
             line-height: 20px;
             font-size: 14px;
 
-            position: absolute;
-            z-index: 5;
-            top: 0;
-            right: 0;
-
-            padding-left: 8px;
-            padding-right: 8px;
+            padding: 0;
 
             &:hover {
                 opacity: 1;