Como instalar y utilizar DDR Block list de la biblioteca DDR

31/05/20210 comentarios

Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR Toast de la biblioteca DDR.

Aquí puedes ver la documentación del componente.

El componente ddr-block-list es un componente para mostrar notificaciones en diferentes estados.

Para instalar el componente, abre una terminal y escribe: npm i ddr-block-list

Después, debes agregar el módulo DdrblockListModule a tu app.module.ts

Para utilizarlo, debes hacer lo siguiente en el html, debemos tener en cuenta que podemos personalizar los campos que vamos a mostrar.

Tenemos 3 partes:

templateInfoAdditional: Parte izquierda del bloque, se usa para mostrar un dato adicional, como una fecha.
templateHeader: Parte superior del bloque, se usa como cabecera del bloque.
templateData: Datos a mostrar como mini bloques, se usa el subcomponente ddr-block-data-item.

También podemos indicar los textos cuando no hay elementos, el elemento siguiente, el elemento previo y número de bloques.

Como eventos, tenemos los siguientes:

actionSelected: devuelve la acción indicada.
itemSelected: devuelve el item seleccionado.

Os dejo un ejemplo:


<ddr-block-list
  [blockItems]="blockItems"
  labelNoResults="No hay que mostrar"
  previousLabel="Previo"
  nextLabel="Siguiente"
  pagination="5"
  (actionSelected)="getAction($event)"
  (itemSelected)="selectItem($event)">

  <ng-template #templateInfoAdditional let-item="item">
    <span>{{item.date | date: 'dd/MMM/yyyy'}}</span>
  </ng-template>

  <ng-template #templateHeader let-item="item">
    <span>{{item.client}}</span>
  </ng-template>

  <ng-template #templateData let-item="item">

    <ddr-block-data-item
      label="Estado"
      [value]="item.status">
    </ddr-block-data-item>
    <ddr-block-data-item
      label="Edad"
      [value]="item.age">
    </ddr-block-data-item>

  </ng-template>

</ddr-block-list>

En el typescript, debemos crear objetos DdrBlockItem, que contendrá los items que queremos utilizar. También las acciones a utilizar.

export class DdrBlockListDemo implements OnInit {

  public blockItems: DdrBlockItem[];

  public CANCEL_APPOITMENT: string = "CANCEL_APPOITMENT"
  public BEFORE_APPOINTMENTS: string = "BEFORE_APPOINTMENTS"

  constructor() {
    this.blockItems = [];
  }

  ngOnInit() {

    let items = [
      {
        "date": "2019-09-09",
        "status": "complete",
        "client": "Fernando",
        "age": 29
      },
      {
        "date": "2019-10-10",
        "status": "canceled",
        "client": "Pepe",
        "age": 17
      },
      {
        "date": "2019-09-09",
        "status": "in course",
        "client": "Manuel",
        "age": 80
      },
      {
        "date": "2019-12-12",
        "status": "unknown",
        "client": "Fernando",
        "age": 10
      },
      {
        "date": "2019-09-09",
        "status": "complete",
        "client": "Fernando",
        "age": 29
      },
      {
        "date": "2019-10-10",
        "status": "canceled",
        "client": "Pepe",
        "age": 17
      },
      {
        "date": "2019-09-09",
        "status": "in course",
        "client": "Manuel",
        "age": 80
      },
      {
        "date": "2019-12-12",
        "status": "unknown",
        "client": "Fernando",
        "age": 10
      }
    ];

    let actions: DdrAction[] = [
      {
        'label': "Cancelar cita",
        'value': this.CANCEL_APPOITMENT
      },
      {
        'label': "Ver anteriores citas",
        "value": this.BEFORE_APPOINTMENTS,
        "icon": "fa fa-file"
      }
    ];

    items.forEach(item => {

      let blockItem = new DdrBlockItem();

      blockItem.item = item;

      switch (item.status) {
        case "complete":
          blockItem.borderColor = "green"
          break;
        case "canceled":
          blockItem.borderColor = "red"
          break;
        case "in course":
          blockItem.borderColor = "blue"
          break;
        case "unknown":
          blockItem.borderColor = "grey"
          break;
      }

      blockItem.actions = item.age >= 18 ? actions : actions.filter((act, index) => index === 0);

      this.blockItems.push(blockItem);

    })


  }

  getAction($event) {
    console.log($event);
  }

  selectItem($event) {
    console.log($event);
  }

}

Te dejo un ejemplo en vivo:

Recuerda que si quieres aprender a como realizar la tuya, lo puedes ver en nuestro curso de angular de Crea tu propia biblioteca de componente con Angular.