-
+
+
+
+
+
+
+
+
+
+
+
Taskana version: {{version}}
+
+
+
\ No newline at end of file
diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
index e69de29bb..8b34a01af 100644
--- a/web/src/app/app.component.scss
+++ b/web/src/app/app.component.scss
@@ -0,0 +1,57 @@
+@import '../theme/variables';
+
+.sidenav {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin-top: 0px;
+}
+
+.sidenav__drawer {
+ position: absolute;
+ z-index: 999;
+ box-shadow: none;
+ width: 350px;
+ background-color: $dark-green;
+ box-shadow: 3px 0px 10px -1px $dark-green;
+}
+
+.sidenav__drawer-list-item {
+ margin-left: 30px;
+}
+
+.sidenav__drawer-logout {
+ text-align: end;
+}
+
+.sidenav__drawer-version {
+ color: $grey;
+ position: absolute;
+ bottom: 5px;
+ font-size: 12px;
+ margin-left: 16px;
+}
+
+.sidenav__drawer-user-info {
+ margin-top: 30px;
+ margin-bottom: 50px;
+ margin-left: -16px;
+}
+
+.mat-icon-button {
+ outline: none;
+}
+
+.mat-icon {
+ color: white;
+}
+
+::ng-deep .mat-drawer-inner-container {
+ overflow: visible !important;
+}
+
+::ng-deep .mat-drawer {
+ overflow-y: visible !important;
+}
diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts
index 19c9f8432..491213606 100644
--- a/web/src/app/app.component.ts
+++ b/web/src/app/app.component.ts
@@ -1,15 +1,17 @@
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { Subscription } from 'rxjs';
-
+import { MatSidenav } from '@angular/material';
import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
-
+import { SidenavService } from './shared/services/sidenav/sidenav.service';
import { RequestInProgressService } from './shared/services/request-in-progress/request-in-progress.service';
import { OrientationService } from './shared/services/orientation/orientation.service';
import { SelectedRouteService } from './shared/services/selected-route/selected-route';
import { UploadService } from './shared/services/upload/upload.service';
import { ErrorModel } from './shared/models/error-model';
-import { NotificationService } from './shared/services/notifications/notification.service';
+import { TaskanaEngineService } from './shared/services/taskana-engine/taskana-engine.service';
+import { WindowRefService } from 'app/shared/services/window/window.service';
+import { environment } from 'environments/environment';
@Component({
selector: 'taskana-root',
@@ -18,7 +20,6 @@ import { NotificationService } from './shared/services/notifications/notificatio
})
export class AppComponent implements OnInit, OnDestroy {
workbasketsRoute = true;
-
selectedRoute = '';
requestInProgress = false;
@@ -29,6 +30,7 @@ export class AppComponent implements OnInit, OnDestroy {
routerSubscription: Subscription;
uploadingFileSubscription: Subscription;
error: ErrorModel;
+ version: string;
constructor(
private router: Router,
@@ -36,8 +38,10 @@ export class AppComponent implements OnInit, OnDestroy {
private orientationService: OrientationService,
private selectedRouteService: SelectedRouteService,
private formsValidatorService: FormsValidatorService,
- private errorService: NotificationService,
- public uploadService: UploadService
+ public uploadService: UploadService,
+ private sidenavService: SidenavService,
+ private taskanaEngineService: TaskanaEngineService,
+ private window: WindowRefService
) {}
@HostListener('window:resize', ['$event'])
@@ -45,6 +49,8 @@ export class AppComponent implements OnInit, OnDestroy {
this.orientationService.onResize();
}
+ @ViewChild('sidenav') public sidenav: MatSidenav;
+
ngOnInit() {
this.routerSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
@@ -65,9 +71,23 @@ export class AppComponent implements OnInit, OnDestroy {
}
this.selectedRoute = value;
});
+
this.uploadingFileSubscription = this.uploadService.getCurrentProgressValue().subscribe((value) => {
this.currentProgressValue = value;
});
+
+ this.taskanaEngineService.getVersion().subscribe((restVersion) => {
+ this.version = restVersion.version;
+ });
+ }
+
+ logout() {
+ this.taskanaEngineService.logout();
+ this.window.nativeWindow.location.href = environment.taskanaLogoutUrl;
+ }
+
+ ngAfterViewInit(): void {
+ this.sidenavService.setSidenav(this.sidenav);
}
ngOnDestroy() {
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index 44b10764c..c037ed7e8 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -13,6 +13,14 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeModule } from 'angular-tree-component';
import { SharedModule } from 'app/shared/shared.module';
+import {
+ MatButtonModule,
+ MatSidenavModule,
+ MatCheckboxModule,
+ MatGridListModule,
+ MatListModule,
+ MatIconModule
+} from '@angular/material';
/**
* Services
@@ -31,6 +39,8 @@ import { NoAccessComponent } from 'app/shared/components/no-access/no-access.com
import { FormsValidatorService } from './shared/services/forms-validator/forms-validator.service';
import { UploadService } from './shared/services/upload/upload.service';
import { NotificationService } from './shared/services/notifications/notification.service';
+import { SidenavService } from './shared/services/sidenav/sidenav.service';
+import { SidenavListComponent } from 'app/shared/components/sidenav-list/sidenav-list.component';
/**
* Components
*/
@@ -62,11 +72,17 @@ const MODULES = [
ReactiveFormsModule,
TreeModule,
SharedModule,
+ MatSidenavModule,
+ MatCheckboxModule,
+ MatGridListModule,
+ MatListModule,
+ MatButtonModule,
+ MatIconModule,
NgxsModule.forRoot(STATES, { developmentMode: !environment.production }),
NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production, maxAge: 25 })
];
-const DECLARATIONS = [AppComponent, NavBarComponent, UserInformationComponent, NoAccessComponent];
+const DECLARATIONS = [AppComponent, NavBarComponent, UserInformationComponent, NoAccessComponent, SidenavListComponent];
export function startupServiceFactory(startupService: StartupService): () => Promise
{
return (): Promise => startupService.load();
@@ -97,7 +113,8 @@ export function startupServiceFactory(startupService: StartupService): () => Pro
FormsValidatorService,
UploadService,
NotificationService,
- ClassificationCategoriesService
+ ClassificationCategoriesService,
+ SidenavService
],
bootstrap: [AppComponent]
})
diff --git a/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss b/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
index 6366de648..a0c84dda9 100644
--- a/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
+++ b/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
@@ -1,4 +1,3 @@
-
.master-detail {
min-width: 100vw;
}
diff --git a/web/src/app/shared/components/nav-bar/nav-bar.component.html b/web/src/app/shared/components/nav-bar/nav-bar.component.html
index efe0d1d37..d33a82a64 100644
--- a/web/src/app/shared/components/nav-bar/nav-bar.component.html
+++ b/web/src/app/shared/components/nav-bar/nav-bar.component.html
@@ -1,78 +1,11 @@
-