File
Implements
Methods
|
applyFilter
|
applyFilter(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
dataSource
|
Default value : new MatTableDataSource<ITransaction>()
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'transaction_id',
'type_paiement_label',
'marchand',
'service',
'montant',
'date',
'commentaire',
'etat',
'status',
'reference',
]
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
|
|
|
selectedOperateur
|
Type : string
|
Default value : ''
|
|
|
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { CommonModule } from '@angular/common';
import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction';
import { HttpClientModule } from '@angular/common/http';
import { RouterLink } from '@angular/router';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { OperateurService } from 'src/app/_services/trafics/operateur/operateur.service';
@Component({
selector: 'bgui-suivi-transaction',
standalone: true,
imports: [
CommonModule,
HttpClientModule,
RouterLink,
FormsModule,
MatTableModule,
MatPaginatorModule,
MatFormFieldModule,
MatInputModule,
],
templateUrl: './suivi-transaction.component.html',
styleUrls: ['./suivi-transaction.component.scss'],
})
export class SuiviTransactionComponent implements AfterViewInit {
transactions: ITransaction[] = [];
operateurs: IOperateur[] = [];
selectedOperateur: string = '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
startDate: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
endDate: any;
displayedColumns: string[] = [
'transaction_id',
'type_paiement_label',
'marchand',
'service',
'montant',
'date',
'commentaire',
'etat',
'status',
'reference',
];
dataSource = new MatTableDataSource<ITransaction>();
@ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(
private transactionService: TransactionService,
private operateurservice: OperateurService
) {}
ngOnInit(): void {
this.transactionService.getAll().subscribe((data: ITransaction[]) => {
this.transactions = data;
console.log('transactions=>', this.transactions);
this.dataSource.data = this.transactions;
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.operateurservice.getAllOperator().subscribe((operateur: any) => {
this.operateurs = operateur.results;
console.log('operateurs==>', this.operateurs);
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.paginator.pageIndex = this.paginator.pageSize;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
<div class="page-title">
<h3>Transactions</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"
placeholder="operateur"
style="width: 100%">
<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"
[(ngModel)]="startDate"
required
name="debut"
class="form-control form-control-sm" />
</div>
<div class="col-md-3">
<label for="fin">À</label>
<input
type="date"
[(ngModel)]="endDate"
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.." #input />
</mat-form-field>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="transaction_id">
<mat-header-cell *matHeaderCellDef class="text"> ID </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.transaction_id }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="type_paiement">
<mat-header-cell *matHeaderCellDef class="text"
>ID type paiement
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="type_paiement_label">
<mat-header-cell *matHeaderCellDef class="text"
>Type paiement
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement_label }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="marchand">
<mat-header-cell *matHeaderCellDef class="text">
Marchand
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.marchand }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="service">
<mat-header-cell *matHeaderCellDef class="text">
Service
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.service }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef class="text">
Montant
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.montant }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef class="text"> Date </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.date | date: 'dd/MM/yyyy' }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef class="text">
Commentaire
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.commentaire }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="etat">
<mat-header-cell *matHeaderCellDef class="text"> Etat </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.etat }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef class="text"> Status </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="reference">
<mat-header-cell *matHeaderCellDef class="text">
Réference
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.reference }}
</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
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20, 40, 60, 80, 100]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
table {
width: 100%;
}
.mat-mdc-form-field {
font-size: 14px;
width: 100%;
}
.text {
color:blue;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
Legend
Html element with directive