Skip to content

Commit

Permalink
fix: zoneless aas components
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Jun 10, 2024
1 parent 7f1e815 commit 1439edc
Show file tree
Hide file tree
Showing 15 changed files with 98 additions and 115 deletions.
35 changes: 20 additions & 15 deletions projects/aas-lib/src/lib/aas-tree/aas-tree-search.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
*****************************************************************************/

import { Injectable } from '@angular/core';
import { Injectable, untracked } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import trim from 'lodash-es/trim';
import {
Expand Down Expand Up @@ -34,7 +34,8 @@ export class AASTreeSearch {
) {}

public find(referable: aas.Referable): void {
const index = this.store.rows().findIndex(row => row.element === referable);
const state = untracked(this.store.state);
const index = state.rows.findIndex(row => row.element === referable);
if (index >= 0) {
this.store.setMatchIndex(index);
}
Expand Down Expand Up @@ -64,28 +65,30 @@ export class AASTreeSearch {

if (terms.length > 0) {
this.terms = terms;
this.findFirst();
} else {
this.store.setMatchIndex(-1);
}
}

public findNext(): boolean {
let completed = false;
if (this.store.rows().length > 0 && this.terms.length > 0) {
const state = untracked(this.store.state);
if (state.rows.length > 0 && this.terms.length > 0) {
let match = false;
let i = this.store.matchIndex() < 0 ? 0 : this.store.matchIndex() + 1;
if (i >= this.store.rows().length) {
let i = state.matchIndex < 0 ? 0 : state.matchIndex + 1;
if (i >= state.rows.length) {
i = 0;
}

const start = i;
while (this.loop) {
if (this.match(this.store.rows()[i])) {
if (this.match(state.rows[i])) {
match = true;
break;
}

if (++i >= this.store.rows().length) {
if (++i >= state.rows.length) {
i = 0;
completed = true;
}
Expand All @@ -103,18 +106,19 @@ export class AASTreeSearch {

public findPrevious(): boolean {
let completed = false;
if (this.store.rows().length > 0 && this.terms.length > 0) {
const state = untracked(this.store.state);
if (state.rows.length > 0 && this.terms.length > 0) {
let match = false;
let i = this.store.matchIndex() <= 0 ? this.store.rows().length - 1 : this.store.matchIndex() - 1;
let i = state.matchIndex <= 0 ? state.rows.length - 1 : state.matchIndex - 1;
const start = i;
while (this.loop) {
if (this.match(this.store.rows()[i])) {
if (this.match(state.rows[i])) {
match = true;
break;
}

if (--i <= 0) {
i = this.store.rows().length - 1;
i = state.rows.length - 1;
completed = true;
}

Expand All @@ -134,17 +138,18 @@ export class AASTreeSearch {
}

private findFirst(): void {
if (this.store.rows().length > 0 && this.terms.length > 0) {
const state = untracked(this.store.state);
if (state.rows.length > 0 && this.terms.length > 0) {
let match = false;
let i = this.store.matchIndex() < 0 ? 0 : this.store.matchIndex();
let i = state.matchIndex < 0 ? 0 : state.matchIndex;
const start = i;
while (this.loop) {
if (this.match(this.store.rows()[i])) {
if (this.match(state.rows[i])) {
match = true;
break;
}

if (++i >= this.store.rows().length) {
if (++i >= state.rows.length) {
i = 0;
}

Expand Down
76 changes: 29 additions & 47 deletions projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
import { WebSocketSubject } from 'rxjs/webSocket';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import isEqual from 'lodash-es/isEqual';
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
computed,
effect,
input,
} from '@angular/core';
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, effect, input, output } from '@angular/core';

import {
aas,
Expand Down Expand Up @@ -101,16 +89,22 @@ export class AASTreeComponent implements OnInit, OnDestroy {
private readonly webSocketFactory: WebSocketFactoryService,
private readonly clipboard: ClipboardService,
) {
effect(() => {
const searchText = this.search();
if (searchText) {
this.searching.start(searchText);
}
});
effect(
() => {
const searchText = this.searchExpression();
if (searchText) {
this.searching.start(searchText);
}
},
{ allowSignalWrites: true },
);

effect(() => {
this.store.updateRows(this.document());
});
effect(
() => {
this.store.updateRows(this.document());
},
{ allowSignalWrites: true },
);

effect(() => {
if (this.state() === 'online') {
Expand All @@ -121,7 +115,7 @@ export class AASTreeComponent implements OnInit, OnDestroy {
});

effect(() => {
this.selectedChange.emit(this.store.selectedElements());
this.selected.emit(this.store.selectedElements());
});

effect(() => {
Expand All @@ -148,21 +142,9 @@ export class AASTreeComponent implements OnInit, OnDestroy {

public readonly state = input<OnlineState>('offline');

public readonly search = input<string>('');

@Input()
public get selected(): aas.Referable[] {
return this.store.selectedElements();
}
public readonly searchExpression = input<string>('');

public set selected(values: aas.Referable[]) {
if (!isEqual(values, this.store.selectedElements())) {
this.store.setSelectedElements(values);
}
}

@Output()
public selectedChange = new EventEmitter<aas.Referable[]>();
public readonly selected = output<aas.Referable[]>();

public readonly onlineReady = computed(() => this.document()?.onlineReady ?? false);

Expand All @@ -182,20 +164,12 @@ export class AASTreeComponent implements OnInit, OnDestroy {

public readonly nodes = this.store.nodes;

public readonly rows = this.store.rows;

public readonly matchIndex = this.store.matchIndex;

public readonly matchRow = this.store.matchRow;

public readonly rows = this.store.rows;

public ngOnInit(): void {
this.subscription.add(
this.translate.onLangChange.subscribe(() => {
this.store.updateRows(this.document());
}),
);
}

public get message(): string {
const document = this.document();
if (document) {
Expand All @@ -212,6 +186,14 @@ export class AASTreeComponent implements OnInit, OnDestroy {
return this.translate.instant('INFO_NO_SHELL_AVAILABLE');
}

public ngOnInit(): void {
this.subscription.add(
this.translate.onLangChange.subscribe(() => {
this.store.updateRows(this.document());
}),
);
}

public ngOnDestroy(): void {
this.subscription.unsubscribe();
this.webSocketSubject?.unsubscribe();
Expand Down
2 changes: 2 additions & 0 deletions projects/aas-lib/src/lib/aas-tree/aas-tree.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export class AASTreeStore {
private readonly translate: TranslateService,
) {}

public readonly state = this._state.asReadonly();

public readonly rows = computed(() => this._state().rows);

public readonly matchIndex = computed(() => this._state().matchIndex);
Expand Down
12 changes: 6 additions & 6 deletions projects/aas-portal/src/app/aas/aas.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
</div>
}
<div class="row">
<fhg-aas-tree #aasTree [state]="state()" [search]="search()" [document]="document()"
[(selected)]="selectedElements">
<fhg-aas-tree #aasTree [state]="state()" [searchExpression]="searchExpression()" [document]="document()"
(selected)="selectedElements.set($event)">
</fhg-aas-tree>
</div>
</div>
Expand All @@ -55,11 +55,11 @@
<option [ngValue]="page">{{page.name}}</option>
}
</select>
<button type="button" class="btn btn-primary" (click)="addToDashboard('Line')" [disabled]="!canAddToDashboard">
<button type="button" class="btn btn-primary" (click)="addToDashboard('Line')" [disabled]="!canAddToDashboard()">
<i class="bi bi-graph-up"></i>
</button>
<button type="button" class="btn btn-primary" (click)="addToDashboard('BarVertical')"
[disabled]="!canAddToDashboard">
[disabled]="!canAddToDashboard()">
<i class="bi bi-bar-chart-line-fill"></i>
</button>
</div>
Expand Down Expand Up @@ -96,8 +96,8 @@
</div>
<div class="input-group flex-grow-1 me-2">
<div class="input-group-text"><i class="bi bi-search"></i></div>
<input #textInput type="text" class="form-control" [value]="search()"
[placeholder]="'PLACEHOLDER_FILTER' | translate" (input)="applySearch(textInput.value)">
<input #textInput type="text" class="form-control" [value]="searchExpression()"
[placeholder]="'PLACEHOLDER_FILTER' | translate" (input)="searchExpressionChange(textInput.value)">
<button type="button" class="btn btn-primary" (click)="aasTree.findNext()">
<i class="bi bi-chevron-down"></i>
</button>
Expand Down
41 changes: 18 additions & 23 deletions projects/aas-portal/src/app/aas/aas.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { NewElementFormComponent } from './new-element-form/new-element-form.com
import { DashboardChartType, DashboardPage, DashboardService } from '../dashboard/dashboard.service';
import { DashboardQuery } from '../types/dashboard-query-params';
import { ToolbarService } from '../toolbar.service';
import { AASStoreService } from './aas-store.service';
import { AASStore } from './aas.store';
import { AsyncPipe } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule } from '@angular/forms';
Expand All @@ -47,7 +47,7 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
private readonly subscription = new Subscription();

public constructor(
private readonly store: AASStoreService,
private readonly store: AASStore,
private readonly router: Router,
private readonly route: ActivatedRoute,
private readonly modal: NgbModal,
Expand Down Expand Up @@ -84,7 +84,7 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {

public readonly state = this.store.state;

public readonly search = this.store.search;
public readonly searchExpression = this.store.searchExpression;

public readonly dashboardPages = this.dashboard.pages;

Expand Down Expand Up @@ -115,35 +115,30 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
return document != null && !document.readonly && document.modified ? document.modified : false;
});

public get canNewElement(): boolean {
return this.selectedElements.length === 1;
}
public readonly canNewElement = computed(() => this.selectedElements().length === 1);

public get canEditElement(): boolean {
return this.selectedElements.length === 1;
}
public readonly canEditElement = computed(() => this.selectedElements().length === 1);

public get canDeleteElement(): boolean {
return (
public readonly canDeleteElement = computed(
() =>
this.selectedElements().length > 0 &&
this.selectedElements().every(item => item.modelType !== 'AssetAdministrationShell')
);
}
this.selectedElements().every(item => item.modelType !== 'AssetAdministrationShell'),
);

public get canAddToDashboard(): boolean {
const selectedElements = this.selectedElements;
public readonly canAddToDashboard = computed(() => {
const selectedElements = this.selectedElements();
return (
this.dashboardPage != null &&
selectedElements().length > 0 &&
selectedElements().every(element => this.isNumberProperty(element) || this.isTimeSeries(element))
this.dashboardPage() != null &&
selectedElements.length > 0 &&
selectedElements.every(element => this.isNumberProperty(element) || this.isTimeSeries(element))
);
}
});

public ngOnInit(): void {
this.subscription.add(
this.route.queryParams.subscribe(params => {
if (params?.search) {
this.store.search.set(params.search);
this.store.searchExpression.set(params.search);
}

if (params) {
Expand Down Expand Up @@ -302,8 +297,8 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
);
}

public applySearch(text: string): void {
this.store.search.set(text);
public searchExpressionChange(text: string): void {
this.store.searchExpression.set(text);
}

private isNumberProperty(element: aas.Referable): boolean {
Expand Down
4 changes: 2 additions & 2 deletions ...s-portal/src/app/aas/aas-store.service.ts → projects/aas-portal/src/app/aas/aas.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { AASApiService } from './aas-api.service';
@Injectable({
providedIn: 'root',
})
export class AASStoreService {
export class AASStore {
private readonly _document = signal<AASDocument | null>(null);

public constructor(private readonly api: AASApiService) {}
Expand All @@ -23,7 +23,7 @@ export class AASStoreService {

public readonly state = signal<OnlineState>('offline');

public readonly search = signal('');
public readonly searchExpression = signal('');

public getDocumentContent(document: AASDocument): void {
this.api.getContent(document.id, document.endpoint).subscribe({
Expand Down
4 changes: 2 additions & 2 deletions projects/aas-portal/src/app/aas/commands/delete-command.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ import {

import cloneDeep from 'lodash-es/cloneDeep';
import { Command } from '../../types/command';
import { AASStoreService } from '../aas-store.service';
import { AASStore } from '../aas.store';

export class DeleteCommand extends Command {
private readonly elements: aas.Referable[];
private readonly memento: AASDocument;
private document: AASDocument;

public constructor(
private readonly store: AASStoreService,
private readonly store: AASStore,
document: AASDocument,
elements: aas.Referable | aas.Referable[],
) {
Expand Down
Loading

0 comments on commit 1439edc

Please sign in to comment.