Commit ea5e971d authored by Merzough Münker's avatar Merzough Münker
Browse files

fix: support refresh, reset and retry data source methods

parent 7cdae934

packages/angular/data-source/src/lib/data-source-error/data-source-error.component.html

+7 −1
Original line number Diff line number Diff line 
<div class="p-10 w-full">

  <div class="flex flex-col justify-center items-center gap-8">

    <span i18n>Something has gone wrong!</span>

    <button type="button" (click)="retry()" [disabled]="retryInProgress()" mat-stroked-button>

    <button *ngIf="refresh || retry" type="button" (click)="triggerRetry()" [disabled]="retryInProgress() || resetInProgress()" mat-stroked-button>

      <span class="flex flex-row items-center gap-4">

        <span i18n>Retry</span>

        <mat-spinner *ngIf="retryInProgress()" [diameter]="15"></mat-spinner>

      </span>

    </button>

    <button *ngIf="reset" type="button" (click)="triggerReset()" [disabled]="resetInProgress() || retryInProgress()" mat-stroked-button>

      <span class="flex flex-row items-center gap-4">

        <span i18n>Retry</span>

        <mat-spinner *ngIf="resetInProgress()" [diameter]="15"></mat-spinner>

      </span>

    </button>

    <span *ngIf="isNotRelease" class="text-red-700">{{errorMessage()}}</span>

  </div>

</div>

packages/angular/data-source/src/lib/data-source-error/data-source-error.component.ts

+47 −4
Original line number Diff line number Diff line
@@ -25,6 +25,16 @@ import { 
  Subscription,

} from 'rxjs';



export interface DataSourceLikeForErrorHandling {

  refresh?: () => void;

  retry?: () => void;

  reset?: () => void;

  loading?: Observable<boolean> | boolean;

  loading$?: Observable<boolean>;

  error$?: Observable<unknown>;

  error?: Observable<unknown> | unknown | null;

}



@Component({

  selector: 'rxap-data-source-error',

  templateUrl: './data-source-error.component.html',
@@ -46,6 +56,21 @@ export class DataSourceErrorComponent implements OnChanges, OnInit, OnDestroy { 
  @Input()

  public refresh?: () => void;



  @Input()

  public retry?: () => void;



  @Input()

  public reset?: () => void;



  @Input()

  public set dataSourceLike(value: DataSourceLikeForErrorHandling) {

    this.refresh ??= value.refresh;

    this.retry ??= value.retry;

    this.reset ??= value.reset;

    this.loading ??= value.loading ?? value.loading$;

    this.error ??= value.error ?? value.error$;

  }



  @Input()

  public loading?: Observable<boolean> | boolean;
@@ -54,6 +79,7 @@ export class DataSourceErrorComponent implements OnChanges, OnInit, OnDestroy { 
  public errorMessage = signal('Unknown Error');



  public retryInProgress = signal(false);

  public resetInProgress = signal(false);



  private _subscription?: Subscription;
@@ -67,10 +93,12 @@ export class DataSourceErrorComponent implements OnChanges, OnInit, OnDestroy { 
  ngOnChanges(changes: SimpleChanges) {

    if (changes['error']) {

      this.retryInProgress.set(false);

      this.resetInProgress.set(false);

    }

    if (changes['loading']) {

      if (!changes['loading'].currentValue && typeof changes['loading'].currentValue === 'boolean') {

        this.retryInProgress.set(false);

        this.resetInProgress.set(false);

      }

    }

  }
@@ -83,9 +111,14 @@ export class DataSourceErrorComponent implements OnChanges, OnInit, OnDestroy { 
    this._subscription = new Subscription();

    if (this.loading instanceof Observable) {

      this._subscription.add(this.loading.subscribe((loading) => {

        if (!loading && this.retryInProgress()) {

        if (!loading) {

          if (this.retryInProgress()) {

            this.retryInProgress.set(false);

          }

          if (this.resetInProgress()) {

            this.resetInProgress.set(false);

          }

        }

      }));

    }

    if (this.error instanceof Observable) {
@@ -97,11 +130,21 @@ export class DataSourceErrorComponent implements OnChanges, OnInit, OnDestroy { 
    }

  }



  retry() {

    if (this.refresh) {

  triggerRetry() {

    if (this.retry) {

      this.retryInProgress.set(true);

      this.retry();

    } else if (this.refresh) {

      this.retryInProgress.set(true);

      this.refresh();

    }

    this.retryInProgress.set(true);

  }



  triggerReset() {

    if (this.reset) {

      this.resetInProgress.set(true);

      this.reset();

    }

  }



}