Merge pull request #790 from CalamityC/745-add-order-parameter

745 add order parameter
rdmorganiser · Nov 30, 2023 · ebf37d4 · ebf37d4
2 parents 0c38d52 + f11bf6c
commit ebf37d4
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 31 deletions.
diff --git a/rdmo/management/assets/js/components/common/Links.js b/rdmo/management/assets/js/components/common/Links.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import isEmpty from 'lodash/isEmpty'
+import isNil from 'lodash/isNil'
 import isUndefined from 'lodash/isUndefined'
 
 import Link from 'rdmo/core/assets/js/components/Link'
@@ -179,18 +180,24 @@ ExtendLink.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-const CodeLink = ({ className, uri, onClick }) => {
+const CodeLink = ({ className, uri, onClick, order }) => {
   return (
-    <Link onClick={onClick}>
-      <code className={className}>{uri}</code>
-    </Link>
+    <>
+      <Link onClick={onClick}>
+        <code className={className}>{uri}</code>
+      </Link>
+      {!isNil(order) ? (
+        <>{' '}<code className="code-order ng-binding">{order}</code></>
+      ) : null}
+    </>
   )
 }
 
 CodeLink.propTypes = {
   className: PropTypes.string.isRequired,
   uri: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  order: PropTypes.number
 }
 
 const ErrorLink = ({ element, onClick }) => {

diff --git a/rdmo/management/assets/js/components/element/Page.js b/rdmo/management/assets/js/components/element/Page.js
@@ -14,7 +14,7 @@ import { ReadOnlyIcon } from '../common/Icons'
 import { Drag, Drop } from '../common/DragAndDrop'
 
 const Page = ({ config, page, configActions, elementActions, display='list', indent=0,
-                filter=false, filterEditors=false }) => {
+                filter=false, filterEditors=false, order }) => {
 
   const showElement = filterElement(config, filter, false, filterEditors, page)
   const showElements = get(config, `display.elements.pages.${page.id}`, true)
@@ -58,7 +58,7 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
         </p>
         {
           get(config, 'display.uri.pages', true) && <p>
-            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchEdit()} />
+            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchEdit()} order={order} />
           </p>
         }
         {
@@ -102,13 +102,17 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
           {
             showElements && page.elements.map((element, index) => {
               if (element.model == 'questions.questionset') {
+                const questionSetInfo = page.questionsets.find(info => info.questionset === element.id)
+                const questionSetOrder = questionSetInfo ? questionSetInfo.order : undefined
                 return <QuestionSet key={index} config={config} questionset={element}
                                     configActions={configActions} elementActions={elementActions}
-                                    display="nested" filter={filter}  indent={indent + 1} />
+                                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder} />
               } else {
+                const questionInfo = page.questions.find(info => info.question === element.id)
+                const questionOrder = questionInfo ? questionInfo.order : undefined
                 return <Question key={index} config={config} question={element}
                                  configActions={configActions} elementActions={elementActions}
-                                 display="nested" filter={filter}  indent={indent + 1}  />
+                                 display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
               }
             })
           }
@@ -128,7 +132,8 @@ Page.propTypes = {
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
-  filterEditors: PropTypes.bool
+  filterEditors: PropTypes.bool,
+  order: PropTypes.number
 }
 
 export default Page
diff --git a/rdmo/management/assets/js/components/element/Question.js b/rdmo/management/assets/js/components/element/Question.js
@@ -11,7 +11,7 @@ import { ReadOnlyIcon } from '../common/Icons'
 import { Drag, Drop } from '../common/DragAndDrop'
 
 const Question = ({ config, question, elementActions, display='list', indent=0,
-                    filter=false, filterEditors=false }) => {
+                    filter=false, filterEditors=false, order }) => {
 
   const showElement = filterElement(config, filter, false, filterEditors, question)
 
@@ -46,7 +46,7 @@ const Question = ({ config, question, elementActions, display='list', indent=0,
         </p>
         {
           get(config, 'display.uri.questions', true) && <p>
-            <CodeLink className="code-questions" uri={question.uri} onClick={() => fetchEdit()} />
+            <CodeLink className="code-questions" uri={question.uri} onClick={() => fetchEdit()} order={order} />
           </p>
         }
         {
@@ -106,7 +106,8 @@ Question.propTypes = {
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
-  filterEditors: PropTypes.bool
+  filterEditors: PropTypes.bool,
+  order: PropTypes.number
 }
 
 export default Question
diff --git a/rdmo/management/assets/js/components/element/QuestionSet.js b/rdmo/management/assets/js/components/element/QuestionSet.js
@@ -13,7 +13,7 @@ import { ReadOnlyIcon } from '../common/Icons'
 import { Drag, Drop } from '../common/DragAndDrop'
 
 const QuestionSet = ({ config, questionset, configActions, elementActions, display='list', indent=0,
-                       filter=false, filterEditors=false }) => {
+                       filter=false, filterEditors=false, order }) => {
 
   const showElement = filterElement(config, filter, false, filterEditors, questionset)
   const showElements = get(config, `display.elements.questionsets.${questionset.id}`, true)
@@ -57,7 +57,7 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
         </p>
         {
           get(config, 'display.uri.questionsets', true) && <p>
-            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchEdit()} />
+            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchEdit()} order={order} />
           </p>
         }
         {
@@ -101,13 +101,17 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
           {
             showElements && questionset.elements.map((element, index) => {
               if (element.model == 'questions.questionset') {
+                const questionSetInfo = questionset.questionsets.find(info => info.questionset === element.id)
+                const questionSetOrder = questionSetInfo ? questionSetInfo.order : undefined
                 return <QuestionSet key={index} config={config} questionset={element}
                                     configActions={configActions} elementActions={elementActions}
-                                    display="nested" filter={filter} indent={indent + 1}  />
+                                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder}  />
               } else {
+                const questionInfo = questionset.questions.find(info => info.question === element.id)
+                const questionOrder = questionInfo ? questionInfo.order : undefined
                 return <Question key={index} config={config} question={element}
                                  configActions={configActions} elementActions={elementActions}
-                                 display="nested" filter={filter} indent={indent + 1} />
+                                 display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
               }
             })
           }
@@ -127,7 +131,8 @@ QuestionSet.propTypes = {
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
-  filterEditors: PropTypes.bool
+  filterEditors: PropTypes.bool,
+  order: PropTypes.number
 }
 
 export default QuestionSet
diff --git a/rdmo/management/assets/js/components/element/Section.js b/rdmo/management/assets/js/components/element/Section.js
@@ -15,7 +15,7 @@ import { Drag, Drop } from '../common/DragAndDrop'
 
 
 const Section = ({ config, section, configActions, elementActions, display='list', indent=0,
-                   filter=false, filterEditors=false }) => {
+                   filter=false, filterEditors=false, order }) => {
 
   const showElement = filterElement(config, filter, false, filterEditors, section)
   const showElements = get(config, `display.elements.sections.${section.id}`, true)
@@ -55,7 +55,7 @@ const Section = ({ config, section, configActions, elementActions, display='list
         </p>
         {
           get(config, 'display.uri.sections', true) &&
-          <CodeLink className="code-questions" uri={section.uri} onClick={() => fetchEdit()} />
+          <CodeLink className="code-questions" uri={section.uri} onClick={() => fetchEdit()} order={order} />
         }
         <ElementErrors element={section} />
       </div>
@@ -88,11 +88,24 @@ const Section = ({ config, section, configActions, elementActions, display='list
             <Drop element={section.elements[0]} elementActions={elementActions} indent={indent + 1} mode="before" />
           }
           {
-            showElements && section.elements.map((page, index) => (
-              <Page key={index} config={config} page={page}
-                    configActions={configActions} elementActions={elementActions}
-                    display="nested" filter={filter} indent={indent + 1} />
-            ))
+            showElements && section.elements.map((page, index) => {
+              const pageInfo = section.pages.find(info => info.page === page.id)
+              const pageOrder = pageInfo ? pageInfo.order : undefined
+
+              return (
+                <Page
+                  key={index}
+                  config={config}
+                  page={page}
+                  configActions={configActions}
+                  elementActions={elementActions}
+                  display="nested"
+                  filter={filter}
+                  indent={indent + 1}
+                  order={pageOrder}
+                />
+              )
+            })
           }
           <Drop element={section} elementActions={elementActions} indent={indent} mode="after" />
         </>
@@ -110,7 +123,8 @@ Section.propTypes = {
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
-  filterEditors: PropTypes.bool
+  filterEditors: PropTypes.bool,
+  order: PropTypes.number
 }
 
 export default Section
diff --git a/rdmo/management/assets/js/components/nested/NestedCatalog.js b/rdmo/management/assets/js/components/nested/NestedCatalog.js
@@ -86,12 +86,25 @@ const NestedCatalog = ({ config, catalog, configActions, elementActions }) => {
         <Drop element={catalog.elements[0]} elementActions={elementActions} indent={0} mode="before" />
       }
       {
-        catalog.elements.map((section, index) => (
-          <Section key={index} config={config} section={section}
-                   configActions={configActions} elementActions={elementActions}
-                   display="nested" filter="catalog" indent={0} />
-        ))
+        catalog.elements.map((section, index) => {
+          const sectionInfo = catalog.sections.find(info => info.section === section.id)
+          const sectionOrder = sectionInfo ? sectionInfo.order : undefined
+
+          return (
+            <Section key={index}
+              config={config}
+              section={section}
+              configActions={configActions}
+              elementActions={elementActions}
+              display="nested"
+              filter="catalog"
+              indent={0}
+              order={sectionOrder}
+            />
+          )
+        })
       }
+
     </>
   )
 }