From 31110080445abe7917912c7ab13a312371360c29 Mon Sep 17 00:00:00 2001 From: Bartosz Sekula Date: Tue, 12 Nov 2024 08:03:20 -0500 Subject: [PATCH] AAE-28286 Show process variables columns in datatable fix (#10383) * AAE-28286 Show process variables columns in datatable fix * fix lint --- .../lib/datatable/data/data-table.schema.ts | 7 +- .../process-list-cloud.component.spec.ts | 2 - .../process-list-cloud.component.ts | 89 ++++++++++--------- .../task-list-cloud.component.spec.ts | 6 +- .../components/task-list-cloud.component.ts | 24 ++--- 5 files changed, 66 insertions(+), 62 deletions(-) diff --git a/lib/core/src/lib/datatable/data/data-table.schema.ts b/lib/core/src/lib/datatable/data/data-table.schema.ts index eb0c9e19bd..afbc5d452a 100644 --- a/lib/core/src/lib/datatable/data/data-table.schema.ts +++ b/lib/core/src/lib/datatable/data/data-table.schema.ts @@ -16,7 +16,7 @@ */ import { ContentChild, Input, Directive } from '@angular/core'; -import { ReplaySubject } from 'rxjs'; +import { BehaviorSubject } from 'rxjs'; import { AppConfigService } from '../../app-config/app-config.service'; import { DataColumnListComponent } from '../data-column/data-column-list.component'; import { DataColumn } from './data-column.model'; @@ -42,18 +42,19 @@ export abstract class DataTableSchema { private layoutPresets = {}; - private columnsSchemaSubject$ = new ReplaySubject(); + protected columnsSchemaSubject$ = new BehaviorSubject(false); isColumnSchemaCreated$ = this.columnsSchemaSubject$.asObservable(); constructor(private appConfigService: AppConfigService, protected presetKey: string, protected presetsModel: any) {} public createDatatableSchema(): void { this.loadLayoutPresets(); + if (!this.columns || this.columns.length === 0) { this.createColumns(); this.columnsSchemaSubject$.next(true); } else { - this.columnsSchemaSubject$.next(false); + this.columnsSchemaSubject$.next(true); } } diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts index 2e0d0760eb..dbc9495ff4 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts @@ -203,7 +203,6 @@ describe('ProcessListCloudComponent', () => { done(); }); component.appName = appName.currentValue; - component.ngAfterContentInit(); component.ngOnChanges({ appName }); fixture.detectChanges(); }); @@ -480,7 +479,6 @@ describe('ProcessListCloudComponent', () => { done(); }); component.appName = appName.currentValue; - component.ngAfterContentInit(); component.ngOnChanges({ appName }); fixture.detectChanges(); }); diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts index 6078d098b3..d72678a6c8 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts @@ -46,7 +46,7 @@ import { DataColumn } from '@alfresco/adf-core'; import { ProcessListCloudService } from '../services/process-list-cloud.service'; -import { BehaviorSubject, Subject } from 'rxjs'; +import { BehaviorSubject, combineLatest, Subject } from 'rxjs'; import { processCloudPresetsDefaultModel } from '../models/process-cloud-preset.model'; import { ProcessListRequestModel, ProcessQueryCloudRequestModel } from '../models/process-cloud-query-request.model'; import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model'; @@ -66,11 +66,9 @@ const PRESET_KEY = 'adf-cloud-process-list.presets'; styleUrls: ['./process-list-cloud.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ProcessListCloudComponent -extends DataTableSchema -implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { - @ViewChild(DataTableComponent) - dataTable: DataTableComponent; +export class ProcessListCloudComponent extends DataTableSchema implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { + + @ViewChild(DataTableComponent) dataTable: DataTableComponent; @ContentChild(CustomEmptyContentTemplateDirective) emptyCustomContent: CustomEmptyContentTemplateDirective; @@ -274,6 +272,8 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { private defaultSorting = { key: 'startDate', direction: 'desc' }; + private fetchProcessesTrigger$ = new Subject(); + constructor( @Inject(PROCESS_SEARCH_API_METHOD_TOKEN) @Optional() private searchMethod: 'GET' | 'POST', private processListCloudService: ProcessListCloudService, @@ -292,6 +292,44 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { skipCount: 0, totalItems: 0 }); + + this.isLoading = true; + + combineLatest([ + this.isColumnSchemaCreated$, + this.fetchProcessesTrigger$ + ]).pipe( + filter(([isColumnSchemaCreated]) => { + return isColumnSchemaCreated; + }), + switchMap(() => { + console.count('load'); + if (this.searchMethod === 'POST') { + const requestNode = this.createProcessListRequestNode(); + this.processListRequestNode = requestNode; + return this.processListCloudService.fetchProcessList(requestNode).pipe(take(1)); + } else { + const requestNode = this.createRequestNode(); + this.requestNode = requestNode; + return this.processListCloudService.getProcessByRequest(requestNode).pipe(take(1)); + } + }), + takeUntil(this.onDestroy$) + ).subscribe({ + next: (processes) => { + this.rows = this.variableMapperService.mapVariablesByColumnTitle(processes.list.entries, this.columns); + + this.dataAdapter = new ProcessListDatatableAdapter(this.rows, this.columns); + + this.success.emit(processes); + this.isLoading = false; + this.pagination.next(processes.list.pagination); + }, + error: (error) => { + this.error.emit(error); + this.isLoading = false; + } + }); } ngAfterContentInit() { @@ -340,6 +378,7 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { if (this.isPropertyChanged(changes, 'sorting')) { this.formatSorting(changes['sorting'].currentValue); } + if (this.isAnyPropertyChanged(changes)) { this.reload(); } @@ -351,48 +390,12 @@ implements OnChanges, AfterContentInit, PaginatedComponent, OnDestroy { reload() { if (this.appName || this.appName === '') { - this.load(); + this.fetchProcessesTrigger$.next(); } else { this.rows = []; } } - private load() { - this.isLoading = true; - - this.isColumnSchemaCreated$ - .pipe( - filter((isColumnSchemaCreated) => !!isColumnSchemaCreated), - take(1), - switchMap(() => { - if (this.searchMethod === 'POST') { - const requestNode = this.createProcessListRequestNode(); - this.processListRequestNode = requestNode; - return this.processListCloudService.fetchProcessList(requestNode).pipe(take(1)); - } else { - const requestNode = this.createRequestNode(); - this.requestNode = requestNode; - return this.processListCloudService.getProcessByRequest(requestNode).pipe(take(1)); - } - }), - takeUntil(this.onDestroy$) - ) - .subscribe({ - next: (processes) => { - this.rows = this.variableMapperService.mapVariablesByColumnTitle(processes.list.entries, this.columns); - - this.dataAdapter = new ProcessListDatatableAdapter(this.rows, this.columns); - - this.success.emit(processes); - this.isLoading = false; - this.pagination.next(processes.list.pagination); - }, - error: (error) => { - this.error.emit(error); - this.isLoading = false; - } - }); - } private isAnyPropertyChanged(changes: SimpleChanges): boolean { for (const property in changes) { diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts index b7b18737a1..834fa0256f 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts @@ -151,7 +151,6 @@ describe('TaskListCloudComponent', () => { spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTasks)); const appName = new SimpleChange(null, 'FAKE-APP-NAME', true); - fixture.detectChanges(); component.ngOnChanges({ appName }); fixture.detectChanges(); @@ -214,7 +213,6 @@ describe('TaskListCloudComponent', () => { }); component.reload(); - fixture.detectChanges(); }); it('should call endpoint when a column visibility gets changed', () => { @@ -244,16 +242,19 @@ describe('TaskListCloudComponent', () => { component.status = 'mock-status'; component.lastModifiedFrom = 'mock-lastmodified-date'; component.owner = 'mock-owner-name'; + const priorityChange = new SimpleChange(undefined, 1, true); const statusChange = new SimpleChange(undefined, 'mock-status', true); const lastModifiedFromChange = new SimpleChange(undefined, 'mock-lastmodified-date', true); const ownerChange = new SimpleChange(undefined, 'mock-owner-name', true); + component.ngOnChanges({ priority: priorityChange, status: statusChange, lastModifiedFrom: lastModifiedFromChange, owner: ownerChange }); + fixture.detectChanges(); expect(component.isListEmpty()).toBeFalsy(); expect(getTaskByRequestSpy).toHaveBeenCalled(); @@ -357,7 +358,6 @@ describe('TaskListCloudComponent', () => { }); component.reload(); - fixture.detectChanges(); }); it('should call endpoint when a column visibility gets changed', () => { diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts index a74fe8371e..f862d571a9 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts @@ -197,6 +197,8 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent isLoadingPreferences || isReloading) ); + private fetchProcessesTrigger$ = new Subject(); + constructor( @Inject(TASK_SEARCH_API_METHOD_TOKEN) @Optional() private searchMethod: 'GET' | 'POST', @Inject(TASK_LIST_CLOUD_TOKEN) public taskListCloudService: TaskListCloudServiceInterface, @@ -207,20 +209,10 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent !!isColumnSchemaCreated), - take(1), switchMap(() => { if (this.searchMethod === 'POST') { const requestNode = this.createTaskListRequestNode(); @@ -255,6 +247,16 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent