* add constants

* add utils file
rdmorganiser · Mar 22, 2024 · 7345a96 · 7345a96
1 parent 1e1c66c
commit 7345a96
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 50 deletions.
diff --git a/rdmo/projects/assets/js/components/main/Projects.js b/rdmo/projects/assets/js/components/main/Projects.js
@@ -6,7 +6,9 @@ import { SearchField } from 'rdmo/core/assets/js/components/SearchAndFilter'
 import FileUploadButton from 'rdmo/core/assets/js/components/FileUploadButton'
 import language from 'rdmo/core/assets/js/utils/language'
 import userIsManager from '../../utils/userIsManager'
-import { get, isNil } from 'lodash'
+import { getTitlePath } from '../../utils/getProjectTitlePath'
+import { DATE_OPTIONS, HEADER_FORMATTERS, SORTABLE_COLUMNS } from '../../constants'
+import { get } from 'lodash'
 
 const Projects = ({ config, configActions, currentUserObject, projectsActions, projectsObject }) => {
   const { projects } = projectsObject
@@ -54,11 +56,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
 
   const dateOptions = {
     ...langOptions,
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric'
+    DATE_OPTIONS
   }
 
   const viewLinkText = myProjects ? gettext('View all projects') : gettext('View my projects')
@@ -76,31 +74,8 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
 
   const handleImport = (file) => { projectsActions.uploadProject('/projects/import/', file) }
 
-  const getParentPath = (parentId, pathArray = []) => {
-    const parent = projects.find((project) => project.id === parentId)
-    if (parent) {
-      const { title: parentTitle, parent: grandParentId } = parent
-      pathArray.unshift(parentTitle)
-      if (!isNil(grandParentId) && typeof grandParentId === 'number') {
-        return getParentPath(grandParentId, pathArray)
-      }
-    }
-    return pathArray
-  }
-
-  const getTitlePath = (title, row) => {
-    let parentPath = ''
-    if (row.parent) {
-      const path = getParentPath(row.parent)
-      parentPath = path.join(' / ')
-    }
-
-    const pathArray = parentPath ? [parentPath, title] : [title]
-    return pathArray.join(' / ')
-  }
-
   const renderTitle = (title, row) => {
-    const pathArray = getTitlePath(title, row).split(' / ')
+    const pathArray = getTitlePath(projects, title, row).split(' / ')
     const lastChild = pathArray.pop()
 
     return (
@@ -113,8 +88,6 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
     )
   }
 
-  const sortableColumns = ['created', 'owner', 'progress', 'role', 'title', 'updated']
-
   /* order of elements in 'visibleColumns' corresponds to order of columns in table */
   let visibleColumns = ['title', 'progress', 'updated', 'actions']
   let columnWidths
@@ -128,16 +101,6 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
     columnWidths = ['25%', '10%', '20%', '20%', '20%', '5%']
   }
 
-  const headerFormatters = {
-    title: {render: () => gettext('Name')},
-    role: {render: () => gettext('Role')},
-    owner: {render: () =>  gettext('Owner')} ,
-    progress: {render: () => gettext('Progress')},
-    created: {render: () => gettext('Created')},
-    updated: {render: () => gettext('Last changed')},
-    actions: {render: () => null},
-  }
-
   const cellFormatters = {
     title: (content, row) => renderTitle(content, row),
     role: (_content, row) => {
@@ -178,8 +141,6 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
     }
   }
 
-  const buttonProps={'className': 'btn btn-link'}
-
   return (
     <>
       <div className="mb-10" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -190,14 +151,13 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
           </button>
           <FileUploadButton
            acceptedTypes={['application/xml', 'text/xml']}
-           buttonProps={buttonProps}
+           buttonProps={{'className': 'btn btn-link'}}
            buttonText={gettext('Import project')}
            onImportFile={handleImport}
           />
         </div>
       </div>
       <span>{parseInt(displayedRows) > projects.length ? projects.length : displayedRows} {gettext('of')} {projects.length} {gettext('projects are displayed')}</span>
-      {/* <div className="input-group mb-20"></div> */}
       <div className="panel-body">
         <div className="row">
           <SearchField
@@ -221,13 +181,12 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
         config={config}
         configActions={configActions}
         data={projects}
-        headerFormatters={headerFormatters}
+        headerFormatters={HEADER_FORMATTERS}
         projectsActions={projectsActions}
         showTopButton={showTopButton}
         scrollToTop={scrollToTop}
-        sortableColumns={sortableColumns}
+        sortableColumns={SORTABLE_COLUMNS}
         visibleColumns={visibleColumns}
-
       />
     </>
   )

diff --git a/rdmo/projects/assets/js/constants.js b/rdmo/projects/assets/js/constants.js
@@ -1,3 +1,22 @@
 // projects table
 export const INITIAL_TABLE_ROWS = '20'
 export const ROWS_TO_LOAD = '10'
+export const SORTABLE_COLUMNS = ['created', 'owner', 'progress', 'role', 'title', 'updated']
+export const HEADER_FORMATTERS = {
+  title: {render: () => gettext('Name')},
+  role: {render: () => gettext('Role')},
+  owner: {render: () =>  gettext('Owner')} ,
+  progress: {render: () => gettext('Progress')},
+  created: {render: () => gettext('Created')},
+  updated: {render: () => gettext('Last changed')},
+  actions: {render: () => null},
+}
+
+// date format
+export const DATE_OPTIONS = {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric'
+}
diff --git a/rdmo/projects/assets/js/utils/getProjectTitlePath.js b/rdmo/projects/assets/js/utils/getProjectTitlePath.js
@@ -0,0 +1,24 @@
+import { isNil } from 'lodash'
+
+export const getParentPath = (projects, parentId, pathArray = []) => {
+  const parent = projects.find((project) => project.id === parentId)
+  if (parent) {
+    const { title: parentTitle, parent: grandParentId } = parent
+    pathArray.unshift(parentTitle)
+    if (!isNil(grandParentId) && typeof grandParentId === 'number') {
+      return getParentPath(projects, grandParentId, pathArray)
+    }
+  }
+  return pathArray
+}
+
+export const getTitlePath = (projects, title, row) => {
+  let parentPath = ''
+  if (row.parent) {
+    const path = getParentPath(projects, row.parent)
+    parentPath = path.join(' / ')
+  }
+
+  const pathArray = parentPath ? [parentPath, title] : [title]
+  return pathArray.join(' / ')
+}
diff --git a/rdmo/projects/static/projects/css/projects.css b/rdmo/projects/static/projects/css/projects.css
@@ -9676,7 +9676,6 @@ a.disabled {
 }
 
 .elliptic-button {
-  float: right;
   padding: 5px 14px;
   background-color: #fff;
   border: 1px solid #ddd;