diff --git a/libs/mix-share/src/components/index.ts b/libs/mix-share/src/components/index.ts index fa938133..db220978 100644 --- a/libs/mix-share/src/components/index.ts +++ b/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'; diff --git a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.html b/libs/mix-share/src/components/main-toolbar/main-toolbar.component.html index ff4567e0..eb1ce3e7 100644 --- a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.html +++ b/libs/mix-share/src/components/main-toolbar/main-toolbar.component.html @@ -7,6 +7,11 @@ +
+ +
+
diff --git a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.scss b/libs/mix-share/src/components/main-toolbar/main-toolbar.component.scss index f0c27d98..8b2849c6 100644 --- a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.scss +++ b/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; } diff --git a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.ts b/libs/mix-share/src/components/main-toolbar/main-toolbar.component.ts index 25cbc674..febe11b3 100644 --- a/libs/mix-share/src/components/main-toolbar/main-toolbar.component.ts +++ b/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'; diff --git a/libs/mix-share/src/components/main-toolbar/toolbar.service.ts b/libs/mix-share/src/components/main-toolbar/toolbar.service.ts new file mode 100644 index 00000000..12572549 --- /dev/null +++ b/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( + undefined + ); + + public add(template: TemplateRef, viewRef: ViewContainerRef) { + this.templatePortal$.next(new TemplatePortal(template, viewRef)); + } + + public remove() { + this.templatePortal$.next(undefined); + } +} diff --git a/libs/mix-share/src/components/sub-toolbar/sub-toolbar.component.scss b/libs/mix-share/src/components/sub-toolbar/sub-toolbar.component.scss index 79a7ab40..79661b32 100644 --- a/libs/mix-share/src/components/sub-toolbar/sub-toolbar.component.scss +++ b/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); } diff --git a/libs/mix-share/src/modules/task-manage/board/board.component.html b/libs/mix-share/src/modules/task-manage/board/board.component.html index 907a5224..fef68ca8 100644 --- a/libs/mix-share/src/modules/task-manage/board/board.component.html +++ b/libs/mix-share/src/modules/task-manage/board/board.component.html @@ -2,13 +2,7 @@ class="data-table-page board">
- - - - -
- + [title]="'Kanban Board'"> add   {{ 'New' | transloco }} diff --git a/libs/mix-share/src/modules/task-manage/components/project-select/project-select.component.html b/libs/mix-share/src/modules/task-manage/components/project-select/project-select.component.html index 33556f6a..62e05052 100644 --- a/libs/mix-share/src/modules/task-manage/components/project-select/project-select.component.html +++ b/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"> -
+
{{ getSelectedProjectName(project(), selectedItemId)?.projectName || 'Choose project' }}
- arrow_drop_down + arrow_drop_down
([]); public destroy$ = inject(DestroyRef); + @Input() public size: 's' | 'm' = 'm'; @Input() public selectedItemId?: number; @Input() public selectedItemName?: string; @Output() public selectedItemChange = new EventEmitter(); diff --git a/libs/mix-share/src/modules/task-manage/task-manage.layout.html b/libs/mix-share/src/modules/task-manage/task-manage.layout.html new file mode 100644 index 00000000..9a78eac7 --- /dev/null +++ b/libs/mix-share/src/modules/task-manage/task-manage.layout.html @@ -0,0 +1,13 @@ + + + + + {{ 'Project(s)' }} + + + + diff --git a/libs/mix-share/src/modules/task-manage/task-manage.layout.ts b/libs/mix-share/src/modules/task-manage/task-manage.layout.ts new file mode 100644 index 00000000..46f0471d --- /dev/null +++ b/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; + + public toolbarSrv = inject(ToolbarService); + public viewRef = inject(ViewContainerRef); + public uiStore = inject(TaskManageStore); + + ngAfterViewInit() { + this.toolbarSrv.add(this.projectCtrl, this.viewRef); + } + + ngOnDestroy() { + this.toolbarSrv.remove(); + } +} diff --git a/libs/mix-share/src/modules/task-manage/task-manange.route.ts b/libs/mix-share/src/modules/task-manage/task-manange.route.ts index b2126f6b..21782ee2 100644 --- a/libs/mix-share/src/modules/task-manage/task-manange.route.ts +++ b/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', + }, + ], }, ];