add loading container component

npm/ng-packs/.vscode/settings.json

@@ -39,5 +39,13 @@
  "statusBar.foreground": "#e7e7e7"
  },
  "peacock.color": "#1D70A2",
- "eslint.validate": ["json"]
+ "eslint.validate": [
+ "json"
+ ],
+ "[typescriptreact][xml]": {
+ "editor.codeActionsOnSave": {
+ "source.fixAll": "never",
+ "source.organizeImports": "never"
+ }
+ }
 }

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -1,66 +1,69 @@
-<ngx-datatable
- default
- [rows]="data"
- [count]="recordsTotal"
- [list]="list"
- (activate)="tableActivate.emit($event)"
->
- @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
- <ngx-datatable-column
- [name]="actionsText | abpLocalization"
- [maxWidth]="columnWidths[0]"
- [width]="columnWidths[0]"
- [sortable]="false"
+<abp-loading-container [loading]="loading$ | async">
+ <ngx-datatable
+ default
+ [rows]="data"
+ [count]="recordsTotal"
+ [list]="list"
+ (activate)="tableActivate.emit($event)"
  >
- <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
- <ng-container
- *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
- ></ng-container>
- <ng-template #gridActions>
- <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
- </ng-template>
- </ng-template>
- </ngx-datatable-column>
- } @for (prop of propList; track prop.name; let i = $index) {
- <ngx-datatable-column
- *abpVisible="prop.columnVisible(getInjected)"
- [width]="columnWidths[i + 1] || 200"
- [name]="prop.displayName | abpLocalization"
- [prop]="prop.name"
- [sortable]="prop.sortable"
- >
- <ng-template ngx-datatable-header-template let-column="column">
- @if (prop.tooltip) {
- <span [ngbTooltip]="prop.tooltip | abpLocalization" container="body">
+ @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
+ <ngx-datatable-column
+ [name]="actionsText | abpLocalization"
+ [maxWidth]="columnWidths[0]"
+ [width]="columnWidths[0]"
+ [sortable]="false"
+ >
+ <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+ <ng-container
+ *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
+ ></ng-container>
+ <ng-template #gridActions>
+ <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+ </ng-template>
+ </ng-template>
+ </ngx-datatable-column>
+ }
+ @for (prop of propList;track prop.name;let i = $index) {
+ <ngx-datatable-column
+ *abpVisible="prop.columnVisible(getInjected)"
+ [width]="columnWidths[i + 1] || 200"
+ [name]="prop.displayName | abpLocalization"
+ [prop]="prop.name"
+ [sortable]="prop.sortable"
+ >
+ <ng-template ngx-datatable-header-template let-column="column">
+ @if (prop.tooltip) {
+ <span [ngbTooltip]="prop.tooltip | abpLocalization" container="body">
  {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
  </span>
- }@else{
- {{ column.name }}
- }
- </ng-template>
- <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
- <ng-container *abpPermission="prop.permission; runChangeDetection: false">
- <ng-container *abpVisible="row['_' + prop.name]?.visible">
- @if (!row['_' + prop.name].component) {
- <div
- [innerHTML]="row['_' + prop.name]?.value | async"
- (click)="
+  } @else {
+  {{ column.name }}
+  }
+  </ng-template>
+  <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+  <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+  <ng-container *abpVisible="row['_' + prop.name]?.visible">
+  @if (!row['_' + prop.name].component) {
+  <div
+  [innerHTML]="row['_' + prop.name]?.value | async"
+  (click)="
  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
  "
- [ngClass]="entityPropTypeClasses[prop.type]"
- [class.pointer]="prop.action"
- ></div>
- }@else{
- <ng-container
- *ngComponentOutlet="
+  [ngClass]="entityPropTypeClasses[prop.type]"
+  [class.pointer]="prop.action"
+  ></div>
+  } @else {
+  <ng-container
+  *ngComponentOutlet="
  row['_' + prop.name].component;
  injector: row['_' + prop.name].injector
  "
- ></ng-container>
- }
- </ng-container>
- </ng-container>
- </ng-template>
- </ngx-datatable-column>
- }
-</ngx-datatable>
+ ></ng-container>
+ }
+ </ng-container>
+ </ng-container>
+ </ng-template>
+ </ngx-datatable-column>
+ }
+ </ngx-datatable>
+</abp-loading-container>

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -32,7 +32,7 @@ import {
  TemplateRef,
  TrackByFunction,
 } from '@angular/core';
-import { Observable } from 'rxjs';
+import {EMPTY, Observable} from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ePropType } from '../../enums/props.enum';
 import { EntityActionList } from '../../models/entity-actions';
@@ -50,7 +50,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import {
  AbpVisibleDirective,
  NgxDatatableDefaultDirective,
- NgxDatatableListDirective,
+ NgxDatatableListDirective, ThemeSharedModule,
 } from '@abp/ng.theme.shared';
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
@@ -71,6 +71,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
  AsyncPipe,
  NgTemplateOutlet,
  NgComponentOutlet,
+ ThemeSharedModule,
  ],
  templateUrl: './extensible-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -113,6 +114,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
  entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
  #injector = inject(Injector);
  getInjected = this.#injector.get.bind(this.#injector);
+ loading$:Observable<boolean> = EMPTY
 
  constructor() {
  const extensions = this.#injector.get(ExtensionsService);
@@ -121,6 +123,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
  this.actionList = extensions['entityActions'].get(name)
  .actions as unknown as EntityActionList<R>;
 
+
+
  const permissionService = this.#injector.get(PermissionService);
  this.hasAtLeastOnePermittedAction =
  permissionService.filterItemsByPolicy(
@@ -181,6 +185,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
  if (data.currentValue.length < 1) {
  this.list.totalCount = this.recordsTotal;
  }
+ if(this.list){
+ this.loading$ = this.list.isLoading$;
+ }
 
  this.data = data.currentValue.map((record: any, index: number) => {
  this.propList.forEach(prop => {

npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading-container.component.ts

@@ -0,0 +1,23 @@
+ import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
+ import { DISABLE_LOADING_COMPONENT_TOKEN } from '../../tokens/loading-container.token';
+
+@Component({
+ selector: 'abp-loading-container',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+ <div [ngClass]="{ 'position-relative': isBusy }">
+ <ng-content> </ng-content>
+ @if(isBusy){
+ <abp-loading/>
+ }
+ </div>
+ `,
+})
+export class LoadingContainerComponent {
+ isLoadingDisabled = inject(DISABLE_LOADING_COMPONENT_TOKEN, { optional: true }) || false;
+ @Input({ required: true }) loading: boolean;
+
+ protected get isBusy() {
+ return this.loading && !this.isLoadingDisabled;
+ }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts

@@ -4,7 +4,9 @@ import { Component, ViewEncapsulation } from '@angular/core';
  selector: 'abp-loading',
  template: `
  <div class="abp-loading">
- <i class="fa fa-spinner fa-pulse abp-spinner" aria-hidden="true"></i>
+ <div class="spinner-border" role="status">
+ <span class="visually-hidden">{{"AbpUi::LoadingWithThreeDot" | abpLocalization}}</span>
+ </div>
  </div>
  `,
  encapsulation: ViewEncapsulation.None,
@@ -17,18 +19,10 @@ import { Component, ViewEncapsulation } from '@angular/core';
  top: 0;
  left: 0;
  z-index: 1040;
- }
-
- .abp-loading .abp-spinner {
- position: absolute;
- top: 50%;
- left: 50%;
- font-size: 14px;
- -moz-transform: translateX(-50%) translateY(-50%);
- -o-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
+ background: rgba(0,0,0,0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
  }
  `,
  ],

npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts

@@ -12,11 +12,11 @@ import {
  Renderer2,
  ViewContainerRef,
 } from '@angular/core';
-import { Subscription, timer } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { LoadingComponent } from '../components/loading/loading.component';
+import {Subscription, timer} from 'rxjs';
+import {take} from 'rxjs/operators';
+import {LoadingComponent} from '../components/loading/loading.component';
 
-@Directive({ selector: '[abpLoading]' })
+@Directive({selector: '[abpLoading]'})
 export class LoadingDirective implements OnInit, OnDestroy {
  private _loading!: boolean;
 
@@ -46,9 +46,7 @@ export class LoadingDirective implements OnInit, OnDestroy {
  .pipe(take(1))
  .subscribe(() => {
  if (!this.componentRef) {
- this.componentRef = this.cdRes
- .resolveComponentFactory(LoadingComponent)
- .create(this.injector);
+ this.componentRef = this.vcRef.createComponent(LoadingComponent, {injector: this.injector})
  }
 
  if (newValue && !this.rootNode) {
@@ -78,14 +76,14 @@ export class LoadingDirective implements OnInit, OnDestroy {
  constructor(
  private elRef: ElementRef<HTMLElement>,
  private vcRef: ViewContainerRef,
- private cdRes: ComponentFactoryResolver,
  private injector: Injector,
  private renderer: Renderer2,
- ) {}
+ ) {
+ }
 
  ngOnInit() {
  if (!this.targetElement) {
- const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
+ const {offsetHeight, offsetWidth} = this.elRef.nativeElement;
  if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) {
  this.targetElement = this.elRef.nativeElement.children[0] as HTMLElement;
  } else {

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -41,21 +41,23 @@ import { AbpVisibleDirective, DisabledDirective } from './directives';
 import { FormInputComponent } from './components/form-input/form-input.component';
 import { FormCheckboxComponent } from './components/checkbox/checkbox.component';
 import { tenantNotFoundProvider } from './providers/tenant-not-found.provider';
+import {LoadingContainerComponent} from "./components/loading/loading-container.component";
 
 const declarationsWithExports = [
  BreadcrumbComponent,
  BreadcrumbItemsComponent,
  ButtonComponent,
  ConfirmationComponent,
  LoaderBarComponent,
- LoadingComponent,
  ModalComponent,
  ToastComponent,
  ToastContainerComponent,
  LoadingDirective,
  ModalCloseDirective,
  FormInputComponent,
  FormCheckboxComponent,
+ LoadingComponent,
+ LoadingContainerComponent
 ];
 
 @NgModule({

npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts

@@ -2,3 +2,4 @@ export * from './append-content.token';
 export * from './http-error.token';
 export * from './ngx-datatable-messages.token';
 export * from './suppress-unsaved-changes-warning.token';
+export * from './loading-container.token'

npm/ng-packs/packages/theme-shared/src/lib/tokens/loading-container.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from "@angular/core";
+
+export const DISABLE_LOADING_COMPONENT_TOKEN = new InjectionToken<boolean>('DISABLE_LOADING_COMPONENT_TOKEN')