Tareas largas

Introducción

En ese ejericio simularemos una pantalla de espera en caso de que la tarea que se esté realizando en el backend sea susceptible de ser pesada y que tarde en responder. En este caso, será un botón que simule una tarea larga en el listado de clientes.

Añadir el botón al listado de clientes

Controlaremos que se muestre el panel que hemos añadido se muestre mediante la utilización de la directiva *ngIf evaluando una variable del componente. Cuando esté a true, se mostrará el panel, en caso contrario, quedará oculto.

customers-home.component.html

<o-form-layout-manager attr="customersHome" title="{{'CUSTOMERS' | oTranslate }}" separator=" " mode="tab"
    label-columns="NAME;SURNAME">
    <o-table attr="customersTable" service="customers" entity="customer" keys="CUSTOMERID"
        columns="CUSTOMERID;ID;PHOTO;NAME;SURNAME;STARTDATE;EMAIL;CUSTOMERTYPEID"
        visible-columns="ID;PHOTO;NAME;SURNAME;STARTDATE;EMAIL;CUSTOMERTYPEID" query-rows="20">
        <o-table-button attr="longTaskBtn" (onClick)="longTaskToBackend()" label="{{'longTask' | oTranslate }}"
            icon="update"></o-table-button>
        <o-table-column attr="PHOTO" title="PHOTO" orderable="no" searchable="no" type="image" avatar="yes"
            empty-image="assets/images/no-image.png" image-type="base64"></o-table-column>
        <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
        <o-table-column attr="ID" title="ID" width="100px"></o-table-column>
        <o-table-column attr="CUSTOMERTYPEID" title="CUSTOMERTYPEID">
            <app-customertype-column-renderer></app-customertype-column-renderer>
        </o-table-column>
    </o-table>
    <div class="waitPanel" *ngIf="showWaitForLongTask">
        <mat-spinner></mat-spinner>
    </div>
</o-form-layout-manager>

customers-home.component.ts

import { Component, ViewChild } from '@angular/core';
import { OTableButtonComponent, OntimizeService } from 'ontimize-web-ngx';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-customers-home',
  templateUrl: './customers-home.component.html',
  styleUrls: ['./customers-home.component.css']
})
export class CustomersHomeComponent {

  public showWaitForLongTask = false;
  private subscription: Subscription;

  constructor(
    private ontimizeService: OntimizeService
  ) {
    this.ontimizeService.configureService(this.ontimizeService.getDefaultServiceConfiguration("customers"));
  }

  longTaskToBackend() {
    this.showWaitForLongTask = true;
    this.subscription = this.ontimizeService.query(undefined, [], 'longTask').subscribe({
      next: (res: any) => {
        console.log("Long task finished");
      },
      error: (err: any) => this.showWaitForLongTask = false,
      complete: () => this.showWaitForLongTask = false
    });
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

customers-home.component.css

.waitPanel {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #00000066;
  z-index: 99;
  justify-content: center;
  align-items: center;
}

Traducciones

en.json

{
   ...
  "longTask": "Long task"
}

es.json

{
   ...
  "longTask": "Tarea larga"
}

arrow_back Tutorial anterior Próximo tutorial arrow_forward