Skip to content

B
beasy-front-angular
Commit 28d032b9 by zadi francice
Options

05/05/2024

parent bebe801f
Showing with 808 additions and 296 deletions
src/app/_helpers/auth.guard.ts
......@@ -33,3 +33,4 @@ export class AuthGuard implements CanActivate {
return status;
}
}
src/app/_helpers/models/user.ts
......@@ -6,6 +6,7 @@
// }
export interface IUser {
password: string;
email: string;
password: string;
}
src/app/_helpers/token.interceptor.ts
......@@ -5,33 +5,47 @@ import {
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpErrorResponse,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from './services/auth.service';
import { Router } from '@angular/router'; // Importer le Router pour la redirection
@Injectable()
export class TokenIntercept implements HttpInterceptor {
constructor(private authService: AuthService) {}
export class TokenInterceptor implements HttpInterceptor {
constructor(
private authService: AuthService,
private router: Router // Injection du Router
) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (request.url.startsWith(environment['apiBaseUrl'] + '/api')) {
if (request.url.startsWith(environment.apiBaseUrl + '/api')) {
const token = this.authService.getToken();
const headers = {};
if (token !== null) {
headers['Authorization'] = 'Bearer ' + token;
}
const modified = request.clone({
setHeaders: headers,
if (token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
},
});
return next.handle(modified);
} else {
return next.handle(request);
}
}
return next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
// Déconnexion de l'utilisateur en cas d'erreur d'authentification
this.authService.logout();
// Redirection vers la page de connexion
this.router.navigate(['/auth']); // Modifier '/login' selon votre chemin de la page de connexion
// Vous pouvez également afficher un message d'erreur à l'utilisateur
// en utilisant un service de notification ou en modifiant votre modèle pour afficher un message d'erreur
}
return throwError(error);
})
);
}
}
src/app/app.routes.ts
......@@ -10,7 +10,7 @@ export const routes: Routes = [
},
// Redirect empty path to '/dashboards/project'
{ path: '', pathMatch: 'full', redirectTo: 'admin' },
{ path: '', pathMatch: 'full', redirectTo: 'auth' },
{
path: '',
component: MainLayoutComponent,
......@@ -49,7 +49,7 @@ export const routes: Routes = [
loadComponent: () =>
import(
'./admin/dashboards/beasy-dashboard/beasy-dashboard.component'
).then(c => c.BeasyDashboardComponent),//canActivate:[AuthGuard]
).then(c => c.BeasyDashboardComponent), //canActivate:[AuthGuard]
},
{
......@@ -96,7 +96,7 @@ export const routes: Routes = [
{
path: '**',
component: LoginAdminComponent,
}
},
],
canActivate: [AuthGuard],
},
......
src/app/integrations/integration/code-provider/code-provider.component.html
<div class="content sm-gutter">
<div class="page-title" >
<div class="page-title">
<h3>Pays &amp; Code Provider</h3>
</div>
<div class="row ">
<div class="row" style="margin-top: 40px">
<!-- BEGIN WORLD MAP WIDGET - MAP -->
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row">
<div class="span12">
<div class="mat-elevation-z1 mat-table-container">
<div class="search-bar">
<label style="margin: 2rem"
>Search:
<mat-form-field>
<mat-label>Filtre</mat-label>
<input
type="search"
class="mat-input"
placeholder="Search"
aria-controls="DataTables_Table_0"
/></label>
</div>
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table
class="mat-table"
......
src/app/integrations/integration/code-provider/code-provider.component.ts
......@@ -61,4 +61,9 @@ export class CodeProviderComponent {
this.dataSource.paginator = this.paginator;
}
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
src/app/integrations/integration/dart/dart.component.html
<div class="page-title">
<h3>Integration - <span class="semi-bold">Dart</span></h3>
</div>
<section>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
......@@ -13,14 +12,18 @@
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
......@@ -29,29 +32,42 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://www.technotification.com/wp-content/uploads/2019/01/Dart-programming-language-350x350.jpg" style="width:100%" alt="Dart Logo">
<img
src="https://www.technotification.com/wp-content/uploads/2019/01/Dart-programming-language-350x350.jpg"
style="width: 100%"
alt="Dart Logo" />
</div>
<div class="col-md-6">
<mat-form-field>
<mat-label>ID MARCHAND</mat-label>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
</mat-form-field>
</div>
</div>
<br><br>
<br /><br />
<div class="row">
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" download="">Télécharger la documentation <mat-icon>file_download</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
download=""
>Télécharger la documentation
<mat-icon>file_download</mat-icon></a
>
</div>
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
target="_blank"
>Visualiser la documentation <mat-icon>description</mat-icon></a
>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
<
src/app/integrations/integration/java-script/java-script.component.html
<div class="page-title">
<h3>Integration - <span class="semi-bold">JavaScript</span></h3>
</div>
<section>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
......@@ -13,14 +12,18 @@
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
......@@ -29,27 +32,40 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_1280.png" style="width:100%" alt="Logo JavaScript">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_1280.png"
style="width: 100%"
alt="Logo JavaScript" />
</div>
<div class="col-md-6">
<mat-form-field>
<mat-label>ID MARCHAND</mat-label>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
</mat-form-field>
</div>
</div>
<br><br>
<br /><br />
<div class="row">
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" download="">Télécharger la documentation <mat-icon>file_download</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
download=""
>Télécharger la documentation
<mat-icon>file_download</mat-icon></a
>
</div>
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
target="_blank"
>Visualiser la documentation <mat-icon>description</mat-icon></a
>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
src/app/integrations/integration/moodel/moodel.component.html
<div class="page-title">
<h3>Integration - <span class="semi-bold">Moodel</span></h3>
</div>
<section>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
......@@ -13,14 +12,18 @@
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
......@@ -29,27 +32,40 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://www.compeng.ruhr-uni-bochum.de/ce/mam/images/ce_icons/moodle.png" style="width:100%" alt="Logo Moodel">
<img
src="https://www.compeng.ruhr-uni-bochum.de/ce/mam/images/ce_icons/moodle.png"
style="width: 100%"
alt="Logo Moodel" />
</div>
<div class="col-md-6">
<mat-form-field>
<mat-label>ID MARCHAND</mat-label>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
</mat-form-field>
</div>
</div>
<br><br>
<br /><br />
<div class="row">
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" download="">Télécharger la documentation <mat-icon>file_download</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
download=""
>Télécharger la documentation
<mat-icon>file_download</mat-icon></a
>
</div>
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
target="_blank"
>Visualiser la documentation <mat-icon>description</mat-icon></a
>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
src/app/integrations/integration/php/php.component.html
......@@ -2,18 +2,26 @@
<div class="page-title">
<h3>Integration - <span class="semi-bold">Php</span></h3>
</div>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>API <span class="semi-bold">PHP</span></mat-card-title>
<mat-card-title
>API <span class="semi-bold">PHP</span></mat-card-title
>
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy vous rapproche de l'essentiel en vous mettant à disposition des fournisseurs fiables et des services de haute qualité.<br>
Utilisez notre API PHP pour l'intégration à vos sites et applications.
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard). Beasy vous rapproche de l'essentiel en vous mettant à
disposition des fournisseurs fiables et des services de haute
qualité.<br />
Utilisez notre API PHP pour l'intégration à vos sites et
applications.
</p>
</mat-card-content>
</mat-card>
......@@ -26,11 +34,14 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://pngimg.com/uploads/php/php_PNG18.png" style="width:100%" alt="Logo PHP">
<img
src="https://pngimg.com/uploads/php/php_PNG18.png"
style="width: 100%"
alt="Logo PHP" />
</div>
<div class="col-md-6">
<mat-form-field>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
<mat-label>ID MARCHAND</mat-label>
</mat-form-field>
</div>
......
src/app/integrations/integration/prestashop/prestashop.component.html
<div class="page-title">
<h3>Integration - <span class="semi-bold">Prestashop</span></h3>
</div>
<section>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
......@@ -13,14 +12,18 @@
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
......@@ -29,27 +32,40 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://storebuddy.dk/wp-content/uploads/logo_prestashop.svg" style="width:100%" alt="Logo Prestashop">
<img
src="https://storebuddy.dk/wp-content/uploads/logo_prestashop.svg"
style="width: 100%"
alt="Logo Prestashop" />
</div>
<div class="col-md-6">
<mat-form-field>
<mat-label>ID MARCHAND</mat-label>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
</mat-form-field>
</div>
</div>
<br><br>
<br /><br />
<div class="row">
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" download="">Télécharger la documentation <mat-icon>file_download</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
download=""
>Télécharger la documentation
<mat-icon>file_download</mat-icon></a
>
</div>
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
target="_blank"
>Visualiser la documentation <mat-icon>description</mat-icon></a
>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
src/app/integrations/integration/wordpress/wordpress.component.html
<div class="page-title">
<h3>Integration - <span class="semi-bold">WordPress</span></h3>
</div>
<section>
<div class="row">
<div class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
......@@ -13,14 +12,18 @@
</mat-card-header>
<mat-card-content>
<p>
Beasy est une plateforme web qui vous permet d'effectuer vos paiements en ligne en temps réel, en toute sécurité et de partout.<br>
Cette solution permet de payer en ligne, à partir d'un compte mobile Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou MasterCard).
Beasy est une plateforme web qui vous permet d'effectuer vos
paiements en ligne en temps réel, en toute sécurité et de
partout.<br />
Cette solution permet de payer en ligne, à partir d'un compte mobile
Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
MasterCard).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
......@@ -29,27 +32,40 @@
<mat-card-content>
<div class="row">
<div class="col-md-6">
<img src="https://th.bing.com/th/id/OIP.Q5K3ZcL44_iWH0CfOeyh-AHaHW?rs=1&pid=ImgDetMain" style="width:100%" alt="Logo WordPress">
<img
src="https://th.bing.com/th/id/OIP.Q5K3ZcL44_iWH0CfOeyh-AHaHW?rs=1&pid=ImgDetMain"
style="width: 100%"
alt="Logo WordPress" />
</div>
<div class="col-md-6">
<mat-form-field>
<mat-label>ID MARCHAND</mat-label>
<input matInput type="text" readonly value="PP-F2736" >
<input matInput type="text" readonly value="PP-F2736" />
</mat-form-field>
</div>
</div>
<br><br>
<br /><br />
<div class="row">
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" download="">Télécharger la documentation <mat-icon>file_download</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
download=""
>Télécharger la documentation
<mat-icon>file_download</mat-icon></a
>
</div>
<div class="col-md-6">
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a>
<a
mat-button
href="_files/PaiementPro-Dart-V1.0.1.pdf"
target="_blank"
>Visualiser la documentation <mat-icon>description</mat-icon></a
>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
src/app/reversements/reversement/reversement/reversement.component.html
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<div class="page-title">
<h3>Reversements</h3>
</div>
<div class="row md-4" >
<div class="row" style="margin-top: 40px">
<div class="col-md-3">
<label for="debut">De</label>
<input
......@@ -30,51 +30,65 @@
</div>
</div>
</div>
<mat-form-field>
<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>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="numReversement">
<mat-header-cell *matHeaderCellDef> N°REVERSEMENT </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.numReversement }}
</mat-cell>
</ng-container>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef>MONTANT</th>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td>
<mat-header-cell *matHeaderCellDef> MONTANT </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<!-- Name Column -->
<ng-container matColumnDef="typeReversement">
<th mat-header-cell *matHeaderCellDef>TYPE REVERSEMENTS</th>
<td mat-cell *matCellDef="let element">{{ element.typeReversement }}</td>
<mat-header-cell *matHeaderCellDef> TYPE REVERSEMENTS </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.typeReversement }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<!-- Weight Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
<mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateDemande">
<th mat-header-cell *matHeaderCellDef>DATE DEMANDE</th>
<td mat-cell *matCellDef="let element">{{ element.dateDemande }}</td>
<mat-header-cell *matHeaderCellDef> DATE DEMANDE </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.dateDemande }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateReversement">
<th mat-header-cell *matHeaderCellDef>DATE REVERSEMENT</th>
<td mat-cell *matCellDef="let element">{{ element.dateReversement }}</td>
<mat-header-cell *matHeaderCellDef> DATE REVERSEMENT </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateReversement }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{ input.value }}"
</td>
</tr>
</table>
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
src/app/reversements/reversement/reversement/reversement.component.ts
import { Component } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
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 { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
export interface Element {
montant: number;
numReversement: number;
typeReversement: string;
status: string;
dateDemande: string;
dateReversement:string
dateReversement: string;
}
const ELEMENT_DATA: Element[] = [
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'},
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'},
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'},
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'},
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'},
{
numReversement: 1,
montant: 2000,
typeReversement: 'virement',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 2,
montant: 5000,
typeReversement: 'virement',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 3,
montant: 7000,
typeReversement: 'Mobile Money',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 4,
montant: 775000,
typeReversement: 'Type',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 5,
montant: 210000,
typeReversement: 'Mobile Money',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 6,
montant: 890000,
typeReversement: 'virement',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 7,
montant: 55000,
typeReversement: 'cheque',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 8,
montant: 7820000,
typeReversement: 'cheque',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 9,
montant: 1125000,
typeReversement: 'Mobile Money',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
{
numReversement: 10,
montant: 4725000,
typeReversement: 'Verement',
status: 'valide',
dateDemande: '10-04-2024',
dateReversement: '10-04-2024',
},
];
@Component({
selector: 'bgui-reversement',
standalone: true,
imports: [MatFormFieldModule, MatInputModule, MatTableModule],
imports: [
MatFormFieldModule,
MatInputModule,
MatTableModule,
CommonModule,
MatPaginator,
MatTableModule,
MatFormFieldModule,
MatInputModule,
CarouselComponent,
MatFormFieldModule,
MatCardModule,
MatCardTitle,
ReactiveFormsModule,
MatInputModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
RouterLink,
FormsModule,
],
templateUrl: './reversement.component.html',
styleUrl: './reversement.component.scss'
styleUrl: './reversement.component.scss',
})
export class ReversementComponent {
displayedColumns: string[] = ['montant', 'typeReversement','status','dateDemande','dateReversement'];
displayedColumns: string[] = [
'numReversement',
'montant',
'typeReversement',
'status',
'dateDemande',
'dateReversement',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
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();
}
}
}
src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html
......@@ -2,8 +2,7 @@
<div class="page-title">
<h3>Paiemnts</h3>
</div>
<div class="row" style="margin-top: 40px;">
<div class="row" style="margin-top: 40px">
<div class="col-md-2">
<label for="moyensPaiement">Moyens de paiement</label>
<select class="form-control filtre" style="width: 100%">
......@@ -56,80 +55,88 @@
</div>
</div>
</div>
<mat-form-field>
<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>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nfacture">
<th mat-header-cell *matHeaderCellDef>N°FACTURE</th>
<td mat-cell *matCellDef="let element">{{ element.nfacture }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>NOM</th>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td>
<mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container>
<!-- Name Column -->
<!-- Weight Column -->
<ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td>
<mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<!-- Symbol Column -->
<ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>SERVICES</th>
<td mat-cell *matCellDef="let element">{{ element.service }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>EMAIL</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>MONTANT</th>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td>
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{ input.value }}"
</td>
</tr>
</table>
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts
import { Component } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
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 { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
export interface PElement {
nfacture: number;
......@@ -15,36 +23,186 @@ export interface PElement {
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'},
{
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],
imports: [
MatFormFieldModule,
MatInputModule,
MatTableModule,
CommonModule,
MatPaginator,
MatTableModule,
MatFormFieldModule,
MatInputModule,
CarouselComponent,
MatFormFieldModule,
MatCardModule,
MatCardTitle,
ReactiveFormsModule,
MatInputModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
RouterLink,
FormsModule,
],
templateUrl: './suivi-paiement.component.html',
styleUrl: './suivi-paiement.component.scss'
styleUrl: './suivi-paiement.component.scss',
})
export class SuiviPaiementComponent {
displayedColumns: string[] = ['nfacture', 'nom', 'prenom', 'contact','service', 'email', 'montant', 'modePaiement','status','dateTransaction'];
displayedColumns: string[] = [
'nfacture',
'nom',
'prenom',
'contact',
'service',
'email',
'montant',
'modePaiement',
'status',
'dateTransaction',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
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();
}
}
}
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
......@@ -2,8 +2,7 @@
<div class="page-title">
<h3>Transactions</h3>
</div>
<div class="row" style="margin-top: 40px;" >
<div class="row" style="margin-top: 40px">
<div class="col-md-2">
<label for="moyensPaiement">Moyens de paiement</label>
<select class="form-control filtre" style="width: 100%">
......@@ -56,82 +55,88 @@
</div>
</div>
</div>
<mat-form-field>
<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>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nfacture">
<th mat-header-cell *matHeaderCellDef>N°FACTURE</th>
<td mat-cell *matCellDef="let element">{{ element.nfacture }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>NOM</th>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td>
<mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container>
<!-- Name Column -->
<!-- Weight Column -->
<ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td>
<mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<!-- Symbol Column -->
<ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>SERVICES</th>
<td mat-cell *matCellDef="let element">{{ element.service }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>EMAIL</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>MONTANT</th>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
<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">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td>
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{ input.value }}"
</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
<mat-paginator
#paginator
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts
import { Component } from '@angular/core';
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 { MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
export interface PElement {
nfacture: number;
......@@ -140,7 +140,6 @@ const ELEMENT_DATA: PElement[] = [
},
];
@Component({
selector: 'bgui-suivi-transaction',
standalone: true,
......@@ -168,8 +167,19 @@ export class SuiviTransactionComponent {
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
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();
}
}
// function ViewChild(MatPaginator: any): (target: SuiviTransactionComponent, propertyKey: "paginator") => void {
// throw new Error('Function not implemented.');
// }
src/app/utilisateurs/utilisateurs.component.html
<div class="page-title">
<h3>Liste des Utilisateurs</h3>
<div class="page-title d-flex justify-content-between">
<h3>Utilisateurs</h3>
<a routerLink="utilisateur" class="btn btn-sm btn-success m-2">
Ajouter un utilisateur
</a>
</div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px;">
<mat-form-field>
<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">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.position }} </mat-cell>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Nom Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef>Nom</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.nom }}</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.weight }} </mat-cell>
<!-- Prenoms Column -->
<ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef>Prénoms</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.prenom }}</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.symbol }} </mat-cell>
<!-- Email Column -->
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let user" style="text-align: right">
<button mat-icon [matMenuTriggerFor]="menu">
<mat-icon>info</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="['/utilisateur', user.id]">
Modifier
</button>
<button mat-menu-item (click)="deleteUser()">Supprimer</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
......
src/app/utilisateurs/utilisateurs.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from '../shared/carousel/carousel.component';
import { MatMenuModule } from '@angular/material/menu';
export interface Element {
position: number;
name: string;
weight: number;
symbol: string;
export interface IUsers {
id: number;
email: string;
nom: string;
prenom: string;
actions: string;
}
const ELEMENT_DATA: Element[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
const ELEMENT_DATA: IUsers[] = [
{
id: 1,
nom: 'zaho',
prenom: 'qadi',
email: 'mrtlest@mail.com',
actions: '',
},
{
id: 2,
nom: 'taho',
prenom: 'vadi',
email: 'mrteust@mail.com',
actions: '',
},
{
id: 3,
nom: 'zaho',
prenom: 'dadi',
email: 'mrtetst@mail.com',
actions: '',
},
{
id: 4,
nom: 'kaho',
prenom: 'uadi',
email: 'mrtesbbt@mail.com',
actions: '',
},
{
id: 5,
nom: 'paho',
prenom: 'fadi',
email: 'mrtessst@mail.com',
actions: '',
},
{
id: 6,
nom: 'haho',
prenom: 'padi',
email: 'mrtesxxt@mail.com',
actions: '',
},
];
@Component({
selector: 'bgui-utilisateurs',
standalone: true,
imports: [MatPaginator, MatTableModule, MatFormFieldModule, MatInputModule],
imports: [
CommonModule,
MatPaginator,
MatTableModule,
MatFormFieldModule,
MatInputModule,
CarouselComponent,
MatFormFieldModule,
MatCardModule,
MatCardTitle,
ReactiveFormsModule,
MatInputModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
RouterLink,
FormsModule,
MatMenuModule,
],
templateUrl: './utilisateurs.component.html',
styleUrl: './utilisateurs.component.scss',
})
export class UtilisateursComponent {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator;
editUser() {
throw new Error('Method not implemented.');
}
deleteUser() {
throw new Error('Method not implemented.');
}
displayedColumns: string[] = ['id', 'nom', 'prenom', 'email', 'actions'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
ngAfterViewInit() {
if (this.paginator) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment