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 {
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;
if (token) {
request = request.clone({
setHeaders: {
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 = [
},
// Redirect empty path to '/dashboards/project'
{ path: '', pathMatch: 'full', redirectTo: 'admin' },
{ path: '', pathMatch: 'full', redirectTo: 'auth' },
{
path: '',
component: MainLayoutComponent,
......@@ -28,28 +28,28 @@ export const routes: Routes = [
loadChildren: () =>
import('./trafics/transactions/transaction.routes').then(
c => c.transactionsRoutes
), //canActivate:[AuthGuard]
), //canActivate:[AuthGuard]
},
{
path: 'integrations',
loadChildren: () =>
import('./integrations/integration/integration.routes').then(
c => c.integrationRoutes
), //canActivate:[AuthGuard]
), //canActivate:[AuthGuard]
},
{
path: 'reversements',
loadChildren: () =>
import('./reversements/reversement/reversement.routes').then(
c => c.reversementRoutes
), //canActivate:[AuthGuard]
), //canActivate:[AuthGuard]
},
{
path: 'dash',
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:
<input
type="search"
class="mat-input"
placeholder="Search"
aria-controls="DataTables_Table_0"
/></label>
</div>
<mat-form-field>
<mat-label>Filtre</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table
class="mat-table"
......@@ -55,4 +52,4 @@
</div>
</div>
</div>
</div>
</div>
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="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">DART</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
</mat-card-title>
</mat-card-header>
<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">
</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 class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">DART</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
</mat-card-title>
</mat-card-header>
<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" />
</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>
<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>
<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
>
</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 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>
</mat-card-content>
</mat-card>
</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="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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">
</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 class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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" />
</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>
<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>
<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
>
</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 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>
</mat-card-content>
</mat-card>
</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="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">MOODEL</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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">
</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 class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">MOODEL</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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" />
</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>
<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>
<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
>
</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 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>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</section>
src/app/integrations/integration/php/php.component.html
<div class="content">
<div class="page-title">
<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="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">PRESTASHOP</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
</mat-card-title>
</mat-card-header>
<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">
</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 class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">PRESTASHOP</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>DART</h4>
</mat-card-title>
</mat-card-header>
<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" />
</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>
<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>
<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
>
</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 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>
</mat-card-content>
</mat-card>
</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="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none;">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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">
</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 class="row" style="margin-top: 40px">
<div class="col-md-7">
<mat-card class="grid simple transparent">
<mat-card-header>
<mat-card-title>
<h4>API <span class="semi-bold">JS</span></h4>
</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).
</p>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-5">
<mat-card class="grid simple" style="border: none">
<mat-card-header>
<mat-card-title>
<h4>JS</h4>
</mat-card-title>
</mat-card-header>
<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" />
</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>
<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>
<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
>
</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 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>
</mat-card-content>
</mat-card>
</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>
<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>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input />
</mat-form-field>
<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>
<!-- Position Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef> MONTANT </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="typeReversement">
<th mat-header-cell *matHeaderCellDef>TYPE REVERSEMENTS</th>
<td mat-cell *matCellDef="let element">{{ element.typeReversement }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="typeReversement">
<mat-header-cell *matHeaderCellDef> TYPE REVERSEMENTS </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.typeReversement }}
</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>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateDemande">
<th mat-header-cell *matHeaderCellDef>DATE DEMANDE</th>
<td mat-cell *matCellDef="let element">{{ element.dateDemande }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateDemande">
<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>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateReversement">
<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>
<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-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input />
</mat-form-field>
<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>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nfacture">
<mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nom">
<th mat-header-cell *matHeaderCellDef>NOM</th>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="contact">
<mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef>SERVICES</th>
<td mat-cell *matCellDef="let element">{{ element.service }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="service">
<mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>EMAIL</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef>MONTANT</th>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef> Montant </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
</mat-cell>
</ng-container>
<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>
<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-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input />
</mat-form-field>
<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>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nfacture">
<mat-header-cell *matHeaderCellDef> N°Facture </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nfacture }} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nom">
<th mat-header-cell *matHeaderCellDef>NOM</th>
<td mat-cell *matCellDef="let element">{{ element.nom }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.nom }} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef>PRENOMS</th>
<td mat-cell *matCellDef="let element">{{ element.prenom }}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="prenom">
<mat-header-cell *matHeaderCellDef> Prenoms </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.prenom }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="contact">
<th mat-header-cell *matHeaderCellDef>CONTACT</th>
<td mat-cell *matCellDef="let element">{{ element.contact }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="contact">
<mat-header-cell *matHeaderCellDef> Contact </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.contact }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef>SERVICES</th>
<td mat-cell *matCellDef="let element">{{ element.service }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="service">
<mat-header-cell *matHeaderCellDef> Service </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.service }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>EMAIL</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<th mat-header-cell *matHeaderCellDef>MONTANT</th>
<td mat-cell *matCellDef="let element">{{ element.montant }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef> Montant </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<th mat-header-cell *matHeaderCellDef>MODE DE PAIEMENT</th>
<td mat-cell *matCellDef="let element">{{ element.modePaiement }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>STATUS</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<th mat-header-cell *matHeaderCellDef>DATE TRANSACTION</th>
<td mat-cell *matCellDef="let element">{{ element.dateTransaction }}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
</mat-cell>
</ng-container>
<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>
<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-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>
<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