Commit d57ad174 by zadi francice

traitement des trafics

parent b85aa0f9
......@@ -65,12 +65,10 @@
<button
mat-icon-button
matSuffix
(click)="hide = hide"
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide">
<mat-icon>{{
hide ? 'visibility_off' : 'visibility'
}}</mat-icon>
<mat-icon>visibility</mat-icon>
</button>
</mat-form-field>
</div>
......
......@@ -55,6 +55,7 @@ export class LoginStandardUserComponent implements OnInit {
username = new FormControl('', [Validators.required]);
password = new FormControl('', [Validators.required]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
user: any = {
username: '',
password: '',
......
......@@ -5,7 +5,6 @@ import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
@Component({
selector: 'bgui-root',
standalone: true,
......
import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import {
ApplicationConfig,
LOCALE_ID,
importProvidersFrom,
} from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
......@@ -11,6 +15,7 @@ export const appConfig: ApplicationConfig = {
provideAnimations(),
provideEnvironmentNgxMask(),
{ provide: LOCALE_ID, useValue: 'fr-FR' },
HttpClientModule, // Ajout de HttpClientModule ici
//HttpClientModule,
importProvidersFrom(HttpClientModule),
],
};
......@@ -38,6 +38,11 @@ export const routes: Routes = [
), //canActivate:[AuthGuard]
},
{
path: 'utilisateurs',
loadChildren: () =>
import('./utilisateurs/user.routes').then(c => c.userRoutes), //canActivate:[AuthGuard]
},
{
path: 'reversements',
loadChildren: () =>
import('./reversements/reversement/reversement.routes').then(
......
......@@ -42,7 +42,6 @@ export const integrationRoutes: Routes = [
path: 'php',
component: PhpComponent,
},
],
},
];
import { Component } from '@angular/core';
import { SuiviPaiementComponent } from "./transactions/suivi-paiement/suivi-paiement.component";
import { SuiviTransactionComponent } from "./transactions/suivi-transaction/suivi-transaction.component";
import { SuiviPaiementComponent } from './transactions/suivi-paiement/suivi-paiement.component';
import { SuiviTransactionComponent } from './transactions/suivi-transaction/suivi-transaction.component';
import { RouterOutlet } from '@angular/router';
import { TransactionService } from '../_services/trafics/transaction/transaction.service';
import { CommonModule } from '@angular/common';
import { OperateurService } from '../_services/trafics/operateur/operateur.service';
@Component({
selector: 'bgui-trafics',
standalone: true,
templateUrl: './trafics.component.html',
styleUrl: './trafics.component.scss',
imports: [SuiviPaiementComponent, SuiviTransactionComponent,RouterOutlet]
imports: [
SuiviPaiementComponent,
SuiviTransactionComponent,
RouterOutlet,
CommonModule,
],
providers: [TransactionService, OperateurService],
})
export class TraficsComponent {
}
export class TraficsComponent {}
......@@ -3,10 +3,12 @@
<h3>Paiemnts</h3>
</div>
<div class="row" style="margin-top: 40px">
<div class="col-md-2">
<label for="moyensPaiement">Moyens de paiement</label>
<!-- <div class="col-md-2">
<label for="moyensPaiement">Opérateurs</label>
<select class="form-control filtre" style="width: 100%">
<option value="">Tout</option>
<option *ngFor="let operateur of operateurs" [value]="operateurs.value">
{{ operateur.viewValue }}
</option>
<option value="*OMCIV2*">ORANGE CI</option>
<option value="*MOMOCI*">MTN CI</option>
<option value="*FLOOZ*">MOOV CI</option>
......@@ -21,6 +23,18 @@
<option value="*PAYPAL*">PAYPAL</option>
<option value="*OMGN*">ORANGE GUINEE BISSAU</option>
</select>
</div> -->
<div class="col-md-2">
<label for="operateurs">Opérateurs</label>
<select
class="form-control filtre"
id="operateurs"
style="width: 100%"
[(ngModel)]="selectedOperateur">
<option *ngFor="let operateur of operateurs" [value]="operateur.code">
{{ operateur.code }}
</option>
</select>
</div>
<div class="col-md-2">
<label for="services">Services</label>
......
......@@ -3,14 +3,11 @@ 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 { FormsModule } from '@angular/forms';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
export interface PElement {
nfacture: number;
......@@ -155,23 +152,9 @@ const ELEMENT_DATA: PElement[] = [
MatFormFieldModule,
MatInputModule,
MatTableModule,
CommonModule,
MatPaginator,
MatTableModule,
MatFormFieldModule,
MatInputModule,
CarouselComponent,
MatFormFieldModule,
MatCardModule,
MatCardTitle,
ReactiveFormsModule,
MatInputModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
MatTableModule,
MatPaginatorModule,
CommonModule,
HttpClientModule,
RouterLink,
FormsModule,
],
......@@ -179,6 +162,11 @@ const ELEMENT_DATA: PElement[] = [
styleUrl: './suivi-paiement.component.scss',
})
export class SuiviPaiementComponent {
private url = 'http://192.168.1.223:8000/operateur/';
operateurs: IOperateur[] = [];
selectedOperateur: string = '';
displayedColumns: string[] = [
'nfacture',
'nom',
......@@ -194,7 +182,35 @@ export class SuiviPaiementComponent {
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(private httpClient: HttpClient) {}
ngOnInit(): void {
this.fetchOperateurs();
}
fetchOperateurs(): void {
this.httpClient.get<IOperateur>(this.url).subscribe(
(data: IOperateur) => {
this.operateurs.push(data);
console.log('operateur==>', this.operateurs);
},
error => {
console.error(
"Une erreur s'est produite lors de la récupération des opérateurs :",
error
);
}
);
}
onOperateurChange(event: Event): void {
const selectElement = event.target as HTMLSelectElement;
this.selectedOperateur = selectElement.value;
console.log('Selected opérateur ===>', this.selectedOperateur);
}
ngAfterViewInit() {
if (this.paginator) {
this.dataSource.paginator = this.paginator;
......
......@@ -4,22 +4,15 @@
</div>
<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%">
<option value="">Tout</option>
<option value="*OMCIV2*">ORANGE CI</option>
<option value="*MOMOCI*">MTN CI</option>
<option value="*FLOOZ*">MOOV CI</option>
<option value="*OMBF*">ORANGE BF</option>
<option value="*OMML*">ORANGE MALI</option>
<option value="*MOMOBJ*">MTN BENIN</option>
<option value="*CARD*">VISA / MASTERCARD</option>
<option value="*FLOOZBJ*">MOOV BENIN</option>
<option value="*AIRTELNG*">AITEL NIGER</option>
<option value="*WAVECI*">WAVE CI</option>
<option value="*OMSN*">ORANGE SENEGAL</option>
<option value="*PAYPAL*">PAYPAL</option>
<option value="*OMGN*">ORANGE GUINEE BISSAU</option>
<label for="operateurs">Opérateurs</label>
<select
class="form-control filtre"
id="operateurs"
[(ngModel)]="selectedOperateur"
style="width: 100%">
<option *ngFor="let operateur of operateurs" [value]="operateur.code">
{{ operateur.code }}
</option>
</select>
</div>
<div class="col-md-2">
......@@ -65,67 +58,87 @@
#input />
</mat-form-field>
<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>
<mat-table #table [dataSource]="transactions">
<ng-container matColumnDef="transaction_id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.transaction_id }}
</mat-cell>
</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 matColumnDef="type_paiement">
<mat-header-cell *matHeaderCellDef>ID type paiement </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement }}
</mat-cell>
</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>
<!-- Name Column -->
<ng-container matColumnDef="type_paiement_label">
<mat-header-cell *matHeaderCellDef>type paiement </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.type_paiement_label }}
</mat-cell>
</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>
<!-- Weight Column -->
<ng-container matColumnDef="marchand">
<mat-header-cell *matHeaderCellDef> Marchand </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.marchand }}
</mat-cell>
</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">
<mat-header-cell *matHeaderCellDef> E-mail </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.service }}
</mat-cell>
</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>
<mat-cell *matCellDef="let transaction">
{{ transaction.montant }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<mat-header-cell *matHeaderCellDef> Mode Paiement </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.modePaiement }}
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.date }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef> Commentaire </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.commentaire }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="etat">
<mat-header-cell *matHeaderCellDef> Etat </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.etat }}
</mat-cell>
</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>
<mat-cell *matCellDef="let transaction">
{{ transaction.status }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction }}
<ng-container matColumnDef="reference">
<mat-header-cell *matHeaderCellDef> Réference </mat-header-cell>
<mat-cell *matCellDef="let transaction">
{{ transaction.reference }}
</mat-cell>
</ng-container>
......@@ -140,3 +153,12 @@
[showFirstLastButtons]="true">
</mat-paginator>
</div>
<!-- id ID[...]
transaction_id* Transaction id[...]
action* Action[...]
date Date[...]
description* Description[...]
marchand_code* Marchand code[...]
service_code* Service code[...]
type_paiement_code* Type paiement code -->
......@@ -3,142 +3,13 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
export interface PElement {
nfacture: number;
nom: string;
prenom: string;
contact: string;
service: string;
email: string;
montant: number;
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',
},
];
import { CommonModule } from '@angular/common';
import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { RouterLink } from '@angular/router';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'bgui-suivi-transaction',
......@@ -148,24 +19,74 @@ const ELEMENT_DATA: PElement[] = [
MatInputModule,
MatTableModule,
MatPaginatorModule,
CommonModule,
HttpClientModule,
RouterLink,
FormsModule,
],
templateUrl: './suivi-transaction.component.html',
styleUrl: './suivi-transaction.component.scss',
})
export class SuiviTransactionComponent {
//private HtUrl = 'http://192.168.1.223:8000/transaction-history/';
private url = 'http://192.168.1.223:8000/operateur/';
transactions: ITransaction[] = [];
operateurs: IOperateur[] = [];
selectedOperateur: string = '';
constructor(
private httpClient: HttpClient,
public transactionService: TransactionService
) {}
ngOnInit(): void {
this.transactionService.getAll().subscribe((data: ITransaction[]) => {
this.transactions = data;
console.log('transactions===>', this.transactions);
this.fetchOperateurs();
});
}
fetchOperateurs(): void {
this.httpClient.get<IOperateur>(this.url).subscribe(
(data: IOperateur) => {
this.operateurs.push(data);
console.log('operateur==>', this.operateurs);
},
error => {
console.error(
"Une erreur s'est produite lors de la récupération des opérateurs :",
error
);
}
);
}
onOperateurChange(event: Event): void {
const selectElement = event.target as HTMLSelectElement;
this.selectedOperateur = selectElement.value;
console.log('Selected opérateur ===>', this.selectedOperateur);
}
displayedColumns: string[] = [
'nfacture',
'nom',
'prenom',
'contact',
'transaction_id',
'type_paiement',
'type_paiement_label',
'marchand',
'service',
'email',
'montant',
'modePaiement',
'date',
'commentaire',
'etat',
'status',
'dateTransaction',
'reference',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource = new MatTableDataSource(this.transactions);
@ViewChild(MatPaginator) paginator!: MatPaginator | undefined;
......@@ -180,6 +101,3 @@ export class SuiviTransactionComponent {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
// function ViewChild(MatPaginator: any): (target: SuiviTransactionComponent, propertyKey: "paginator") => void {
// throw new Error('Function not implemented.');
// }
......@@ -3,7 +3,6 @@ import { TraficsComponent } from '../trafics.component';
import { SuiviPaiementComponent } from './suivi-paiement/suivi-paiement.component';
import { SuiviTransactionComponent } from './suivi-transaction/suivi-transaction.component';
export const transactionsRoutes: Routes = [
{
path: '',
......
<div>
<h3>Create Users</h3>
<bgui-utilisateurs />
</div>
import { Component } from '@angular/core';
import { UtilisateursComponent } from 'src/app/utilisateurs/utilisateurs.component';
@Component({
selector: 'bgui-create-users',
standalone: true,
imports: [UtilisateursComponent],
imports: [],
templateUrl: './create-users.component.html',
styleUrl: './create-users.component.scss',
})
......
......@@ -42,15 +42,16 @@
<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>
<a href="#" class="btn btn-info" [routerLink]="['view-user']">Voir</a>
<a href="#" class="btn btn-primary m-1" [routerLink]="['edit-user/id']"
>Editer</a
>
<button
type="button"
class="btn btn-danger"
[routerLink]="['delete-user/id']">
Supprimer
</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>
......@@ -64,3 +65,29 @@
[showFirstLastButtons]="true">
</mat-paginator>
</div>
<!-- <hr />
<div>
<table>
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>liens</th>
<th>etat</th>
<th>status</th>
<th>information</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataTypePaiements">
<td>{{ item.id }}</td>
<td>{{ item.code }}</td>
<td>{{ item.lien }}</td>
<td>{{ item.etat }}</td>
<td>{{ item.status }}</td>
<td>{{ item.information }}</td>
</tr>
</tbody>
</table>
</div> -->
......@@ -13,6 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from '../shared/carousel/carousel.component';
import { MatMenuModule } from '@angular/material/menu';
import { HttpClient } from '@angular/common/http';
export interface IUsers {
id: number;
......@@ -96,7 +97,22 @@ const ELEMENT_DATA: IUsers[] = [
styleUrl: './utilisateurs.component.scss',
})
export class UtilisateursComponent {
constructor(private http: HttpClient) {}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dataTypePaiements: any[] = [];
ngOnInit(): void {
this.http
.get('http://192.168.1.223:8000/operateur/')
// eslint-disable-next-line @typescript-eslint/no-explicit-any
.subscribe((results: any) => {
console.log('results==>', results);
this.dataTypePaiements = results.results;
console.log('dataTypePaiements===>', this.dataTypePaiements);
});
}
editUser() {
throw new Error('Method not implemented.');
}
......
......@@ -23,7 +23,9 @@
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body class="nk-body bgui-bg-body ui-rounder npc-default">
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
<script
src="https://kit.fontawesome.com/a4c00a89bc.js"
crossorigin="anonymous"></script>
<bgui-root></bgui-root>
</body>
</html>
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