From 28d032b9f880e8e74d5f1d9926f355750e72b4e7 Mon Sep 17 00:00:00 2001 From: mrlemaire Date: Sun, 5 May 2024 13:35:48 +0000 Subject: [PATCH] 05/05/2024 --- src/app/_helpers/auth.guard.ts | 1 + src/app/_helpers/models/user.ts | 3 ++- src/app/_helpers/token.interceptor.ts | 44 +++++++++++++++++++++++++++++--------------- src/app/app.routes.ts | 12 ++++++------ src/app/integrations/integration/code-provider/code-provider.component.html | 25 +++++++++++-------------- src/app/integrations/integration/code-provider/code-provider.component.ts | 5 +++++ src/app/integrations/integration/dart/dart.component.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------- src/app/integrations/integration/java-script/java-script.component.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------- src/app/integrations/integration/moodel/moodel.component.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------- src/app/integrations/integration/php/php.component.html | 29 ++++++++++++++++++++--------- src/app/integrations/integration/prestashop/prestashop.component.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------- src/app/integrations/integration/wordpress/wordpress.component.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------- src/app/reversements/reversement/reversement/reversement.component.html | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------- src/app/reversements/reversement/reversement/reversement.component.ts | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------ src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------- src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts | 200 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html | 143 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------- src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts | 16 +++++++++++++--- src/app/utilisateurs/utilisateurs.component.html | 70 +++++++++++++++++++++++++++++++++++++++++++++------------------------- src/app/utilisateurs/utilisateurs.component.ts | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- 20 files changed, 1059 insertions(+), 547 deletions(-) diff --git a/src/app/_helpers/auth.guard.ts b/src/app/_helpers/auth.guard.ts index a52370d..d43f599 100644 --- a/src/app/_helpers/auth.guard.ts +++ b/src/app/_helpers/auth.guard.ts @@ -33,3 +33,4 @@ export class AuthGuard implements CanActivate { return status; } } + diff --git a/src/app/_helpers/models/user.ts b/src/app/_helpers/models/user.ts index c29418e..3f5991e 100644 --- a/src/app/_helpers/models/user.ts +++ b/src/app/_helpers/models/user.ts @@ -6,6 +6,7 @@ // } export interface IUser { - password: string; email: string; + password: string; + } diff --git a/src/app/_helpers/token.interceptor.ts b/src/app/_helpers/token.interceptor.ts index c5f66fc..7033543 100644 --- a/src/app/_helpers/token.interceptor.ts +++ b/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, next: HttpHandler ): Observable> { - 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); + }) + ); } } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 8b6441e..c17746b 100644 --- a/src/app/app.routes.ts +++ b/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], }, diff --git a/src/app/integrations/integration/code-provider/code-provider.component.html b/src/app/integrations/integration/code-provider/code-provider.component.html index fb328aa..9c3cbb6 100644 --- a/src/app/integrations/integration/code-provider/code-provider.component.html +++ b/src/app/integrations/integration/code-provider/code-provider.component.html @@ -1,25 +1,22 @@ -
-
+

Pays & Code Provider

-
+
-
- -
+ + Filtre + +
-
+
diff --git a/src/app/integrations/integration/code-provider/code-provider.component.ts b/src/app/integrations/integration/code-provider/code-provider.component.ts index 91c2f7a..d26c6c8 100644 --- a/src/app/integrations/integration/code-provider/code-provider.component.ts +++ b/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(); + } } diff --git a/src/app/integrations/integration/dart/dart.component.html b/src/app/integrations/integration/dart/dart.component.html index 97d62b5..b293d77 100644 --- a/src/app/integrations/integration/dart/dart.component.html +++ b/src/app/integrations/integration/dart/dart.component.html @@ -1,57 +1,73 @@ -

Integration - Dart

-
-
- - - -

API DART

- - - -

- 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.
- 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). -

- - -
-
- - - -

DART

- - - -
-
- Dart Logo -
-
- - ID MARCHAND - - +
+
+ + + +

API DART

+ + + +

+ 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.
+ 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). +

+ + +
+
+ + + +

DART

+ + + +
+
+ Dart Logo +
+
+ + ID MARCHAND + + +
-
-

-
-
- Télécharger la documentation file_download +

+
+
+ Télécharger la documentation + file_download +
+
+ Visualiser la documentation description +
-
- Visualiser la documentation description -
-
- - + + +
-
< - diff --git a/src/app/integrations/integration/java-script/java-script.component.html b/src/app/integrations/integration/java-script/java-script.component.html index 22e15ae..fe60b12 100644 --- a/src/app/integrations/integration/java-script/java-script.component.html +++ b/src/app/integrations/integration/java-script/java-script.component.html @@ -1,55 +1,71 @@ -

Integration - JavaScript

-
-
- - - -

API JS

- - - -

- 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.
- 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). -

- - -
-
- - - -

JS

- - - -
-
- Logo JavaScript -
-
- - ID MARCHAND - - +
+
+ + + +

API JS

+ + + +

+ 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.
+ 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). +

+ + +
+
+ + + +

JS

+ + + +
+
+ Logo JavaScript +
+
+ + ID MARCHAND + + +
-
-

-
-
- Télécharger la documentation file_download +

+
+
+ Télécharger la documentation + file_download +
+
+ Visualiser la documentation description +
-
- Visualiser la documentation description -
-
- - + + +
-
- diff --git a/src/app/integrations/integration/moodel/moodel.component.html b/src/app/integrations/integration/moodel/moodel.component.html index d342bd2..c5f7de3 100644 --- a/src/app/integrations/integration/moodel/moodel.component.html +++ b/src/app/integrations/integration/moodel/moodel.component.html @@ -1,55 +1,71 @@ -

Integration - Moodel

-
-
- - - -

API MOODEL

- - - -

- 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.
- 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). -

- - -
-
- - - -

JS

- - - -
-
- Logo Moodel -
-
- - ID MARCHAND - - +
+
+ + + +

API MOODEL

+ + + +

+ 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.
+ 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). +

+ + +
+
+ + + +

JS

+ + + +
+
+ Logo Moodel +
+
+ + ID MARCHAND + + +
-
-

-
-
- Télécharger la documentation file_download +

+
+
+ Télécharger la documentation + file_download +
+
+ Visualiser la documentation description +
-
- Visualiser la documentation description -
-
- - + + +
-
- diff --git a/src/app/integrations/integration/php/php.component.html b/src/app/integrations/integration/php/php.component.html index e91c5c1..5e1054a 100644 --- a/src/app/integrations/integration/php/php.component.html +++ b/src/app/integrations/integration/php/php.component.html @@ -1,19 +1,27 @@
-
+

Integration - Php

-
+
- API PHP + API PHP

- 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.
- 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é.
- 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.
+ 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é.
+ Utilisez notre API PHP pour l'intégration à vos sites et + applications.

@@ -26,11 +34,14 @@
- Logo PHP + Logo PHP
- + ID MARCHAND
diff --git a/src/app/integrations/integration/prestashop/prestashop.component.html b/src/app/integrations/integration/prestashop/prestashop.component.html index e820816..6c13b1b 100644 --- a/src/app/integrations/integration/prestashop/prestashop.component.html +++ b/src/app/integrations/integration/prestashop/prestashop.component.html @@ -1,55 +1,71 @@ -

Integration - Prestashop

-
-
- - - -

API PRESTASHOP

- - - -

- 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.
- 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). -

- - -
-
- - - -

DART

- - - -
-
- Logo Prestashop -
-
- - ID MARCHAND - - +
+
+ + + +

API PRESTASHOP

+ + + +

+ 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.
+ 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). +

+ + +
+
+ + + +

DART

+ + + +
+
+ Logo Prestashop +
+
+ + ID MARCHAND + + +
-
-

-
-
- Télécharger la documentation file_download +

+
+
+ Télécharger la documentation + file_download +
+
+ Visualiser la documentation description +
-
- Visualiser la documentation description -
-
- - + + +
-
- diff --git a/src/app/integrations/integration/wordpress/wordpress.component.html b/src/app/integrations/integration/wordpress/wordpress.component.html index abd12a8..81086ec 100644 --- a/src/app/integrations/integration/wordpress/wordpress.component.html +++ b/src/app/integrations/integration/wordpress/wordpress.component.html @@ -1,55 +1,71 @@ -

Integration - WordPress

-
-
- - - -

API JS

- - - -

- 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.
- 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). -

- - -
-
- - - -

JS

- - - -
-
- Logo WordPress -
-
- - ID MARCHAND - - +
+
+ + + +

API JS

+ + + +

+ 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.
+ 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). +

+ + +
+
+ + + +

JS

+ + + +
+
+ Logo WordPress +
+
+ + ID MARCHAND + + +
-
-

-
-
- Télécharger la documentation file_download +

+
+
+ Télécharger la documentation + file_download +
+
+ Visualiser la documentation description +
-
- Visualiser la documentation description -
-
- - + + +
-
- diff --git a/src/app/reversements/reversement/reversement/reversement.component.html b/src/app/reversements/reversement/reversement/reversement.component.html index db4bef2..0e95b7e 100644 --- a/src/app/reversements/reversement/reversement/reversement.component.html +++ b/src/app/reversements/reversement/reversement/reversement.component.html @@ -1,8 +1,8 @@ +

Reversements

- -
+
+
+ + Filter + + + + + N°REVERSEMENT + + {{ element.numReversement }} + + - - Filter - - - - - - - - - - + + + MONTANT + {{ element.montant }} + - - - - - + + + TYPE REVERSEMENTS + + {{ element.typeReversement }} + + - - - - - + + + STATUS + {{ element.status }} + - - - - - + + + DATE DEMANDE + {{ element.dateDemande }} + - - - - - + + + DATE REVERSEMENT + + {{ element.dateReversement }} + + - - + + + - - - - -
MONTANT{{ element.montant }}TYPE REVERSEMENTS{{ element.typeReversement }}STATUS{{ element.status }}DATE DEMANDE{{ element.dateDemande }}DATE REVERSEMENT{{ element.dateReversement }}
- No data matching the filter "{{ input.value }}" -
+ + +
diff --git a/src/app/reversements/reversement/reversement/reversement.component.ts b/src/app/reversements/reversement/reversement/reversement.component.ts index e053869..2720e58 100644 --- a/src/app/reversements/reversement/reversement/reversement.component.ts +++ b/src/app/reversements/reversement/reversement/reversement.component.ts @@ -1,41 +1,159 @@ -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(); -} + } } diff --git a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html index 1dd8c13..eb20ff3 100644 --- a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html +++ b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html @@ -2,8 +2,7 @@

Paiemnts

- -
+
+ - - Filter - - - - - - - - - + + + N°Facture + {{ element.nfacture }} + - - - - - + + + Nom + {{ element.nom }} + - - - - - + + + Prenoms + {{ element.prenom }} + - - - - - + + + Contact + {{ element.contact }} + - - - - - + + + Service + {{ element.service }} + - - - - - + + + E-mail + {{ element.email }} + - - - - - + + + Montant + {{ element.montant }} + - - - - - + + + Mode Paiement + + {{ element.modePaiement }} + + - - - - - + + + Status + {{ element.status }} + - - - - - + + + Date Transaction + + {{ element.dateTransaction }} + + - - + + + - - - - -
N°FACTURE{{ element.nfacture }}NOM{{ element.nom }}PRENOMS{{ element.prenom }}CONTACT{{ element.contact }}SERVICES{{ element.service }}EMAIL{{ element.email }}MONTANT{{ element.montant }}MODE DE PAIEMENT{{ element.modePaiement }}STATUS{{ element.status }}DATE TRANSACTION{{ element.dateTransaction }}
- No data matching the filter "{{ input.value }}" -
+ + +
diff --git a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts index 9a0a6fe..9bad320 100644 --- a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts +++ b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts @@ -1,8 +1,16 @@ -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(); -} + } } diff --git a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html index bedbe26..2f865b2 100644 --- a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html +++ b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html @@ -2,8 +2,7 @@

Transactions

- -
+
+ - - Filter - - - - - - - - - + + + N°Facture + {{ element.nfacture }} + - - - - - + + + Nom + {{ element.nom }} + - - - - - + + + Prenoms + {{ element.prenom }} + - - - - - + + + Contact + {{ element.contact }} + - - - - - + + + Service + {{ element.service }} + - - - - - + + + E-mail + {{ element.email }} + - - - - - + + + Montant + {{ element.montant }} + - - - - - + + + Mode Paiement + + {{ element.modePaiement }} + + - - - - - + + + Status + {{ element.status }} + - - - - - + + + Date Transaction + + {{ element.dateTransaction }} + + - - + + + - - - - -
N°FACTURE{{ element.nfacture }}NOM{{ element.nom }}PRENOMS{{ element.prenom }}CONTACT{{ element.contact }}SERVICES{{ element.service }}EMAIL{{ element.email }}MONTANT{{ element.montant }}MODE DE PAIEMENT{{ element.modePaiement }}STATUS{{ element.status }}DATE TRANSACTION{{ element.dateTransaction }}
- No data matching the filter "{{ input.value }}" -
- - + + +
diff --git a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts index 3b95715..489e334 100644 --- a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts +++ b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts @@ -1,8 +1,8 @@ -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.'); +// } diff --git a/src/app/utilisateurs/utilisateurs.component.html b/src/app/utilisateurs/utilisateurs.component.html index 198c3fd..4241593 100644 --- a/src/app/utilisateurs/utilisateurs.component.html +++ b/src/app/utilisateurs/utilisateurs.component.html @@ -1,38 +1,58 @@ - -
-

Liste des Utilisateurs

+
+

Utilisateurs

+ + Ajouter un utilisateur +
+
+ + Filter + + -
- - Filter - - - - - - No. - {{ element.position }} + + + + ID + {{ user.id }} - - - Name - {{ element.name }} + + Nom + {{ user.nom }} - - - Weight - {{ element.weight }} + + + Prénoms + {{ user.prenom }} - - - Symbol - {{ element.symbol }} + + + Email + {{ user.email }} + + + Actions + + + + + + + + diff --git a/src/app/utilisateurs/utilisateurs.component.ts b/src/app/utilisateurs/utilisateurs.component.ts index 4aef043..de1871f 100644 --- a/src/app/utilisateurs/utilisateurs.component.ts +++ b/src/app/utilisateurs/utilisateurs.component.ts @@ -1,42 +1,113 @@ 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_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) { -- libgit2 0.27.1