Commit ac963baa62feefe5a6dab8b5b940f95184ec28f5

Authored by Igor Kulikov
1 parent e103d5a8

UI: Entities table improvements

@@ -225,9 +225,12 @@ @@ -225,9 +225,12 @@
225 'tb-current-entity': dataSource.isCurrentEntity(entity)}" 225 'tb-current-entity': dataSource.isCurrentEntity(entity)}"
226 *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row> 226 *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
227 </table> 227 </table>
228 - <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async)" 228 + <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
229 fxLayoutAlign="center center" 229 fxLayoutAlign="center center"
230 class="no-data-found">{{ translations.noEntities | translate }}</span> 230 class="no-data-found">{{ translations.noEntities | translate }}</span>
  231 + <span [fxShow]="dataSource.dataLoading"
  232 + fxLayoutAlign="center center"
  233 + class="no-data-found">{{ 'common.loading' | translate }}</span>
231 </div> 234 </div>
232 <mat-divider *ngIf="displayPagination"></mat-divider> 235 <mat-divider *ngIf="displayPagination"></mat-divider>
233 <mat-paginator *ngIf="displayPagination" 236 <mat-paginator *ngIf="displayPagination"
@@ -345,6 +345,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn @@ -345,6 +345,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
345 (entity) => { 345 (entity) => {
346 if (entity) { 346 if (entity) {
347 this.updateData(); 347 this.updateData();
  348 + this.entitiesTableConfig.entityAdded(entity);
348 } 349 }
349 } 350 }
350 ); 351 );
@@ -352,6 +353,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn @@ -352,6 +353,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
352 353
353 onEntityUpdated(entity: BaseData<HasId>) { 354 onEntityUpdated(entity: BaseData<HasId>) {
354 this.updateData(false); 355 this.updateData(false);
  356 + this.entitiesTableConfig.entityUpdated(entity);
355 } 357 }
356 358
357 onEntityAction(action: EntityAction<BaseData<HasId>>) { 359 onEntityAction(action: EntityAction<BaseData<HasId>>) {
@@ -375,6 +377,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn @@ -375,6 +377,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
375 this.entitiesTableConfig.deleteEntity(entity.id).subscribe( 377 this.entitiesTableConfig.deleteEntity(entity.id).subscribe(
376 () => { 378 () => {
377 this.updateData(); 379 this.updateData();
  380 + this.entitiesTableConfig.entitiesDeleted([entity.id]);
378 } 381 }
379 ); 382 );
380 } 383 }
@@ -402,6 +405,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn @@ -402,6 +405,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
402 forkJoin(tasks).subscribe( 405 forkJoin(tasks).subscribe(
403 () => { 406 () => {
404 this.updateData(); 407 this.updateData();
  408 + this.entitiesTableConfig.entitiesDeleted(entities.map((e) => e.id));
405 } 409 }
406 ); 410 );
407 } 411 }
@@ -35,6 +35,8 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink = @@ -35,6 +35,8 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
35 35
36 public currentEntity: T = null; 36 public currentEntity: T = null;
37 37
  38 + public dataLoading = true;
  39 +
38 constructor(private fetchFunction: EntitiesFetchFunction<T, P>, 40 constructor(private fetchFunction: EntitiesFetchFunction<T, P>,
39 protected selectionEnabledFunction: EntityBooleanFunction<T>, 41 protected selectionEnabledFunction: EntityBooleanFunction<T>,
40 protected dataLoadedFunction: (col?: number, row?: number) => void) {} 42 protected dataLoadedFunction: (col?: number, row?: number) => void) {}
@@ -56,6 +58,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink = @@ -56,6 +58,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
56 } 58 }
57 59
58 loadEntities(pageLink: P): Observable<PageData<T>> { 60 loadEntities(pageLink: P): Observable<PageData<T>> {
  61 + this.dataLoading = true;
59 const result = new ReplaySubject<PageData<T>>(); 62 const result = new ReplaySubject<PageData<T>>();
60 this.fetchFunction(pageLink).pipe( 63 this.fetchFunction(pageLink).pipe(
61 tap(() => { 64 tap(() => {
@@ -68,6 +71,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink = @@ -68,6 +71,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
68 this.pageDataSubject.next(pageData); 71 this.pageDataSubject.next(pageData);
69 result.next(pageData); 72 result.next(pageData);
70 this.dataLoadedFunction(); 73 this.dataLoadedFunction();
  74 + this.dataLoading = false;
71 } 75 }
72 ); 76 );
73 return result; 77 return result;
@@ -33,6 +33,8 @@ import { EntityTabsComponent } from '../../components/entity/entity-tabs.compone @@ -33,6 +33,8 @@ import { EntityTabsComponent } from '../../components/entity/entity-tabs.compone
33 33
34 export type EntityBooleanFunction<T extends BaseData<HasId>> = (entity: T) => boolean; 34 export type EntityBooleanFunction<T extends BaseData<HasId>> = (entity: T) => boolean;
35 export type EntityStringFunction<T extends BaseData<HasId>> = (entity: T) => string; 35 export type EntityStringFunction<T extends BaseData<HasId>> = (entity: T) => string;
  36 +export type EntityVoidFunction<T extends BaseData<HasId>> = (entity: T) => void;
  37 +export type EntityIdsVoidFunction<T extends BaseData<HasId>> = (ids: HasUUID[]) => void;
36 export type EntityCountStringFunction = (count: number) => string; 38 export type EntityCountStringFunction = (count: number) => string;
37 export type EntityTwoWayOperation<T extends BaseData<HasId>> = (entity: T) => Observable<T>; 39 export type EntityTwoWayOperation<T extends BaseData<HasId>> = (entity: T) => Observable<T>;
38 export type EntityByIdOperation<T extends BaseData<HasId>> = (id: HasUUID) => Observable<T>; 40 export type EntityByIdOperation<T extends BaseData<HasId>> = (id: HasUUID) => Observable<T>;
@@ -175,6 +177,9 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P @@ -175,6 +177,9 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
175 onEntityAction: EntityActionFunction<T> = () => false; 177 onEntityAction: EntityActionFunction<T> = () => false;
176 handleRowClick: EntityRowClickFunction<L> = () => false; 178 handleRowClick: EntityRowClickFunction<L> = () => false;
177 entityTitle: EntityStringFunction<T> = (entity) => entity?.name; 179 entityTitle: EntityStringFunction<T> = (entity) => entity?.name;
  180 + entityAdded: EntityVoidFunction<T> = () => {};
  181 + entityUpdated: EntityVoidFunction<T> = () => {};
  182 + entitiesDeleted: EntityIdsVoidFunction<T> = () => {};
178 } 183 }
179 184
180 export function checkBoxCell(value: boolean): string { 185 export function checkBoxCell(value: boolean): string {
@@ -43,7 +43,7 @@ export interface NavTreeEditCallbacks { @@ -43,7 +43,7 @@ export interface NavTreeEditCallbacks {
43 nodeIsLoaded?: (id: string) => boolean; 43 nodeIsLoaded?: (id: string) => boolean;
44 refreshNode?: (id: string) => void; 44 refreshNode?: (id: string) => void;
45 updateNode?: (id: string, newName: string) => void; 45 updateNode?: (id: string, newName: string) => void;
46 - createNode?: (parentId: string, node: NavTreeNode, pos: number) => void; 46 + createNode?: (parentId: string, node: NavTreeNode, pos: number | string) => void;
47 deleteNode?: (id: string) => void; 47 deleteNode?: (id: string) => void;
48 disableNode?: (id: string) => void; 48 disableNode?: (id: string) => void;
49 enableNode?: (id: string) => void; 49 enableNode?: (id: string) => void;
@@ -380,7 +380,8 @@ @@ -380,7 +380,8 @@
380 "enter-username": "Enter username", 380 "enter-username": "Enter username",
381 "enter-password": "Enter password", 381 "enter-password": "Enter password",
382 "enter-search": "Enter search", 382 "enter-search": "Enter search",
383 - "created-time": "Created time" 383 + "created-time": "Created time",
  384 + "loading": "Loading..."
384 }, 385 },
385 "content-type": { 386 "content-type": {
386 "json": "Json", 387 "json": "Json",