Merge pull request #18500 from abpframework/export-compare-function

Update Sorting Navigation Elements documentation

docs/en/UI/Angular/Sorting-Navigation-Elements.md

@@ -1,46 +1,37 @@
 # Sorting Navigation Elements
-This documentation describes how the navigation elements are sorted and how to change this default behaviour.
 
-When you want to add the `Navigation Element` you can use the `RoutesService`. For more details, see the [document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu#how-to-add-a-navigation-element).
+This documentation describes how the navigation elements are sorted and how to change this default behaviour.
-However, in this documentation, we will talk more about how to sort the navigation elements with the `order` attribute from the `Routes Service`.
 
+- When you want to add the `Navigation Element` you can use the `RoutesService`. For more details, see the [document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu#how-to-add-a-navigation-element).
+- However, in this documentation, we will talk more about how to sort the navigation elements.
 
 ### Order Property
-- This parameter is optional and is used for sorting purposes.
-- If you define this property it will be sorted by the default sorting function.
-- You can edit this function.
 
-**Default Compare Function;**
+- Normally, you are able to sort your routes with this property. But you can customize our default sorting algorithm.
-``compare-func.token.ts``
+
+## Default Sorting algorithm
+
+- To see our default sorting algorithm [click](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/tokens/compare-func.token.ts) here.
+  **What does this function do?**
+  - if the order property is defined, then it will be sorted by the order value.
+  - if both of the navigation elements have the same order value then it will be sorted by the name.
+  - If the order property is not defined, it will be the last element and the unordered navs will be sorted by name.
+
+# How to Customize
+
+**`in app.module.ts`**
+
 ```ts
-export const SORT_COMPARE_FUNC = new InjectionToken<0 | 1 | -1>('SORT_COMPARE_FUNC');
+import { SORT_COMPARE_FUNC } from "@abp/ng.core";
-
-export function compareFuncFactory() {
-  const localizationService = inject(LocalizationService);
-  const fn = (a,b) => {
-    const aName = localizationService.instant(a.name);
-    const bName = localizationService.instant(b.name);
-    
-    const aNumber = a.order;
-    const bNumber = b.order;
-    
-    if (!Number.isInteger(aNumber)) return 1;
-    if (!Number.isInteger(bNumber)) return -1;
-    
-    if (aNumber > bNumber) return 1
-    if (aNumber < bNumber) return -1
-    
-    if (aName > bName ) return 1;
-    if (aName < bName ) return -1;
-    
-    return  0
-  }
-  return  fn;
-}
-```
-**What does this function do?**
-- if the order property is defined, then it will be sorted by the order value.
-- if both of the navigation elements have the same order value then it will be sorted by the name.
-- If the order property is not defined, it will be the last element and the unordered navs will be sorted by name.
 
-You can edit this sorting function behaviour as you wish. 
+@NgModule({
+  providers: [
+    ...{
+      provide: SORT_COMPARE_FUNC,
+      useFactory: yourCompareFuncFactory,
+    },
+  ],
+  // imports, declarations, and bootstrap
+})
+export class AppModule {}
+```

npm/ng-packs/packages/core/src/lib/tokens/index.ts

@@ -14,3 +14,4 @@ export * from './check-authentication-state';
 export * from './http-context.token';
 export * from './others-group.token';
 export * from './tenant-not-found-by-name';
+export * from './compare-func.token'