Add display checkboxes to management interface

rdmorganiser · Mar 24, 2023 · 4809a47 · 4809a47
1 parent e9ed0ac
commit 4809a47
Show file tree

Hide file tree

Showing 69 changed files with 402 additions and 166 deletions.
diff --git a/...ts/js/components/common/ElementButtons.js → ...nt/assets/js/components/common/Buttons.js b/...ts/js/components/common/ElementButtons.js → ...nt/assets/js/components/common/Buttons.js
@@ -1,4 +1,4 @@
-import React, { Component} from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import isNil from 'lodash/isNil'

diff --git a/rdmo/management/assets/js/components/common/Checkboxes.js b/rdmo/management/assets/js/components/common/Checkboxes.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import isNil from 'lodash/isNil'
+
+const Checkbox = ({ label, value, onChange }) => (
+  <span className="checkbox">
+    <label>
+        <input type="checkbox" checked={value} onChange={() => onChange(!value)} />
+        { label }
+    </label>
+  </span>
+)
+
+Checkbox.propTypes = {
+  value: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export { Checkbox }
diff --git a/...sets/js/components/common/ElementLinks.js → ...ment/assets/js/components/common/Links.js b/...sets/js/components/common/ElementLinks.js → ...ment/assets/js/components/common/Links.js
diff --git a/...ets/js/components/common/ElementModals.js → ...ent/assets/js/components/common/Modals.js b/...ets/js/components/common/ElementModals.js → ...ent/assets/js/components/common/Modals.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Modal } from 'react-bootstrap';
 
-const DeleteElementModal = ({ title, show, onClose, onDelete, children }) => {
+const DeleteModal = ({ title, show, onClose, onDelete, children }) => {
   return (
     <Modal bsSize="large" show={show} onHide={onClose} className="element-modal">
       <Modal.Header closeButton>
@@ -23,11 +23,11 @@ const DeleteElementModal = ({ title, show, onClose, onDelete, children }) => {
   )
 }
 
-DeleteElementModal.propTypes = {
+DeleteModal.propTypes = {
   title: PropTypes.string.isRequired,
   show: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired
 }
 
-export { DeleteElementModal }
+export { DeleteModal }
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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import AttributeInfo from '../info/AttributeInfo'
 import DeleteAttributeModal from '../modals/DeleteAttributeModal'

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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import CatalogInfo from '../info/CatalogInfo'
 import DeleteCatalogModal from '../modals/DeleteCatalogModal'

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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import ConditionInfo from '../info/ConditionInfo'
 import DeleteConditionModal from '../modals/DeleteConditionModal'

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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import OptionInfo from '../info/OptionInfo'
 import DeleteOptionModal from '../modals/DeleteOptionModal'

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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import OptionSetInfo from '../info/OptionSetInfo'
 import DeleteOptionSetModal from '../modals/DeleteOptionSetModal'

diff --git a/rdmo/management/assets/js/components/edit/EditPage.js b/rdmo/management/assets/js/components/edit/EditPage.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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import PageInfo from '../info/PageInfo'
 import DeletePageModal from '../modals/DeletePageModal'

diff --git a/rdmo/management/assets/js/components/edit/EditQuestion.js b/rdmo/management/assets/js/components/edit/EditQuestion.js
@@ -9,8 +9,7 @@ import Text from '../forms/Text'
 import Textarea from '../forms/Textarea'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/ElementButtons'
-import { DeleteElementModal } from '../common/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import QuestionInfo from '../info/QuestionInfo'
 import DeleteQuestionModal from '../modals/DeleteQuestionModal'

diff --git a/rdmo/management/assets/js/components/edit/EditQuestionSet.js b/rdmo/management/assets/js/components/edit/EditQuestionSet.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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import QuestionSetInfo from '../info/QuestionSetInfo'
 import DeleteQuestionSetModal from '../modals/DeleteQuestionSetModal'

diff --git a/rdmo/management/assets/js/components/edit/EditSection.js b/rdmo/management/assets/js/components/edit/EditSection.js
@@ -9,7 +9,7 @@ import Textarea from '../forms/Textarea'
 import Select from '../forms/Select'
 import UriPrefix from '../forms/UriPrefix'
 
-import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import SectionInfo from '../info/SectionInfo'
 import DeleteSectionModal from '../modals/DeleteSectionModal'

diff --git a/rdmo/management/assets/js/components/edit/EditTask.js b/rdmo/management/assets/js/components/edit/EditTask.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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import TaskInfo from '../info/TaskInfo'
 import DeleteTaskModal from '../modals/DeleteTaskModal'

diff --git a/rdmo/management/assets/js/components/edit/EditView.js b/rdmo/management/assets/js/components/edit/EditView.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/ElementButtons'
+import { BackButton, SaveButton, CreateButton, DeleteButton } from '../common/Buttons'
 
 import ViewInfo from '../info/ViewInfo'
 import DeleteViewModal from '../modals/DeleteViewModal'

diff --git a/rdmo/management/assets/js/components/element/Attribute.js b/rdmo/management/assets/js/components/element/Attribute.js
@@ -4,7 +4,7 @@ import isUndefined from 'lodash/isUndefined'
 
 import { filterElement } from '../../utils/filter'
 
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const Attribute = ({ config, attribute, elementActions, display='list', filter=null, indent=0 }) => {
 
@@ -23,7 +23,7 @@ const Attribute = ({ config, attribute, elementActions, display='list', filter=n
         <NestedLink element={attribute} verboseName={verboseName} onClick={fetchNested} />
         <ExportLink element={attribute} verboseName={verboseName} />
       </div>
-      <div style={{ paddingLeft: 15 * indent }}>
+      <div>
         <strong>{gettext('Attribute')}{': '}</strong>
         <code className="code-domain">{attribute.uri}</code>
       </div>
@@ -41,7 +41,7 @@ const Attribute = ({ config, attribute, elementActions, display='list', filter=n
       return (
         <>
           {
-            showElement && <div className="panel panel-default">
+            showElement && <div className="panel panel-default" style={{ marginLeft: 30 * indent }}>
               <div className="panel-body">
                 { elementNode }
               </div>

diff --git a/rdmo/management/assets/js/components/element/Catalog.js b/rdmo/management/assets/js/components/element/Catalog.js
@@ -5,7 +5,7 @@ import isUndefined from 'lodash/isUndefined'
 import { filterElement } from '../../utils/filter'
 
 import Section from './Section'
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const Catalog = ({ config, catalog, elementActions, display='list', filter=null }) => {
 
@@ -30,9 +30,11 @@ const Catalog = ({ config, catalog, elementActions, display='list', filter=null
         <p>
           <strong>{gettext('Catalog')}{': '}</strong> {catalog.title}
         </p>
-        <p>
-          <code className="code-questions">{catalog.uri}</code>
-        </p>
+        {
+          config.display.uri.catalogs && <p>
+            <code className="code-questions">{catalog.uri}</code>
+          </p>
+        }
       </div>
     </div>
   )

diff --git a/rdmo/management/assets/js/components/element/Condition.js b/rdmo/management/assets/js/components/element/Condition.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { filterElement } from '../../utils/filter'
 
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const Condition = ({ config, condition, elementActions, filter=null }) => {
 

diff --git a/rdmo/management/assets/js/components/element/Option.js b/rdmo/management/assets/js/components/element/Option.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 import { filterElement } from '../../utils/filter'
 
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
-const Option = ({ config, option, elementActions, display='list', filter=null }) => {
+const Option = ({ config, option, elementActions, display='list', indent=0, filter=null }) => {
 
   const verboseName = gettext('option')
   const showElement = filterElement(filter, option)
@@ -24,9 +24,11 @@ const Option = ({ config, option, elementActions, display='list', filter=null })
         <p>
           <strong>{gettext('Option')}{': '}</strong> {option.text}
         </p>
-        <p>
-          <code className="code-options">{option.uri}</code>
-        </p>
+        {
+          config.display.uri.options && <p>
+            <code className="code-options">{option.uri}</code>
+          </p>
+        }
       </div>
     </div>
   )
@@ -40,7 +42,7 @@ const Option = ({ config, option, elementActions, display='list', filter=null })
       )
     case 'nested':
       return showElement && (
-        <div className="panel panel-default panel-nested">
+        <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
           <div className="panel-body">
             { elementNode }
           </div>
@@ -54,6 +56,7 @@ Option.propTypes = {
   option: PropTypes.object.isRequired,
   elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
+  indent: PropTypes.number,
   filter: PropTypes.object
 }
 

diff --git a/rdmo/management/assets/js/components/element/OptionSet.js b/rdmo/management/assets/js/components/element/OptionSet.js
@@ -5,7 +5,7 @@ import isUndefined from 'lodash/isUndefined'
 import { filterElement } from '../../utils/filter'
 
 import Option from './Option'
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const OptionSet = ({ config, optionset, elementActions, display='list', filter=null }) => {
 

diff --git a/rdmo/management/assets/js/components/element/Page.js b/rdmo/management/assets/js/components/element/Page.js
@@ -6,12 +6,12 @@ import { filterElement } from '../../utils/filter'
 
 import QuestionSet from './QuestionSet'
 import Question from './Question'
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const Page = ({ config, page, elementActions, display='list', filter=null, indent=0 }) => {
 
   const verboseName = gettext('page')
-  const showElement = filterElement(filter, page)
+  const showElement = filterElement(filter, page) && config.display.elements.pages
 
   const fetchEdit = () => elementActions.fetchElement('pages', page.id)
   const fetchNested = () => elementActions.fetchElement('pages', page.id, 'nested')
@@ -29,9 +29,16 @@ const Page = ({ config, page, elementActions, display='list', filter=null, inden
         <p>
           <strong>{gettext('Page')}{': '}</strong> {page.title}
         </p>
-        <p>
-          <code className="code-questions">{page.uri}</code>
-        </p>
+        {
+          config.display.uri.pages && <p>
+            <code className="code-questions">{page.uri}</code>
+          </p>
+        }
+        {
+          config.display.uri.attributes && page.attribute_uri && <p>
+            <code className="code-domain">{page.attribute_uri}</code>
+          </p>
+        }
       </div>
     </div>
   )
@@ -47,7 +54,7 @@ const Page = ({ config, page, elementActions, display='list', filter=null, inden
       return (
         <>
           {
-            showElement && <div className="panel panel-default panel-nested" style={{ marginLeft: 15 * indent }}>
+            showElement && <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
               <div className="panel-heading">
                 { elementNode }
               </div>

diff --git a/rdmo/management/assets/js/components/element/Question.js b/rdmo/management/assets/js/components/element/Question.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 
 import { filterElement } from '../../utils/filter'
 
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const Question = ({ config, question, elementActions, display='list', filter=null, indent=0 }) => {
 
   const verboseName = gettext('question')
-  const showElement = filterElement(filter, question)
+  const showElement = filterElement(filter, question) && config.display.elements.questions
 
   const fetchEdit = () => elementActions.fetchElement('questions', question.id)
   const toggleLocked = () => elementActions.storeElement('questions', {...question, locked: !question.locked })
@@ -25,9 +25,16 @@ const Question = ({ config, question, elementActions, display='list', filter=nul
           <strong className={question.is_optional ? 'text-muted' : ''}>{gettext('Question')}{': '}</strong>
           {question.text}
         </p>
-        <p>
-          <code className="code-questions">{question.uri}</code>
-        </p>
+        {
+          config.display.uri.questions && <p>
+            <code className="code-questions">{question.uri}</code>
+          </p>
+        }
+        {
+          config.display.uri.attributes && question.attribute_uri && <p>
+            <code className="code-domain">{question.attribute_uri}</code>
+          </p>
+        }
       </div>
     </div>
   )
@@ -41,7 +48,7 @@ const Question = ({ config, question, elementActions, display='list', filter=nul
       )
     case 'nested':
       return showElement && (
-        <div className="panel panel-default panel-nested" style={{ marginLeft: 15 * indent }}>
+        <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
           <div className="panel-body">
             { elementNode }
           </div>

diff --git a/rdmo/management/assets/js/components/element/QuestionSet.js b/rdmo/management/assets/js/components/element/QuestionSet.js
@@ -5,12 +5,12 @@ import isUndefined from 'lodash/isUndefined'
 import { filterElement } from '../../utils/filter'
 
 import Question from './Question'
-import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/ElementLinks'
+import { EditLink, AvailableLink, LockedLink, NestedLink, ExportLink } from '../common/Links'
 
 const QuestionSet = ({ config, questionset, elementActions, display='list', filter=null, indent=0 }) => {
 
   const verboseName = gettext('question set')
-  const showElement = filterElement(filter, questionset)
+  const showElement = filterElement(filter, questionset) && config.display.elements.questionsets
 
   const fetchEdit = () => elementActions.fetchElement('questionsets', questionset.id)
   const fetchNested = () => elementActions.fetchElement('questionsets', questionset.id, 'nested')
@@ -28,9 +28,16 @@ const QuestionSet = ({ config, questionset, elementActions, display='list', filt
         <p>
           <strong>{gettext('Question set')}{': '}</strong> {questionset.title}
         </p>
-        <p>
-          <code className="code-questions">{questionset.uri}</code>
-        </p>
+        {
+          config.display.uri.questionsets && <p>
+            <code className="code-questions">{questionset.uri}</code>
+          </p>
+        }
+        {
+          config.display.uri.attributes && questionset.attribute_uri &&<p>
+            <code className="code-domain">{questionset.attribute_uri}</code>
+          </p>
+        }
       </div>
     </div>
   )
@@ -46,7 +53,7 @@ const QuestionSet = ({ config, questionset, elementActions, display='list', filt
       return (
         <>
           {
-            showElement && <div className="panel panel-default panel-nested" style={{ marginLeft: 15 * indent }}>
+            showElement && <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
               <div className="panel-heading">
                 { elementNode }
               </div>