12.0.0 • Published 3 years ago
dharma-ui-dataset v12.0.0
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:
Instale o módulo dharma-ui-dataset
$ npm install dharma-ui-dataset
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();
});
}
}
12.0.0
3 years ago
0.0.1
3 years ago
11.0.2-beta
3 years ago
11.0.1-beta
3 years ago
11.0.3-beta
3 years ago
11.0.0-beta
3 years ago
8.0.0
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago