UI: Entities table improvements

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -225,9 +225,12 @@
                                  'tb-current-entity': dataSource.isCurrentEntity(entity)}"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
-          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async)"
+          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
                 fxLayoutAlign="center center"
                 class="no-data-found">{{ translations.noEntities | translate }}</span>
+          <span [fxShow]="dataSource.dataLoading"
+                fxLayoutAlign="center center"
+                class="no-data-found">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -345,6 +345,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
       (entity) => {
         if (entity) {
           this.updateData();
+          this.entitiesTableConfig.entityAdded(entity);
         }
       }
     );
@@ -352,6 +353,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
 
   onEntityUpdated(entity: BaseData<HasId>) {
     this.updateData(false);
+    this.entitiesTableConfig.entityUpdated(entity);
   }
 
   onEntityAction(action: EntityAction<BaseData<HasId>>) {
@@ -375,6 +377,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
         this.entitiesTableConfig.deleteEntity(entity.id).subscribe(
           () => {
             this.updateData();
+            this.entitiesTableConfig.entitiesDeleted([entity.id]);
           }
         );
       }
@@ -402,6 +405,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
         forkJoin(tasks).subscribe(
           () => {
             this.updateData();
+            this.entitiesTableConfig.entitiesDeleted(entities.map((e) => e.id));
           }
         );
       }

ui-ngx/src/app/modules/home/models/datasource/entity-datasource.ts

@@ -35,6 +35,8 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
 
   public currentEntity: T = null;
 
+  public dataLoading = true;
+
   constructor(private fetchFunction: EntitiesFetchFunction<T, P>,
               protected selectionEnabledFunction: EntityBooleanFunction<T>,
               protected dataLoadedFunction: (col?: number, row?: number) => void) {}
@@ -56,6 +58,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
   }
 
   loadEntities(pageLink: P): Observable<PageData<T>> {
+    this.dataLoading = true;
     const result = new ReplaySubject<PageData<T>>();
     this.fetchFunction(pageLink).pipe(
       tap(() => {
@@ -68,6 +71,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
         this.pageDataSubject.next(pageData);
         result.next(pageData);
         this.dataLoadedFunction();
+        this.dataLoading = false;
       }
     );
     return result;

ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@@ -33,6 +33,8 @@ import { EntityTabsComponent } from '../../components/entity/entity-tabs.compone
 
 export type EntityBooleanFunction<T extends BaseData<HasId>> = (entity: T) => boolean;
 export type EntityStringFunction<T extends BaseData<HasId>> = (entity: T) => string;
+export type EntityVoidFunction<T extends BaseData<HasId>> = (entity: T) => void;
+export type EntityIdsVoidFunction<T extends BaseData<HasId>> = (ids: HasUUID[]) => void;
 export type EntityCountStringFunction = (count: number) => string;
 export type EntityTwoWayOperation<T extends BaseData<HasId>> = (entity: T) => Observable<T>;
 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
   onEntityAction: EntityActionFunction<T> = () => false;
   handleRowClick: EntityRowClickFunction<L> = () => false;
   entityTitle: EntityStringFunction<T> = (entity) => entity?.name;
+  entityAdded: EntityVoidFunction<T> = () => {};
+  entityUpdated: EntityVoidFunction<T> = () => {};
+  entitiesDeleted: EntityIdsVoidFunction<T> = () => {};
 }
 
 export function checkBoxCell(value: boolean): string {

ui-ngx/src/app/shared/components/nav-tree.component.ts

@@ -43,7 +43,7 @@ export interface NavTreeEditCallbacks {
   nodeIsLoaded?: (id: string) => boolean;
   refreshNode?: (id: string) => void;
   updateNode?: (id: string, newName: string) => void;
-  createNode?: (parentId: string, node: NavTreeNode, pos: number) => void;
+  createNode?: (parentId: string, node: NavTreeNode, pos: number | string) => void;
   deleteNode?: (id: string) => void;
   disableNode?: (id: string) => void;
   enableNode?: (id: string) => void;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -380,7 +380,8 @@
         "enter-username": "Enter username",
         "enter-password": "Enter password",
         "enter-search": "Enter search",
-        "created-time": "Created time"
+        "created-time": "Created time",
+        "loading": "Loading..."
     },
     "content-type": {
         "json": "Json",