Add Save and continue editing button

rdmorganiser · Mar 28, 2023 · 3849b42 · 3849b42
1 parent ce7d6d7
commit 3849b42
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 178 deletions.
diff --git a/rdmo/management/assets/js/actions/elementActions.js b/rdmo/management/assets/js/actions/elementActions.js
@@ -308,7 +308,7 @@ export function fetchElementError(error) {
 
 // store element
 
-export function storeElement(elementType, element) {
+export function storeElement(elementType, element, back) {
   return function(dispatch, getState) {
     dispatch(storeElementInit(element))
 
@@ -362,7 +362,9 @@ export function storeElement(elementType, element) {
     dispatch(action)
       .then(element => {
         dispatch(storeElementSuccess(element))
-        if (getState().elements.elementAction == 'create') {
+        if (back) {
+          history.back()
+        } else if (getState().elements.elementAction == 'create') {
           dispatch(fetchElement(getState().elements.elementType, element.id))
         }
       })
@@ -592,7 +594,7 @@ export function deleteElement(elementType, element) {
     dispatch(action)
       .then(() => {
         dispatch(deleteElementSuccess(element))
-        dispatch(fetchElements(elementType))
+        history.back()
       })
       .catch(error => dispatch(deleteElementError(element, error)))
   }

diff --git a/rdmo/management/assets/js/components/common/Buttons.js b/rdmo/management/assets/js/components/common/Buttons.js
@@ -9,23 +9,22 @@ const BackButton = () => (
   </button>
 )
 
-const SaveButton = ({ onClick }) => (
-  <button className="element-button btn btn-xs btn-primary" onClick={event => onClick()}>
-    {gettext('Save')}
-  </button>
-)
-
-SaveButton.propTypes = {
-  onClick: PropTypes.func.isRequired
+const SaveButton = ({ element, onClick, back }) => {
+
+  const className = classNames({
+    'element-button btn btn-xs': true,
+    'btn-primary': back,
+    'btn-default': !back
+  })
+
+  return (
+    <button className={className} onClick={event => onClick(back)}>
+      {back ? gettext('Save') : gettext('Save and continue editing')}
+    </button>
+  )
 }
 
-const CreateButton = ({ onClick }) => (
-  <button className="element-button btn btn-xs btn-success" onClick={event => onClick()}>
-    {gettext('Create')}
-  </button>
-)
-
-CreateButton.propTypes = {
+SaveButton.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
@@ -39,25 +38,16 @@ NewButton.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-const DeleteButton = ({ onClick }) => (
-  <button className="element-button btn btn-xs btn-danger" onClick={event => onClick()}>
-    {gettext('Delete')}
-  </button>
-)
-
-DeleteButton.propTypes = {
-  onClick: PropTypes.func.isRequired
+const DeleteButton = ({ element, onClick }) => {
+  return element.id && (
+    <button className="element-button btn btn-xs btn-danger" onClick={event => onClick()}>
+      {gettext('Delete')}
+    </button>
+  )
 }
 
-const DefaultButton = ({ text, onClick }) => (
-  <button className="element-button btn btn-default" onClick={event => onClick()}>
-    {text}
-  </button>
-)
-
 DeleteButton.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-
-export { BackButton, SaveButton, CreateButton, NewButton, DeleteButton }
+export { BackButton, SaveButton, NewButton, DeleteButton }
diff --git a/rdmo/management/assets/js/components/edit/EditAttribute.js b/rdmo/management/assets/js/components/edit/EditAttribute.js
@@ -8,7 +8,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
+import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
 
 import AttributeInfo from '../info/AttributeInfo'
 import DeleteAttributeModal from '../modals/DeleteAttributeModal'
@@ -20,7 +20,7 @@ const EditAttribute = ({ config, attribute, elements, elementActions }) => {
   const { attributes, conditions, pages, questionsets, questions, tasks } = elements
 
   const updateAttribute = (key, value) => elementActions.updateElement(attribute, {[key]: value})
-  const storeAttribute = () => elementActions.storeElement('attributes', attribute)
+  const storeAttribute = (back) => elementActions.storeElement('attributes', attribute, back)
   const deleteAttribute = () => elementActions.deleteElement('attributes', attribute)
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
@@ -32,16 +32,14 @@ const EditAttribute = ({ config, attribute, elements, elementActions }) => {
       <div className="panel-heading">
         <div className="pull-right">
           <BackButton />
-          {
-            attribute.id ? <SaveButton onClick={storeAttribute} />
-                         : <CreateButton onClick={storeAttribute} />
-          }
+          <SaveButton element={attribute} onClick={storeAttribute} />
+          <SaveButton element={attribute} onClick={storeAttribute} back={true}/>
         </div>
         {
-          attribute.id ? <div>
+          attribute.id ? <>
             <strong>{gettext('Attribute')}{': '}</strong>
             <code className="code-domain">{attribute.uri}</code>
-          </div> : <strong>{gettext('Create attribute')}</strong>
+          </> : <strong>{gettext('Create attribute')}</strong>
         }
       </div>
 
@@ -79,12 +77,10 @@ const EditAttribute = ({ config, attribute, elements, elementActions }) => {
       <div className="panel-footer">
         <div className="pull-right">
           <BackButton />
-          {
-            attribute.id ? <SaveButton onClick={storeAttribute} />
-                         : <CreateButton onClick={storeAttribute} />
-          }
+          <SaveButton element={attribute} onClick={storeAttribute} />
+          <SaveButton element={attribute} onClick={storeAttribute} back={true}/>
         </div>
-        {attribute.id && <DeleteButton onClick={openDeleteModal} />}
+        <DeleteButton element={attribute} onClick={openDeleteModal} />
       </div>
 
       <DeleteAttributeModal attribute={attribute} info={info} show={showDeleteModal}

diff --git a/rdmo/management/assets/js/components/edit/EditCatalog.js b/rdmo/management/assets/js/components/edit/EditCatalog.js
@@ -9,7 +9,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
+import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
 
 import CatalogInfo from '../info/CatalogInfo'
 import DeleteCatalogModal from '../modals/DeleteCatalogModal'
@@ -21,7 +21,7 @@ const EditCatalog = ({ config, catalog, elements, elementActions }) => {
   const { sites, groups, sections } = elements
 
   const updateCatalog = (key, value) => elementActions.updateElement(catalog, {[key]: value})
-  const storeCatalog = () => elementActions.storeElement('catalogs', catalog)
+  const storeCatalog = (back) => elementActions.storeElement('catalogs', catalog, back)
   const deleteCatalog = () => elementActions.deleteElement('catalogs', catalog)
   const createSection = () => elementActions.createElement('sections', catalog)
 
@@ -34,16 +34,14 @@ const EditCatalog = ({ config, catalog, elements, elementActions }) => {
       <div className="panel-heading">
         <div className="pull-right">
           <BackButton />
-          {
-            catalog.id ? <SaveButton onClick={storeCatalog} />
-                       : <CreateButton onClick={storeCatalog} />
-          }
+          <SaveButton element={catalog} onClick={storeCatalog} />
+          <SaveButton element={catalog} onClick={storeCatalog} back={true}/>
         </div>
         {
-          catalog.id ? <div>
+          catalog.id ? <>
             <strong>{gettext('Catalog')}{': '}</strong>
             <code className="code-questions">{catalog.uri}</code>
-          </div> : <strong>{gettext('Create catalog')}</strong>
+          </> : <strong>{gettext('Create catalog')}</strong>
         }
       </div>
 
@@ -103,12 +101,10 @@ const EditCatalog = ({ config, catalog, elements, elementActions }) => {
       <div className="panel-footer">
         <div className="pull-right">
           <BackButton />
-          {
-            catalog.id ? <SaveButton onClick={storeCatalog} />
-                       : <CreateButton onClick={storeCatalog} />
-          }
+          <SaveButton element={catalog} onClick={storeCatalog} />
+          <SaveButton element={catalog} onClick={storeCatalog} back={true} />
         </div>
-        {catalog.id && <DeleteButton onClick={openDeleteModal} />}
+        <DeleteButton element={catalog} onClick={openDeleteModal} />
       </div>
 
       <DeleteCatalogModal catalog={catalog} info={info} show={showDeleteModal}

diff --git a/rdmo/management/assets/js/components/edit/EditCondition.js b/rdmo/management/assets/js/components/edit/EditCondition.js
@@ -8,7 +8,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
+import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
 
 import ConditionInfo from '../info/ConditionInfo'
 import DeleteConditionModal from '../modals/DeleteConditionModal'
@@ -20,7 +20,7 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
   const { relations, attributes, optionsets, options, pages, questionsets, questions, tasks } = elements
 
   const updateCondition = (key, value) => elementActions.updateElement(condition, {[key]: value})
-  const storeCondition = () => elementActions.storeElement('conditions', condition)
+  const storeCondition = (back) => elementActions.storeElement('conditions', condition, back)
   const deleteCondition = () => elementActions.deleteElement('conditions', condition)
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
@@ -32,16 +32,14 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
       <div className="panel-heading">
         <div className="pull-right">
           <BackButton />
-          {
-            condition.id ? <SaveButton onClick={storeCondition} />
-                         : <CreateButton onClick={storeCondition} />
-          }
+          <SaveButton element={condition} onClick={storeCondition} />
+          <SaveButton element={condition} onClick={storeCondition} back={true}/>
         </div>
         {
-          condition.id ? <div>
+          condition.id ? <>
             <strong>{gettext('Condition')}{': '}</strong>
             <code className="code-conditions">{condition.uri}</code>
-          </div> : <strong>{gettext('Create condition')}</strong>
+          </> : <strong>{gettext('Create condition')}</strong>
         }
       </div>
 
@@ -91,12 +89,10 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
       <div className="panel-footer">
         <div className="pull-right">
           <BackButton />
-          {
-            condition.id ? <SaveButton onClick={storeCondition} />
-                         : <CreateButton onClick={storeCondition} />
-          }
+          <SaveButton element={condition} onClick={storeCondition} />
+          <SaveButton element={condition} onClick={storeCondition} back={true}/>
         </div>
-        {condition.id && <DeleteButton onClick={openDeleteModal} />}
+        <DeleteButton element={condition} onClick={openDeleteModal} />
       </div>
 
       <DeleteConditionModal condition={condition} info={info} show={showDeleteModal}

diff --git a/rdmo/management/assets/js/components/edit/EditOption.js b/rdmo/management/assets/js/components/edit/EditOption.js
@@ -7,7 +7,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
+import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
 
 import OptionInfo from '../info/OptionInfo'
 import DeleteOptionModal from '../modals/DeleteOptionModal'
@@ -21,7 +21,7 @@ const EditOption = ({ config, option, elements, elementActions }) => {
   const optionConditions = conditions.filter(e => option.conditions.includes(e.id))
 
   const updateOption = (key, value) => elementActions.updateElement(option, {[key]: value})
-  const storeOption = () => elementActions.storeElement('options', option)
+  const storeOption = (back) => elementActions.storeElement('options', option, back)
   const deleteOption = () => elementActions.deleteElement('options', option)
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
@@ -33,18 +33,19 @@ const EditOption = ({ config, option, elements, elementActions }) => {
       <div className="panel-heading">
         <div className="pull-right">
           <BackButton />
-          {option.id ? <SaveButton onClick={storeOption} /> : <CreateButton onClick={storeOption} />}
+          <SaveButton element={option} onClick={storeOption} />
+          <SaveButton element={option} onClick={storeOption} back={true}/>
         </div>
         {
-          option.id ? <div>
+          option.id ? <>
             <strong>{gettext('Option')}{': '}</strong>
             <code className="code-options">{option.uri}</code>
-          </div> : <strong>{gettext('Create option')}</strong>
+          </> : <strong>{gettext('Create option')}</strong>
         }
       </div>
 
       {
-        parent.optionset && <div className="panel-body panel-border">
+        parent && parent.optionset && <div className="panel-body panel-border">
           <p dangerouslySetInnerHTML={{
             __html:interpolate(gettext('This option will be added to the option set <code class="code-options">%s</code>.'), [parent.optionset.uri])
           }} />
@@ -103,9 +104,10 @@ const EditOption = ({ config, option, elements, elementActions }) => {
       <div className="panel-footer">
         <div className="pull-right">
           <BackButton />
-          {option.id ? <SaveButton onClick={storeOption} /> : <CreateButton onClick={storeOption} />}
+          <SaveButton element={option} onClick={storeOption} />
+          <SaveButton element={option} onClick={storeOption} back={true}/>
         </div>
-        {option.id && <DeleteButton onClick={openDeleteModal} />}
+        <DeleteButton element={option} onClick={openDeleteModal} />
       </div>
 
       <DeleteOptionModal option={option} info={info} show={showDeleteModal}

diff --git a/rdmo/management/assets/js/components/edit/EditOptionSet.js b/rdmo/management/assets/js/components/edit/EditOptionSet.js
@@ -10,7 +10,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
+import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
 
 import OptionSetInfo from '../info/OptionSetInfo'
 import DeleteOptionSetModal from '../modals/DeleteOptionSetModal'
@@ -24,7 +24,7 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
   const optionsetQuestions = questions.filter(e => optionset.questions.includes(e.id))
 
   const updateOptionSet = (key, value) => elementActions.updateElement(optionset, {[key]: value})
-  const storeOptionSet = () => elementActions.storeElement('optionsets', optionset)
+  const storeOptionSet = (back) => elementActions.storeElement('optionsets', optionset, back)
   const deleteOptionSet = () => elementActions.deleteElement('optionsets', optionset)
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
@@ -36,16 +36,14 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
       <div className="panel-heading">
         <div className="pull-right">
           <BackButton />
-          {
-            optionset.id ? <SaveButton onClick={storeOptionSet} />
-                         : <CreateButton onClick={storeOptionSet} />
-          }
+          <SaveButton element={optionset} onClick={storeOptionSet} />
+          <SaveButton element={optionset} onClick={storeOptionSet} back={true}/>
         </div>
         {
-          optionset.id ? <div>
+          optionset.id ? <>
             <strong>{gettext('Option set')}{': '}</strong>
             <code className="code-options">{optionset.uri}</code>
-          </div> : <strong>{gettext('Create option set')}</strong>
+          </> : <strong>{gettext('Create option set')}</strong>
         }
       </div>
 
@@ -92,12 +90,10 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
       <div className="panel-footer">
         <div className="pull-right">
           <BackButton />
-          {
-            optionset.id ? <SaveButton onClick={storeOptionSet} />
-                         : <CreateButton onClick={storeOptionSet} />
-          }
+          <SaveButton element={optionset} onClick={storeOptionSet} />
+          <SaveButton element={optionset} onClick={storeOptionSet} back={true}/>
         </div>
-        {optionset.id && <DeleteButton onClick={openDeleteModal} />}
+        <DeleteButton element={optionset} onClick={openDeleteModal} />
       </div>
 
       <DeleteOptionSetModal optionset={optionset} info={info} show={showDeleteModal}