Skip to content

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

05/05/2024

parent bebe801f
Showing with 1059 additions and 547 deletions
src/app/_helpers/auth.guard.ts
...@@ -33,3 +33,4 @@ export class AuthGuard implements CanActivate { ...@@ -33,3 +33,4 @@ export class AuthGuard implements CanActivate {
return status; return status;
} }
} }
src/app/_helpers/models/user.ts
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
// } // }
export interface IUser { export interface IUser {
password: string;
email: string; email: string;
password: string;
} }
src/app/_helpers/token.interceptor.ts
...@@ -5,33 +5,47 @@ import { ...@@ -5,33 +5,47 @@ import {
HttpHandler, HttpHandler,
HttpEvent, HttpEvent,
HttpInterceptor, HttpInterceptor,
HttpErrorResponse,
} from '@angular/common/http'; } 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 { AuthService } from './services/auth.service';
import { Router } from '@angular/router'; // Importer le Router pour la redirection
@Injectable() @Injectable()
export class TokenIntercept implements HttpInterceptor { export class TokenInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {} constructor(
private authService: AuthService,
private router: Router // Injection du Router
) {}
intercept( intercept(
request: HttpRequest<any>, request: HttpRequest<any>,
next: HttpHandler next: HttpHandler
): Observable<HttpEvent<any>> { ): Observable<HttpEvent<any>> {
if (request.url.startsWith(environment['apiBaseUrl'] + '/api')) { if (request.url.startsWith(environment.apiBaseUrl + '/api')) {
const token = this.authService.getToken(); const token = this.authService.getToken();
const headers = {}; if (token) {
request = request.clone({
if (token !== null) { setHeaders: {
headers['Authorization'] = 'Bearer ' + token; Authorization: `Bearer ${token}`,
},
});
} }
const modified = request.clone({
setHeaders: headers,
});
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 = [ ...@@ -10,7 +10,7 @@ export const routes: Routes = [
}, },
// Redirect empty path to '/dashboards/project' // Redirect empty path to '/dashboards/project'
{ path: '', pathMatch: 'full', redirectTo: 'admin' }, { path: '', pathMatch: 'full', redirectTo: 'auth' },
{ {
path: '', path: '',
component: MainLayoutComponent, component: MainLayoutComponent,
...@@ -28,28 +28,28 @@ export const routes: Routes = [ ...@@ -28,28 +28,28 @@ export const routes: Routes = [
loadChildren: () => loadChildren: () =>
import('./trafics/transactions/transaction.routes').then( import('./trafics/transactions/transaction.routes').then(
c => c.transactionsRoutes c => c.transactionsRoutes
), //canActivate:[AuthGuard] ), //canActivate:[AuthGuard]
}, },
{ {
path: 'integrations', path: 'integrations',
loadChildren: () => loadChildren: () =>
import('./integrations/integration/integration.routes').then( import('./integrations/integration/integration.routes').then(
c => c.integrationRoutes c => c.integrationRoutes
), //canActivate:[AuthGuard] ), //canActivate:[AuthGuard]
}, },
{ {
path: 'reversements', path: 'reversements',
loadChildren: () => loadChildren: () =>
import('./reversements/reversement/reversement.routes').then( import('./reversements/reversement/reversement.routes').then(
c => c.reversementRoutes c => c.reversementRoutes
), //canActivate:[AuthGuard] ), //canActivate:[AuthGuard]
}, },
{ {
path: 'dash', path: 'dash',
loadComponent: () => loadComponent: () =>
import( import(
'./admin/dashboards/beasy-dashboard/beasy-dashboard.component' './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 = [ ...@@ -96,7 +96,7 @@ export const routes: Routes = [
{ {
path: '**', path: '**',
component: LoginAdminComponent, component: LoginAdminComponent,
} },
], ],
canActivate: [AuthGuard], canActivate: [AuthGuard],
}, },
......
src/app/integrations/integration/code-provider/code-provider.component.html
<div class="content sm-gutter"> <div class="content sm-gutter">
<div class="page-title" > <div class="page-title">
<h3>Pays &amp; Code Provider</h3> <h3>Pays &amp; Code Provider</h3>
</div> </div>
<div class="row "> <div class="row" style="margin-top: 40px">
<!-- BEGIN WORLD MAP WIDGET - MAP --> <!-- BEGIN WORLD MAP WIDGET - MAP -->
<div class="col-md-12 col-vlg-12 m-b-10"> <div class="col-md-12 col-vlg-12 m-b-10">
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<div class="mat-elevation-z1 mat-table-container"> <div class="mat-elevation-z1 mat-table-container">
<div class="search-bar"> <mat-form-field>
<label style="margin: 2rem" <mat-label>Filtre</mat-label>
>Search: <input
<input matInput
type="search" (keyup)="applyFilter($event)"
class="mat-input" placeholder="Ex. ium"
placeholder="Search" #input />
aria-controls="DataTables_Table_0" </mat-form-field>
/></label>
</div>
<mat-table <mat-table
class="mat-table" class="mat-table"
...@@ -55,4 +52,4 @@ ...@@ -55,4 +52,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
src/app/integrations/integration/code-provider/code-provider.component.ts
...@@ -61,4 +61,9 @@ export class CodeProviderComponent { ...@@ -61,4 +61,9 @@ export class CodeProviderComponent {
this.dataSource.paginator = 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/integrations/integration/dart/dart.component.html
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">Dart</span></h3> <h3>Integration - <span class="semi-bold">Dart</span></h3>
</div> </div>
<section> <section>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h4>API <span class="semi-bold">DART</span></h4> <h4>API <span class="semi-bold">DART</span></h4>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
</p> partout.<br />
</mat-card-content> Cette solution permet de payer en ligne, à partir d'un compte mobile
</mat-card> Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
</div> MasterCard).
<div class="col-md-5"> </p>
<mat-card class="grid simple" style="border: none;"> </mat-card-content>
<mat-card-header> </mat-card>
<mat-card-title> </div>
<h4>DART</h4> <div class="col-md-5">
</mat-card-title> <mat-card class="grid simple" style="border: none">
</mat-card-header> <mat-card-header>
<mat-card-content> <mat-card-title>
<div class="row"> <h4>DART</h4>
<div class="col-md-6"> </mat-card-title>
<img src="https://www.technotification.com/wp-content/uploads/2019/01/Dart-programming-language-350x350.jpg" style="width:100%" alt="Dart Logo"> </mat-card-header>
</div> <mat-card-content>
<div class="col-md-6"> <div class="row">
<mat-form-field> <div class="col-md-6">
<mat-label>ID MARCHAND</mat-label> <img
<input matInput type="text" readonly value="PP-F2736" > src="https://www.technotification.com/wp-content/uploads/2019/01/Dart-programming-language-350x350.jpg"
</mat-form-field> 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" />
</mat-form-field>
</div>
</div> </div>
</div> <br /><br />
<br><br> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <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> 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
>
</div>
</div> </div>
<div class="col-md-6"> </mat-card-content>
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a> </mat-card>
</div> </div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div>
</section> </section>
< <
src/app/integrations/integration/java-script/java-script.component.html
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">JavaScript</span></h3> <h3>Integration - <span class="semi-bold">JavaScript</span></h3>
</div> </div>
<section> <section>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4> <h4>API <span class="semi-bold">JS</span></h4>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
</p> partout.<br />
</mat-card-content> Cette solution permet de payer en ligne, à partir d'un compte mobile
</mat-card> Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
</div> MasterCard).
<div class="col-md-5"> </p>
<mat-card class="grid simple" style="border: none;"> </mat-card-content>
<mat-card-header> </mat-card>
<mat-card-title> </div>
<h4>JS</h4> <div class="col-md-5">
</mat-card-title> <mat-card class="grid simple" style="border: none">
</mat-card-header> <mat-card-header>
<mat-card-content> <mat-card-title>
<div class="row"> <h4>JS</h4>
<div class="col-md-6"> </mat-card-title>
<img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_1280.png" style="width:100%" alt="Logo JavaScript"> </mat-card-header>
</div> <mat-card-content>
<div class="col-md-6"> <div class="row">
<mat-form-field> <div class="col-md-6">
<mat-label>ID MARCHAND</mat-label> <img
<input matInput type="text" readonly value="PP-F2736" > src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_1280.png"
</mat-form-field> 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" />
</mat-form-field>
</div>
</div> </div>
</div> <br /><br />
<br><br> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <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> 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
>
</div>
</div> </div>
<div class="col-md-6"> </mat-card-content>
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a> </mat-card>
</div> </div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div>
</section> </section>
src/app/integrations/integration/moodel/moodel.component.html
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">Moodel</span></h3> <h3>Integration - <span class="semi-bold">Moodel</span></h3>
</div> </div>
<section> <section>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h4>API <span class="semi-bold">MOODEL</span></h4> <h4>API <span class="semi-bold">MOODEL</span></h4>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
</p> partout.<br />
</mat-card-content> Cette solution permet de payer en ligne, à partir d'un compte mobile
</mat-card> Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
</div> MasterCard).
<div class="col-md-5"> </p>
<mat-card class="grid simple" style="border: none;"> </mat-card-content>
<mat-card-header> </mat-card>
<mat-card-title> </div>
<h4>JS</h4> <div class="col-md-5">
</mat-card-title> <mat-card class="grid simple" style="border: none">
</mat-card-header> <mat-card-header>
<mat-card-content> <mat-card-title>
<div class="row"> <h4>JS</h4>
<div class="col-md-6"> </mat-card-title>
<img src="https://www.compeng.ruhr-uni-bochum.de/ce/mam/images/ce_icons/moodle.png" style="width:100%" alt="Logo Moodel"> </mat-card-header>
</div> <mat-card-content>
<div class="col-md-6"> <div class="row">
<mat-form-field> <div class="col-md-6">
<mat-label>ID MARCHAND</mat-label> <img
<input matInput type="text" readonly value="PP-F2736" > src="https://www.compeng.ruhr-uni-bochum.de/ce/mam/images/ce_icons/moodle.png"
</mat-form-field> 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" />
</mat-form-field>
</div>
</div> </div>
</div> <br /><br />
<br><br> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <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> 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
>
</div>
</div> </div>
<div class="col-md-6"> </mat-card-content>
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a> </mat-card>
</div> </div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div>
</section> </section>
src/app/integrations/integration/php/php.component.html
<div class="content"> <div class="content">
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">Php</span></h3> <h3>Integration - <span class="semi-bold">Php</span></h3>
</div> </div>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <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-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
Beasy vous rapproche de l'essentiel en vous mettant à disposition des fournisseurs fiables et des services de haute qualité.<br> partout.<br />
Utilisez notre API PHP pour l'intégration à vos sites et applications. 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> </p>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
...@@ -26,11 +34,14 @@ ...@@ -26,11 +34,14 @@
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row">
<div class="col-md-6"> <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>
<div class="col-md-6"> <div class="col-md-6">
<mat-form-field> <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-label>ID MARCHAND</mat-label>
</mat-form-field> </mat-form-field>
</div> </div>
......
src/app/integrations/integration/prestashop/prestashop.component.html
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">Prestashop</span></h3> <h3>Integration - <span class="semi-bold">Prestashop</span></h3>
</div> </div>
<section> <section>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h4>API <span class="semi-bold">PRESTASHOP</span></h4> <h4>API <span class="semi-bold">PRESTASHOP</span></h4>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
</p> partout.<br />
</mat-card-content> Cette solution permet de payer en ligne, à partir d'un compte mobile
</mat-card> Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
</div> MasterCard).
<div class="col-md-5"> </p>
<mat-card class="grid simple" style="border: none;"> </mat-card-content>
<mat-card-header> </mat-card>
<mat-card-title> </div>
<h4>DART</h4> <div class="col-md-5">
</mat-card-title> <mat-card class="grid simple" style="border: none">
</mat-card-header> <mat-card-header>
<mat-card-content> <mat-card-title>
<div class="row"> <h4>DART</h4>
<div class="col-md-6"> </mat-card-title>
<img src="https://storebuddy.dk/wp-content/uploads/logo_prestashop.svg" style="width:100%" alt="Logo Prestashop"> </mat-card-header>
</div> <mat-card-content>
<div class="col-md-6"> <div class="row">
<mat-form-field> <div class="col-md-6">
<mat-label>ID MARCHAND</mat-label> <img
<input matInput type="text" readonly value="PP-F2736" > src="https://storebuddy.dk/wp-content/uploads/logo_prestashop.svg"
</mat-form-field> 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" />
</mat-form-field>
</div>
</div> </div>
</div> <br /><br />
<br><br> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <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> 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
>
</div>
</div> </div>
<div class="col-md-6"> </mat-card-content>
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a> </mat-card>
</div> </div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div>
</section> </section>
src/app/integrations/integration/wordpress/wordpress.component.html
<div class="page-title"> <div class="page-title">
<h3>Integration - <span class="semi-bold">WordPress</span></h3> <h3>Integration - <span class="semi-bold">WordPress</span></h3>
</div> </div>
<section> <section>
<div class="row"> <div class="row" style="margin-top: 40px">
<div class="col-md-7"> <div class="col-md-7">
<mat-card class="grid simple transparent"> <mat-card class="grid simple transparent">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4> <h4>API <span class="semi-bold">JS</span></h4>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<p> <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> Beasy est une plateforme web qui vous permet d'effectuer vos
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). paiements en ligne en temps réel, en toute sécurité et de
</p> partout.<br />
</mat-card-content> Cette solution permet de payer en ligne, à partir d'un compte mobile
</mat-card> Money (Orange, MTN, Moov) ou une carte de crédit (Visa ou
</div> MasterCard).
<div class="col-md-5"> </p>
<mat-card class="grid simple" style="border: none;"> </mat-card-content>
<mat-card-header> </mat-card>
<mat-card-title> </div>
<h4>JS</h4> <div class="col-md-5">
</mat-card-title> <mat-card class="grid simple" style="border: none">
</mat-card-header> <mat-card-header>
<mat-card-content> <mat-card-title>
<div class="row"> <h4>JS</h4>
<div class="col-md-6"> </mat-card-title>
<img src="https://th.bing.com/th/id/OIP.Q5K3ZcL44_iWH0CfOeyh-AHaHW?rs=1&pid=ImgDetMain" style="width:100%" alt="Logo WordPress"> </mat-card-header>
</div> <mat-card-content>
<div class="col-md-6"> <div class="row">
<mat-form-field> <div class="col-md-6">
<mat-label>ID MARCHAND</mat-label> <img
<input matInput type="text" readonly value="PP-F2736" > src="https://th.bing.com/th/id/OIP.Q5K3ZcL44_iWH0CfOeyh-AHaHW?rs=1&pid=ImgDetMain"
</mat-form-field> 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" />
</mat-form-field>
</div>
</div> </div>
</div> <br /><br />
<br><br> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <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> 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
>
</div>
</div> </div>
<div class="col-md-6"> </mat-card-content>
<a mat-button href="_files/PaiementPro-Dart-V1.0.1.pdf" target="_blank">Visualiser la documentation <mat-icon>description</mat-icon></a> </mat-card>
</div> </div>
</div>
</mat-card-content>
</mat-card>
</div> </div>
</div>
</section> </section>
src/app/reversements/reversement/reversement/reversement.component.html
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<div class="page-title"> <div class="page-title">
<h3>Reversements</h3> <h3>Reversements</h3>
</div> </div>
<div class="row" style="margin-top: 40px">
<div class="row md-4" >
<div class="col-md-3"> <div class="col-md-3">
<label for="debut">De</label> <label for="debut">De</label>
<input <input
...@@ -30,51 +30,65 @@ ...@@ -30,51 +30,65 @@
</div> </div>
</div> </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="numReversement">
<mat-header-cell *matHeaderCellDef> N°REVERSEMENT </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.numReversement }}
</mat-cell>
</ng-container>
<mat-form-field> <!-- Position Column -->
<mat-label>Filter</mat-label> <ng-container matColumnDef="montant">
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input /> <mat-header-cell *matHeaderCellDef> MONTANT </mat-header-cell>
</mat-form-field> <mat-cell *matCellDef="let element"> {{ element.montant }} </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>
</ng-container>
<!-- Symbol Column --> <!-- Name Column -->
<ng-container matColumnDef="typeReversement"> <ng-container matColumnDef="typeReversement">
<th mat-header-cell *matHeaderCellDef>TYPE REVERSEMENTS</th> <mat-header-cell *matHeaderCellDef> TYPE REVERSEMENTS </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.typeReversement }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.typeReversement }}
</mat-cell>
</ng-container>
<!-- Symbol Column --> <!-- Weight Column -->
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th> <mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.status }}</td> <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="dateDemande"> <ng-container matColumnDef="dateDemande">
<th mat-header-cell *matHeaderCellDef>DATE DEMANDE</th> <mat-header-cell *matHeaderCellDef> DATE DEMANDE </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.dateDemande }}</td> <mat-cell *matCellDef="let element"> {{ element.dateDemande }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="dateReversement"> <ng-container matColumnDef="dateReversement">
<th mat-header-cell *matHeaderCellDef>DATE REVERSEMENT</th> <mat-header-cell *matHeaderCellDef> DATE REVERSEMENT </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.dateReversement }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.dateReversement }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. --> <mat-paginator
<tr class="mat-row" *matNoDataRow> #paginator
<td class="mat-cell" colspan="4"> [pageSize]="5"
No data matching the filter "{{ input.value }}" [pageSizeOptions]="[5, 10, 20]"
</td> [showFirstLastButtons]="true">
</tr> </mat-paginator>
</table> </div>
src/app/reversements/reversement/reversement/reversement.component.ts
import { Component } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table'; import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import {MatInputModule} from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field'; 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 { export interface Element {
montant: number; montant: number;
numReversement: number;
typeReversement: string; typeReversement: string;
status: string; status: string;
dateDemande: string; dateDemande: string;
dateReversement:string dateReversement: string;
} }
const ELEMENT_DATA: Element[] = [ 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'}, numReversement: 1,
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'}, montant: 2000,
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'}, typeReversement: 'virement',
{montant: 25000, typeReversement:'Type', status:'valide', dateDemande:'10-04-2024',dateReversement:'10-04-2024'}, 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({ @Component({
selector: 'bgui-reversement', selector: 'bgui-reversement',
standalone: true, 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', templateUrl: './reversement.component.html',
styleUrl: './reversement.component.scss' styleUrl: './reversement.component.scss',
}) })
export class ReversementComponent { export class ReversementComponent {
displayedColumns: string[] = ['montant', 'typeReversement','status','dateDemande','dateReversement']; displayedColumns: string[] = [
'numReversement',
'montant',
'typeReversement',
'status',
'dateDemande',
'dateReversement',
];
dataSource = new MatTableDataSource(ELEMENT_DATA); dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
ngAfterViewInit() {
if (this.paginator) {
this.dataSource.paginator = this.paginator;
}
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase(); this.dataSource.filter = filterValue.trim().toLowerCase();
} }
} }
src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="page-title"> <div class="page-title">
<h3>Paiemnts</h3> <h3>Paiemnts</h3>
</div> </div>
<div class="row" style="margin-top: 40px">
<div class="row" style="margin-top: 40px;">
<div class="col-md-2"> <div class="col-md-2">
<label for="moyensPaiement">Moyens de paiement</label> <label for="moyensPaiement">Moyens de paiement</label>
<select class="form-control filtre" style="width: 100%"> <select class="form-control filtre" style="width: 100%">
...@@ -56,80 +55,88 @@ ...@@ -56,80 +55,88 @@
</div> </div>
</div> </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-form-field> <mat-table #table [dataSource]="dataSource">
<mat-label>Filter</mat-label> <ng-container matColumnDef="nfacture">
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input /> <mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
</mat-form-field> <mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
</ng-container>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="nfacture">
<th mat-header-cell *matHeaderCellDef>N°FACTURE</th>
<td mat-cell *matCellDef="let element">{{ element.nfacture }}</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="nom"> <ng-container matColumnDef="nom">
<th mat-header-cell *matHeaderCellDef>NOM</th> <mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td> <mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Weight Column -->
<ng-container matColumnDef="prenom"> <ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th> <mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td> <mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Symbol Column -->
<ng-container matColumnDef="contact"> <ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th> <mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td> <mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="service"> <ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef>SERVICES</th> <mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.service }}</td> <mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="email"> <ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>EMAIL</th> <mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.email }}</td> <mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="montant"> <ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef>MONTANT</th> <mat-header-cell *matHeaderCellDef> Montant </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td> <mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="modePaiement"> <ng-container matColumnDef="modePaiement">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th> <mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th> <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.status }}</td> <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction"> <ng-container matColumnDef="dateTransaction">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th> <mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.dateTransaction }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. --> <mat-paginator
<tr class="mat-row" *matNoDataRow> #paginator
<td class="mat-cell" colspan="4"> [pageSize]="5"
No data matching the filter "{{ input.value }}" [pageSizeOptions]="[5, 10, 20]"
</td> [showFirstLastButtons]="true">
</tr> </mat-paginator>
</table> </div>
src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts
import { Component } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table'; import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import {MatInputModule} from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field'; 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 { export interface PElement {
nfacture: number; nfacture: number;
...@@ -15,36 +23,186 @@ export interface PElement { ...@@ -15,36 +23,186 @@ export interface PElement {
modePaiement: string; modePaiement: string;
status: string; status: string;
dateTransaction: string; dateTransaction: string;
} }
const ELEMENT_DATA: PElement[] = [ 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: 1,
{nfacture: 3, nom: 'toure', prenom:'koffi',contact:'0101010101', service:'mtn',email:'mrtest@mail.com', montant: 25000, modePaiement:'wave', status:'invalide', dateTransaction:'04-04-2024'}, nom: 'zaho',
{nfacture: 4, nom: 'belem', prenom:'asaph',contact:'0101010101', service:'mtn',email:'test@mail.com', montant: 27000, modePaiement:'wave', status:'valide', dateTransaction:'16-02-2024'}, prenom: 'zadi',
{nfacture: 5, nom: 'tanoh', prenom:'delmas',contact:'0101010101', service:'mtn',email:'rtest@mail.com', montant: 50000, modePaiement:'wave', status:'invalide', dateTransaction:'16-04-2024'}, contact: '0101010101',
{nfacture: 6, nom: 'gaba', prenom:'akemane',contact:'0101010101', service:'mtn',email:'mtst@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'16-01-2024'}, service: 'mtn',
{nfacture: 7, nom: 'kra', prenom:'zoulou',contact:'0101010101', service:'mtn',email:'mest@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'26-03-2024'}, email: 'mrtest@mail.com',
{nfacture: 8, nom: 'kakou', prenom:'kasa',contact:'0101010101', service:'mtn',email:'mrtst@mail.com', montant: 80000, modePaiement:'wave', status:'invalide', dateTransaction:'10-04-2024'}, montant: 25000,
{nfacture: 9, nom: 'nguessan', prenom:'daouda',contact:'0101010101', service:'mtn',email:'mrte@mail.com', montant: 25000, modePaiement:'wave', status:'valide', dateTransaction:'16-04-2024'}, modePaiement: 'wave',
{nfacture: 10, nom: 'Neon', prenom:'kanon',contact:'0101010101', service:'mtn',email:'mrtest@mail.com', montant: 27000, modePaiement:'wave', status:'valide',dateTransaction:'16-04-2024'}, 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({ @Component({
selector: 'bgui-suivi-paiement', selector: 'bgui-suivi-paiement',
standalone: true, 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', templateUrl: './suivi-paiement.component.html',
styleUrl: './suivi-paiement.component.scss' styleUrl: './suivi-paiement.component.scss',
}) })
export class SuiviPaiementComponent { 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); dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
ngAfterViewInit() {
if (this.paginator) {
this.dataSource.paginator = this.paginator;
}
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase(); this.dataSource.filter = filterValue.trim().toLowerCase();
} }
} }
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<div class="page-title"> <div class="page-title">
<h3>Transactions</h3> <h3>Transactions</h3>
</div> </div>
<div class="row" style="margin-top: 40px">
<div class="row" style="margin-top: 40px;" >
<div class="col-md-2"> <div class="col-md-2">
<label for="moyensPaiement">Moyens de paiement</label> <label for="moyensPaiement">Moyens de paiement</label>
<select class="form-control filtre" style="width: 100%"> <select class="form-control filtre" style="width: 100%">
...@@ -56,82 +55,88 @@ ...@@ -56,82 +55,88 @@
</div> </div>
</div> </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-form-field> <mat-table #table [dataSource]="dataSource">
<mat-label>Filter</mat-label> <ng-container matColumnDef="nfacture">
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input /> <mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
</mat-form-field> <mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
</ng-container>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="nfacture">
<th mat-header-cell *matHeaderCellDef>N°FACTURE</th>
<td mat-cell *matCellDef="let element">{{ element.nfacture }}</td>
</ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="nom"> <ng-container matColumnDef="nom">
<th mat-header-cell *matHeaderCellDef>NOM</th> <mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td> <mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Weight Column -->
<ng-container matColumnDef="prenom"> <ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th> <mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td> <mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Symbol Column -->
<ng-container matColumnDef="contact"> <ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th> <mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td> <mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="service"> <ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef>SERVICES</th> <mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.service }}</td> <mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="email"> <ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>EMAIL</th> <mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.email }}</td> <mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="montant"> <ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef>MONTANT</th> <mat-header-cell *matHeaderCellDef> Montant </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td> <mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="modePaiement"> <ng-container matColumnDef="modePaiement">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th> <mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th> <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.status }}</td> <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction"> <ng-container matColumnDef="dateTransaction">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th> <mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td> <mat-cell *matCellDef="let element">
</ng-container> {{ element.dateTransaction }}
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<!-- Row shown when there is no matching data. --> <mat-paginator
<tr class="mat-row" *matNoDataRow> #paginator
<td class="mat-cell" colspan="4"> [pageSize]="5"
No data matching the filter "{{ input.value }}" [pageSizeOptions]="[5, 10, 20]"
</td> [showFirstLastButtons]="true">
</tr> </mat-paginator>
</table> </div>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
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 { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
export interface PElement { export interface PElement {
nfacture: number; nfacture: number;
...@@ -140,7 +140,6 @@ const ELEMENT_DATA: PElement[] = [ ...@@ -140,7 +140,6 @@ const ELEMENT_DATA: PElement[] = [
}, },
]; ];
@Component({ @Component({
selector: 'bgui-suivi-transaction', selector: 'bgui-suivi-transaction',
standalone: true, standalone: true,
...@@ -168,8 +167,19 @@ export class SuiviTransactionComponent { ...@@ -168,8 +167,19 @@ export class SuiviTransactionComponent {
]; ];
dataSource = new MatTableDataSource(ELEMENT_DATA); dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
ngAfterViewInit() {
if (this.paginator) {
this.dataSource.paginator = this.paginator;
}
}
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase(); 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 d-flex justify-content-between">
<div class="page-title"> <h3>Utilisateurs</h3>
<h3>Liste des Utilisateurs</h3> <a routerLink="utilisateur" class="btn btn-sm btn-success m-2">
Ajouter un utilisateur
</a>
</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>
<div class="example-container mat-elevation-z8" style="margin-top: 40px;"> <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<mat-form-field> <!-- Nom Column -->
<mat-label>Filter</mat-label> <ng-container matColumnDef="id">
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input /> <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
</mat-form-field> <mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
<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>
</ng-container> </ng-container>
<!-- Name Column --> <ng-container matColumnDef="nom">
<ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Nom</mat-header-cell>
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let user">{{ user.nom }}</mat-cell>
<mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Prenoms Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell> <mat-header-cell *matHeaderCellDef>Prénoms</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.weight }} </mat-cell> <mat-cell *matCellDef="let user">{{ user.prenom }}</mat-cell>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Email Column -->
<ng-container matColumnDef="symbol"> <ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.symbol }} </mat-cell> <mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
</ng-container> </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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table> </mat-table>
......
src/app/utilisateurs/utilisateurs.component.ts
import { Component, ViewChild } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table'; 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 { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'; 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 { export interface IUsers {
position: number; id: number;
name: string; email: string;
weight: number; nom: string;
symbol: string; prenom: string;
actions: string;
} }
const ELEMENT_DATA: Element[] = [ const ELEMENT_DATA: IUsers[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, {
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, id: 1,
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, nom: 'zaho',
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, prenom: 'qadi',
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, email: 'mrtlest@mail.com',
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, actions: '',
{ 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' }, id: 2,
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, 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({ @Component({
selector: 'bgui-utilisateurs', selector: 'bgui-utilisateurs',
standalone: true, 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', templateUrl: './utilisateurs.component.html',
styleUrl: './utilisateurs.component.scss', styleUrl: './utilisateurs.component.scss',
}) })
export class UtilisateursComponent { 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() { ngAfterViewInit() {
if (this.paginator) { 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