inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-26189 Replaced observable based counter to avoid flickering (#10290)

Browse Source 
* [AAE-26189] replaced observable based counter to avoid flickering

* Empty-Commit
This commit is contained in:
tomasz hanaj 2024-10-11 11:13:20 +02:00 committed by GitHub
parent a3033f9f17
commit eb12083869
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 71 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html
View File

@ -22,12 +22,12 @@
</span>
</div>
<span
*ngIf="counters$[filter.key]"
*ngIf="counters[filter.key]"
[attr.data-automation-id]="filter.key + '_filter-counter'"
class="adf-process-filters__entry-counter"
[class.adf-active]="isFilterUpdated(filter.key)"
>
{{ counters$[filter.key] | async }}
{{ counters[filter.key] }}
</span>
</div>
</button>

2
lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
View File

@ -118,6 +118,7 @@ describe('ProcessFiltersCloudComponent', () => {
expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
expect(filters[1].nativeElement.innerText).toContain('FakeRunningProcesses');
expect(filters[2].nativeElement.innerText).toContain('FakeCompletedProcesses');
expect(Object.keys(component.counters).length).toBe(3);
});
it('should emit an error with a bad response', () => {
@ -148,6 +149,7 @@ describe('ProcessFiltersCloudComponent', () => {
expect(component.filters[0].name).toEqual('FakeAllProcesses');
expect(component.filters[1].name).toEqual('FakeRunningProcesses');
expect(component.filters[2].name).toEqual('FakeCompletedProcesses');
expect(Object.keys(component.counters).length).toBe(3);
});
it('should not select any filter as default', async () => {

29
lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts
View File

@ -66,7 +66,7 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
filters$: Observable<ProcessFilterCloudModel[]>;
currentFilter?: ProcessFilterCloudModel;
filters: ProcessFilterCloudModel[] = [];
counters$: { [key: string]: Observable<number> } = {};
counters: { [key: string]: number } = {};
enableNotifications: boolean;
currentFiltersValues: { [key: string]: number } = {};
updatedFiltersSet = new Set<string>();
@ -109,6 +109,7 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
next: (res) => {
this.resetFilter();
this.filters = res || [];
this.initFilterCounters();
this.selectFilterAndEmit(this.filterParam);
this.success.emit(res);
this.updateFilterCounters();
@ -119,6 +120,13 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
});
}
/**
* Initialize counter collection for filters
*/
initFilterCounters() {
this.filters.forEach((filter) => (this.counters[filter.key] = 0));
}
/**
* Pass the selected filter as next
*
@ -249,18 +257,33 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
}
}
/**
* Iterate over filters and update counters
*/
updateFilterCounters(): void {
this.filters.forEach((filter: ProcessFilterCloudModel) => {
this.updateFilterCounter(filter);
});
}
/**
* Get current value for filter and check if value has changed
* @param filter filter
*/
updateFilterCounter(filter: ProcessFilterCloudModel): void {
this.counters$[filter.key] = this.processListCloudService.getProcessCounter(filter.appName, filter.status).pipe(
this.processListCloudService
.getProcessCounter(filter.appName, filter.status)
.pipe(
tap((filterCounter) => {
this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
})
);
)
.subscribe((data) => {
this.counters = {
...this.counters,
[filter.key]: data
};
});
}
checkIfFilterValuesHasBeenUpdated(filterKey: string, filterValue: number): void {

6
lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html
View File

@ -17,15 +17,15 @@
{{ filter.name | translate }}
</span>
</div>
<span *ngIf="counters$[filter.key]"
<span *ngIf="counters[filter.key]"
[attr.data-automation-id]="filter.key + '_filter-counter'"
class="adf-task-filters__entry-counter"
[class.adf-active]="wasFilterUpdated(filter.key)">
{{ counters$[filter.key] | async }}
{{ counters[filter.key] }}
</span>
</div>
</button>
</mat-action-list>
</mat-action-list>
<ng-template #loading>
<ng-container>
<div class="adf-app-list-spinner">

6
lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.ts
View File

@ -15,8 +15,8 @@
* limitations under the License.
*/
import { EventEmitter, Input, Output, OnDestroy, Directive } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { Directive, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { FilterParamsModel } from '../models/filter-cloud.model';
@Directive()
@ -45,7 +45,7 @@ export abstract class BaseTaskFiltersCloudComponent implements OnDestroy {
@Output()
error: EventEmitter<any> = new EventEmitter<any>();
counters$: { [key: string]: Observable<number> } = {};
counters: { [key: string]: number } = {};
updatedCountersSet = new Set<string>();
protected onDestroy$ = new Subject<boolean>();

4
lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
View File

@ -283,8 +283,8 @@ describe('TaskFiltersCloudComponent', () => {
const updatedFilterCounters = fixture.debugElement.queryAll(By.css('span.adf-active'));
expect(updatedFilterCounters.length).toBe(1);
expect(Object.keys(component.counters$).length).toBe(1);
expect(component.counters$['fake-involved-tasks']).toBeDefined();
expect(Object.keys(component.counters).length).toBe(3);
expect(component.counters['fake-involved-tasks']).toBeDefined();
});
it('should not update filter counter when notifications are disabled from app.config.json', fakeAsync(() => {

31
lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts
View File

@ -87,6 +87,7 @@ export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent imp
(res) => {
this.resetFilter();
this.filters = res || [];
this.initFilterCounters();
this.selectFilterAndEmit(this.filterParam);
this.updateFilterCounters();
this.success.emit(res);
@ -97,17 +98,39 @@ export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent imp
);
}
updateFilterCounters() {
/**
* Initialize counter collection for filters
*/
initFilterCounters(): void {
this.filters.forEach((filter) => (this.counters[filter.key] = 0));
}
/**
* Iterate over filters and update counters
*/
updateFilterCounters(): void {
this.filters.forEach((filter: TaskFilterCloudModel) => this.updateFilterCounter(filter));
}
updateFilterCounter(filter: TaskFilterCloudModel) {
/**
* Get current value for filter and check if value has changed
* @param filter filter
*/
updateFilterCounter(filter: TaskFilterCloudModel): void {
if (filter?.showCounter) {
this.counters$[filter.key] = this.taskFilterCloudService.getTaskFilterCounter(filter).pipe(
this.taskFilterCloudService
.getTaskFilterCounter(filter)
.pipe(
tap((filterCounter) => {
this.checkIfFilterValuesHasBeenUpdated(filter.key, filterCounter);
})
);
)
.subscribe((data) => {
this.counters = {
...this.counters,
[filter.key]: data
};
});
}
}