sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Affichage en tableau de la liste des DZs

Browse Source
This commit is contained in:
Sébastien André
2019-10-10 11:00:15 +02:00
parent e2baa1486a
commit 3fa3275092
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
View File

@@ -2,7 +2,7 @@
list-of-dzs works! list-of-dzs works!
</p> </p>
<table mat-table [dataSource]="listOfDropZones" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSourceTable" class="mat-elevation-z8">
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th> <th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{element.id}}</td> <td mat-cell *matCellDef="let element">{{element.id}}</td>
@@ -12,5 +12,8 @@
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td> <td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

13
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
View File

@@ -1,4 +1,6 @@
import { Component, OnInit, Injectable } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { DropZoneResp } from '../../models/dropzone'; import { DropZoneResp } from '../../models/dropzone';
import { ServiceApi } from '../../services/serviceApi'; import { ServiceApi } from '../../services/serviceApi';
@@ -13,6 +15,9 @@ import { ServiceComm } from '../../services/serviceComm';
export class ListOfDzsComponent implements OnInit { export class ListOfDzsComponent implements OnInit {
public listOfDropZones: Array<DropZoneResp> = new Array<DropZoneResp>(); public listOfDropZones: Array<DropZoneResp> = new Array<DropZoneResp>();
public displayedColumns: Array<string> = ['id', 'name'];
public dataSourceTable = new MatTableDataSource<DropZoneResp>();
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor(private serviceApi: ServiceApi, constructor(private serviceApi: ServiceApi,
private serviceComm: ServiceComm) { private serviceComm: ServiceComm) {
@@ -25,6 +30,10 @@ export class ListOfDzsComponent implements OnInit {
getListOfDropZones() { getListOfDropZones() {
this.serviceApi.getListOfDropZones() this.serviceApi.getListOfDropZones()
.subscribe(data => this.listOfDropZones = data); .subscribe(data => {
this.listOfDropZones = data;
this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
this.dataSourceTable.paginator = this.paginator;
});
} }
} }