From 3cd6f80e8d6ae9cfd886a643822549b8be9733e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20P=C3=B3=C5=82torak?= Date: Tue, 19 Mar 2024 11:47:30 +0100 Subject: [PATCH 1/4] Added toolbar do different component --- .../app/pages/boards/boards.component.html | 29 ++-------- .../src/app/pages/boards/boards.component.ts | 11 +--- .../project-list/project-list.component.html | 4 +- .../app/shared/toolbar/toolbar.component.html | 26 +++++++++ .../app/shared/toolbar/toolbar.component.scss | 0 .../shared/toolbar/toolbar.component.spec.ts | 23 ++++++++ .../app/shared/toolbar/toolbar.component.ts | 53 +++++++++++++++++++ 7 files changed, 111 insertions(+), 35 deletions(-) create mode 100644 corn-frontend/src/app/shared/toolbar/toolbar.component.html create mode 100644 corn-frontend/src/app/shared/toolbar/toolbar.component.scss create mode 100644 corn-frontend/src/app/shared/toolbar/toolbar.component.spec.ts create mode 100644 corn-frontend/src/app/shared/toolbar/toolbar.component.ts diff --git a/corn-frontend/src/app/pages/boards/boards.component.html b/corn-frontend/src/app/pages/boards/boards.component.html index 99f34c51..2b7c31ae 100644 --- a/corn-frontend/src/app/pages/boards/boards.component.html +++ b/corn-frontend/src/app/pages/boards/boards.component.html @@ -1,28 +1,7 @@ - -
- - - - - - - - -
- - - - @if (isLoggedIn && userProfile) { - - - } - + + diff --git a/corn-frontend/src/app/pages/boards/boards.component.ts b/corn-frontend/src/app/pages/boards/boards.component.ts index 8c7cf712..ced9196a 100644 --- a/corn-frontend/src/app/pages/boards/boards.component.ts +++ b/corn-frontend/src/app/pages/boards/boards.component.ts @@ -16,6 +16,7 @@ import { KeycloakProfile } from 'keycloak-js'; import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; import { RouterPaths } from '@core/enum/RouterPaths'; import { BoardsPaths } from '@core/enum/BoardsPaths'; +import { ToolbarComponent } from "@shared/toolbar/toolbar.component"; @Component({ selector: 'app-boards', @@ -37,6 +38,7 @@ import { BoardsPaths } from '@core/enum/BoardsPaths'; MatMenuTrigger, MatMenuModule, CommonModule, + ToolbarComponent, ], templateUrl: './boards.component.html', }) @@ -82,13 +84,4 @@ export class BoardsComponent implements OnInit { navigateToBoard(): void { this.router.navigate([`/${RouterPaths.BOARDS_PATH}/${BoardsPaths.BOARD}`]); } - - toggleSidebar(): void { - this.sidebarShown = !this.sidebarShown; - } - - logout(): void { - this.keycloak.logout(); - } - } diff --git a/corn-frontend/src/app/pages/project-list/project-list.component.html b/corn-frontend/src/app/pages/project-list/project-list.component.html index 9374e9a4..9a53642c 100644 --- a/corn-frontend/src/app/pages/project-list/project-list.component.html +++ b/corn-frontend/src/app/pages/project-list/project-list.component.html @@ -1,3 +1,5 @@ + +
-
\ No newline at end of file + diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.html b/corn-frontend/src/app/shared/toolbar/toolbar.component.html new file mode 100644 index 00000000..6f9c920b --- /dev/null +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.html @@ -0,0 +1,26 @@ + +
+ + + + + + + + +
+ + + + @if (isLoggedIn && userProfile) { + + + } + diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.scss b/corn-frontend/src/app/shared/toolbar/toolbar.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.spec.ts b/corn-frontend/src/app/shared/toolbar/toolbar.component.spec.ts new file mode 100644 index 00000000..e02b6b35 --- /dev/null +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolbarComponent } from './toolbar.component'; + +describe('ToolbarComponent', () => { + let component: ToolbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ToolbarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts new file mode 100644 index 00000000..d535f56f --- /dev/null +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts @@ -0,0 +1,53 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { MatButton, MatIconButton } from "@angular/material/button"; +import { MatIcon } from "@angular/material/icon"; +import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu"; +import { MatToolbar } from "@angular/material/toolbar"; +import { KeycloakProfile } from "keycloak-js"; +import { UserinfoComponent } from "@pages/boards/userinfo/userinfo.component"; +import { KeycloakService } from "keycloak-angular"; + +@Component({ + selector: 'app-toolbar', + standalone: true, + imports: [ + MatButton, + MatIcon, + MatIconButton, + MatMenu, + MatMenuItem, + MatToolbar, + UserinfoComponent, + MatMenuTrigger + ], + templateUrl: './toolbar.component.html', + styleUrl: './toolbar.component.scss' +}) +export class ToolbarComponent implements OnInit { + @Input() userProfile ?: KeycloakProfile; + @Input() isLoggedIn !: boolean; + @Output() sidebarEvent: EventEmitter = new EventEmitter(); + sidebarShown: boolean = true; + + constructor(private keycloak: KeycloakService) { + } + + async ngOnInit(): Promise { + this.isLoggedIn = this.keycloak.isLoggedIn(); + + if (this.isLoggedIn) { + this.userProfile = await this.keycloak.loadUserProfile(); + console.log(this.userProfile); + } + } + + toggleSidebar(): void { + this.sidebarShown = !this.sidebarShown; + + this.sidebarEvent.emit(this.sidebarShown); + } + + logout(): void { + this.keycloak.logout(); + } +} From 7773d6473a2b0474535da6fa7fe7d032e107f2f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20P=C3=B3=C5=82torak?= Date: Tue, 19 Mar 2024 11:54:52 +0100 Subject: [PATCH 2/4] Cleaned code and added hiding menu button on toolbar --- .../app/pages/boards/boards.component.html | 4 +-- .../src/app/pages/boards/boards.component.ts | 12 ++------ .../project-list/project-list.component.html | 2 +- .../project-list/project-list.component.ts | 4 ++- .../app/shared/toolbar/toolbar.component.html | 28 ++++++++++--------- .../app/shared/toolbar/toolbar.component.ts | 5 ++-- 6 files changed, 25 insertions(+), 30 deletions(-) diff --git a/corn-frontend/src/app/pages/boards/boards.component.html b/corn-frontend/src/app/pages/boards/boards.component.html index 2b7c31ae..175dac48 100644 --- a/corn-frontend/src/app/pages/boards/boards.component.html +++ b/corn-frontend/src/app/pages/boards/boards.component.html @@ -1,6 +1,4 @@ - + diff --git a/corn-frontend/src/app/pages/boards/boards.component.ts b/corn-frontend/src/app/pages/boards/boards.component.ts index ced9196a..49be08d1 100644 --- a/corn-frontend/src/app/pages/boards/boards.component.ts +++ b/corn-frontend/src/app/pages/boards/boards.component.ts @@ -49,28 +49,20 @@ export class BoardsComponent implements OnInit { selected: string = ''; - isLoggedIn: boolean = false; - userProfile?: KeycloakProfile; - constructor( protected readonly router: Router, - protected readonly location: Location, - protected readonly keycloak: KeycloakService, + protected readonly location: Location ) { } async ngOnInit() { this.selected = this.location.path().split('/').pop() || ''; + this.router.events.subscribe((val) => { if (val instanceof NavigationEnd) { this.selected = val.url.split('/').pop() || ''; } }); - this.isLoggedIn = this.keycloak.isLoggedIn(); - if (this.isLoggedIn) { - this.userProfile = await this.keycloak.loadUserProfile(); - console.log(this.userProfile); - } } navigateToBacklog(): void { diff --git a/corn-frontend/src/app/pages/project-list/project-list.component.html b/corn-frontend/src/app/pages/project-list/project-list.component.html index 9a53642c..964d2bf5 100644 --- a/corn-frontend/src/app/pages/project-list/project-list.component.html +++ b/corn-frontend/src/app/pages/project-list/project-list.component.html @@ -1,4 +1,4 @@ - +
diff --git a/corn-frontend/src/app/pages/project-list/project-list.component.ts b/corn-frontend/src/app/pages/project-list/project-list.component.ts index d0d40915..4c22d343 100644 --- a/corn-frontend/src/app/pages/project-list/project-list.component.ts +++ b/corn-frontend/src/app/pages/project-list/project-list.component.ts @@ -2,6 +2,7 @@ import { Component, HostListener } from '@angular/core'; import { ProjectComponent } from "@pages/project-list/project/project.component"; import { MatGridList, MatGridTile } from "@angular/material/grid-list"; import { User } from "@core/interfaces/boards/user"; +import { ToolbarComponent } from "@shared/toolbar/toolbar.component"; @Component({ selector: 'app-project-list', @@ -9,7 +10,8 @@ import { User } from "@core/interfaces/boards/user"; imports: [ ProjectComponent, MatGridList, - MatGridTile + MatGridTile, + ToolbarComponent ], templateUrl: './project-list.component.html', styleUrl: './project-list.component.scss' diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.html b/corn-frontend/src/app/shared/toolbar/toolbar.component.html index 6f9c920b..52b44acf 100644 --- a/corn-frontend/src/app/shared/toolbar/toolbar.component.html +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.html @@ -1,19 +1,21 @@ -
- + @if (!isOnProjectRoute) { +
+ - + - - - - -
+ + + + +
+ } diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts index d535f56f..24b4866c 100644 --- a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts @@ -24,8 +24,9 @@ import { KeycloakService } from "keycloak-angular"; styleUrl: './toolbar.component.scss' }) export class ToolbarComponent implements OnInit { - @Input() userProfile ?: KeycloakProfile; - @Input() isLoggedIn !: boolean; + @Input() isOnProjectRoute: boolean = false; + userProfile ?: KeycloakProfile; + isLoggedIn: boolean = false; @Output() sidebarEvent: EventEmitter = new EventEmitter(); sidebarShown: boolean = true; From 3789d36da1e17b3a22dee90606a223cca1c1a277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20P=C3=B3=C5=82torak?= Date: Tue, 19 Mar 2024 11:57:14 +0100 Subject: [PATCH 3/4] Added changes from DEV-164-DoubleScrollbarFix --- corn-frontend/src/app/pages/boards/boards.component.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/corn-frontend/src/app/pages/boards/boards.component.html b/corn-frontend/src/app/pages/boards/boards.component.html index 175dac48..5288a2b8 100644 --- a/corn-frontend/src/app/pages/boards/boards.component.html +++ b/corn-frontend/src/app/pages/boards/boards.component.html @@ -1,7 +1,7 @@ - +
@@ -16,7 +16,7 @@ [label]="'Backlog'" [selected]="selected == 'backlog'"> + [iconName]="'akarClipboard'" [label]="'Board'"> @@ -29,8 +29,9 @@
+ -
+
From 384b48ec6bf437a538cf6808e1ef2a08da1ec250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20P=C3=B3=C5=82torak?= Date: Tue, 19 Mar 2024 12:00:48 +0100 Subject: [PATCH 4/4] Added changes from devel --- corn-frontend/src/app/shared/toolbar/toolbar.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts index 24b4866c..e5a78b67 100644 --- a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts @@ -6,6 +6,8 @@ import { MatToolbar } from "@angular/material/toolbar"; import { KeycloakProfile } from "keycloak-js"; import { UserinfoComponent } from "@pages/boards/userinfo/userinfo.component"; import { KeycloakService } from "keycloak-angular"; +import { Router } from "@angular/router"; +import { RouterPaths } from "@core/enum/RouterPaths"; @Component({ selector: 'app-toolbar', @@ -30,7 +32,8 @@ export class ToolbarComponent implements OnInit { @Output() sidebarEvent: EventEmitter = new EventEmitter(); sidebarShown: boolean = true; - constructor(private keycloak: KeycloakService) { + constructor(private keycloak: KeycloakService, + private router: Router) { } async ngOnInit(): Promise { @@ -39,6 +42,8 @@ export class ToolbarComponent implements OnInit { if (this.isLoggedIn) { this.userProfile = await this.keycloak.loadUserProfile(); console.log(this.userProfile); + } else { + this.router.navigate([RouterPaths.HOME_DIRECT_PATH]); } }