routes service & test updated, model updated, added docs for routes service

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<number>,
+    },
+  ],
   // imports, declarations, and bootstrap
 })
 export class AppModule {}

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<string>,
+        },
         IncludeLocalizationResourcesProvider,
       ],
     };

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<any>;
   }
 
   export interface Child {

npm/ng-packs/packages/core/src/lib/services/routes.service.ts

@@ -189,12 +189,12 @@ export class RoutesService extends AbstractNavTreeService<ABP.Route> {
     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<ABP.Group, TreeNode<ABP.Route>[]>(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) {

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<number> = { key: 1, text: 'Others' };
-  return new RoutesService(injector, othersGroup);
+  const othersGroupToken: ABP.Group<number> = { 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');