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

Changement sur l'affichage de la pagination

Browse Source
This commit is contained in:
Sébastien André
2019-11-20 13:08:09 +01:00
parent 3a66d5e6ac
commit 51f7fc2b7d
10 changed files with 85 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Front/skydivelogs-app/src/app/app.module.ts
View File

@@ -1,23 +1,23 @@
import { BrowserModule } from "@angular/platform-browser"; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from "@angular/core"; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router"; import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http"; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from "./app.component"; import { AppComponent } from './app.component';
import { SummaryComponent } from "./summary/summary.component"; import { SummaryComponent } from './summary/summary.component';
import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component"; import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component"; import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
import { NewJumpComponent } from "./new-jump/new-jump.component"; import { NewJumpComponent } from './new-jump/new-jump.component';
import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component"; import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component"; import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
import { DateService } from "../services/date.service"; import { DateService } from '../services/date.service';
import { ServiceApiGet } from "../services/service-api-get.service"; import { ServiceApiGet } from '../services/service-api-get.service';
import { ServiceApiPost } from "../services/service-api-post.service"; import { ServiceApiPost } from '../services/service-api-post.service';
import { ServiceComm } from "../services/service-comm.service"; import { ServiceComm } from '../services/service-comm.service';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms"; import { FormsModule } from '@angular/forms';
import { import {
MatPaginatorModule, MatPaginatorModule,
MatTableModule, MatTableModule,
@@ -30,17 +30,17 @@ import {
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatIconModule MatIconModule
} from "@angular/material"; } from '@angular/material';
import { RequestCache } from "../services/request-cache.service"; import { RequestCache } from '../services/request-cache.service';
import { CachingInterceptor } from "../services/caching-interceptor.service"; import { CachingInterceptor } from '../services/caching-interceptor.service';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ path: "summary", component: SummaryComponent }, { path: 'summary', component: SummaryComponent },
{ path: "jumpsList", component: ListOfJumpsComponent }, { path: 'jumpsList', component: ListOfJumpsComponent },
{ path: "dz", component: ListOfDzsComponent }, { path: 'dz', component: ListOfDzsComponent },
{ path: "newjump", component: NewJumpComponent }, { path: 'newjump', component: NewJumpComponent },
{ path: "aircraftList", component: ListOfAircraftsComponent }, { path: 'aircraftList', component: ListOfAircraftsComponent },
{ path: "jumpTypeList", component: ListOfJumpTypesComponent } { path: 'jumpTypeList', component: ListOfJumpTypesComponent }
]; ];
@NgModule({ @NgModule({
@@ -84,4 +84,4 @@ const appRoutes: Routes = [
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule {} export class AppModule { }

2
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
View File

@@ -12,4 +12,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

4
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
View File

@@ -14,12 +14,13 @@ import { ServiceComm } from "../../services/service-comm.service";
export class ListOfAircraftsComponent implements OnInit { export class ListOfAircraftsComponent implements OnInit {
public displayedColumns: Array<string> = ["id", "name"]; public displayedColumns: Array<string> = ["id", "name"];
public dataSourceTable; public dataSourceTable;
public resultsLength = 0;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
private serviceApi: ServiceApiGet, private serviceApi: ServiceApiGet,
private serviceComm: ServiceComm private serviceComm: ServiceComm
) {} ) { }
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle("List of aircrafts"); this.serviceComm.updatedComponentTitle("List of aircrafts");
@@ -30,6 +31,7 @@ export class ListOfAircraftsComponent implements OnInit {
this.serviceApi.getListOfAircrafts().subscribe(data => { this.serviceApi.getListOfAircrafts().subscribe(data => {
this.dataSourceTable = new MatTableDataSource<AircraftResp>(data); this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
this.dataSourceTable.paginator = this.paginator; this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}); });
} }
} }

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

@@ -34,4 +34,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

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

@@ -1,36 +1,37 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from "@angular/material/paginator"; import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from "@angular/material/table"; import { MatTableDataSource } from '@angular/material/table';
import { DropZoneResp } from "../../models/dropzone"; import { DropZoneResp } from '../../models/dropzone';
import { ServiceApiGet } from "../../services/service-api-get.service"; import { ServiceApiGet } from '../../services/service-api-get.service';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
@Component({ @Component({
selector: "app-list-of-dzs", selector: 'app-list-of-dzs',
templateUrl: "./list-of-dzs.component.html", templateUrl: './list-of-dzs.component.html',
styleUrls: ["./list-of-dzs.component.css"] styleUrls: ['./list-of-dzs.component.css']
}) })
export class ListOfDzsComponent implements OnInit { export class ListOfDzsComponent implements OnInit {
public displayedColumns: Array<string> = [ public displayedColumns: Array<string> = [
"id", 'id',
"name", 'name',
"latitude", 'latitude',
"longitude", 'longitude',
"address", 'address',
"email", 'email',
"type" 'type'
]; ];
public dataSourceTable; public dataSourceTable;
public resultsLength = 0;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
private serviceApi: ServiceApiGet, private serviceApi: ServiceApiGet,
private serviceComm: ServiceComm private serviceComm: ServiceComm
) {} ) { }
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle("List of DZs"); this.serviceComm.updatedComponentTitle('List of DZs');
this.getListOfDropZones(); this.getListOfDropZones();
} }
@@ -38,6 +39,7 @@ export class ListOfDzsComponent implements OnInit {
this.serviceApi.getListOfDropZones().subscribe(data => { this.serviceApi.getListOfDropZones().subscribe(data => {
this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data); this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
this.dataSourceTable.paginator = this.paginator; this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}); });
} }
} }

2
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
View File

@@ -12,4 +12,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

4
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
View File

@@ -14,12 +14,13 @@ import { ServiceComm } from "../../services/service-comm.service";
export class ListOfJumpTypesComponent implements OnInit { export class ListOfJumpTypesComponent implements OnInit {
public displayedColumns: Array<string> = ["id", "name"]; public displayedColumns: Array<string> = ["id", "name"];
public dataSourceTable; public dataSourceTable;
public resultsLength = 0;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
private serviceApi: ServiceApiGet, private serviceApi: ServiceApiGet,
private serviceComm: ServiceComm private serviceComm: ServiceComm
) {} ) { }
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle("List of jump types"); this.serviceComm.updatedComponentTitle("List of jump types");
@@ -30,6 +31,7 @@ export class ListOfJumpTypesComponent implements OnInit {
this.serviceApi.getListOfJumpTypes().subscribe(data => { this.serviceApi.getListOfJumpTypes().subscribe(data => {
this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data); this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
this.dataSourceTable.paginator = this.paginator; this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}); });
} }
} }

2
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
View File

@@ -25,4 +25,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

36
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
View File

@@ -1,36 +1,37 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from "@angular/material/paginator"; import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from "@angular/material/table"; import { MatTableDataSource } from '@angular/material/table';
import { Observable } from "rxjs"; import { Observable } from 'rxjs';
import { JumpResp } from "../../models/jump"; import { JumpResp } from '../../models/jump';
import { ServiceApiGet } from "../../services/service-api-get.service"; import { ServiceApiGet } from '../../services/service-api-get.service';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
@Component({ @Component({
selector: "app-list-of-jumps", selector: 'app-list-of-jumps',
templateUrl: "./list-of-jumps.component.html", templateUrl: './list-of-jumps.component.html',
styleUrls: ["./list-of-jumps.component.css"] styleUrls: ['./list-of-jumps.component.css']
}) })
export class ListOfJumpsComponent implements OnInit { export class ListOfJumpsComponent implements OnInit {
public listOfJumps: Observable<Array<JumpResp>>; public listOfJumps: Observable<Array<JumpResp>>;
public displayedColumns: Array<string> = [ public displayedColumns: Array<string> = [
"id", 'id',
"jumpDate", 'jumpDate',
"jumpTypeId", 'jumpTypeId',
"aircraftId", 'aircraftId',
"dropZoneId" 'dropZoneId'
]; ];
public dataSourceTable; public dataSourceTable;
public resultsLength = 0;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
private serviceApi: ServiceApiGet, private serviceApi: ServiceApiGet,
private serviceComm: ServiceComm private serviceComm: ServiceComm
) {} ) { }
ngOnInit() { ngOnInit() {
this.serviceComm.updatedComponentTitle("List of jumps"); this.serviceComm.updatedComponentTitle('List of jumps');
this.getListOfJumps(); this.getListOfJumps();
} }
@@ -39,6 +40,7 @@ export class ListOfJumpsComponent implements OnInit {
this.listOfJumps.subscribe(data => { this.listOfJumps.subscribe(data => {
this.dataSourceTable = new MatTableDataSource<JumpResp>(data); this.dataSourceTable = new MatTableDataSource<JumpResp>(data);
this.dataSourceTable.paginator = this.paginator; this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}); });
} }
} }

11
Front/skydivelogs-app/src/styles.css
View File

@@ -1,4 +1,11 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
html, body { height: 100%; } html,
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}