feat(): update

libs/mix-share/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './location-controller/location-controller.component';
 export * from './main-side-menu/main-side-menu.component';
 export * from './main-toolbar/main-toolbar.component';
+export * from './main-toolbar/toolbar.service';
 
 export * from './action-collapse/action-collapse.component';
 export * from './basic-mix-filter/basic-mix-filter.component';

libs/mix-share/src/components/main-toolbar/main-toolbar.component.html

@@ -7,6 +7,11 @@
 
   <mix-location-controller></mix-location-controller>
 
+  <div *ngIf="toolbarService.templatePortal$ | async as portal"
+       class="main-toolbar__custom-portal">
+    <ng-template [cdkPortalOutlet]="portal"></ng-template>
+  </div>
+
   <ng-container *ngIf="auth.cultures$ | async as cultures">
     <div *ngIf="cultures?.length"
          class="main-toolbar__culture ms-auto">

libs/mix-share/src/components/main-toolbar/main-toolbar.component.scss

@@ -33,6 +33,11 @@
     margin-left: 14px;
   }
 
+  &__custom-portal {
+    margin-left: 14px;
+    margin-bottom: 3px;
+  }
+
   &__culture {
     margin-left: 14px;
   }

libs/mix-share/src/components/main-toolbar/main-toolbar.component.ts

@@ -1,3 +1,4 @@
+import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -22,6 +23,7 @@ import { TippyDirective } from '@ngneat/helipopper';
 import { TuiBreadcrumbsModule } from '@taiga-ui/kit';
 import { filter, startWith } from 'rxjs';
 import { LocationControllerComponent } from '../location-controller/location-controller.component';
+import { ToolbarService } from './toolbar.service';
 import { UserNavigationComponent } from './user-navigation/user-navigation.component';
 
 interface BreadcrumbOption {
@@ -43,6 +45,7 @@ interface BreadcrumbOption {
     TippyDirective,
     MixButtonComponent,
     UserNavigationComponent,
+    PortalModule,
   ],
   templateUrl: './main-toolbar.component.html',
   styleUrls: ['./main-toolbar.component.scss'],
@@ -52,6 +55,7 @@ export class MainToolbarComponent implements OnInit {
   public auth = inject(AuthService);
   public router = inject(Router);
   public activatedRoute = inject(ActivatedRoute);
+  public toolbarService = inject(ToolbarService);
   public domainUrls$ = inject(DOMAIN_URL$);
   public breadcrumbs: BreadcrumbOption[] = [];
   public mode = 'Prod';

libs/mix-share/src/components/main-toolbar/toolbar.service.ts

@@ -0,0 +1,20 @@
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ToolbarService {
+  constructor() {}
+
+  public templatePortal$ = new BehaviorSubject<TemplatePortal | undefined>(
+    undefined
+  );
+
+  public add(template: TemplateRef<unknown>, viewRef: ViewContainerRef) {
+    this.templatePortal$.next(new TemplatePortal(template, viewRef));
+  }
+
+  public remove() {
+    this.templatePortal$.next(undefined);
+  }
+}

libs/mix-share/src/components/sub-toolbar/sub-toolbar.component.scss

@@ -17,13 +17,13 @@
   &__title {
     font-size: var(--text-size-xl);
     font-weight: 600;
-    margin-right: 24px;
+    margin-right: 16px;
     white-space: nowrap;
   }
 
   &__description {
     font-size: var(--text-size-xs);
-    margin-right: 24px;
+    margin-right: 16px;
     line-height: 8px;
     color: var(--text-03);
   }

libs/mix-share/src/modules/task-manage/board/board.component.html

@@ -2,13 +2,7 @@
      class="data-table-page board">
   <div class="data-table-page__main-container">
     <mix-sub-toolbar [description]="'Work on'"
-                     [titleTpl]="taskSelect">
-      <ng-template #taskSelect>
-        <mix-project-select (selectedItemChange)="taskManage.changeSelected($event)"></mix-project-select>
-      </ng-template>
-
-      <div class="toolbar-separator"></div>
-
+                     [title]="'Kanban Board'">
       <mix-button (click)="addTask()"
                   size="s"><span class="material-symbols-outlined"> add </span>&nbsp;
         {{ 'New' | transloco }}</mix-button>

libs/mix-share/src/modules/task-manage/components/project-select/project-select.component.html

@@ -3,13 +3,13 @@
      [tpOffset]="[-10, 5]"
      tpVariation="popper"
      tpPlacement="bottom-start">
-  <div class="text-xl text-600">
+  <div class="{{ size === 's' ? 'text-s' : 'text-xl' }} text-600">
     {{
       getSelectedProjectName(project(), selectedItemId)?.projectName ||
         'Choose project'
     }}
   </div>
-  <span class="mix-icon text-600 text-xxl">arrow_drop_down</span>
+  <span class="mix-icon text-600 {{ size === 's' ? 'text-l' : 'text-xxl' }}">arrow_drop_down</span>
 </div>
 
 <ng-template #dbSelect

libs/mix-share/src/modules/task-manage/components/project-select/project-select.component.ts

@@ -30,6 +30,7 @@ export class ProjectSelectComponent {
   public project = signal<MixProject[]>([]);
   public destroy$ = inject(DestroyRef);
 
+  @Input() public size: 's' | 'm' = 'm';
   @Input() public selectedItemId?: number;
   @Input() public selectedItemName?: string;
   @Output() public selectedItemChange = new EventEmitter<MixProject>();

libs/mix-share/src/modules/task-manage/task-manage.layout.html

@@ -0,0 +1,13 @@
+<router-outlet></router-outlet>
+
+<ng-template #projectTroller>
+  <tui-breadcrumbs>
+    <a *tuiItem tuiLink> {{ 'Project(s)' }} </a>
+    <a *tuiItem tuiLink>
+      <mix-project-select
+        [size]="'s'"
+        (selectedItemChange)="uiStore.changeSelected($event)"
+      ></mix-project-select
+    ></a>
+  </tui-breadcrumbs>
+</ng-template>

libs/mix-share/src/modules/task-manage/task-manage.layout.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  inject,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TuiLinkModule } from '@taiga-ui/core';
+import { TuiBreadcrumbsModule } from '@taiga-ui/kit';
+import { ToolbarService } from '../../components/main-toolbar/toolbar.service';
+import { ProjectSelectComponent } from './components/project-select/project-select.component';
+import { TaskManageStore } from './store/task-ui.store';
+
+@Component({
+  selector: 'task-manage-layout',
+  templateUrl: './task-manage.layout.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule,
+    CommonModule,
+    TuiBreadcrumbsModule,
+    TuiLinkModule,
+    ProjectSelectComponent,
+  ],
+})
+export class TaskManageLayoutComponent {
+  @ViewChild('projectTroller') public projectCtrl!: TemplateRef<unknown>;
+
+  public toolbarSrv = inject(ToolbarService);
+  public viewRef = inject(ViewContainerRef);
+  public uiStore = inject(TaskManageStore);
+
+  ngAfterViewInit() {
+    this.toolbarSrv.add(this.projectCtrl, this.viewRef);
+  }
+
+  ngOnDestroy() {
+    this.toolbarSrv.remove();
+  }
+}

libs/mix-share/src/modules/task-manage/task-manange.route.ts

@@ -1,19 +1,26 @@
 import { Routes } from '@angular/router';
+import { TaskManageLayoutComponent } from './task-manage.layout';
 
 export const taskManagementRoutes: Routes = [
-  {
-    path: 'board',
-    loadComponent: () =>
-      import('./board/board.component').then((c) => c.TaskBoardComponent),
-  },
-  {
-    path: 'project',
-    loadComponent: () =>
-      import('./project/project.component').then((c) => c.ProjectComponent),
-  },
   {
     path: '',
-    redirectTo: 'board',
-    pathMatch: 'full',
+    component: TaskManageLayoutComponent,
+    children: [
+      {
+        path: 'board',
+        loadComponent: () =>
+          import('./board/board.component').then((c) => c.TaskBoardComponent),
+      },
+      {
+        path: 'project',
+        loadComponent: () =>
+          import('./project/project.component').then((c) => c.ProjectComponent),
+      },
+      {
+        path: '',
+        redirectTo: 'board',
+        pathMatch: 'full',
+      },
+    ],
   },
 ];