Como instalar y utilizar DDR Block list de la biblioteca DDR

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.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *