Merge pull request #19577 from abpframework/issue-19562

Angular: Sort user menu items by base sorting function at `AbstractMenuService<T>`

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

@@ -8,3 +8,4 @@ export * from './session';
 export * from './utility';
 export * from './auth';
 export * from './auth-events';
+export * from './sort';

npm/ng-packs/packages/core/src/lib/models/sort.ts

@@ -0,0 +1,5 @@
+export interface SortableItem {
+  id?: string | number;
+  name?: string;
+  order?: number;
+}

npm/ng-packs/packages/core/src/lib/tokens/compare-func.token.ts

@@ -1,27 +1,33 @@
 import { InjectionToken, inject } from '@angular/core';
+import { SortableItem } from '../models';
 import { LocalizationService } from '../services';
 
-export const SORT_COMPARE_FUNC = new InjectionToken< 0 | 1 | -1 >('SORT_COMPARE_FUNC');
+export const SORT_COMPARE_FUNC = new InjectionToken<(a: SortableItem, b: SortableItem) => number>(
+  'SORT_COMPARE_FUNC',
+);
 
 export function compareFuncFactory() {
-  const localizationService = inject(LocalizationService)
-  const fn = (a,b) => {
+  const localizationService = inject(LocalizationService);
+  const fn = (a: SortableItem, b: SortableItem) => {
     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
-}
+
+    if (aNumber > bNumber) return 1;
+    if (aNumber < bNumber) return -1;
+
+    if (aName > bName) return 1;
+    if (aName < bName) return -1;
+
+    if (a.id > b.id) return 1;
+    if (a.id < b.id) return -1;
+
+    return 0;
+  };
+
+  return fn;
+}

npm/ng-packs/packages/theme-shared/src/lib/services/abstract-menu.service.ts

@@ -1,10 +1,13 @@
 import { BehaviorSubject, Observable } from 'rxjs';
 import { NavItem } from '../models/nav-item';
-import { Type } from '@angular/core';
+import { inject, Type } from '@angular/core';
+import { SORT_COMPARE_FUNC } from '@abp/ng.core';
 
 export abstract class AbstractMenuService<T extends NavItem> {
   protected abstract baseClass: Type<any>;
 
+  protected readonly sortFn = inject(SORT_COMPARE_FUNC);
+
   protected _items$ = new BehaviorSubject<T[]>([]);
 
   get items(): T[] {
@@ -52,10 +55,7 @@ export abstract class AbstractMenuService<T extends NavItem> {
     this._items$.next(items);
   }
 
-  private sortItems(a: T, b: T) {
-    if (!a.order) return 1;
-    if (!b.order) return -1;
-
-    return a.order - b.order;
-  }
+  sortItems = (a: T, b: T) => {
+    return this.sortFn(a, b);
+  };
 }