feat: order organisation and community categories alphabetically

fix: software organisation categories select/decelet/save
research-software-directory · Nov 25, 2024 · 82e6252 · 82e6252
1 parent 1ac3e64
commit 82e6252
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 6 deletions.
diff --git a/frontend/components/category/useCategories.ts b/frontend/components/category/useCategories.ts
@@ -10,6 +10,7 @@ import logger from '~/utils/logger'
 import {TreeNode} from '~/types/TreeNode'
 import {CategoryEntry} from '~/types/Category'
 import {loadCategoryRoots} from '~/components/category/apiCategories'
+import {sortCategoriesByName} from './useCategoryTree'
 
 type UseCategoriesProps={
   community?:string|null,
@@ -27,6 +28,9 @@ export default function useCategories({community,organisation}:UseCategoriesProp
     loadCategoryRoots({community,organisation})
       .then(roots => {
         if (abort) return
+        // sort categories
+        sortCategoriesByName(roots)
+        // set state
         setRoots(roots)
         setError(null)
       })
@@ -46,6 +50,9 @@ export default function useCategories({community,organisation}:UseCategoriesProp
 
   function onMutation() {
     if (roots !== null) {
+      // sort categories
+      sortCategoriesByName(roots)
+      // update state
       setRoots([...roots])
     }
   }

diff --git a/frontend/components/category/useCategoryTree.tsx b/frontend/components/category/useCategoryTree.tsx
@@ -18,6 +18,22 @@ export const categoryTreeNodesSort = (trees: TreeNode<CategoryEntry>[]) => {
   }
 }
 
+/**
+ * Sort (ascending) the complete category tree, at all levels, on name property .
+ * @param trees TreeNode<CategoryEntry>[]
+ */
+export function sortCategoriesByName(trees: TreeNode<CategoryEntry>[]){
+  trees.sort(compareCategoryTreeNode)
+  for (const root of trees) {
+    // sort children first
+    if (root.childrenCount()>0){
+      sortCategoriesByName(root.children())
+    }
+    // sort roots
+    root.sortRecursively(compareCategoryEntry)
+  }
+}
+
 export const genCategoryTreeNodes = (categories: CategoryPath[]=[]) : TreeNode<CategoryEntry>[] => {
   const allEntries: CategoryEntry[] = []
 
@@ -29,11 +45,12 @@ export const genCategoryTreeNodes = (categories: CategoryPath[]=[]) : TreeNode<C
 
   const result = categoryEntriesToRoots(allEntries)
 
-  categoryTreeNodesSort(result)
+  sortCategoriesByName(result)
 
   return result
 }
 
 export function useCategoryTree(categories: CategoryPath[]) : TreeNode<CategoryEntry>[]{
   return useMemo(() => genCategoryTreeNodes(categories), [categories])
 }
+
diff --git a/frontend/components/projects/ProjectCategories.tsx b/frontend/components/projects/ProjectCategories.tsx
@@ -12,6 +12,11 @@ import {CategoryChipFilter} from '../category/CategoryChipFilter'
 export default function ProjectCategories({categories}:{categories:CategoryPath[]}) {
   const tree = useCategoryTree(categories)
 
+  // console.group('ProjectCategories')
+  // console.log('categories...', categories)
+  // console.log('tree...', tree)
+  // console.groupEnd()
+
   // each root category is separate sidebar section
   return tree.map(node => {
     const category = node.getValue()

diff --git a/frontend/components/projects/edit/organisations/useProjectCategories.tsx b/frontend/components/projects/edit/organisations/useProjectCategories.tsx
@@ -9,6 +9,7 @@ import {createJsonHeaders, getBaseUrl} from '~/utils/fetchHelpers'
 import {CategoryEntry} from '~/types/Category'
 import {TreeNode} from '~/types/TreeNode'
 import {loadCategoryRoots} from '~/components/category/apiCategories'
+import {sortCategoriesByName} from '~/components/category/useCategoryTree'
 import {getCategoryListForProject, removeOrganisationCategoriesFromProject} from './apiProjectOrganisations'
 
 type UseProjectOrganisationCategoriesProps={
@@ -46,6 +47,8 @@ export default function useProjectCategories({
         .then(([roots,selected]) => {
           // filter top level categories for projects (only top level items have this flag)
           const categories = roots.filter(item=>item.getValue().allow_projects)
+          // sort categories
+          sortCategoriesByName(categories)
           // collect tree leaves ids (end nodes)
           const availableIds = new Set<string>()
           categories.forEach(root=>{

diff --git a/frontend/components/software/edit/communities/useCommunityCategories.tsx b/frontend/components/software/edit/communities/useCommunityCategories.tsx
@@ -5,10 +5,11 @@
 
 import {useEffect, useState} from 'react'
 import {useSession} from '~/auth'
-import {loadCategoryRoots} from '~/components/category/apiCategories'
 import {CategoryEntry} from '~/types/Category'
 import {TreeNode} from '~/types/TreeNode'
 import {getCategoryForSoftwareIds} from '~/utils/getSoftware'
+import {loadCategoryRoots} from '~/components/category/apiCategories'
+import {sortCategoriesByName} from '~/components/category/useCategoryTree'
 import {saveSoftwareCategories, SoftwareCategories} from '../organisations/apiSoftwareOrganisations'
 import {removeCommunityCategoriesFromSoftware} from './apiSoftwareCommunities'
 
@@ -40,8 +41,9 @@ export default function useCommunityCategories({
         getCategoryForSoftwareIds(softwareId, token)
       ])
         .then(([roots,selected]) => {
-          // filter top level categories for software (only top level items have this flag)
-          // collect tree leaves ids (end nodes)
+          // sort categories
+          sortCategoriesByName(roots)
+          // collect ids
           const availableIds = new Set<string>()
           roots.forEach(root=>{
             root.forEach(node=>{

diff --git a/frontend/components/software/edit/organisations/useSoftwareCategories.tsx b/frontend/components/software/edit/organisations/useSoftwareCategories.tsx
@@ -10,6 +10,7 @@ import {CategoryEntry} from '~/types/Category'
 import {TreeNode} from '~/types/TreeNode'
 import {getCategoryForSoftwareIds} from '~/utils/getSoftware'
 import {loadCategoryRoots} from '~/components/category/apiCategories'
+import {sortCategoriesByName} from '~/components/category/useCategoryTree'
 import {
   removeOrganisationCategoriesFromSoftware,
   saveSoftwareCategories,
@@ -46,7 +47,9 @@ export default function useSoftwareCategories({
         .then(([roots,selected]) => {
           // filter top level categories for software (only top level items have this flag)
           const categories = roots.filter(item=>item.getValue().allow_software)
-          // collect tree leaves ids (end nodes)
+          // sort categories
+          sortCategoriesByName(categories)
+          // collect ids
           const availableIds = new Set<string>()
           categories.forEach(root=>{
             root.forEach(node=>{
@@ -85,7 +88,7 @@ export default function useSoftwareCategories({
       }
     }
 
-    if (selectedCategoryIds.size === 0) {
+    if (selected.size === 0) {
       onComplete()
       return
     }