src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts
| selector | bgui-suivi-paiement |
| standalone | true |
| imports |
MatFormFieldModule
MatInputModule
MatTableModule
MatPaginatorModule
CommonModule
HttpClientModule
RouterLink
FormsModule
|
| templateUrl | ./suivi-paiement.component.html |
| styleUrl | ./suivi-paiement.component.scss |
Properties |
Methods |
constructor(httpClient: HttpClient)
|
||||||
|
Parameters :
|
| applyFilter | ||||||
applyFilter(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| fetchOperateurs |
fetchOperateurs()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onOperateurChange | ||||||
onOperateurChange(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| dataSource |
Default value : new MatTableDataSource(ELEMENT_DATA)
|
| displayedColumns |
Type : string[]
|
Default value : [
'nfacture',
'nom',
'prenom',
'contact',
'service',
'email',
'montant',
'modePaiement',
'status',
'dateTransaction',
]
|
| operateurs |
Type : IOperateur[]
|
Default value : []
|
| paginator |
Type : MatPaginator | undefined
|
Decorators :
@ViewChild(MatPaginator)
|
| selectedOperateur |
Type : string
|
Default value : ''
|
| Private url |
Type : string
|
Default value : 'http://192.168.1.223:8001/operateur/'
|
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
export interface PElement {
nfacture: number;
nom: string;
prenom: string;
contact: string;
service: string;
email: string;
montant: number;
modePaiement: string;
status: string;
dateTransaction: string;
}
const ELEMENT_DATA: PElement[] = [
{
nfacture: 1,
nom: 'zaho',
prenom: 'zadi',
contact: '0101010101',
service: 'mtn',
email: 'mrtest@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '10-04-2024',
},
{
nfacture: 2,
nom: 'kablan',
prenom: 'fatou',
contact: '0101010101',
service: 'mtn',
email: 'mrtet@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '16-03-2024',
},
{
nfacture: 3,
nom: 'toure',
prenom: 'koffi',
contact: '0101010101',
service: 'mtn',
email: 'mrtest@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'invalide',
dateTransaction: '04-04-2024',
},
{
nfacture: 4,
nom: 'belem',
prenom: 'asaph',
contact: '0101010101',
service: 'mtn',
email: 'test@mail.com',
montant: 27000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '16-02-2024',
},
{
nfacture: 5,
nom: 'tanoh',
prenom: 'delmas',
contact: '0101010101',
service: 'mtn',
email: 'rtest@mail.com',
montant: 50000,
modePaiement: 'wave',
status: 'invalide',
dateTransaction: '16-04-2024',
},
{
nfacture: 6,
nom: 'gaba',
prenom: 'akemane',
contact: '0101010101',
service: 'mtn',
email: 'mtst@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '16-01-2024',
},
{
nfacture: 7,
nom: 'kra',
prenom: 'zoulou',
contact: '0101010101',
service: 'mtn',
email: 'mest@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '26-03-2024',
},
{
nfacture: 8,
nom: 'kakou',
prenom: 'kasa',
contact: '0101010101',
service: 'mtn',
email: 'mrtst@mail.com',
montant: 80000,
modePaiement: 'wave',
status: 'invalide',
dateTransaction: '10-04-2024',
},
{
nfacture: 9,
nom: 'nguessan',
prenom: 'daouda',
contact: '0101010101',
service: 'mtn',
email: 'mrte@mail.com',
montant: 25000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '16-04-2024',
},
{
nfacture: 10,
nom: 'Neon',
prenom: 'kanon',
contact: '0101010101',
service: 'mtn',
email: 'mrtest@mail.com',
montant: 27000,
modePaiement: 'wave',
status: 'valide',
dateTransaction: '16-04-2024',
},
];
@Component({
selector: 'bgui-suivi-paiement',
standalone: true,
imports: [
MatFormFieldModule,
MatInputModule,
MatTableModule,
MatPaginatorModule,
CommonModule,
HttpClientModule,
RouterLink,
FormsModule,
],
templateUrl: './suivi-paiement.component.html',
styleUrl: './suivi-paiement.component.scss',
})
export class SuiviPaiementComponent {
private url = 'http://192.168.1.223:8001/operateur/';
operateurs: IOperateur[] = [];
selectedOperateur: string = '';
displayedColumns: string[] = [
'nfacture',
'nom',
'prenom',
'contact',
'service',
'email',
'montant',
'modePaiement',
'status',
'dateTransaction',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(private httpClient: HttpClient) {}
ngOnInit(): void {
this.fetchOperateurs();
}
fetchOperateurs(): void {
this.httpClient.get<IOperateur>(this.url).subscribe(
(data: IOperateur) => {
this.operateurs.push(data);
console.log('operateur==>', this.operateurs);
},
error => {
console.error(
"Une erreur s'est produite lors de la récupération des opérateurs :",
error
);
}
);
}
onOperateurChange(event: Event): void {
const selectElement = event.target as HTMLSelectElement;
this.selectedOperateur = selectElement.value;
console.log('Selected opérateur ===>', this.selectedOperateur);
}
ngAfterViewInit() {
if (this.paginator) {
this.dataSource.paginator = this.paginator;
}
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<div class="page-title">
<h3>Paiemnts</h3>
</div>
<div class="row" style="margin-top: 40px">
<div class="col-md-2">
<label for="operateurs">Opérateurs</label>
<select
class="form-control filtre"
id="operateurs"
style="width: 100%"
[(ngModel)]="selectedOperateur">
<option *ngFor="let operateur of operateurs" [value]="operateur.code">
{{ operateur.code }}
</option>
</select>
</div>
<div class="col-md-2">
<label for="services">Services</label>
<select class="form-control filtre" style="width: 100%">
<option value="">Tout</option>
</select>
</div>
<div class="col-md-3">
<label for="debut">De</label>
<input
type="date"
value="2024-04-16"
required=""
name="debut"
class="form-control form-control-sm" />
</div>
<div class="col-md-3">
<label for="fin">À</label>
<input
type="date"
value="2024-04-16"
required=""
name="fin"
class="form-control form-control-sm" />
</div>
<div class="col-md-2">
<label style="visibility: hidden">Recherche</label>
<div class="card-title">
<button class="btn btn-primary btn-sm">
Recherche <i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px">
<mat-form-field>
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nfacture">
<mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="contact">
<mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="service">
<mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef> Montant </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>