From 134400bff34dd7feee684049e270dbbd58dce545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Sun, 17 Dec 2023 14:45:26 +0300 Subject: [PATCH 1/2] export compare function --- npm/ng-packs/packages/core/src/lib/tokens/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/npm/ng-packs/packages/core/src/lib/tokens/index.ts b/npm/ng-packs/packages/core/src/lib/tokens/index.ts index 12f4aae15a..7d0422ad7d 100644 --- a/npm/ng-packs/packages/core/src/lib/tokens/index.ts +++ b/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' From b70e60f1224b32e73f3dc269808773a8e7bc28b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Sun, 17 Dec 2023 15:06:39 +0300 Subject: [PATCH 2/2] update documentation --- .../UI/Angular/Sorting-Navigation-Elements.md | 67 ++++++++----------- 1 file changed, 29 insertions(+), 38 deletions(-) diff --git a/docs/en/UI/Angular/Sorting-Navigation-Elements.md b/docs/en/UI/Angular/Sorting-Navigation-Elements.md index 3eac9901d6..6624bc39d1 100644 --- a/docs/en/UI/Angular/Sorting-Navigation-Elements.md +++ b/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). -However, in this documentation, we will talk more about how to sort the navigation elements with the `order` attribute from the `Routes Service`. +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). +- 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;** -``compare-func.token.ts`` +- Normally, you are able to sort your routes with this property. But you can customize our default sorting algorithm. + +## 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'); - -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. +import { SORT_COMPARE_FUNC } from "@abp/ng.core"; -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 {} +```