Merge pull request #19271 from abpframework/issue-2032

Customising Breadcrumb Texts

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

@@ -73,6 +73,7 @@ export namespace ABP {
     layout?: eLayoutType;
     iconClass?: string;
     group?: string;
+    breadcrumbText?: string;
   }
 
   export interface Tab extends Nav {

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

@@ -30,6 +30,30 @@ describe('Routes Service', () => {
     { path: '/foo/bar/baz', name: 'baz', parentName: 'bar', order: 1 },
     { path: '/foo/bar/baz/qux', name: 'qux', parentName: 'baz', order: 1 },
     { path: '/foo/x', name: 'x', parentName: 'foo', order: 1 },
+    { path: '/foo', name: 'foo', breadcrumbText: 'Foo Breadcrumb' },
+    {
+      path: '/foo/bar',
+      name: 'bar',
+      parentName: 'foo',
+      invisible: true,
+      order: 2,
+      breadcrumbText: 'Bar Breadcrumb',
+    },
+    {
+      path: '/foo/bar/baz',
+      name: 'baz',
+      parentName: 'bar',
+      order: 1,
+      breadcrumbText: 'Baz Breadcrumb',
+    },
+    {
+      path: '/foo/bar/baz/qux',
+      name: 'qux',
+      parentName: 'baz',
+      order: 1,
+      breadcrumbText: 'Qux Breadcrumb',
+    },
+    { path: '/foo/x', name: 'x', parentName: 'foo', order: 1, breadcrumbText: 'X Breadcrumb' },
   ];
 
   const groupedRoutes = [
@@ -38,6 +62,11 @@ describe('Routes Service', () => {
     { path: '/foo/bar', name: 'bar', group: barGroup },
     { path: '/foo/bar/baz', name: 'baz', group: barGroup },
     { path: '/foo/z', name: 'z' },
+    { path: '/foo', name: 'foo', group: fooGroup, breadcrumbText: 'Foo Breadcrumb' },
+    { path: '/foo/y', name: 'y', parentName: 'foo', breadcrumbText: 'Y Breadcrumb' },
+    { path: '/foo/bar', name: 'bar', group: barGroup, breadcrumbText: 'Bar Breadcrumb' },
+    { path: '/foo/bar/baz', name: 'baz', group: barGroup, breadcrumbText: 'Baz Breadcrumb' },
+    { path: '/foo/z', name: 'z', breadcrumbText: 'Z Breadcrumb' },
   ];
 
   beforeEach(() => {
@@ -53,23 +82,35 @@ describe('Routes Service', () => {
       const visible = await lastValueFrom(service.visible$.pipe(take(1)));
       expect(flat.length).toBe(5);
       expect(flat[0].name).toBe('baz');
+      expect(flat[0].breadcrumbText).toBe('Baz Breadcrumb');
       expect(flat[1].name).toBe('qux');
+      expect(flat[1].breadcrumbText).toBe('Qux Breadcrumb');
       expect(flat[2].name).toBe('x');
+      expect(flat[2].breadcrumbText).toBe('X Breadcrumb');
       expect(flat[3].name).toBe('bar');
+      expect(flat[3].breadcrumbText).toBe('Bar Breadcrumb');
       expect(flat[4].name).toBe('foo');
+      expect(flat[4].breadcrumbText).toBe('Foo Breadcrumb');
 
       expect(tree.length).toBe(1);
       expect(tree[0].name).toBe('foo');
+      expect(tree[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(tree[0].children.length).toBe(2);
       expect(tree[0].children[0].name).toBe('x');
+      expect(tree[0].children[0].breadcrumbText).toBe('X Breadcrumb');
       expect(tree[0].children[1].name).toBe('bar');
+      expect(tree[0].children[1].breadcrumbText).toBe('Bar Breadcrumb');
       expect(tree[0].children[1].children[0].name).toBe('baz');
+      expect(tree[0].children[1].children[0].breadcrumbText).toBe('Baz Breadcrumb');
       expect(tree[0].children[1].children[0].children[0].name).toBe('qux');
+      expect(tree[0].children[1].children[0].children[0].breadcrumbText).toBe('Qux Breadcrumb');
 
       expect(visible.length).toBe(1);
       expect(visible[0].name).toBe('foo');
+      expect(visible[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(visible[0].children.length).toBe(1);
       expect(visible[0].children[0].name).toBe('x');
+      expect(visible[0].children[0].breadcrumbText).toBe('X Breadcrumb');
     });
   });
 
@@ -88,14 +129,21 @@ describe('Routes Service', () => {
           { path: '/foo/bar', name: 'bar', group: '' },
           { path: '/foo/bar/baz', name: 'baz', group: undefined },
           { path: '/x', name: 'y', group: 'z' },
+          { path: '/foo', name: 'foo', breadcrumbText: 'Foo Breadcrumb' },
+          { path: '/foo/bar', name: 'bar', group: '', breadcrumbText: 'Bar Breadcrumb' },
+          { path: '/foo/bar/baz', name: 'baz', group: undefined, breadcrumbText: 'Baz Breadcrumb' },
+          { path: '/x', name: 'y', group: 'z', breadcrumbText: 'Y Breadcrumb' },
         ]);
 
         const result = await lastValueFrom(service.groupedVisible$.pipe(take(1)));
 
         expect(result[0].group).toBe(othersGroup);
         expect(result[0].items[0].name).toBe('foo');
+        expect(result[0].items[0].breadcrumbText).toBe('Foo Breadcrumb');
         expect(result[0].items[1].name).toBe('bar');
+        expect(result[0].items[1].breadcrumbText).toBe('Bar Breadcrumb');
         expect(result[0].items[2].name).toBe('baz');
+        expect(result[0].items[2].breadcrumbText).toBe('Baz Breadcrumb');
       },
     );
 
@@ -108,14 +156,19 @@ describe('Routes Service', () => {
 
       expect(tree[0].group).toBe('FooGroup');
       expect(tree[0].items[0].name).toBe('foo');
+      expect(tree[0].items[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(tree[0].items[0].children[0].name).toBe('y');
+      expect(tree[0].items[0].children[0].breadcrumbText).toBe('Y Breadcrumb');
 
       expect(tree[1].group).toBe('BarGroup');
       expect(tree[1].items[0].name).toBe('bar');
+      expect(tree[1].items[0].breadcrumbText).toBe('Bar Breadcrumb');
       expect(tree[1].items[1].name).toBe('baz');
+      expect(tree[1].items[1].breadcrumbText).toBe('Baz Breadcrumb');
 
       expect(tree[2].group).toBe(othersGroup);
       expect(tree[2].items[0].name).toBe('z');
+      expect(tree[2].items[0].breadcrumbText).toBe('Z Breadcrumb');
     });
   });
 
@@ -124,8 +177,10 @@ describe('Routes Service', () => {
       service.add(routes);
       const result = service.find(route => route.invisible);
       expect(result.name).toBe('bar');
+      expect(result.breadcrumbText).toBe('Bar Breadcrumb');
       expect(result.children.length).toBe(1);
       expect(result.children[0].name).toBe('baz');
+      expect(result.children[0].breadcrumbText).toBe('Baz Breadcrumb');
     });
 
     it('should return null when query is not found', () => {
@@ -167,17 +222,23 @@ describe('Routes Service', () => {
 
       expect(flat.length).toBe(2);
       expect(flat[1].name).toBe('foo');
+      expect(flat[1].breadcrumbText).toBe('Foo Breadcrumb');
       expect(flat[0].name).toBe('x');
+      expect(flat[0].breadcrumbText).toBe('X Breadcrumb');
 
       expect(tree.length).toBe(1);
       expect(tree[0].name).toBe('foo');
+      expect(tree[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(tree[0].children.length).toBe(1);
       expect(tree[0].children[0].name).toBe('x');
+      expect(tree[0].children[0].breadcrumbText).toBe('X Breadcrumb');
 
       expect(visible.length).toBe(1);
       expect(visible[0].name).toBe('foo');
+      expect(visible[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(visible[0].children.length).toBe(1);
       expect(visible[0].children[0].name).toBe('x');
+      expect(visible[0].children[0].breadcrumbText).toBe('X Breadcrumb');
     });
   });
 
@@ -193,21 +254,31 @@ describe('Routes Service', () => {
 
       expect(flat.length).toBe(5);
       expect(flat[0].name).toBe('baz');
+      expect(flat[0].breadcrumbText).toBe('Baz Breadcrumb');
       expect(flat[1].name).toBe('qux');
+      expect(flat[1].breadcrumbText).toBe('Qux Breadcrumb');
       expect(flat[2].name).toBe('x');
+      expect(flat[2].breadcrumbText).toBe('X Breadcrumb');
       expect(flat[3].name).toBe('bar');
+      expect(flat[3].breadcrumbText).toBe('Bar Breadcrumb');
       expect(flat[4].name).toBe('foo');
+      expect(flat[4].breadcrumbText).toBe('Foo Breadcrumb');
 
       expect(tree.length).toBe(1);
       expect(tree[0].name).toBe('foo');
       expect(tree[0].children.length).toBe(2);
       expect(tree[0].children[0].name).toBe('x');
+      expect(tree[0].children[0].breadcrumbText).toBe('X Breadcrumb');
       expect(tree[0].children[1].name).toBe('bar');
+      expect(tree[0].children[1].breadcrumbText).toBe('Bar Breadcrumb');
       expect(tree[0].children[1].children[0].name).toBe('baz');
+      expect(tree[0].children[1].children[0].breadcrumbText).toBe('Baz Breadcrumb');
       expect(tree[0].children[1].children[0].children[0].name).toBe('qux');
+      expect(tree[0].children[1].children[0].children[0].breadcrumbText).toBe('Qux Breadcrumb');
 
       expect(visible.length).toBe(1);
       expect(visible[0].name).toBe('foo');
+      expect(visible[0].breadcrumbText).toBe('Foo Breadcrumb');
       expect(visible[0].children.length).toBe(0);
     });
 
@@ -238,8 +309,10 @@ describe('Routes Service', () => {
       service.add(routes);
       const result = service.search({ invisible: true });
       expect(result.name).toBe('bar');
+      expect(result.breadcrumbText).toBe('Bar Breadcrumb');
       expect(result.children.length).toBe(1);
       expect(result.children[0].name).toBe('baz');
+      expect(result.children[0].breadcrumbText).toBe('Baz Breadcrumb');
     });
 
     it('should return null when query is not found', () => {