From 8cee2a5a77917a3966a87288376d5d3d45c85b12 Mon Sep 17 00:00:00 2001 From: Ralf Aron Date: Sun, 15 Oct 2023 18:55:28 +0200 Subject: [PATCH] cleanup toolbar implementation --- .../aas-lib/src/test/download.service.spec.ts | 2 +- .../aas-portal/src/app/aas/aas.component.ts | 6 ++- .../src/app/about/about.component.ts | 10 ++-- .../src/app/dashboard/dashboard.component.ts | 48 ++----------------- .../src/app/start/start.component.ts | 6 ++- .../src/app/view/view.component.html | 4 +- .../aas-portal/src/app/view/view.component.ts | 18 +++++-- .../src/test/aas/aas.component.spec.ts | 2 +- 8 files changed, 38 insertions(+), 58 deletions(-) diff --git a/projects/aas-lib/src/test/download.service.spec.ts b/projects/aas-lib/src/test/download.service.spec.ts index 73232c8f..d42f844c 100644 --- a/projects/aas-lib/src/test/download.service.spec.ts +++ b/projects/aas-lib/src/test/download.service.spec.ts @@ -10,7 +10,7 @@ import { HttpClient } from '@angular/common/http'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; -import { EMPTY, first, of } from 'rxjs'; +import { EMPTY } from 'rxjs'; import { DownloadService } from '../lib/download.service'; diff --git a/projects/aas-portal/src/app/aas/aas.component.ts b/projects/aas-portal/src/app/aas/aas.component.ts index 208bbd87..94d7ddaf 100644 --- a/projects/aas-portal/src/app/aas/aas.component.ts +++ b/projects/aas-portal/src/app/aas/aas.component.ts @@ -80,7 +80,7 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit { public aasTree: lib.AASTree | null = null; @ViewChild('aasToolbar', { read: TemplateRef }) - public aasToolbar!: TemplateRef; + public aasToolbar: TemplateRef | null = null; public document: AASDocument | null = null; @@ -202,7 +202,9 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit { this.subscription.add(this.aasTree.selectedElements.subscribe(values => this.selectedElements = values)); } - this.toolbar.set(this.aasToolbar); + if (this.aasToolbar) { + this.toolbar.set(this.aasToolbar); + } } public ngOnDestroy(): void { diff --git a/projects/aas-portal/src/app/about/about.component.ts b/projects/aas-portal/src/app/about/about.component.ts index c7d7724d..fb4f4290 100644 --- a/projects/aas-portal/src/app/about/about.component.ts +++ b/projects/aas-portal/src/app/about/about.component.ts @@ -20,7 +20,7 @@ import { ToolbarService } from '../toolbar.service'; }) export class AboutComponent implements OnInit, OnDestroy, AfterViewInit { constructor( - private serverApi: ServerApiService, + private serverApi: ServerApiService, private translate: TranslateService, private toolbar: ToolbarService) { this.author = pkg.author; @@ -29,7 +29,7 @@ export class AboutComponent implements OnInit, OnDestroy, AfterViewInit { } @ViewChild('aasToolbar', { read: TemplateRef }) - public aboutToolbar!: TemplateRef; + public aboutToolbar: TemplateRef | null = null; public version = ''; @@ -46,7 +46,7 @@ export class AboutComponent implements OnInit, OnDestroy, AfterViewInit { public ngOnInit(): void { this.serverApi.getInfo().subscribe(info => { - this.serverVersion = info.version; + this.serverVersion = info.version; this.libraries = info.libraries ?? []; }); @@ -54,7 +54,9 @@ export class AboutComponent implements OnInit, OnDestroy, AfterViewInit { } public ngAfterViewInit(): void { - this.toolbar.set(this.aboutToolbar); + if (this.aboutToolbar) { + this.toolbar.set(this.aboutToolbar); + } } public ngOnDestroy(): void { diff --git a/projects/aas-portal/src/app/dashboard/dashboard.component.ts b/projects/aas-portal/src/app/dashboard/dashboard.component.ts index 292b01a3..b76dec4e 100644 --- a/projects/aas-portal/src/app/dashboard/dashboard.component.ts +++ b/projects/aas-portal/src/app/dashboard/dashboard.component.ts @@ -115,7 +115,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft public chartContainers: QueryList> | null = null; @ViewChild('dashboardToolbar', { read: TemplateRef }) - public dashboardToolbar!: TemplateRef; + public dashboardToolbar: TemplateRef | null = null; public get page(): DashboardPage { return this._page; @@ -193,7 +193,9 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft } public ngAfterViewInit(): void { - this.toolbar.set(this.dashboardToolbar); + if (this.dashboardToolbar) { + this.toolbar.set(this.dashboardToolbar); + } } public ngAfterViewChecked(): void { @@ -837,46 +839,4 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft private isChart(value?: DashboardItem | null): value is DashboardChart { return value?.type === DashboardItemType.Chart; } - - // private createToolbar(): lib.Toolbar { - // const $editMode = this.store.select(selectEditMode); - // return { - // groups: [ - // this.toolbar.createGroup( - // [ - // this.toolbar.createSelect( - // this.store.select(selectPages) - // .pipe(map(pages => pages.map(page => this.toolbar.createOption( - // page.name, - // page.name)))), - // this.store.select(selectName), - // (name) => this.setPage(name)), - // this.toolbar.createButton('bi bi-plus', () => this.addNew(), () => this.editMode), - // this.toolbar.createButton('bi bi-pen', () => this.rename(), () => this.editMode), - // this.toolbar.createButton('bi bi-trash', () => this.delete(), () => this.editMode) - // ]), - // this.toolbar.createGroup( - // [ - // this.toolbar.createSwitch( - // 'Edit mode', - // $editMode, - // () => this.toggleEditMode()) - // ]), - // this.toolbar.createGroup( - // [ - // this.toolbar.createButton('bi bi-arrow-90deg-left', () => this.undo(), () => this.canUndo()), - // this.toolbar.createButton('bi bi-arrow-90deg-right', () => this.redo(), () => this.canRedo()), - // ], - // $editMode), - // this.toolbar.createGroup( - // [ - // this.toolbar.createButton('bi bi-box-arrow-left', () => this.moveLeft(), () => this.canMoveLeft()), - // this.toolbar.createButton('bi bi-box-arrow-up', () => this.moveUp(), () => this.canMoveUp()), - // this.toolbar.createButton('bi bi-box-arrow-down', () => this.moveDown(), () => this.canMoveDown()), - // this.toolbar.createButton('bi bi-box-arrow-right', () => this.moveRight(), () => this.canMoveRight()) - // ], - // $editMode), - // ] - // }; - // } } diff --git a/projects/aas-portal/src/app/start/start.component.ts b/projects/aas-portal/src/app/start/start.component.ts index 5aa64296..4c6f229e 100644 --- a/projects/aas-portal/src/app/start/start.component.ts +++ b/projects/aas-portal/src/app/start/start.component.ts @@ -58,7 +58,7 @@ export class StartComponent implements OnInit, OnDestroy, AfterViewInit { public aasTable: lib.AASTable | null = null; @ViewChild('startToolbar', { read: TemplateRef }) - public startToolbar!: TemplateRef; + public startToolbar: TemplateRef | null = null; public viewMode: lib.ViewMode = lib.ViewMode.List; @@ -120,7 +120,9 @@ export class StartComponent implements OnInit, OnDestroy, AfterViewInit { } public ngAfterViewInit(): void { - this.toolbar.set(this.startToolbar); + if (this.startToolbar) { + this.toolbar.set(this.startToolbar); + } } public ngOnDestroy(): void { diff --git a/projects/aas-portal/src/app/view/view.component.html b/projects/aas-portal/src/app/view/view.component.html index b05f2a92..74c5d26c 100644 --- a/projects/aas-portal/src/app/view/view.component.html +++ b/projects/aas-portal/src/app/view/view.component.html @@ -8,4 +8,6 @@ - \ No newline at end of file + + + diff --git a/projects/aas-portal/src/app/view/view.component.ts b/projects/aas-portal/src/app/view/view.component.ts index 0615492b..ae233c32 100644 --- a/projects/aas-portal/src/app/view/view.component.ts +++ b/projects/aas-portal/src/app/view/view.component.ts @@ -6,7 +6,7 @@ * *****************************************************************************/ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Store } from '@ngrx/store'; import { EMPTY, from, mergeMap, of, Subscription, toArray, zip } from 'rxjs'; @@ -16,13 +16,14 @@ import { State } from './view.state'; import * as ViewActions from './view.actions'; import * as ViewSelectors from './view.selectors'; import { ProjectService } from '../project/project.service'; +import { ToolbarService } from '../toolbar.service'; @Component({ selector: 'fhg-view', templateUrl: './view.component.html', styleUrls: ['./view.component.scss'] }) -export class ViewComponent implements OnInit, OnDestroy { +export class ViewComponent implements OnInit, AfterViewInit, OnDestroy { private readonly store: Store; private readonly subscription = new Subscription(); @@ -30,7 +31,8 @@ export class ViewComponent implements OnInit, OnDestroy { store: Store, private readonly route: ActivatedRoute, private readonly project: ProjectService, - private readonly clipboard: lib.ClipboardService + private readonly clipboard: lib.ClipboardService, + private readonly toolbar: ToolbarService ) { this.store = store as Store; this.subscription.add(this.store.select(ViewSelectors.selectSubmodels) @@ -44,6 +46,9 @@ export class ViewComponent implements OnInit, OnDestroy { })); } + @ViewChild('viewToolbar', { read: TemplateRef }) + public viewToolbar: TemplateRef | null = null; + public template?: string; public submodels: lib.DocumentSubmodelPair[] = []; @@ -73,7 +78,14 @@ export class ViewComponent implements OnInit, OnDestroy { } } + public ngAfterViewInit(): void { + if (this.viewToolbar) { + this.toolbar.set(this.viewToolbar); + } + } + public ngOnDestroy(): void { this.subscription.unsubscribe(); + this.toolbar.clear(); } } \ No newline at end of file diff --git a/projects/aas-portal/src/test/aas/aas.component.spec.ts b/projects/aas-portal/src/test/aas/aas.component.spec.ts index a2e1e744..5b3690e0 100644 --- a/projects/aas-portal/src/test/aas/aas.component.spec.ts +++ b/projects/aas-portal/src/test/aas/aas.component.spec.ts @@ -11,7 +11,7 @@ import { Store, StoreModule } from '@ngrx/store'; import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AASDocument, aas } from 'common'; -import { Observable, first, noop, of } from 'rxjs'; +import { Observable, noop, of } from 'rxjs'; import { AASTree, DownloadService, NotifyService, OnlineState } from 'projects/aas-lib/src/public-api'; import { CommonModule } from '@angular/common';