Simplifying component interaction

This commit is contained in:
Martin Stockhammer 2020-11-09 11:06:10 +01:00
parent ec828c8745
commit 069e7af871
4 changed files with 41 additions and 14 deletions

View File

@ -16,7 +16,7 @@
* under the License.
*/
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {merge, Observable, Subject} from "rxjs";
import {debounceTime, distinctUntilChanged, map, mergeMap, pluck, share, startWith} from "rxjs/operators";
import {EntityService} from "../../../model/entity-service";
@ -47,7 +47,7 @@ import {FieldToggle} from "../../../model/field-toggle";
templateUrl: './paginated-entities.component.html',
styleUrls: ['./paginated-entities.component.scss']
})
export class PaginatedEntitiesComponent<T> implements OnInit, FieldToggle {
export class PaginatedEntitiesComponent<T> implements OnInit, FieldToggle, AfterViewInit {
/**
* This must be set, if you use the component. This service retrieves the entity data.
@ -161,11 +161,11 @@ export class PaginatedEntitiesComponent<T> implements OnInit, FieldToggle {
}
toggleField(fieldArray: string[]) {
console.log("Changing sort field " + fieldArray);
// console.log("Changing sort field " + fieldArray);
let sortOrderChanged: boolean = false;
let sortFieldChanged: boolean = false;
if (!this.compareArrays(this.sortField, fieldArray)) {
console.log("Fields differ: " + this.sortField + " - " + fieldArray);
// console.log("Fields differ: " + this.sortField + " - " + fieldArray);
this.sortField = fieldArray;
if (this.sortOrder != 'asc') {
this.sortOrder = 'asc';
@ -178,11 +178,11 @@ export class PaginatedEntitiesComponent<T> implements OnInit, FieldToggle {
} else {
this.sortOrder = "asc";
}
console.log("Toggled sort order: " + this.sortOrder);
// console.log("Toggled sort order: " + this.sortOrder);
sortOrderChanged = true;
}
if (sortOrderChanged) {
console.log("Sort order changed: "+this.sortOrder)
//console.log("Sort order changed: "+this.sortOrder)
this.sortOrderChange.emit(this.sortOrder);
}
if (sortFieldChanged) {
@ -193,4 +193,10 @@ export class PaginatedEntitiesComponent<T> implements OnInit, FieldToggle {
}
}
ngAfterViewInit(): void {
// We emit the current value to push them to the containing reading components
this.sortOrderChange.emit(this.sortOrder);
this.sortFieldChange.emit(this.sortField);
}
}

View File

@ -41,10 +41,11 @@ export class SortedTableHeaderRowComponent implements OnInit, AfterViewInit, Aft
@Input() sortFieldEmitter: EventEmitter<string[]>;
@Input() sortOrderEmitter: EventEmitter<string>;
@Input() sortFields: string[];
@Input() sortOrder: string;
@Input() toggleObserver: FieldToggle;
sortFields: string[];
sortOrder: string;
@ContentChildren(SortedTableHeaderComponent, { descendants: true }) contentChilds: QueryList<SortedTableHeaderComponent>;
constructor(private readonly viewContainer: ViewContainerRef) {
@ -58,9 +59,10 @@ export class SortedTableHeaderRowComponent implements OnInit, AfterViewInit, Aft
ngAfterContentInit(): void {
this.contentChilds.changes.pipe(startWith(this.contentChilds), delay(0)).subscribe(() => {
this.contentChilds.forEach((colComponent, index) => {
console.log("Children " + colComponent);
// console.log("Children " + colComponent);
colComponent.registerSortFieldEmitter(this.sortFieldEmitter);
colComponent.registerSortOrderEmitter(this.sortOrderEmitter);
colComponent.sortOrder = this.sortOrder;
colComponent.currentFieldArray = this.sortFields;
colComponent.toggleObserver = this.toggleObserver;
@ -70,10 +72,26 @@ export class SortedTableHeaderRowComponent implements OnInit, AfterViewInit, Aft
}
ngOnInit(): void {
this.registerSortOrderEmitter(this.sortOrderEmitter);
this.registerSortFieldEmitter(this.sortFieldEmitter);
}
ngAfterViewInit(): void {
}
registerSortOrderEmitter(emitter : EventEmitter<string>) {
emitter.subscribe((order) => {
// console.log("header-row: Changing sort order: " + order);
this.sortOrder = order
});
}
registerSortFieldEmitter(emitter: EventEmitter<string[]>) {
emitter.subscribe((fields)=>{
// console.log("header-row: Changing sort fields" + fields);
this.sortFields = fields;
})
}
}

View File

@ -55,7 +55,7 @@ export class SortedTableHeaderComponent implements OnInit, AfterViewChecked {
}
toggleSortField() {
console.log("Toggling sort field " + this.fieldArray);
// console.log("Toggling sort field " + this.fieldArray);
this.toggleObserver.toggleField(this.fieldArray);
}
@ -75,7 +75,7 @@ export class SortedTableHeaderComponent implements OnInit, AfterViewChecked {
}
isAscending() :boolean {
console.log("Is ascending: " + this.sortOrder);
// console.log("header: Is ascending: " + this.sortOrder);
return this.sortOrder == 'asc';
}
@ -84,7 +84,10 @@ export class SortedTableHeaderComponent implements OnInit, AfterViewChecked {
}
registerSortFieldEmitter(emitter : EventEmitter<string[]>) {
emitter.subscribe((field) => this.currentFieldArray = field);
emitter.subscribe((field) => {
// console.log("header: Change sort field "+field)
this.currentFieldArray = field
});
}
}

View File

@ -22,8 +22,8 @@
<table class="table table-striped table-bordered">
<thead class="thead-light">
<tr sorted [sortFieldEmitter]="parent.sortFieldChange" [sortOrder]="sortOrder" [sortFields]="sortField"
[sortOrderEmitter]="parent.sortOrderChange" [toggleObserver]="parent" >
<tr sorted [sortFieldEmitter]="parent.sortFieldChange" [sortOrderEmitter]="parent.sortOrderChange"
[toggleObserver]="parent" >
<app-th-sorted [fieldArray]="['user_id']" contentText="users.list.table.head.user_id"></app-th-sorted>
<app-th-sorted contentText="users.list.table.head.fullName" [fieldArray]="['fullName']" ></app-th-sorted>
<app-th-sorted contentText="users.list.table.head.email" [fieldArray]="['email']"></app-th-sorted>