diff --git a/docs/en/UI/Angular/Modifying-the-Menu.md b/docs/en/UI/Angular/Modifying-the-Menu.md index 8278f38722..b3ab040910 100644 --- a/docs/en/UI/Angular/Modifying-the-Menu.md +++ b/docs/en/UI/Angular/Modifying-the-Menu.md @@ -122,15 +122,37 @@ function configureRoutes(routes: RoutesService) { } ``` +To get route items as grouped we can use `groupedVisible` getter method + - It will return `RouteGroup[]` if there is any group in route tree otherwise it'll return undefined + +```js +import { ABP, RoutesService } from "@abp/ng.core"; +import { Component } from "@angular/core"; + +@Component(/* component metadata */) +export class AppComponent { + visible: ABP.RouteGroup[] | undefined = routes.groupedVisible; + + constructor(routes: RoutesService) {} +} +``` ...and then in app.module.ts... + - `groupedVisible` method will return `Others` group for ungrouped items, we can define `key` and `text` via `OTHERS_GROUP` injection token for this group ```js import { NgModule } from '@angular/core'; +import { ABP, OTHERS_GROUP } from '@abp/ng.core'; import { APP_ROUTE_PROVIDER } from './route.provider'; @NgModule({ - providers: [APP_ROUTE_PROVIDER], + providers: [ + APP_ROUTE_PROVIDER, + { + provide: OTHERS_GROUP, + useValue: { key: 1, text: 'MyOthersGroup' } as ABP.Group, + }, + ], // imports, declarations, and bootstrap }) export class AppModule {} diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index e3cd895022..0b3747455a 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -24,6 +24,7 @@ import { ToInjectorPipe } from './pipes/to-injector.pipe'; import { CookieLanguageProvider } from './providers/cookie-language.provider'; import { LocaleProvider } from './providers/locale.provider'; import { LocalizationService } from './services/localization.service'; +import { OTHERS_GROUP } from './tokens'; import { localizationContributor, LOCALIZATIONS } from './tokens/localization.token'; import { CORE_OPTIONS, coreOptionsFactory } from './tokens/options.token'; import { TENANT_KEY } from './tokens/tenant-key.token'; @@ -176,6 +177,10 @@ export class CoreModule { provide: QUEUE_MANAGER, useClass: DefaultQueueManager, }, + { + provide: OTHERS_GROUP, + useValue: options.othersGroup || { key: 'others', text: '::Others' } as ABP.Group, + }, IncludeLocalizationResourcesProvider, ], }; diff --git a/npm/ng-packs/packages/core/src/lib/models/common.ts b/npm/ng-packs/packages/core/src/lib/models/common.ts index bf366b9cd4..13d7d8bdc2 100644 --- a/npm/ng-packs/packages/core/src/lib/models/common.ts +++ b/npm/ng-packs/packages/core/src/lib/models/common.ts @@ -13,6 +13,7 @@ export namespace ABP { sendNullsAsQueryParam?: boolean; tenantKey?: string; localizations?: Localization[]; + othersGroup?: Group; } export interface Child { diff --git a/npm/ng-packs/packages/core/src/lib/services/routes.service.ts b/npm/ng-packs/packages/core/src/lib/services/routes.service.ts index 2f2381a3d5..d36228891e 100644 --- a/npm/ng-packs/packages/core/src/lib/services/routes.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/routes.service.ts @@ -189,12 +189,12 @@ export class RoutesService extends AbstractNavTreeService { super(injector); } - get groupedVisible(): ABP.RouteGroup[] { + get groupedVisible(): ABP.RouteGroup[] | undefined { const groupTree = this.visible.filter(node => node.group); if (groupTree.length < 1) return; const map = new Map[]>(groupTree?.map(node => [node.group, []])); - const otherGroup = this.othersGroup || { key: 'others', text: '::Others' }; + const otherGroup = this.othersGroup; map.set(otherGroup, []); for (const node of this.visible) { diff --git a/npm/ng-packs/packages/core/src/lib/tests/routes.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/routes.service.spec.ts index b07aa05544..a45b4d6d36 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/routes.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/routes.service.spec.ts @@ -15,8 +15,8 @@ export const mockRoutesService = (injectorPayload = {} as { [key: string]: any } ConfigStateService: { createOnUpdateStream: () => updateStream$ }, ...injectorPayload, }); - const othersGroup: ABP.Group = { key: 1, text: 'Others' }; - return new RoutesService(injector, othersGroup); + const othersGroupToken: ABP.Group = { key: 1, text: 'Others' }; + return new RoutesService(injector, othersGroupToken); }; describe('Routes Service', () => { @@ -97,10 +97,13 @@ describe('Routes Service', () => { expect(tree[0].group.key).toBe('foo'); expect(tree[0].group.text).toBe('FooGroup'); + expect(tree[0].items[0].name).toBe('foo'); expect(tree[0].items[0].children[0].name).toBe('y'); expect(tree[1].group.key).toBe('bar'); expect(tree[1].group.text).toBe('BarGroup'); + expect(tree[1].items[0].name).toBe('bar'); + expect(tree[1].items[1].name).toBe('baz'); expect(tree[2].group.key).toBe(1); expect(tree[2].group.text).toBe('Others');