dharma-ui-dataset

Motivação:

O dharma UI dataset tem como objetivo fornecer as funcionalidades essenciais para utilizar em uma table de dados.

O que o Dharma dataset oferece:

• Bar Navigator

Sumário:

• Instalação
• Bar Navigator

Instalando

Instale o módulo dharma-ui-dataset $ npm install dharma-ui-dataset

Bar Navigator

Descrição: Paginar uma tabela.

Vamos pegar como exemplo uma página do Clube Dotz que utiliza uma tabela com bar navigator.

O primeiro passo é importar o módulo BarNavigatorModule do dharma-ui-dataset no módulo que você for usar o componente.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BarNavigatorModule } from 'dharma-ui-dataset';

@NgModule({
  imports: [
    CommonModule,
    BarNavigatorModule,
  ],
  declarations: [myComponent],
})
export class myModule { }

HTML:

<div class="extract animated fadeIn">    
    <div class="row">
        <div class="col-lg-12">
            <div class="card-body">
                <dharma-ui-alert-summary></dharma-ui-alert-summary>
                <dharma-ui-alert></dharma-ui-alert>
                <table class="table-round-corner">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Descrição</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of pagedItems">
                            <td>{{item.movementDate | date: 'dd/MM/yyyy HH:mm:ss':'-3'}}</td>
                            <td>{{item.description}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-12 text-center">
                <app-bar-navigator (callNavitation)="setPage($event)" [pager]=pager></app-bar-navigator>
            </div>
        </div>
    </div>
</div>

Componente:

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ExtractView } from './models/extract-view';
import { LoaderService } from 'dharma-ui-components';
import { ClubUserService } from 'src/app/shared/services/club-user.service';
import { ExtractFilter } from './models/extract-filter';
import { PagerService } from 'dharma-ui-dataset';
import { AlertSummaryService } from 'dharma-ui-alert';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class myComponent implements OnInit {

  constructor(
    private pagerService: PagerService,
    private clubUserService: ClubUserService,
    public loaderService: LoaderService,
    private alertSumaryService: AlertSummaryService
  ) { }

  formFilter: FormGroup;
  private allItems: any[];

  extracts: ExtractView[];

  pager: any = {};
  totalItem: number;
  pagedItems: any[];
  itemsByPage = 10;
  firstPage = 1;
  currentPage = 1;

  ngOnInit() {
    this.setPage(this.firstPage);
  }

  setPage(page: number) {
    this.loaderService.show();
    const filter = new ExtractFilter(page, this.itemsByPage);
    this.clubUserService.get(filter).subscribe(view => {
      this.allItems = view.items;
      this.totalItem = view._total;
      this.pager = this.pagerService.getPager(this.totalItem, page, view._pageSize);
      this.pagedItems = this.allItems;
      this.loaderService.hide();
    }, error => {
      this.alertSumaryService.danger('Erro', error);
      this.loaderService.hide();
    });
  }
}