chore: add tabs

taiga-family · Aug 16, 2024 · 8f3ed30 · 8f3ed30
1 parent 8d13707
commit 8f3ed30
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/apps/taiga-lumbermill/src/components/app/app.routes.ts b/apps/taiga-lumbermill/src/components/app/app.routes.ts
@@ -38,47 +38,33 @@ export const appRoutes: Route[] = [
                     import('../../dashboards/space-zoo/space-zoo.component').then(
                         (mod) => mod.SpaceZooComponent,
                     ),
-                data: {title: 'Space zoo'},
+                data: {
+                    title: 'Space zoo',
+                    links: [
+                        {
+                            name: 'Main',
+                            to: 'space-zoo',
+                        },
+                        {
+                            name: 'Table',
+                            to: 'space-zoo/table',
+                        },
+                    ],
+                },
                 children: [
                     {
                         path: '',
                         loadComponent: async () =>
                             import(
                                 '../../dashboards/space-zoo/components/administrator/administrator.component'
                             ).then((mod) => mod.AdministratorComponent),
-                        data: {
-                            title: 'Space zoo',
-                            links: [
-                                {
-                                    name: 'Main',
-                                    to: 'dashboards/space-zoo/',
-                                },
-                                {
-                                    name: 'Table',
-                                    to: 'dashboards/table/',
-                                },
-                            ],
-                        },
                     },
                     {
-                        path: '/table',
+                        path: 'table',
                         loadComponent: async () =>
                             import(
                                 '../../dashboards/space-zoo/components/table/table.component'
                             ).then((mod) => mod.TableComponent),
-                        data: {
-                            title: 'Space zoo',
-                            links: [
-                                {
-                                    name: 'Main',
-                                    to: 'dashboards/space-zoo/',
-                                },
-                                {
-                                    name: 'Table',
-                                    to: 'dashboards/table/',
-                                },
-                            ],
-                        },
                     },
                 ],
             },

diff --git a/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html b/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html
@@ -3,6 +3,7 @@
     [style.position]="'sticky'"
 >
     @let title = (data$ | async) ?? '';
+    @let links = (links$ | async) ?? [];
     <a [routerLink]="title ? '/dashboards' : '/'">
         <tui-icon icon="@tui.chevron-left" />
         Back
@@ -11,6 +12,19 @@
     <span tuiNavigationLogo>
         <span tuiFade>{{ title }} dashboard</span>
     </span>
-    <hr />
+    <tui-tabs
+        tuiFade
+        [activeItemIndex]="0"
+        [style.margin-left]="'auto'"
+    >
+        @for (link of links; track $index) {
+            <button
+                tuiTab
+                [routerLink]="link.to"
+            >
+                {{ link.name }}
+            </button>
+        }
+    </tui-tabs>
 </nav>
 <router-outlet />
diff --git a/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.ts b/apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.ts
@@ -8,6 +8,7 @@ import {
     RouterOutlet,
 } from '@angular/router';
 import {TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiFade, TuiTabs} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
 import {filter, map, startWith} from 'rxjs';
 
@@ -20,11 +21,13 @@ import {filter, map, startWith} from 'rxjs';
         RouterLink,
         RouterOutlet,
         TuiCardLarge,
+        TuiFade,
         TuiHeader,
         TuiIcon,
         TuiIcon,
         TuiNavigation,
         TuiSurface,
+        TuiTabs,
         TuiTitle,
     ],
     templateUrl: './dashboards.component.html',
@@ -37,4 +40,10 @@ export class DashboardsComponent {
         map((event) => event.snapshot.firstChild?.data['title']),
         startWith(this.activatedRoute.snapshot.firstChild?.data['title']),
     );
+
+    protected links$ = inject(Router).events.pipe(
+        filter((e): e is ActivationEnd => e instanceof ActivationEnd),
+        map((event) => event.snapshot.firstChild?.data['links']),
+        startWith(this.activatedRoute.snapshot.firstChild?.data['links']),
+    );
 }