Skip to content

Commit

Permalink
fix: zoneless AASTableComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Jun 7, 2024
1 parent 9b9e7fa commit 63afe88
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 133 deletions.
12 changes: 6 additions & 6 deletions projects/aas-lib/src/lib/aas-table/aas-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
!
!---------------------------------------------------------------------------->

@if (rows.length > 0) {
@if (rows().length > 0) {
@if (viewMode === 'list') {
<table class="table table-sm table-hover table-striped">
<thead>
<tr>
<th class="th-w-checkbox">
<input id="aas-table-checkbox" type="checkbox" class="form-check-input" [indeterminate]="someSelected"
[checked]="everySelected" (change)="toggleSelections()">
<input id="aas-table-checkbox" type="checkbox" class="form-check-input" [indeterminate]="someSelected()"
[checked]="everySelected()" (change)="toggleSelections()">
</th>
<th scope="col" class="th-w-icon">
<i class="bi bi-tag"></i>
Expand All @@ -27,7 +27,7 @@
</tr>
</thead>
<tbody>
@for (row of rows; track row) {
@for (row of rows(); track row) {
<tr class="align-middle">
<td>
<input type="checkbox" class="form-check-input" (change)="toggleSelected(row)" [checked]="row.selected"
Expand Down Expand Up @@ -77,7 +77,7 @@
<thead>
<tr>
<th class="th-w-checkbox">
<input type="checkbox" class="form-check-input" [indeterminate]="someSelected" [checked]="everySelected"
<input type="checkbox" class="form-check-input" [indeterminate]="someSelected()" [checked]="everySelected()"
(change)="toggleSelections()">
</th>
<th scope="col">
Expand All @@ -89,7 +89,7 @@
</tr>
</thead>
<tbody>
@for (row of rows; track row) {
@for (row of rows(); track row) {
<tr class="align-middle">
<td>
<input type="checkbox" class="form-check-input" (change)="toggleSelected(row)" [checked]="row.selected"
Expand Down
62 changes: 28 additions & 34 deletions projects/aas-lib/src/lib/aas-table/aas-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
*
*****************************************************************************/

import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, Output, computed, effect } from '@angular/core';
import { Router } from '@angular/router';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
import { AASDocument } from 'common';
import { Subscription } from 'rxjs';

import { AASTableRow } from './aas-table-row';
import { ClipboardService } from '../clipboard.service';
import { WindowService } from '../window.service';
import { ViewMode } from '../types/view-mode';
import { AASTableStore } from './aas-table.store';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { MaxLengthPipe } from '../max-length.pipe';
import { TranslateModule } from '@ngx-translate/core';

@Component({
selector: 'fhg-aas-table',
Expand All @@ -28,8 +27,7 @@ import { TranslateModule } from '@ngx-translate/core';
imports: [NgbTooltip, MaxLengthPipe, TranslateModule],
providers: [AASTableStore],
})
export class AASTableComponent implements OnInit, OnDestroy {
private readonly subscription = new Subscription();
export class AASTableComponent implements OnDestroy {
private shiftKey = false;
private altKey = false;

Expand All @@ -39,22 +37,26 @@ export class AASTableComponent implements OnInit, OnDestroy {
private readonly clipboard: ClipboardService,
private readonly window: WindowService,
) {
effect(() => {
this.selectedChange.emit(this.store.selectedDocuments());
});

this.window.addEventListener('keyup', this.keyup);
this.window.addEventListener('keydown', this.keydown);
}

@Input()
public get viewMode(): ViewMode {
return this.store.viewMode;
return this.store.viewMode();
}

public set viewMode(value: ViewMode) {
this.store.setViewMode(value);
this.store.viewMode.set(value);
}

@Input()
public get documents(): AASDocument[] {
return this.store.rows.map(row => row.element);
return this.store.rows().map(row => row.element);
}

public set documents(values: AASDocument[]) {
Expand All @@ -66,46 +68,38 @@ export class AASTableComponent implements OnInit, OnDestroy {

@Input()
public get selected(): AASDocument[] {
return this.store.rows.filter(row => row.selected).map(row => row.element);
return this.store
.rows()
.filter(row => row.selected)
.map(row => row.element);
}

public set selected(values: AASDocument[]) {
this.store.setSelections(values);
}

@Input()
public get filter(): string {
return this.store.filter;
return this.store.filterText();
}

public set filter(value: string) {
this.store.filter = value;
this.store.filterText.set(value);
}

public set selected(values: AASDocument[]) {
this.store.setSelections(values);
}

public get someSelected(): boolean {
const rows = this.store.rows;
public readonly someSelected = computed(() => {
const rows = this.store.rows();
return rows.length > 0 && rows.some(row => row.selected) && !rows.every(row => row.selected);
}
});

public get everySelected(): boolean {
const rows = this.store.rows;
public readonly everySelected = computed(() => {
const rows = this.store.rows();
return rows.length > 0 && rows.every(row => row.selected);
}

public get rows(): AASTableRow[] {
return this.store.rows;
}
});

public ngOnInit(): void {
this.subscription.add(
this.store.selectedDocuments.pipe().subscribe(documents => {
this.selectedChange.emit(documents);
}),
);
}
public readonly rows = this.store.rows;

public ngOnDestroy(): void {
this.subscription.unsubscribe();
this.window.removeEventListener('keyup', this.keyup);
this.window.removeEventListener('keydown', this.keydown);
}
Expand Down
117 changes: 53 additions & 64 deletions projects/aas-lib/src/lib/aas-table/aas-table.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@
*
*****************************************************************************/

import { Injectable } from '@angular/core';
import { Injectable, computed, signal } from '@angular/core';
import findLastIndex from 'lodash-es/findLastIndex';
import { Subject } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
import { AASDocument } from 'common';
import { ViewMode } from '../types/view-mode';
Expand All @@ -17,110 +16,100 @@ import { AASTableFilter } from './aas-table.filter';

@Injectable()
export class AASTableStore {
private readonly selectedDocuments$ = new Subject<AASDocument[]>();
private _totalRows: AASTableRow[] = [];
private _rows: AASTableRow[] = [];
private _viewMode = ViewMode.List;
private _filter = '';
private readonly _selectedDocuments = signal<AASDocument[]>([]);
private readonly _totalRows = signal<AASTableRow[]>([]);
private readonly _rows = signal<AASTableRow[]>([]);

public constructor(private readonly translate: TranslateService) {}

public readonly selectedDocuments = this.selectedDocuments$.asObservable();
public readonly selectedDocuments = this._selectedDocuments.asReadonly();

public get filter(): string {
return this._filter;
}

public set filter(value: string) {
if (this._filter !== value) {
this._filter = value;
this._rows = this.getVisibleRows();
}
}
public readonly filterText = signal('');

public get viewMode(): ViewMode {
return this._viewMode;
}
public readonly viewMode = signal(ViewMode.List);

public get rows(): AASTableRow[] {
return this._rows;
}
public readonly rows = computed(() => {
const rows = this._rows();
const filterText = this.filterText();
if (this.viewMode() === ViewMode.List && filterText) {
const filter = new AASTableFilter(filterText, this.translate.currentLang);
return rows.filter(row => filter.match(row.element));
}

public setViewMode(viewMode: ViewMode): void {
this._viewMode = viewMode;
}
return rows;
});

public setSelections(documents: AASDocument[]): void {
const tree = new AASTableTree(this._totalRows);
const tree = new AASTableTree(this._totalRows());
tree.selectedElements = documents;
this._totalRows = tree.nodes;
if (this._viewMode === ViewMode.List) {
this._rows = this.getVisibleRows();
this._totalRows.set(tree.nodes);
if (this.viewMode() === ViewMode.List) {
this._rows.set(tree.nodes);
} else {
this._rows = tree.expanded;
this._rows.set(tree.expanded);
}
}

public toggleSelected(row: AASTableRow, altKey: boolean, shiftKey: boolean): void {
const tree = new AASTableTree(this._totalRows);
const tree = new AASTableTree(this._totalRows());
tree.toggleSelected(row, altKey, shiftKey);
this._totalRows = tree.nodes;
if (this._viewMode === ViewMode.List) {
this._rows = this.getVisibleRows();
this._totalRows.set(tree.nodes);
if (this.viewMode() === ViewMode.List) {
this._rows.set(tree.nodes);
} else {
this._rows = tree.expanded;
this._rows.set(tree.expanded);
}

this.selectedDocuments$.next(this._totalRows.filter(row => row.selected).map(row => row.element));
this._selectedDocuments.set(
this._totalRows()
.filter(row => row.selected)
.map(row => row.element),
);
}

public toggleSelections(): void {
const tree = new AASTableTree(this._totalRows);
const tree = new AASTableTree(this._totalRows());
tree.toggleSelections();
this._totalRows = tree.nodes;
if (this._viewMode === ViewMode.List) {
this._rows = this.getVisibleRows();
this._totalRows.set(tree.nodes);
if (this.viewMode() === ViewMode.List) {
this._rows.set(tree.nodes);
} else {
this._rows = tree.expanded;
this._rows.set(tree.expanded);
}

this.selectedDocuments$.next(this._totalRows.filter(row => row.selected).map(row => row.element));
this._selectedDocuments.set(
this._totalRows()
.filter(row => row.selected)
.map(row => row.element),
);
}

public expandRow(row: AASTableRow): void {
const tree = new AASTableTree(this._totalRows);
const tree = new AASTableTree(this._totalRows());
tree.expand(row);
this._rows = tree.expanded;
this._rows.set(tree.expanded);
}

public collapseRow(row: AASTableRow): void {
const tree = new AASTableTree(this._totalRows);
const tree = new AASTableTree(this._totalRows());
tree.collapse(row);
this._rows = tree.expanded;
this._rows.set(tree.expanded);
}

public initialize(documents: AASDocument[]): void {
this._totalRows =
this._viewMode === ViewMode.List
? this.createListViewRows(this._totalRows, documents)
: this.createTreeViewRows(this._totalRows, documents);
this._totalRows.set(
this.viewMode() === ViewMode.List
? this.createListViewRows(this._totalRows(), documents)
: this.createTreeViewRows(this._totalRows(), documents),
);

if (this._viewMode === ViewMode.List) {
this._rows = this.getVisibleRows();
if (this.viewMode() === ViewMode.List) {
this._rows.set(this._totalRows());
} else {
this._rows = new AASTableTree(this._totalRows).expanded;
this._rows.set(new AASTableTree(this._totalRows()).expanded);
}
}

private getVisibleRows(): AASTableRow[] {
if (this._filter) {
const filter = new AASTableFilter(this._filter, this.translate.currentLang);
return this._totalRows.filter(row => filter.match(row.element));
}

return this._totalRows;
}

private createListViewRows(state: AASTableRow[], documents: AASDocument[]): AASTableRow[] {
const map = new Map(state.map(row => [`${row.endpoint}:${row.id}`, row]));
const rows = documents.map(document => {
Expand Down
2 changes: 1 addition & 1 deletion projects/aas-lib/src/test/aas-table/aas-table.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,6 @@ describe('AASTableComponent', () => {
});

it('provides a rows property', () => {
expect(component.rows).toBeTruthy();
expect(component.rows()).toBeTruthy();
});
});
3 changes: 2 additions & 1 deletion projects/aas-portal/src/app/start/favorites-form/favorites-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export class FavoritesFormComponent {
private readonly favorites: FavoritesService,
private readonly translate: TranslateService,
) {
const items = this.favorites.lists
const items = this.favorites
.lists()
.map(
(list, index) =>
({
Expand Down
Loading

0 comments on commit 63afe88

Please sign in to comment.