diff --git a/documentation/components/AccountComponent.html b/documentation/components/AccountComponent.html new file mode 100644 index 0000000..3af8761 --- /dev/null +++ b/documentation/components/AccountComponent.html @@ -0,0 +1,329 @@ + + +
+ + ++
+ src/app/account/account.component.ts
+
selector | +bgui-account |
+
standalone | +true |
+
imports | +
+ CommonModule
+ RouterOutlet
+ |
+
templateUrl | +./account.component.html |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+ selector: 'bgui-account',
+ standalone: true,
+ imports: [CommonModule, RouterOutlet],
+ templateUrl: './account.component.html',
+})
+export class AccountComponent {}
+
+ <router-outlet></router-outlet>
+
+ +
+ src/app/admin-test/admin-test.component.ts
+
+
+ OnInit
+
selector | +bgui-admin-test |
+
standalone | +true |
+
imports | +
+ MatFormFieldModule
+ MatInputModule
+ MatTableModule
+ MatPaginatorModule
+ CommonModule
+ HttpClientModule
+ RouterLink
+ FormsModule
+ CommonModule
+ PagetitleComponent
+ RouterOutlet
+ |
+
styleUrls | +./admin-test.component.scss |
+
templateUrl | +./admin-test.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(httpClient: HttpClient, transactionService: TransactionService)
+ |
+ |||||||||
+ + | +|||||||||
+
+ Parameters :
+
+
|
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + breadCrumbItems + + + | +
+ Type : Array<literal type> | undefined
+
+ |
+
+ + | +
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource(this.transactions)
+ |
+
+ + | +
+ + + Private + HtUrl + + + | +
+ Type : string
+
+ |
+
+ Default value : 'http://192.168.1.223:8001/api/tableau_bord/1/'
+ |
+
+ + | +
+ + + operateurs + + + | +
+ Type : ITypeOperateur[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
+ + + respTransaction + + + | +
+ Type : IMerchantData | undefined
+
+ |
+
+ Default value : undefined
+ |
+
+ + | +
+ + + selectedOperateur + + + | +
+ Type : string
+
+ |
+
+ Default value : ''
+ |
+
+ + | +
+ + + transactions + + + | +
+ Type : ITransaction[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
+ + + Public + transactionService + + + | +
+ Type : TransactionService
+
+ |
+
+ + | +
import { Component, type OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PagetitleComponent } from '../shared/ui/pagetitle/pagetitle.component';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import {
+ IMerchantData,
+ ITransaction,
+ ITypeOperateur,
+} from '../_interfaces/trafics/transaction/transaction';
+import { TransactionService } from '../_services/trafics/transaction/transaction.service';
+
+@Component({
+ selector: 'bgui-admin-test',
+ standalone: true,
+ imports: [
+ MatFormFieldModule,
+ MatInputModule,
+ MatTableModule,
+ MatPaginatorModule,
+ CommonModule,
+ HttpClientModule,
+ RouterLink,
+ FormsModule,
+ CommonModule,
+ PagetitleComponent,
+ RouterOutlet,
+ ],
+ templateUrl: './admin-test.component.html',
+ styleUrls: ['./admin-test.component.scss'],
+})
+export class AdminTestComponent implements OnInit {
+ private HtUrl = 'http://192.168.1.223:8001/api/tableau_bord/1/';
+
+ breadCrumbItems: Array<{}> | undefined;
+ respTransaction: IMerchantData | undefined = undefined;
+ transactions: ITransaction[] = [];
+ operateurs: ITypeOperateur[] = [];
+ // marchnad: IMerchantData[] = [];
+ selectedOperateur: string = '';
+ constructor(
+ private httpClient: HttpClient,
+ public transactionService: TransactionService
+ //public operateur: IOperateur
+ ) {}
+ ngOnInit(): void {
+ this.transactionService.getDataTable().subscribe(data => {
+ this.respTransaction = data;
+ console.log('respTransaction===>', this.respTransaction);
+ // this.respTransaction = JSON.stringify(this.respTransaction);
+ //console.log('Response==>',this.respTransaction);
+
+ this.transactions = this.respTransaction?.last_five_transactions;
+ console.log('transactions==>', this.transactions);
+
+ this.operateurs = this.respTransaction?.type_operateur;
+
+ console.log('typeOpreateur===>', this.operateurs);
+ });
+ }
+
+ displayedColumns: string[] = [
+ //'transaction_id',
+ //'type_paiement',
+ 'type_paiement_label',
+ 'marchand',
+ 'service',
+ 'montant',
+ 'date',
+ 'commentaire',
+ 'etat',
+ 'status',
+ 'reference',
+ ];
+
+ dataSource = new MatTableDataSource(this.transactions);
+}
+
+
+
+
+
+ <div class="nk-block-head nk-block-head-sm">
+ <div class="nk-block-between">
+ <bgui-pagetitle
+ title="Tableau de bord Beasy"
+ [breadcrumbItems]="breadCrumbItems"></bgui-pagetitle>
+ </div>
+</div>
+<div class="nk-block">
+ <div class="row g-gs p-2">
+ <div class="col-xxl-3 col-sm-6">
+ <div class="card" style="background-color: #4285f4">
+ <div class="nk-ecwg nk-ecwg6">
+ <div class="card-inner">
+ <div class="card-title-group">
+ <div class="card-title" style="color: azure">
+ <div class="tiles" style="font-weight: bold">Solde</div>
+ </div>
+ </div>
+ <div class="data" style="color: azure">
+ <div class="data-group">
+ <div class="amount" style="font-weight: bold; font: 2em">
+ <p style="color: blanchedalmond">
+ {{ respTransaction?.solde | currency: 'FCFA' }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- .card-inner -->
+ </div>
+ <!-- .nk-ecwg -->
+ </div>
+ <!-- .card -->
+ </div>
+
+ <div class="col-xxl-3 col-sm-6">
+ <div class="card" style="background-color: #0f9d58">
+ <div class="nk-ecwg nk-ecwg6">
+ <div class="card-inner">
+ <div class="card-title-group">
+ <div class="card-title" style="color: azure">
+ <h6 class="title" style="color: azure">
+ Montant Total Transactions
+ </h6>
+ </div>
+ </div>
+ <div class="data" style="color: azure">
+ <div class="data-group" style="color: azure">
+ <div class="amount">
+ <p style="color: blanchedalmond">
+ {{ respTransaction?.total_transaction | currency: 'FCFA' }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- .card-inner -->
+ </div>
+ <!-- .nk-ecwg -->
+ </div>
+ <!-- .card -->
+ </div>
+ <!-- .col -->
+ <div class="col-xxl-3 col-sm-6">
+ <div class="card" style="background-color: #f4b400">
+ <div class="nk-ecwg nk-ecwg6">
+ <div class="card-inner">
+ <div class="card-title-group">
+ <div class="card-title" style="color: azure">
+ <h6 class="title" style="color: azure">Reversement</h6>
+ </div>
+ </div>
+ <div class="data" style="color: azure">
+ <div class="data-group">
+ <div class="amount">
+ <p style="color: blanchedalmond">
+ {{ respTransaction?.revesement | currency: 'FCFA' }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- .card-inner -->
+ </div>
+ <!-- .nk-ecwg -->
+ </div>
+ <!-- .card -->
+ </div>
+ <!-- .col -->
+ <div class="col-xxl-3 col-sm-6">
+ <div class="card" style="background-color: #db4437">
+ <div class="nk-ecwg nk-ecwg6">
+ <div class="card-inner">
+ <div class="card-title-group">
+ <div class="card-title" style="color: azure">
+ <h6 class="title" style="color: azure">Montant Journalier</h6>
+ </div>
+ </div>
+ <div class="data" style="color: azure">
+ <div class="data-group">
+ <div class="amount">
+ <p style="color: blanchedalmond">
+ {{ respTransaction?.total_journee | currency: 'FCFA' }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row g-gs p-2">
+ <div class="col-xxl-6">
+ <div class="card card-full">
+ <div class="nk-ecwg nk-ecwg8 h-100">
+ <div class="card-inner">
+ <div class="card-title-group mb-3">
+ <div class="card-title">
+ <h6 class="title">Statistiques Des Transactions</h6>
+ </div>
+ <div class="card-tools">
+ <div class="dropdown">
+ <a
+ href="#"
+ class="dropdown-toggle link link-light link-sm dropdown-indicator"
+ data-bs-toggle="dropdown"
+ >Semaine</a
+ >
+ <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
+ <ul class="link-list-opt no-bdr">
+ <li>
+ <a href="#"><span>Jour</span></a>
+ </li>
+ <li>
+ <a href="#" class="active"><span>Semaine</span></a>
+ </li>
+ <li>
+ <a href="#"><span>Mois</span></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ul class="nk-ecwg8-legends">
+ <li>
+ <div class="title">
+ <span class="dot dot-lg sq" data-bg="#0fac81"></span>
+ <span>Transaction</span>
+ </div>
+ </li>
+ <li>
+ <div class="title">
+ <span class="dot dot-lg sq" data-bg="#eb6459"></span>
+ <span>Transaction Annulé</span>
+ </div>
+ </li>
+ </ul>
+ <div class="nk-ecwg8-ck">
+ <canvas
+ class="ecommerce-line-chart-s4"
+ id="salesStatistics"></canvas>
+ </div>
+ <div class="chart-label-group ps-5">
+ <div class="chart-label">01 Septembre, 2023</div>
+ <div class="chart-label">30 Septembre, 2023</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xxl-6">
+ <div class="card card-full overflow-hidden">
+ <div class="nk-ecwg nk-ecwg4 h-100">
+ <div class="card-inner flex-grow-1">
+ <div class="card-title-group mb-4">
+ <div class="card-title">
+ <h6 class="title">Montant Disponible</h6>
+ </div>
+ <div class="card-tools">
+ <div class="dropdown">
+ <a
+ href="#"
+ class="dropdown-toggle link link-light link-sm dropdown-indicator"
+ data-bs-toggle="dropdown"
+ >30 Jours</a
+ >
+ <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
+ <ul class="link-list-opt no-bdr">
+ <li>
+ <a href="#"><span>15 Jours</span></a>
+ </li>
+ <li>
+ <a href="#" class="active"><span>30 Jours</span></a>
+ </li>
+ <li>
+ <a href="#"><span>3 Mois</span></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="data-group">
+ <ul class="nk-ecwg4-legends">
+ <li *ngFor="let operateur of operateurs">
+ <div class="title">
+ <span
+ class="dot dot-lg sq"
+ data-bg="#0fac81"
+ style="background: rgb(219, 207, 207)"></span>
+ <span>{{ operateur.label }}</span>
+ </div>
+ <div class="amount amount-xs">
+ {{ operateur.total_montant | currency: 'FCFA' }}
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <section>
+ <!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
+
+ <div
+ class="example-container mat-elevation-z8 table-hover"
+ style="margin-top: 40px; border-radius: 10px">
+ <div class="page-title">
+ <h6 class="p-4">Vos 5 dernières Transactions</h6>
+ </div>
+
+ <mat-table #table [dataSource]="transactions">
+ <!-- <ng-container matColumnDef="transaction_id">
+ <mat-header-cell *matHeaderCellDef class="text"> ID </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.transaction_id }}
+ </mat-cell>
+ </ng-container> -->
+
+ <!-- Name Column -->
+ <ng-container matColumnDef="type_paiement_label">
+ <mat-header-cell *matHeaderCellDef class="text"
+ >Type paiement
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.type_paiement_label }}
+ </mat-cell>
+ </ng-container>
+
+ <!-- Weight Column -->
+ <ng-container matColumnDef="marchand">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Marchand
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.marchand }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="service">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Service
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.service }}
+ </mat-cell>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="montant">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Montant
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.montant | currency: ' FCFA' }}
+ </mat-cell>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="date">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Date
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.date | date: 'dd/mm/yyyy' }}
+ </mat-cell>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="commentaire">
+ <mat-header-cell *matHeaderCellDef class="text">
+ 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 class="text">
+ 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 class="text">
+ Status
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.status }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="reference">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Réference
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.reference }}
+ </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+ </div>
+ </section>
+ <footer class="footer bg-dark footer-design">
+ <div class="text-white text-center mr-3"></div>
+ </footer>
+</div>
+
+
+ ./admin-test.component.scss
+
*{
+ font-family: 'Roboto';
+}
+
+
+
+.text {
+ color:blue;
+ font-weight: bold;
+ font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
+}
+
+ +
+ src/app/app.component.ts
+
selector | +bgui-root |
+
standalone | +true |
+
imports | +
+ CommonModule
+ RouterOutlet
+ HttpClientModule
+ FormsModule
+ HttpClientModule
+ MatDialogModule
+ |
+
styleUrls | +./app.component.scss |
+
templateUrl | +./app.component.html |
+
+ Properties+ |
+
+
|
+
+ + + title + + + | +
+ Type : string
+
+ |
+
+ Default value : 'angular-todolist'
+ |
+
+ Defined in src/app/app.component.ts:23
+ |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+ selector: 'bgui-root',
+ standalone: true,
+ imports: [
+ CommonModule,
+ RouterOutlet,
+ HttpClientModule,
+ FormsModule,
+ HttpClientModule,
+ MatDialogModule,
+ ],
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+ title = 'angular-todolist';
+}
+
+ <router-outlet></router-outlet>
+
+
+ ./app.component.scss
+
*{
+ font-family: 'Roboto';
+}
+ +
+ src/app/application-android/application-android.component.ts
+
selector | +bgui-application-android |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./application-android.component.html |
+
styleUrl | +./application-android.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from '../shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-application-android',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './application-android.component.html',
+ styleUrl: './application-android.component.scss',
+})
+export class ApplicationAndroidComponent {}
+
+ <div class="content">
+ <div class="page-title">
+ <h3>Applications Mobile - <span class="semi-bold">Android -</span> IOS</h3>
+ </div>
+ <hr>
+ <div class="row">
+ <div class="col-md-7">
+ <mat-card class="grid simple transparent">
+ <mat-card-header>
+ <mat-card-title>
+ <h4>BEASY</h4>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <p>
+ - Utilisez le scanner de QR Code pour vérifier vos tickets vendus <br>
+ - Demandez un reversement en temps réel <br>
+ - Recevoir ses notification de vente à tout moment <br>
+ </p>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ <div class="col-md-5">
+ <mat-card class="grid simple">
+ <mat-card-header>
+ <mat-card-title>
+ <h4>Android</h4>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <div class="row">
+ <div class="col-md-6">
+ <img src="assets/images/logo/logo-text-beasy.svg " style="width:100%" alt="">
+ </div>
+ <div class="col-md-6">
+ <b>Disponible sur: </b> <br><br>
+ <a href="https://play.google.com/store/apps/details?id=com.paiementpro.agt" target="_blank">
+ <img src="https://www.google.com/intl/fr/cast/about/static/images/download-badges/android-download.png" style="width:100%" alt="">
+ </a>
+ </div>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/assistances/assistances.component.ts
+
providers | +
+ ServiceService
+ |
+
selector | +bgui-assistances |
+
standalone | +true |
+
imports | +
+ RouterOutlet
+ CommonModule
+ DeleteServiceComponent
+ CreateServiceComponent
+ EditServiceComponent
+ CreateServiceComponent
+ RouterLink
+ RouterOutlet
+ |
+
templateUrl | +./assistances.component.html |
+
styleUrl | +./assistances.component.scss |
+
+ Properties+ |
+
+
|
+
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ]
+ |
+
+ + | +
+ + + service + + + | +
+ Type : IService[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { ServiceService } from '../_services/service/service.service';
+import { CommonModule } from '@angular/common';
+import { CreateServiceComponent } from './assistance/create-service/create-service.component';
+import { DeleteServiceComponent } from './assistance/delete-service/delete-service.component';
+import { EditServiceComponent } from './assistance/edit-service/edit-service.component';
+import { IService } from '../_interfaces/servives/service';
+
+@Component({
+ selector: 'bgui-assistances',
+ standalone: true,
+ imports: [
+ RouterOutlet,
+ CommonModule,
+ DeleteServiceComponent,
+ CreateServiceComponent,
+ EditServiceComponent,
+ CreateServiceComponent,
+ RouterLink,
+ RouterOutlet,
+ ],
+ providers: [ServiceService],
+ templateUrl: './assistances.component.html',
+ styleUrl: './assistances.component.scss',
+})
+export class AssistancesComponent {
+ service: IService[] = [];
+ displayedColumns: string[] = [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ];
+}
+
+ <router-outlet></router-outlet>
+
+ +
+ src/app/admin/dashboards/beasy-dashboard/beasy-dashboard.component.ts
+
+
+ OnInit
+
selector | +bgui-beasy-dashboard |
+
standalone | +true |
+
imports | +
+ CommonModule
+ RouterOutlet
+ PagetitleComponent
+ |
+
styleUrls | +./beasy-dashboard.component.scss |
+
templateUrl | +./beasy-dashboard.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor()
+ |
+
+ + | +
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + breadCrumbItems + + + | +
+ Type : Array<literal type> | undefined
+
+ |
+
+ + | +
import { Component, type OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { PagetitleComponent } from '../../../shared/ui/pagetitle/pagetitle.component';
+
+@Component({
+ selector: 'bgui-beasy-dashboard',
+ standalone: true,
+ imports: [CommonModule, RouterOutlet, PagetitleComponent],
+ templateUrl: './beasy-dashboard.component.html',
+ styleUrls: ['./beasy-dashboard.component.scss'],
+})
+export class BeasyDashboardComponent implements OnInit {
+ // biome-ignore lint/complexity/noBannedTypes: <explanation>
+ breadCrumbItems: Array<{}> | undefined;
+
+ // biome-ignore lint/complexity/noUselessConstructor: <explanation>
+ constructor() {}
+ ngOnInit() {
+ this.breadCrumbItems = [
+ { label: 'Resumé Des Transactions' },
+ /* { label: 'Invoice List', active: true },*/
+ ];
+ }
+}
+
+
+
+ ./beasy-dashboard.component.scss
+
*{
+ font-family: 'Roboto';
+}
+ +
+ src/app/ui/buttons/buttons.component.ts
+
selector | +bgui-buttons |
+
standalone | +true |
+
imports | +
+ MatButtonModule
+ MatIconModule
+ LoaderComponent
+ MatFormField
+ MatLabel
+ MatInput
+ |
+
templateUrl | +./buttons.component.html |
+
styleUrl | +./buttons.component.scss |
+
import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { LoaderComponent } from '../../shared/ui/loader/loader.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+
+@Component({
+ selector: 'bgui-buttons',
+ standalone: true,
+ imports: [
+ MatButtonModule,
+ MatIconModule,
+ LoaderComponent,
+ MatFormField,
+ MatLabel,
+ MatInput,
+ ],
+ templateUrl: './buttons.component.html',
+ styleUrl: './buttons.component.scss',
+})
+export class ButtonsComponent {}
+
+ <div class="container-lg">
+ <h2>Buttons</h2>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Boutons de texte</h5>
+ <section>
+ <div class="example-label">Bouton texte</div>
+ <div class="example-button-row">
+ <button mat-button shape-semi-round>Btn tertiaires</button>
+ <button mat-button shape-semi-round color="primary">Primary</button>
+ <button mat-button shape-semi-round color="accent">Accent</button>
+ <button mat-button shape-semi-round color="warn">Warn</button>
+ <button mat-button shape-semi-round disabled>Disabled</button>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Boutons primaires élévation</h5>
+ <section>
+ <div class="example-label">primaires élévation</div>
+ <div class="example-button-row">
+ <button mat-raised-button shape-semi-round>Basic</button>
+ <button
+ mat-raised-button
+ shape-semi-round
+ shad
+ hover
+ focus
+ color="primary">
+ Primary
+ </button>
+ <button mat-raised-button shape-semi-round color="accent">
+ Accent
+ </button>
+ <button mat-raised-button shape-semi-round color="warn">Warn</button>
+ <button mat-raised-button shape-semi-round disabled>Disabled</button>
+ <a
+ mat-raised-button
+ shape-semi-round
+ href="https://www.google.com/"
+ target="_blank"
+ >Link</a
+ >
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Boutons en surbrillance</h5>
+ <section>
+ <div class="example-label">Btn surbrillance</div>
+ <div class="example-button-row">
+ <button mat-stroked-button shape-semi-round>Basic</button>
+ <button mat-stroked-button shape-semi-round color="primary">
+ Primary
+ </button>
+ <button
+ mat-stroked-button
+ shape-semi-round
+ bgui-btn--giant
+ color="accent">
+ Accent
+ </button>
+ <button mat-stroked-button shape-semi-round color="warn">Warn</button>
+ <button mat-stroked-button shape-semi-round disabled>Disabled</button>
+ <a
+ mat-stroked-button
+ shape-semi-round
+ href="https://www.google.com/"
+ target="_blank"
+ >Link</a
+ >
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Boutons primaires plat</h5>
+ <section>
+ <div class="example-label">Boutons primaires plat</div>
+ <div class="example-button-row">
+ <button mat-flat-button>Basic</button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ color="primary"
+ class="button-rounded">
+ Button
+ </button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ color="primary"
+ class="button-rounded">
+ OK
+ </button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ color="primary"
+ class="button-rounded">
+ Cancel
+ </button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ color="primary"
+ class="button-rounded">
+ Button
+ </button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ color="warn"
+ class="button-rounded">
+ Delete
+ </button>
+ <button
+ mat-flat-button
+ shape-semi-round
+ disabled
+ class="button-rounded">
+ Applied
+ </button>
+ <button mat-flat-button shape-semi-round color="accent">
+ Accent
+ </button>
+ <button mat-flat-button shape-semi-round disabled>Disabled</button>
+ <a
+ mat-flat-button
+ shape-semi-round
+ href="https://www.google.com/"
+ target="_blank"
+ >Link</a
+ >
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Taille Boutons</h5>
+ <section>
+ <div class="example-label">Taille</div>
+ <div class="example-button-row">
+ <button
+ mat-flat-button
+ bgui-tiny
+ color="primary"
+ class="button-rounded">
+ Tiny
+ </button>
+ <button
+ mat-flat-button
+ bgui-small
+ color="primary"
+ class="button-rounded">
+ Small
+ </button>
+ <button
+ mat-flat-button
+ bgui-medium
+ color="primary"
+ class="button-rounded">
+ Medium
+ </button>
+ <button
+ mat-flat-button
+ bgui-large
+ color="primary"
+ class="button-rounded">
+ Large Button
+ </button>
+ <button
+ mat-flat-button
+ bgui-giant
+ color="primary"
+ class="button-rounded">
+ Giant
+ </button>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Taille Boutons avec icônes</h5>
+ <section>
+ <div class="example-label">Taille</div>
+ <div class="example-button-row">
+ <button
+ mat-flat-button
+ bgui-tiny
+ mat-inline-14
+ shape-semi-round
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Tiny
+ </button>
+ <button
+ mat-flat-button
+ bgui-small
+ mat-inline-14
+ shape-semi-round
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Small
+ </button>
+ <button
+ mat-flat-button
+ bgui-medium
+ mat-inline-16
+ shape-semi-round
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Medium
+ </button>
+ <button
+ mat-flat-button
+ bgui-large
+ shape-semi-round
+ mat-inline-20
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Large Button
+ </button>
+ <button
+ mat-flat-button
+ bgui-giant
+ shape-semi-round
+ mat-inline-20
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Giant
+ </button>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Circulaire indéterminée</h5>
+ <section>
+ <div class="example-label">Taille</div>
+ <div class="example-button-row">
+ <bgui-loader class="" />
+ </div>
+ <button mat-flat-button bgui-medium shape-semi-round color="primary">
+ <bgui-loader bgui-loader />
+ Medium
+ </button>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Boutons avec icône</h5>
+ <section>
+ <div class="example-label">Icon</div>
+ <div class="example-button-row">
+ <div class="example-flex-container">
+ <button
+ mat-icon-button
+ aria-label="Example icon button with a vertical three dot icon">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ color="primary"
+ aria-label="Example icon button with a home icon">
+ <mat-icon>home</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ aria-label="Example icon button with a menu icon">
+ <mat-icon>menu</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ color="warn"
+ aria-label="Example icon button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ disabled
+ aria-label="Example icon button with a open in new tab icon">
+ <mat-icon>open_in_new</mat-icon>
+ </button>
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Bouton d'action flottant</h5>
+ <section>
+ <div class="example-label">FAB</div>
+ <div class="example-button-row">
+ <div class="example-flex-container">
+ <div class="example-button-container">
+ <button
+ mat-fab
+ color="primary"
+ aria-label="Example icon button with a delete icon">
+ <mat-icon>delete</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-fab
+ color="accent"
+ aria-label="Example icon button with a bookmark icon">
+ <mat-icon>bookmark</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-fab
+ color="warn"
+ aria-label="Example icon button with a home icon">
+ <mat-icon>home</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-fab
+ disabled
+ aria-label="Example icon button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card mb-3">
+ <div class="card-body">
+ <h5 class="card-title">Mini Bouton d'action flottant</h5>
+ <section>
+ <div class="example-label">Mini FAB</div>
+ <div class="example-button-row">
+ <div class="example-flex-container">
+ <div class="example-button-container">
+ <button
+ mat-mini-fab
+ color="primary"
+ aria-label="Example icon button with a menu icon">
+ <mat-icon>menu</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-mini-fab
+ color="accent"
+ aria-label="Example icon button with a plus one icon">
+ <mat-icon>plus_one</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-mini-fab
+ color="warn"
+ aria-label="Example icon button with a filter list icon">
+ <mat-icon>filter_list</mat-icon>
+ </button>
+ </div>
+ <div class="example-button-container">
+ <button
+ mat-mini-fab
+ disabled
+ aria-label="Example icon button with a home icon">
+ <mat-icon>home</mat-icon>
+ </button>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">
+ With supporting text below as a natural lead-in to additional content.
+ </p>
+ <button
+ mat-flat-button
+ bgui-medium
+ mat-inline-16
+ shape-semi-round
+ color="primary">
+ <mat-icon>home</mat-icon>
+ Medium
+ </button>
+ <form class="example-form">
+ <mat-form-field class="example-full-width">
+ <mat-label>Favorite food</mat-label>
+ <input matInput placeholder="Ex. Pizza" value="Sushi" />
+ </mat-form-field>
+ </form>
+
+ <div class="row g-3">
+ <div class="col">
+ <mat-form-field class="w-100">
+ <mat-label>Favorite food</mat-label>
+ <input matInput placeholder="Ex. Pizza" value="Sushi" />
+ </mat-form-field>
+ </div>
+ <div class="col">
+ <mat-form-field class="w-100">
+ <mat-label>Favorite food</mat-label>
+ <input matInput placeholder="Ex. Pizza" value="Sushi" />
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/shared/carousel/carousel.component.ts
+
+
+ OnInit
+
selector | +bgui-carousel |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./carousel.component.scss |
+
templateUrl | +./carousel.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ Inputs+ |
+
+
|
+
+constructor()
+ |
+
+ + | +
+ + autoSlide + | +|
+ Type : boolean
+
+ |
+ |
+ Default value : false
+ |
+ |
+ + | +
+ + controls + | +|
+ Type : boolean
+
+ |
+ |
+ Default value : true
+ |
+ |
+ + | +
+ + images + | +|
+ Type : carouselImage[]
+
+ |
+ |
+ Default value : []
+ |
+ |
+ + | +
+ + indicators + | +|
+ Type : boolean
+
+ |
+ |
+ Default value : true
+ |
+ |
+ + | +
+ + slideInterval + | +|
+ Type : number
+
+ |
+ |
+ Default value : 70
+ |
+ |
+ + | +
+ + + autoSlideImages + + + | +
+autoSlideImages()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + onNextClick + + + | +
+onNextClick()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + onPrevClick + + + | +
+onPrevClick()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + selectImage + + + | +||||||
+selectImage(index: number)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + selectedIndex + + + | +
+ Type : number
+
+ |
+
+ Default value : 0
+ |
+
+ + | +
import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface carouselImage {
+ imageSrc: string;
+ imageAlt: string;
+}
+
+@Component({
+ selector: 'bgui-carousel',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.scss'],
+})
+export class CarouselComponent implements OnInit {
+ @Input() images: carouselImage[] = [];
+ @Input() indicators = true;
+ @Input() controls = true;
+ @Input() autoSlide = false;
+ @Input() slideInterval = 70;
+
+ selectedIndex = 0;
+
+ constructor() {}
+
+ ngOnInit(): void {
+ if (this.autoSlide) {
+ this.autoSlideImages();
+ }
+ }
+
+ autoSlideImages(): void {
+ setInterval(() => {
+ this.onNextClick();
+ }, this.slideInterval);
+ }
+
+ selectImage(index: number): void {
+ this.selectedIndex = index;
+ }
+
+ onPrevClick(): void {
+ if (this.selectedIndex === 0) {
+ this.selectedIndex = this.images.length - 1;
+ } else {
+ this.selectedIndex--;
+ }
+ }
+
+ onNextClick(): void {
+ if (this.selectedIndex === this.images.length - 1) {
+ this.selectedIndex = 0;
+ } else {
+ this.selectedIndex++;
+ }
+ }
+}
+
+ <div *ngIf="images && images.length > 0" class="carousel-container">
+ <img
+ *ngFor="let image of images; let i = index"
+ [src]="image.imageSrc"
+ [alt]="image.imageAlt"
+ [ngClass]="{ 'image-active': selectedIndex === i }"
+ class="" />
+ <div class="fxt-header">
+ <div class="fxt-top-content" style="margin-bottom: -35px">
+ <div class="fxt-transformY-50 fxt-transition-delay-1">
+ <a href="login-25.html" class="fxt-logo">
+ <img src="assets/images/logo/auth.png" alt="Logo"/></a>
+ </div>
+ <div class="fxt-transformY-50 fxt-transition-delay-2">
+ <h1>Beasy</h1>
+ </div>
+ <div class="fxt-transformY-50 fxt-transition-delay-3">
+ <p>
+ Fournit des solutions de bout en bout pour le secteur des paiements
+ aux institutions financières et aux commerçants.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div *ngIf="indicators" class="carousel-dot-container">
+ <span
+ *ngFor="let dot of images; let i = index"
+ class="dot"
+ [ngClass]="{ active: selectedIndex === i }"
+ (click)="selectImage(i)">
+ </span>
+ </div>
+ <button *ngIf="controls" class="btn-carousel btn-prev">
+ <i
+ class="fas fa-arrow-circle-left icon-carousel icon-prev"
+ (click)="onPrevClick()"></i>
+ </button>
+ <button *ngIf="controls" class="btn-carousel btn-next">
+ <i
+ class="fas fa-arrow-circle-right icon-carousel icon-next"
+ (click)="onNextClick()"></i>
+ </button>
+</div>
+
+
+ ./carousel.component.scss
+
.carousel-container{
+ position: relative;
+ margin: auto;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ border-radius: 14px;
+ box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
+}
+
+.carousel-container img{
+ display: none;
+ border-radius: 14px;
+}
+
+.carousel-container Img.image-active {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+
+// dots/indicators
+.carousel-dot-container {
+ position: absolute;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ padding: 0;
+ margin-bottom: 1rem;
+}
+.dot {
+ cursor: pointer;
+ height: 10px;
+ width: 10px;
+ margin: 0 5px;
+ background-color: #fff;
+ border-radius: .65rem;
+ display: inline-block;
+ -webkit-transition: opacity 0.6s ease-in-out;
+ transition: opacity 0.6s ease-in-out;
+ opacity: 0.5;
+ outline: 0!important;
+}
+.active,
+.dot:hover {
+ opacity: 1;
+ width: 26px;
+ transition: all 0.6s ease-in-out;
+}
+.fade {
+ animation-name: fade;
+ animation-duration: 1.5s;
+}
+@keyframes fade {
+ from {
+ opacity: 0.4;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.btn-carousel {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 15%;
+ padding: 0;
+ color: #fff;
+ text-align: center;
+ background: 0 0;
+ border: 0;
+ cursor: pointer;
+}
+.btn-prev {
+ left: 0;
+}
+.icon-carousel {
+ color: #fff;
+ opacity: 0.5;
+ transition: all 0.15s ease;
+}
+.icon-carousel:hover {
+
+ opacity: 0.9;
+}
+
+.icon-carousel:active {
+ opacity: 0.5;
+}
+.icon-prev {
+ font-size: 13px;
+}
+
+
+.carousel-container {
+ .fxt-header {
+ right: 0;
+ left: 0;
+ bottom: 0;
+ margin-right: 40px;
+ margin-left: 10px;
+ position: absolute;
+ border-radius: 12px;
+ padding: 0px 40px 1px;
+ margin-bottom: 60px;
+ /*background-color: rgba(#000, 0.1);*/
+ /*-webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);*/
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: start;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 660px;
+ width: 100%;
+ text-align: left;
+ @media only screen and (max-width: 575px) {
+ padding: 50px 15px 30px;
+ }
+ .fxt-top-content {
+ margin-bottom: 3px;
+ .fxt-logo {
+ display: block;
+ margin-bottom: 30px;
+ max-width: 40vw;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ h1 {
+ color: #fff;
+ font-weight: 700;
+ }
+ p {
+ color: #fff;
+ }
+ }
+ .fxt-bottom-content {
+ h2 {
+ color: #fff;
+ font-size: 20px;
+ }
+ p {
+ color: #bbbbbb;
+ }
+ }
+ }
+}
+
+ +
+ src/app/integrations/integration/code-provider/code-provider.component.ts
+
selector | +bgui-code-provider |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ MatTableModule
+ MatPaginatorModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./code-provider.component.html |
+
styleUrl | +./code-provider.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : ['RESEAU', 'CODE', 'PAYS']
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator | undefined
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table'; // Ajouté
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-code-provider',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ MatTableModule,
+ MatPaginatorModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './code-provider.component.html',
+ styleUrl: './code-provider.component.scss',
+})
+export class CodeProviderComponent {
+ dataSource = new MatTableDataSource<any>([
+ { RESEAU: 'ORANGE CI', CODE: 'OMCIV2', PAYS: "COTE D'IVOIRE" },
+ { RESEAU: 'MTN CI', CODE: 'MOMOCI', PAYS: "COTE D'IVOIRE" },
+ { RESEAU: 'MOOV CI', CODE: 'FLOOZ', PAYS: "COTE D'IVOIRE" },
+ { RESEAU: 'ORANGE BF', CODE: 'OMBF', PAYS: 'BURKINA FASO' },
+ { RESEAU: 'ORANGE MALI', CODE: 'OMML', PAYS: 'MALI' },
+ { RESEAU: 'MTN BENIN', CODE: 'MOMOBJ', PAYS: 'BENIN' },
+ { RESEAU: 'VISA / MASTERCARD', CODE: 'CARD', PAYS: 'MONDE' },
+ { RESEAU: 'MOOV BENIN', CODE: 'FLOOZBJ', PAYS: 'BENIN' },
+ { RESEAU: 'AITEL NIGER', CODE: 'AIRTELNG', PAYS: 'NIGER' },
+ { RESEAU: 'WAVE CI', CODE: 'WAVECI', PAYS: "COTE D'IVOIRE" },
+ { RESEAU: 'ORANGE SENEGAL', CODE: 'OMSN', PAYS: 'SENEGAL' },
+ { RESEAU: 'PAYPAL', CODE: 'PAYPAL', PAYS: 'MONDE' },
+ { RESEAU: 'ORANGE GUINEE BISSAU', CODE: 'OMGN', PAYS: 'GUINEE BISSAU' },
+ ]);
+
+ displayedColumns: string[] = ['RESEAU', 'CODE', 'PAYS'];
+
+ @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();
+ }
+}
+
+ <div class="content sm-gutter">
+ <div class="page-title">
+ <h3>Pays & Code Provider</h3>
+ </div>
+
+ <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">
+ <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"
+ aria-describedby="DataTables_Table_0_info"
+ [dataSource]="dataSource">
+ <ng-container matColumnDef="RESEAU">
+ <mat-header-cell *matHeaderCellDef> RESEAU </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ {{ element.RESEAU }}
+ </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="CODE">
+ <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ {{ element.CODE }}
+ </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="PAYS">
+ <mat-header-cell *matHeaderCellDef> PAYS </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ {{ element.PAYS }}
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row
+ *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row
+ *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+ <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/compte-associe/compte-associe.component.ts
+
selector | +bgui-compte-associe |
+
standalone | +true |
+
imports | +
+ MatCardModule
+ MatButtonModule
+ CarouselComponent
+ |
+
templateUrl | +./compte-associe.component.html |
+
styleUrl | +./compte-associe.component.scss |
+
+ Properties+ |
+
+
|
+
import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { CarouselComponent } from '../shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-compte-associe',
+ standalone: true,
+ imports: [MatCardModule, MatButtonModule, CarouselComponent],
+ templateUrl: './compte-associe.component.html',
+ styleUrl: './compte-associe.component.scss',
+})
+export class CompteAssocieComponent {
+ carouselImage = [
+ {
+ imageSrc:
+ 'https://allo-tpe.fr/wp-content/uploads/2019/07/solution-cashless.jpg',
+ imageAlt: 'Image 3',
+ },
+ ];
+}
+
+ <p>compte-associe works!</p>
+<div>
+ <mat-card>
+ <mat-card-header>
+ <mat-card-title>Actions Buttons</mat-card-title>
+ <mat-card-subtitle>Start</mat-card-subtitle>
+ </mat-card-header>
+ <mat-card-actions>
+ <button mat-button>LIKE</button>
+ <button mat-button>SHARE</button>
+ </mat-card-actions>
+ </mat-card>
+ <button class="btn btn-danger">Sucess</button>
+</div>
+ +
+ src/app/assistances/assistance/create-service/create-service.component.ts
+
selector | +bgui-create-service |
+
standalone | +true |
+
imports | +
+ RouterLink
+ RouterOutlet
+ FormsModule
+ |
+
templateUrl | +./create-service.component.html |
+
styleUrl | +./create-service.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(services: ServiceService, router: Router)
+ |
+ |||||||||
+ + | +|||||||||
+
+ Parameters :
+
+
|
+
+ + + onSubmit + + + | +||||||
+onSubmit(service: IService)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ]
+ |
+
+ + | +
+ + + service + + + | +
+ Type : IService[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
import { ServiceService } from 'src/app/_services/service/service.service';
+import { Component } from '@angular/core';
+import { IService } from 'src/app/_interfaces/servives/service';
+import { RouterLink, RouterOutlet, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'bgui-create-service',
+ standalone: true,
+ imports: [RouterLink, RouterOutlet, FormsModule],
+ templateUrl: './create-service.component.html',
+ styleUrl: './create-service.component.scss',
+})
+export class CreateServiceComponent {
+ service: IService[] = [];
+
+ displayedColumns: string[] = [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ];
+
+ constructor(
+ private services: ServiceService,
+ private router: Router
+ ) {}
+
+ // ngOnInit(): void {
+ // this.services.getServices().subscribe((data: IService[]) => {
+ // this.service = data;
+ // console.log('service=>', this.service);
+ // //; this.dataSource.data = this.service;
+ // });
+ // }
+
+ onSubmit(service: IService) {
+ this.services.createService(service).subscribe({
+ next: createdService => {
+ console.log('Service créé avec succès:', createdService);
+ // Rediriger vers une autre page après la création du service (par exemple, la liste des services)
+ this.router.navigate(['/assistances/view-service']);
+
+ console.log('service==>', this.service);
+ },
+ error: error => {
+ console.error('Erreur lors de la création du service:', error);
+ // Gérer les erreurs ici (par exemple, afficher un message à l'utilisateur)
+ },
+ });
+ }
+}
+
+ <div class="content sm-gutter">
+ <div class="page-title mb-20">
+ <h3 style="margin-bottom: 25px">Ajouter Un Service</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <form
+ (ngSubmit)="onSubmit(serviceForm.value)"
+ #serviceForm="ngForm"
+ method="post">
+ <div class="row justify-content-center">
+ <div class="col-md-6 mb-2">
+ <label for="service_id">Id Service</label>
+ <input
+ type="text"
+ id="service_id"
+ placeholder="ID"
+ class="form-control"
+ name="service_id"
+ ngModel
+ required />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="nom_service">Nom Service</label>
+ <input
+ type="text"
+ id="nom_service"
+ placeholder="Nom Service"
+ class="form-control"
+ name="nom_service"
+ ngModel
+ required />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="description">Description</label>
+ <input
+ type="text"
+ id="description"
+ placeholder="Description"
+ class="form-control"
+ name="description"
+ ngModel
+ required />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="marchand">Marchand</label>
+ <input
+ type="text"
+ id="marchand"
+ placeholder="Marchand"
+ class="form-control"
+ name="marchand"
+ ngModel
+ required />
+ </div>
+ <div class="col-md-12">
+ <div class="d-flex justify-content-between mt-3">
+ <a
+ href="#"
+ class="btn-round btn btn-secondary btn-sm m-1"
+ routerLink="/assistances/view-service">
+ Retour <i class="fa fa-arrow-left"></i>
+ </a>
+ <button
+ type="submit"
+ class="btn btn-sm btn-success m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- <div class="content sm-gutter">
+ <div class="page-title mb-20">
+ <h3 style="margin-bottom: 25px">Ajouter Service</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <form method="post">
+ <div class="row justify-content-center">
+ <div class="col-md-6 mb-2">
+ <label for="service_id">Id Service</label>
+ <input
+ type="text"
+ id="service_id"
+ placeholder="ID"
+ class="form-control"
+ name="service_id"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="nom_service">Nom Service</label>
+ <input
+ type="text"
+ id="nom_service"
+ placeholder="Nom Service"
+ class="form-control"
+ name="nom_service"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="description">Description</label>
+ <input
+ type="text"
+ id="description"
+ placeholder="Description"
+ class="form-control"
+ name="description"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6 mb-2">
+ <label for="marchand">Marchand</label>
+ <input
+ type="text"
+ id="marchand"
+ placeholder="Marchand"
+ class="form-control"
+ name="marchand"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-12">
+ <div class="d-flex justify-content-between mt-3">
+ <a
+ href="#"
+ class="btn-round btn btn-secondary btn-sm m-1"
+ [routerLink]="['/assistances/view-service']">
+ Retour <i class="fa fa-arrow-left"></i>
+ </a>
+ <button
+ class="btn btn-sm btn-success m-1"
+ id="save_button">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div> -->
+
+<!-- <div class="grid">
+ <div class="col-12">
+ <div class="card px-6 py-6">
+ <p-toast></p-toast>
+ <p-toolbar styleClass="mb-4">
+ <ng-template pTemplate="left">
+ <div class="my-2">
+ <button
+ pButton
+ pRipple
+ label="New"
+ icon="pi pi-plus"
+ class="p-button-success mr-2"
+ (click)="openNew()"></button>
+ <button
+ pButton
+ pRipple
+ label="Delete"
+ icon="pi pi-trash"
+ class="p-button-danger"
+ (click)="deleteSelectedProducts()"
+ [disabled]="
+ !selectedProducts || !selectedProducts.length
+ "></button>
+ </div>
+ </ng-template>
+
+ <ng-template pTemplate="right">
+ <p-fileUpload
+ mode="basic"
+ accept="image/*"
+ [maxFileSize]="1000000"
+ label="Import"
+ chooseLabel="Import"
+ class="mr-2 inline-block"></p-fileUpload>
+ <button
+ pButton
+ pRipple
+ label="Export"
+ icon="pi pi-upload"
+ class="p-button-help"
+ (click)="dt.exportCSV()"></button>
+ </ng-template>
+ </p-toolbar>
+
+ <p-table
+ #dt
+ [value]="products"
+ [columns]="cols"
+ responsiveLayout="scroll"
+ [rows]="10"
+ [globalFilterFields]="[
+ 'name',
+ 'country.name',
+ 'representative.name',
+ 'status'
+ ]"
+ [paginator]="true"
+ [rowsPerPageOptions]="[10, 20, 30]"
+ [showCurrentPageReport]="true"
+ currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+ [(selection)]="selectedProducts"
+ selectionMode="multiple"
+ [rowHover]="true"
+ dataKey="id">
+ <ng-template pTemplate="caption">
+ <div
+ class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+ <h5 class="m-0">Manage Products</h5>
+ <span class="block mt-2 md:mt-0 p-input-icon-left">
+ <i class="pi pi-search"></i>
+ <input
+ pInputText
+ type="text"
+ (input)="onGlobalFilter(dt, $event)"
+ placeholder="Search..."
+ class="w-full sm:w-auto" />
+ </span>
+ </div>
+ </ng-template>
+ <ng-template pTemplate="header">
+ <tr>
+ <th pSortableColumn="code">
+ Code <p-sortIcon field="code"></p-sortIcon>
+ </th>
+ <th pSortableColumn="name">
+ Name <p-sortIcon field="name"></p-sortIcon>
+ </th>
+ <th pSortableColumn="price">
+ Price <p-sortIcon field="price"></p-sortIcon>
+ </th>
+ <th pSortableColumn="category">
+ Category <p-sortIcon field="category"></p-sortIcon>
+ </th>
+
+ <th pSortableColumn="inventoryStatus">
+ Status <p-sortIcon field="inventoryStatus"></p-sortIcon>
+ </th>
+ <th></th>
+ </tr>
+ </ng-template>
+ <ng-template pTemplate="body" let-product>
+ <tr>
+ <td style="width: 14%; min-width: 10rem">
+ <span class="p-column-title">Code</span>
+ {{ product.code || product.id }}
+ </td>
+ <td style="width: 14%; min-width: 10rem">
+ <span class="p-column-title">Name</span>
+ {{ product.name }}
+ </td>
+
+ <td style="width: 14%; min-width: 8rem">
+ <span class="p-column-title">Price</span>
+ {{ product.price | currency: 'USD' }}
+ </td>
+ <td style="width: 14%; min-width: 10rem">
+ <span class="p-column-title">Category</span>
+ {{ product.category }}
+ </td>
+
+ <td style="width: 14%; min-width: 10rem">
+ <span class="p-column-title">Status</span>
+ <span
+ [class]="
+ 'product-badge status-' +
+ (product.inventoryStatus
+ ? product.inventoryStatus.toLowerCase()
+ : '')
+ "
+ >{{ product.inventoryStatus }}</span
+ >
+ </td>
+ <td>
+ <div class="flex">
+ <button
+ pButton
+ pRipple
+ icon="pi pi-pencil"
+ class="p-button-rounded p-button-success mr-2"
+ (click)="editProduct(product)"></button>
+ <button
+ pButton
+ pRipple
+ icon="pi pi-trash"
+ class="p-button-rounded p-button-warning"
+ (click)="deleteProduct(product)"></button>
+ </div>
+ </td>
+ </tr>
+ </ng-template>
+ </p-table>
+ </div>
+
+ <p-dialog
+ [(visible)]="productDialog"
+ [style]="{ width: '450px' }"
+ header="Product Details"
+ [modal]="true"
+ class="p-fluid">
+ <ng-template pTemplate="content">
+ <div class="field">
+ <label for="name">Name</label>
+ <input
+ type="text"
+ pInputText
+ id="name"
+ [(ngModel)]="product.name"
+ required
+ [ngClass]="{ 'ng-invalid ng-dirty': submitted && !product.name }" />
+ <small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name"
+ >Name is required.</small
+ >
+ </div>
+ <div class="field">
+ <label for="description">Description</label>
+ <textarea
+ id="description"
+ pInputTextarea
+ [(ngModel)]="product.description"
+ required
+ rows="3"
+ cols="20"></textarea>
+ </div>
+ <div class="field">
+ <label for="status">Inventory Status</label>
+ <p-dropdown
+ [(ngModel)]="product.inventoryStatus"
+ inputId="inventoryStatus"
+ optionValue="label"
+ [options]="statuses"
+ placeholder="Select">
+ <ng-template pTemplate="selectedItem">
+ <span
+ *ngIf="product && product.inventoryStatus"
+ [class]="
+ 'product-badge status-' +
+ product.inventoryStatus.toString().toLowerCase()
+ "
+ >{{ product.inventoryStatus }}</span
+ >
+ </ng-template>
+ <ng-template let-option pTemplate="item">
+ <span [class]="'product-badge status-' + option.value">{{
+ option.label
+ }}</span>
+ </ng-template>
+ </p-dropdown>
+ </div>
+
+ <div class="field">
+ <label class="mb-3">Category</label>
+ <div class="formgrid grid">
+ <div class="field-radiobutton col-6">
+ <p-radioButton
+ id="category1"
+ name="category"
+ value="Accessories"
+ [(ngModel)]="product.category"></p-radioButton>
+ <label for="category1">Accessories</label>
+ </div>
+ <div class="field-radiobutton col-6">
+ <p-radioButton
+ id="category2"
+ name="category"
+ value="Clothing"
+ [(ngModel)]="product.category"></p-radioButton>
+ <label for="category2">Clothing</label>
+ </div>
+ <div class="field-radiobutton col-6">
+ <p-radioButton
+ id="category3"
+ name="category"
+ value="Electronics"
+ [(ngModel)]="product.category"></p-radioButton>
+ <label for="category3">Electronics</label>
+ </div>
+ <div class="field-radiobutton col-6">
+ <p-radioButton
+ id="category4"
+ name="category"
+ value="Fitness"
+ [(ngModel)]="product.category"></p-radioButton>
+ <label for="category4">Fitness</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="formgrid grid">
+ <div class="field col">
+ <label for="price">Price</label>
+ <p-inputNumber
+ id="price"
+ [(ngModel)]="product.price"
+ mode="currency"
+ currency="USD"
+ locale="en-US"></p-inputNumber>
+ </div>
+ <div class="field col">
+ <label for="quantity">Quantity</label>
+ <p-inputNumber
+ id="quantity"
+ [(ngModel)]="product.quantity"></p-inputNumber>
+ </div>
+ </div>
+ </ng-template>
+
+ <ng-template pTemplate="footer">
+ <button
+ pButton
+ pRipple
+ label="Cancel"
+ icon="pi pi-times"
+ class="p-button-text"
+ (click)="hideDialog()"></button>
+ <button
+ pButton
+ pRipple
+ label="Save"
+ icon="pi pi-check"
+ class="p-button-text"
+ (click)="saveProduct()"></button>
+ </ng-template>
+ </p-dialog>
+
+ <p-dialog
+ [(visible)]="deleteProductDialog"
+ header="Confirm"
+ [modal]="true"
+ [style]="{ width: '450px' }">
+ <div class="flex align-items-center justify-content-center">
+ <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+ <span *ngIf="product"
+ >Are you sure you want to delete <b>{{ product.name }}</b
+ >?</span
+ >
+ </div>
+ <ng-template pTemplate="footer">
+ <button
+ pButton
+ pRipple
+ icon="pi pi-times"
+ class="p-button-text"
+ label="No"
+ (click)="deleteProductDialog = false"></button>
+ <button
+ pButton
+ pRipple
+ icon="pi pi-check"
+ class="p-button-text"
+ label="Yes"
+ (click)="confirmDelete()"></button>
+ </ng-template>
+ </p-dialog>
+
+ <p-dialog
+ [(visible)]="deleteProductsDialog"
+ header="Confirm"
+ [modal]="true"
+ [style]="{ width: '450px' }">
+ <div class="flex align-items-center justify-content-center">
+ <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
+ <span>Are you sure you want to delete selected products?</span>
+ </div>
+ <ng-template pTemplate="footer">
+ <button
+ pButton
+ pRipple
+ icon="pi pi-times"
+ class="p-button-text"
+ label="No"
+ (click)="deleteProductsDialog = false"></button>
+ <button
+ pButton
+ pRipple
+ icon="pi pi-check"
+ class="p-button-text"
+ label="Yes"
+ (click)="confirmDeleteSelected()"></button>
+ </ng-template>
+ </p-dialog>
+ </div>
+</div> -->
+
+ +
+ src/app/utilisateurs/create-users/create-users.component.ts
+
selector | +bgui-create-users |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ ReactiveFormsModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./create-users.component.html |
+
styleUrl | +./create-users.component.scss |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + register + + + | +
+register()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + email + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + ffPassword + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + lastName + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + name + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + password + + + | +
+ Type : string
+
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-create-users',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './create-users.component.html',
+ styleUrl: './create-users.component.scss',
+})
+export class CreateUsersComponent {
+ name!: string;
+ lastName!: string;
+ email!: string;
+ password!: string;
+ ffPassword!: string;
+ images = [
+ {
+ imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ {
+ imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ ];
+
+ isActive = false;
+
+ register() {}
+}
+
+ <!-- <section
+ class="fxt-template-animation fxt-template-layout20 imagedefont m-125 d-flex justify-content-center align-items-center">
+ <div class="container-fluid">
+ <div
+ [class.mat-elevation-z1]="!isActive"
+ class="row fxt-bg-color fxt-templateshadow-01">
+ <div class="row mt-5">
+ <div class="col"></div>
+ <div class="col-4">
+ <div class="card shadow">
+ <div class="card-body">
+ <form>
+ <div class="mb-3">
+ <h4 class="text-dark text-muted">Ajouter un Utilisateur</h4>
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputName" class="form-label">Nom</label>
+ <input
+ type="text"
+ class="form-control"
+ name="name"
+ [(ngModel)]="name" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputLastName" class="form-label"
+ >Prenoms</label
+ >
+ <input
+ type="text"
+ class="form-control"
+ name="lastName"
+ [(ngModel)]="lastName" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputEmail1" class="form-label"
+ >Email</label
+ >
+ <input
+ type="email"
+ class="form-control"
+ name="email"
+ [(ngModel)]="email" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputPassword1" class="form-label"
+ >Password</label
+ >
+ <input
+ type="password"
+ class="form-control"
+ name="password"
+ [(ngModel)]="password" />
+ </div>
+ <div class="mb-3">
+ <label for="exampleInputPassword1" class="form-label"
+ >Confirmer mot de passe</label
+ >
+ <input
+ type="password"
+ class="form-control"
+ name="password"
+ [(ngModel)]="ffPassword" />
+ </div>
+ <button type="button" class="btn btn-info" (click)="register()">
+ S'enregistrer
+ </button>
+ <div class="row">
+ <div class="col-md-8"></div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col"></div>
+ </div>
+ </div>
+ </div>
+</section> -->
+<div class="content sm-gutter">
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <h5 class="mb-3">Ajouter Utilisateur</h5>
+ <form method="post">
+ <div class="row">
+ <div class="col-md-5 mb-2">
+ <input
+ type="text"
+ placeholder="Nom"
+ class="form-control"
+ name="first_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-5">
+ <input
+ type="email"
+ placeholder="Email"
+ class="form-control"
+ name="username"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Mot de passe"
+ class="form-control"
+ name="password"
+ value=""
+ required="" />
+ </div>
+ <input
+ type="hidden"
+ class="form-control"
+ name="user_id"
+ value="2807" />
+ <input
+ type="hidden"
+ class="form-control"
+ name="id"
+ value="" />
+
+ <div class="col-md-12 row" style="margin-top: 30px">
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Transactions" />
+ Transactions
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Liste reversement" />
+ Liste reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Demande de reversement" />
+ Demande de reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Services" />
+ Services
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Intégrations" />
+ Intégrations
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Application android" />
+ Application android
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Compte associé" />
+ Compte associé
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Utilisateurs" />
+ Utilisateurs
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mon profile" />
+ Mon profile
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Modifer" />
+ Modifer
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mot de passe" />
+ Mot de passe
+ </label>
+ </div>
+ </div>
+
+ <div class="col-md-12 text-center">
+ <br />
+ <div class="card-title">
+ <button
+ id="add_ppci_other_user"
+ class="btn-round btn btn-primary btn-sm m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!--
+ <form wire:submit.prevent="save" class="modal-content">
+ <input
+ type="hidden"
+ name="_token"
+ value="PN3yV71V0PnUv5xQGSpaHSOlUAPt5ZJ60AN2NWit" />
+ <div class="modal-header">
+ <h1 class="modal-title fs-5" id="exampleModalLabel">
+ Modifier l'utilisateur
+ </h1>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close"></button>
+ </div>
+
+ <div class="text-center" id="update-loader" style="display: none">
+ <div class="spinner-border" role="status">
+ <span class="visually-hidden">Loading...</span>
+ </div>
+ </div>
+
+ <div class="modal-body row" id="update-body">
+ <div class="mb-3 col-md-12">
+ <label for="lastname" class="form-label">Nom</label>
+ <input
+ wire:model="lastname"
+ type="text"
+ required=""
+ id="lastname"
+ class="form-control" />
+ </div>
+ <div class="mb-3 col-md-12">
+ <label for="firstname" class="form-label">Prénom(s)</label>
+ <input
+ wire:model="firstname"
+ type="text"
+ required=""
+ id="firstname"
+ class="form-control" />
+ </div>
+ <div class="mb-3 col-md-12">
+ <label for="email" class="form-label">Email</label>
+ <input
+ wire:model="email"
+ type="text"
+ required=""
+ id="email"
+ class="form-control" />
+ </div>
+ <div class="mb-3 col-md-12">
+ <label for="role" class="form-label">Rôle</label>
+ <select wire:model="role" required="" class="form-select" id="role">
+ <option value="67">Administrateur</option>
+ <option value="68">Finance Edition</option>
+ <option value="69">Finance Consultation</option>
+ <option value="70">Support & Assistance</option>
+ <option value="71">Exploitation historique transactions</option>
+ <option value="72">Exploitation historique paiement entrant</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="modal-footer">
+ <button type="button" class="btn btn-link" data-bs-dismiss="modal">
+ Retour
+ </button>
+ <button type="submit" class="btn btn-primary">
+ Modifier
+ <span wire:loading="" wire:target="save">
+ <svg
+ wire:id="ik25iNsobRi2FZQu80We"
+ width="38"
+ height="20"
+ viewBox="0 0 38 38"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient
+ x1="8.042%"
+ y1="0%"
+ x2="65.682%"
+ y2="23.865%"
+ id="a">
+ <stop stop-color="#fff" stop-opacity="0" offset="0%"></stop>
+ <stop
+ stop-color="#fff"
+ stop-opacity=".631"
+ offset="63.146%"></stop>
+ <stop stop-color="#fff" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <g transform="translate(1 1)">
+ <path
+ d="M36 18c0-9.94-8.06-18-18-18"
+ id="Oval-2"
+ stroke="url(#a)"
+ stroke-width="2">
+ <animateTransform
+ attributeName="transform"
+ type="rotate"
+ from="0 18 18"
+ to="60 18 18"
+ dur="0.9s"
+ repeatCount="indefinite"></animateTransform>
+ </path>
+ <circle fill="#fff" cx="36" cy="18" r="1">
+ <animateTransform
+ attributeName="transform"
+ type="rotate"
+ from="0 18 18"
+ to="360 18 18"
+ dur="0.9s"
+ repeatCount="indefinite"></animateTransform>
+ </circle>
+ </g>
+ </g>
+ </svg>
+ </span>
+ </button>
+ </div>
+</form>
+
+-->
+<!-- Formulaire modal -->
+<!-- <div class="display mt-n4">
+ <div
+ class="modal fade"
+ id="exampleModal"
+ tabindex="-1"
+ aria-labelledby="exampleModalLabel"
+ aria-hidden="true">
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title fs-4" id="exampleModalLabel">
+ Ajouter un User
+ </h1>
+ </div>
+ <div class="modal-body">
+ <div class="row">
+ <div class="col-md-6 mb-2">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6 mb-2">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-6 mb-2">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-secondary"
+ data-bs-dismiss="modal">
+ Close
+ </button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div> -->
+
+ +
+ src/app/integrations/integration/dart/dart.component.ts
+
selector | +bgui-dart |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./dart.component.html |
+
styleUrl | +./dart.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-dart',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './dart.component.html',
+ styleUrl: './dart.component.scss',
+})
+export class DartComponent {}
+
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">Dart</span></h3>
+</div>
+<section>
+ <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>
+ <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>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</section>
+
+<
+
+ +
+ src/app/assistances/assistance/delete-service/delete-service.component.ts
+
selector | +bgui-delete-service |
+
standalone | +true |
+
templateUrl | +./delete-service.component.html |
+
styleUrl | +./delete-service.component.scss |
+
import { Component } from '@angular/core';
+
+@Component({
+ selector: 'bgui-delete-service',
+ standalone: true,
+ imports: [],
+ templateUrl: './delete-service.component.html',
+ styleUrl: './delete-service.component.scss'
+})
+export class DeleteServiceComponent {
+
+}
+
+ <p>delete-service works!</p>
+
+ +
+ src/app/utilisateurs/delete-user/delete-user.component.ts
+
selector | +bgui-delete-user |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
templateUrl | +./delete-user.component.html |
+
styleUrl | +./delete-user.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'bgui-delete-user',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './delete-user.component.html',
+ styleUrl: './delete-user.component.scss',
+})
+export class DeleteUserComponent {}
+
+
+ +
+ src/app/reversements/reversement/demande/demande.component.ts
+
selector | +bgui-demande |
+
standalone | +true |
+
templateUrl | +./demande.component.html |
+
styleUrl | +./demande.component.scss |
+
import { Component } from '@angular/core';
+
+@Component({
+ selector: 'bgui-demande',
+ standalone: true,
+ imports: [],
+ templateUrl: './demande.component.html',
+ styleUrl: './demande.component.scss'
+})
+export class DemandeComponent {
+
+}
+
+ <div class="container">
+ <div class="row">
+ <div class="col">
+ <h3 class="page-title">Demande de Reversements</h3>
+ </div>
+ </div>
+</div>
+<div class="row m-4">
+ <div class="col-md-12">
+ <div class="card">
+ <div class="card-header">
+ <h4 class="card-title" style="text-align: center; font-size: 25px">
+ Demande de reversement
+ </h4>
+ </div>
+ <div class="card-body">
+ <form
+ method="post"
+ action="add_ppci_reversement"
+ class="add_ppci_reversement">
+ <div class="row">
+ <div class="col-md-6 offset-md-3">
+ <label for="montant">Montant</label>
+ <input
+ type="number"
+ min="1000"
+ max="0"
+ name="montant"
+ class="form-control form-control-sm"
+ required />
+ <input type="hidden" name="provider" value="PP-F2736" />
+ </div>
+ <div class="col-md-6 offset-md-3">
+ <br />
+ <label for="type">Moyen de Reversements</label>
+ <select
+ name="type"
+ style="width: 100%"
+ class="form-control select2">
+ <!-- Options à remplir -->
+ </select>
+ </div>
+ <div class="col-md-12 text-center">
+ <br />
+ <button id="add_ppci_reversement" class="btn btn-primary btn-sm">
+ Soumettre <i class="fa fa-paper-plane"></i>
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/assistances/assistance/edit-service/edit-service.component.ts
+
selector | +bgui-edit-service |
+
standalone | +true |
+
imports | +
+ RouterLink
+ RouterOutlet
+ |
+
templateUrl | +./edit-service.component.html |
+
styleUrl | +./edit-service.component.scss |
+
+ Properties+ |
+
+
|
+
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ]
+ |
+
+ + | +
+ + + service + + + | +
+ Type : IService[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { IService } from 'src/app/_interfaces/servives/service';
+
+@Component({
+ selector: 'bgui-edit-service',
+ standalone: true,
+ imports: [RouterLink, RouterOutlet],
+ templateUrl: './edit-service.component.html',
+ styleUrl: './edit-service.component.scss',
+})
+export class EditServiceComponent {
+ service: IService[] = [];
+
+ displayedColumns: string[] = [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ];
+}
+
+ <div class="content sm-gutter">
+ <div class="page-title mb-20">
+ <h3 style="margin-bottom: 25px">Service</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <h5 class="mb-3">Ajouter Service</h5>
+ <form method="post">
+ <div class="row">
+ <div class="col-md-5 mb-2">
+ Id Service
+ <input
+ type="text"
+ placeholder="ID"
+ class="form-control"
+ name="service_id"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5 mb-2">
+ Nom Service
+ <input
+ type="text"
+ placeholder="Nom Service"
+ class="form-control"
+ name="nom_service"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-5 mb-2">
+ Description
+ <input
+ type="text"
+ placeholder="Description"
+ class="form-control"
+ name="description"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5 mb-2">
+ Marchand
+ <input
+ type="text"
+ placeholder="marchand"
+ class="form-control"
+ name="marchand"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-12">
+ <div class="d-flex justify-content-between mt-3">
+ <div class="card-title">
+ <a
+ href="#"
+ class="btn-round btn btn-secondary btn-sm m-1"
+ [routerLink]="['assistance/view-service']">
+ Retour <i class="fa fa-arrow-left"></i>
+ </a>
+ </div>
+ <div class="card-title">
+ <button
+ class="btn btn-sm btn-success m-2"
+ id="save_button"
+ class="btn-round btn btn-primary btn-sm m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/utilisateurs/edit-user/edit-user.component.ts
+
selector | +bgui-edit-user |
+
standalone | +true |
+
imports | +
+ CommonModule
+ MatPaginator
+ MatTableModule
+ MatFormFieldModule
+ MatInputModule
+ CarouselComponent
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterOutlet
+ MatPaginatorModule
+ RouterLink
+ FormsModule
+ MatMenuModule
+ |
+
templateUrl | +./edit-user.component.html |
+
styleUrl | +./edit-user.component.scss |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + register + + + | +
+register()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + email + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + ffPassword + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + lastName + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + name + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + password + + + | +
+ Type : string
+
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
+import { RouterOutlet, RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-edit-user',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatPaginator,
+ MatTableModule,
+ MatFormFieldModule,
+ MatInputModule,
+ CarouselComponent,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterOutlet,
+ MatPaginatorModule,
+ RouterLink,
+ FormsModule,
+ MatMenuModule,
+ ],
+ templateUrl: './edit-user.component.html',
+ styleUrl: './edit-user.component.scss',
+})
+export class EditUserComponent {
+ name!: string;
+ lastName!: string;
+ email!: string;
+ password!: string;
+ ffPassword!: string;
+ images = [
+ {
+ imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ {
+ imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ ];
+
+ // email = new FormControl('', [Validators.required, Validators.email]);
+ // password = new FormControl('', [Validators.required]);
+
+ // form: any = {
+ // email: '',
+ // password: '',
+ // };
+
+ // getErrorMessage() {
+ // if (this.email.hasError('required')) {
+ // return 'Impossible de trouver votre compte Beasy';
+ // }
+
+ // return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+ // }
+
+ // getErrorAuth() {
+ // this.msgAuth = '';
+ // }
+
+ // hide = true;
+ isActive = false;
+
+ // msgAuth = '';
+
+ // private router = inject(Router);
+
+ // constructor(private router:Router) {
+ // //...
+ // }
+
+ // ngOnInit(): void {
+ // //...
+ // }
+
+ // onSubmit(): void {
+ // console.log(this.form);
+ // this.connexionlogin();
+ // }
+ // connexionlogin() {
+ // //console.log("Nous sommes ici");
+ // if (
+ // this.form.email === 'mrfrancice@gmail.com' &&
+ // this.form.password === 'p@ssw0rd'
+ // ) {
+ // localStorage.setItem('isLoggedIn', 'true');
+ // localStorage.setItem('token', this.form.email);
+ // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ // console.log("Redirection vers 'dash'");
+ // this.router.navigate(['/admin']);
+ // //window.location.href = '/';
+ // } else {
+ // this.router.navigate(['/auth']);
+ // this.msgAuth = 'Login ou PassWord incorrect...';
+ // }
+ // }
+
+ register() {}
+}
+
+ <div class="content sm-gutter">
+ <!-- END DASHBOARD TILES -->
+ <div class="row">
+ <!-- BEGIN WORLD MAP WIDGET - MAP -->
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <h5 class="mb-3">Modifer Utilisateur</h5>
+ <form
+ method="post"
+ action="add_ppci_other_user"
+ class="add_ppci_other_user">
+ <div class="row">
+ <div class="col-md-5 mb-2">
+ <input
+ type="text"
+ placeholder="Nom"
+ class="form-control"
+ name="first_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-5">
+ <input
+ type="email"
+ placeholder="Email"
+ class="form-control"
+ name="username"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Mot de passe"
+ class="form-control"
+ name="password"
+ value=""
+ required="" />
+ </div>
+ <input
+ type="hidden"
+ class="form-control"
+ name="user_id"
+ value="2807" />
+ <input
+ type="hidden"
+ class="form-control"
+ name="id"
+ value="" />
+
+ <div class="col-md-12 row" style="margin-top: 30px">
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Transactions" />
+ Transactions
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Liste reversement" />
+ Liste reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Demande de reversement" />
+ Demande de reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Services" />
+ Services
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Intégrations" />
+ Intégrations
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Application android" />
+ Application android
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Compte associé" />
+ Compte associé
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Utilisateurs" />
+ Utilisateurs
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mon profile" />
+ Mon profile
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Modifer" />
+ Modifer
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mot de passe" />
+ Mot de passe
+ </label>
+ </div>
+ </div>
+
+ <div class="col-md-12 text-center">
+ <br />
+ <div class="card-title">
+ <button
+ id="add_ppci_other_user"
+ class="btn-round btn btn-primary btn-sm m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/facturation/facturation-add/facturation-add.component.ts
+
selector | +bgui-facturation-add |
+
standalone | +true |
+
templateUrl | +./facturation-add.component.html |
+
styleUrl | +./facturation-add.component.scss |
+
import { Component } from '@angular/core';
+
+@Component({
+ selector: 'bgui-facturation-add',
+ standalone: true,
+ imports: [],
+ templateUrl: './facturation-add.component.html',
+ styleUrl: './facturation-add.component.scss'
+})
+export class FacturationAddComponent {
+
+}
+
+
+ +
+ src/app/facturation/facturation.component.ts
+
selector | +bgui-facturation |
+
standalone | +true |
+
imports | +
+ FacturationAddComponent
+ |
+
templateUrl | +./facturation.component.html |
+
styleUrl | +./facturation.component.scss |
+
import { Component } from '@angular/core';
+import { FacturationAddComponent } from './facturation-add/facturation-add.component';
+
+@Component({
+ selector: 'bgui-facturation',
+ standalone: true,
+ imports: [FacturationAddComponent],
+ templateUrl: './facturation.component.html',
+ styleUrl: './facturation.component.scss',
+})
+export class FacturationComponent {}
+
+ <bgui-facturation-add />
+
+ +
+ src/app/core/layout/footer/footer.component.ts
+
selector | +bgui-footer |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./footer.component.scss |
+
templateUrl | +./footer.component.html |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'bgui-footer',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './footer.component.html',
+ styleUrls: ['./footer.component.scss'],
+})
+export class FooterComponent {}
+
+
+
+ ./footer.component.scss
+
+ +
+ src/app/account/auth/forgot-password/forgot-password.component.ts
+
selector | +bgui-forgot-password |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ ReactiveFormsModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ AdminTestComponent
+ |
+
templateUrl | +./forgot-password.component.html |
+
styleUrl | +./forgot-password.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + forgotPassword + + + | +
+forgotPassword()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + email + + + | +
+ Type : any
+
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { AdminTestComponent } from 'src/app/admin-test/admin-test.component';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-forgot-password',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ AdminTestComponent,
+ ],
+ templateUrl: './forgot-password.component.html',
+ styleUrl: './forgot-password.component.scss',
+})
+export class ForgotPasswordComponent {
+ forgotPassword() {
+ throw new Error('Method not implemented.');
+ }
+ email: any;
+}
+
+
+<div class="container-fluid">
+ <div class="row mt-5">
+ <div class="col"></div>
+ <div class="col-4">
+ <div class="card shadow">
+ <div class="card-body">
+ <form>
+ <div class="mb-3">
+ <h4 class="text-dark text-muted">Réinitialiser votre mot de passe</h4>
+ </div>
+ <div class="mb-3">
+ <label for="exampleInputEmail1" class="form-label">Email</label>
+ <input type="email" class="form-control" name="email" [(ngModel)]="email" placeholder="Veuillez entrer votre Adresse mail">
+ </div>
+ <button type="button" class="btn btn-info" (click)="forgotPassword()">Envoyé lien</button>
+ <div class="" style="display: block;">
+
+ <div class="col-md-8 ">
+ <a href="auth/login-standard-user" style="text-decoration: none;"><span class="text-danger">Se Connecter</span></a>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col"></div>
+ </div>
+</div>
+ +
+ src/app/ui/forms-fields/forms-fields.component.ts
+
selector | +bgui-forms-fields |
+
standalone | +true |
+
imports | +
+ MatFormField
+ MatFormFieldModule
+ MatLabel
+ MatHint
+ MatButtonModule
+ MatInput
+ MatPrefix
+ MatSuffix
+ MatIcon
+ MatIconButton
+ MatTooltip
+ MatIconAnchor
+ RouterLink
+ FormsModule
+ MatSelect
+ MatOption
+ |
+
templateUrl | +./forms-fields.component.html |
+
styleUrl | +./forms-fields.component.scss |
+
+ Properties+ |
+
+ + | +
+ + + foods + + + | +
+ Type : Food[]
+
+ |
+
+ Default value : [
+ { value: 'steak-0', viewValue: 'Steak' },
+ { value: 'pizza-1', viewValue: 'Pizza' },
+ { value: 'tacos-2', viewValue: 'Tacos' },
+ ]
+ |
+
+ + | +
+ + + value + + + | +
+ Type : string
+
+ |
+
+ Default value : 'Clear me'
+ |
+
+ + | +
import { Component } from '@angular/core';
+import {
+ MatFormField,
+ MatLabel,
+ MatHint,
+ MatPrefix,
+ MatSuffix,
+ MatFormFieldModule,
+} from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatIcon } from '@angular/material/icon';
+import {
+ MatButtonModule,
+ MatIconAnchor,
+ MatIconButton,
+} from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatOption, MatSelect } from '@angular/material/select';
+
+interface Food {
+ value: string;
+ viewValue: string;
+}
+
+@Component({
+ selector: 'bgui-forms-fields',
+ standalone: true,
+ imports: [
+ MatFormField,
+ MatFormFieldModule,
+ MatLabel,
+ MatHint,
+ MatButtonModule,
+ MatInput,
+ MatPrefix,
+ MatSuffix,
+ MatIcon,
+ MatIconButton,
+ MatTooltip,
+ MatIconAnchor,
+ RouterLink,
+ FormsModule,
+ MatSelect,
+ MatOption,
+ ],
+ templateUrl: './forms-fields.component.html',
+ styleUrl: './forms-fields.component.scss',
+})
+export class FormsFieldsComponent {
+ value = 'Clear me';
+
+ foods: Food[] = [
+ { value: 'steak-0', viewValue: 'Steak' },
+ { value: 'pizza-1', viewValue: 'Pizza' },
+ { value: 'tacos-2', viewValue: 'Tacos' },
+ ];
+}
+
+ <div class="row">
+ <div class="col-sm-6">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <form class="example-form">
+ <mat-form-field class="w-100">
+ <mat-label>Company (disabled)</mat-label>
+ <input matInput disabled value="Google" />
+ </mat-form-field>
+
+ <table class="w-100">
+ <tr>
+ <td>
+ <mat-form-field class="w-100">
+ <mat-label>First name</mat-label>
+ <input matInput />
+ </mat-form-field>
+ </td>
+ <td>
+ <mat-form-field class="w-100">
+ <mat-label>Long Last Name That Will Be Truncated</mat-label>
+ <input matInput />
+ </mat-form-field>
+ </td>
+ </tr>
+ </table>
+
+ <p>
+ <mat-form-field class="w-100">
+ <mat-label>Address</mat-label>
+ <textarea matInput placeholder="Ex. 100 Main St">
+1600 Amphitheatre Pkwy</textarea
+ >
+ </mat-form-field>
+ <mat-form-field class="w-100">
+ <mat-label>Address 2</mat-label>
+ <textarea matInput></textarea>
+ </mat-form-field>
+ </p>
+
+ <table class="w-100">
+ <tr>
+ <td>
+ <mat-form-field class="w-100">
+ <mat-label>City</mat-label>
+ <input matInput placeholder="Ex. San Francisco" />
+ </mat-form-field>
+ </td>
+ <td>
+ <mat-form-field class="w-100">
+ <mat-label>State</mat-label>
+ <input matInput placeholder="Ex. California" />
+ </mat-form-field>
+ </td>
+ <td>
+ <mat-form-field class="w-100">
+ <mat-label>Postal Code</mat-label>
+ <input
+ matInput
+ #postalCode
+ maxlength="5"
+ placeholder="Ex. 94105"
+ value="94043" />
+ <mat-hint>{{ postalCode.value.length }} / 5</mat-hint>
+ </mat-form-field>
+ </td>
+ </tr>
+ </table>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-6">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <form class="example-form">
+ <mat-form-field class="example-full-width">
+ <mat-label>Telephone</mat-label>
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <mat-icon matSuffix fontSet="material-symbols-rounded"
+ >face</mat-icon
+ >
+ </mat-form-field>
+ </form>
+
+ <form class="example-form">
+ <mat-form-field class="example-full-width">
+ <mat-label>Telephone</mat-label>
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <button
+ mat-icon-button
+ matSuffix
+ matTooltip="Accent"
+ color="accent"
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>more_vert</mat-icon>
+ </button>
+ </mat-form-field>
+ </form>
+
+ <form>
+ <div class="row mb-3">
+ <label for="inputEmail3" class="col-sm-2 col-form-label"
+ >Email</label
+ >
+ <div class="col-sm-10">
+ <form class="">
+ <mat-form-field class="w-100 hpte">
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <mat-icon matSuffix fontSet="material-symbols-rounded"
+ >face</mat-icon
+ >
+ </mat-form-field>
+ </form>
+ </div>
+ </div>
+ <div class="row mb-3">
+ <label for="inputPassword3" class="col-sm-2 col-form-label"
+ >Password</label
+ >
+ <div class="col-sm-10">
+ <form class="">
+ <mat-form-field class="w-100 hpte">
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <mat-icon matSuffix fontSet="material-symbols-rounded"
+ >face</mat-icon
+ >
+ </mat-form-field>
+ </form>
+ </div>
+ </div>
+ <fieldset class="row mb-3">
+ <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
+ <div class="col-sm-10">
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios1"
+ value="option1"
+ checked />
+ <label class="form-check-label" for="gridRadios1">
+ First radio
+ </label>
+ </div>
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios2"
+ value="option2" />
+ <label class="form-check-label" for="gridRadios2">
+ Second radio
+ </label>
+ </div>
+ <div class="form-check disabled">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios3"
+ value="option3"
+ disabled />
+ <label class="form-check-label" for="gridRadios3">
+ Third disabled radio
+ </label>
+ </div>
+ </div>
+ </fieldset>
+ <div class="row mb-3">
+ <div class="col-sm-10 offset-sm-2">
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="checkbox"
+ id="gridCheck1" />
+ <label class="form-check-label" for="gridCheck1">
+ Example checkbox
+ </label>
+ </div>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Sign in</button>
+ </form>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-6">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+
+ <form>
+ <div class="row mb-3">
+ <label for="inputEmail3" class="col-sm-2 col-form-label"
+ >Email</label
+ >
+ <div class="col-sm-10">
+ <form class="">
+ <mat-form-field class="w-100 hpte">
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <mat-icon matSuffix fontSet="material-symbols-rounded"
+ >face</mat-icon
+ >
+ </mat-form-field>
+ </form>
+ </div>
+ </div>
+ <div class="row mb-3">
+ <label for="inputEmail3" class="col-sm-2 col-form-label"
+ >Email</label
+ >
+ <div class="col-sm-10">
+ <mat-form-field class="w-100">
+ <mat-select>
+ @for (food of foods; track food) {
+ <mat-option [value]="food.value">{{
+ food.viewValue
+ }}</mat-option>
+ }
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="row mb-3">
+ <label for="inputPassword3" class="col-sm-2 col-form-label"
+ >Password</label
+ >
+ <div class="col-sm-10">
+ <form class="">
+ <mat-form-field class="w-100">
+ <span matTextPrefix>+1 </span>
+ <input type="tel" matInput placeholder="555-555-1234" />
+ <mat-icon matSuffix fontSet="material-symbols-rounded"
+ >face</mat-icon
+ >
+ </mat-form-field>
+ </form>
+ </div>
+ </div>
+ <fieldset class="row mb-3">
+ <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
+ <div class="col-sm-10">
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios1"
+ value="option1"
+ checked />
+ <label class="form-check-label" for="gridRadios1">
+ First radio
+ </label>
+ </div>
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios2"
+ value="option2" />
+ <label class="form-check-label" for="gridRadios2">
+ Second radio
+ </label>
+ </div>
+ <div class="form-check disabled">
+ <input
+ class="form-check-input"
+ type="radio"
+ name="gridRadios"
+ id="gridRadios3"
+ value="option3"
+ disabled />
+ <label class="form-check-label" for="gridRadios3">
+ Third disabled radio
+ </label>
+ </div>
+ </div>
+ </fieldset>
+ <div class="row mb-3">
+ <div class="col-sm-10 offset-sm-2">
+ <div class="form-check">
+ <input
+ class="form-check-input"
+ type="checkbox"
+ id="gridCheck1" />
+ <label class="form-check-label" for="gridCheck1">
+ Example checkbox
+ </label>
+ </div>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-primary">Sign in</button>
+ </form>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+</div>
+
+<h3>Icon Buttons</h3>
+<div class="example-button-row">
+ <button
+ mat-icon-button
+ matTooltip="Basic"
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Primary"
+ color="primary"
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Accent"
+ color="accent"
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Warn"
+ color="warn"
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ <div matTooltip="Disabled" class="example-disabled">
+ <button
+ mat-icon-button
+ disabled
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </button>
+ </div>
+ <a
+ mat-icon-button
+ matTooltip="Link"
+ routerLink="."
+ aria-label="Example icon-button with a heart icon">
+ <mat-icon>favorite</mat-icon>
+ </a>
+</div>
+
+ +
+ src/app/integrations/integrations.component.ts
+
selector | +bgui-integrations |
+
standalone | +true |
+
imports | +
+ CodeProviderComponent
+ DartComponent
+ JavaScriptComponent
+ MoodelComponent
+ PhpComponent
+ PrestashopComponent
+ WordpressComponent
+ RouterOutlet
+ |
+
templateUrl | +./integrations.component.html |
+
styleUrl | +./integrations.component.scss |
+
import { Component } from '@angular/core';
+import { CodeProviderComponent } from './integration/code-provider/code-provider.component';
+import { DartComponent } from './integration/dart/dart.component';
+import { JavaScriptComponent } from './integration/java-script/java-script.component';
+import { MoodelComponent } from './integration/moodel/moodel.component';
+import { PhpComponent } from './integration/php/php.component';
+import { PrestashopComponent } from './integration/prestashop/prestashop.component';
+import { WordpressComponent } from './integration/wordpress/wordpress.component';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+ selector: 'bgui-integrations',
+ standalone: true,
+ imports: [
+ CodeProviderComponent,
+ DartComponent,
+ JavaScriptComponent,
+ MoodelComponent,
+ PhpComponent,
+ PrestashopComponent,
+ WordpressComponent,
+ RouterOutlet,
+ ],
+ templateUrl: './integrations.component.html',
+ styleUrl: './integrations.component.scss',
+})
+export class IntegrationsComponent {}
+
+ <router-outlet></router-outlet>
+
+ +
+ src/app/integrations/integration/java-script/java-script.component.ts
+
selector | +bgui-java-script |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./java-script.component.html |
+
styleUrl | +./java-script.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-java-script',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './java-script.component.html',
+ styleUrl: './java-script.component.scss',
+})
+export class JavaScriptComponent {}
+
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">JavaScript</span></h3>
+</div>
+<section>
+ <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>
+ <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>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</section>
+
+ +
+ src/app/shared/ui/loader/loader.component.ts
+
selector | +bgui-loader |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./loader.component.scss |
+
templateUrl | +./loader.component.html |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'bgui-loader',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './loader.component.html',
+ styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent {
+
+}
+
+ <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-16">
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ class="sc-ksdxgE zqvWX"></circle>
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ stroke-linecap="round"
+ class="sc-hBUSln cmLpsk"></circle>
+</svg>
+
+<!--
+
+<div class="">
+ <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-16">
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ class="sc-ksdxgE zqvWX"></circle>
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ stroke-linecap="round"
+ class="sc-hBUSln cmLpsk"></circle>
+ </svg>
+</div>
+
+<div class="">
+ <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn">
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ class="sc-ksdxgE zqvWX"></circle>
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ stroke-linecap="round"
+ class="sc-hBUSln cmLpsk"></circle>
+ </svg>
+</div>
+
+<div class="">
+ <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-32">
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ class="sc-ksdxgE zqvWX"></circle>
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ stroke-linecap="round"
+ class="sc-hBUSln cmLpsk"></circle>
+ </svg>
+</div>
+
+<div class="">
+ <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-36">
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ class="sc-ksdxgE zqvWX"></circle>
+ <circle
+ color="primary"
+ cx="32"
+ cy="32"
+ r="32"
+ stroke-linecap="round"
+ class="sc-hBUSln cmLpsk"></circle>
+ </svg>
+</div>
+
+-->
+
+
+ ./loader.component.scss
+
+
+.fJNpxn {
+ overflow: visible;
+}
+
+.fJNpxn-16 {
+ overflow: visible;
+}
+
+.fJNpxn-32 {
+ overflow: visible;
+}
+
+.fJNpxn-36 {
+ overflow: visible;
+}
+
+.fJNpxn {
+ margin-left: auto;
+ margin-right: auto;
+ animation: 1.116s linear 0s infinite normal none running cJiLXh;
+ padding: 1.5px;
+ height: 24px;
+ width: 24px;
+ box-sizing: content-box!important;
+}
+
+
+.fJNpxn-16 {
+ margin-left: auto;
+ margin-right: auto;
+ animation: 1.116s linear 0s infinite normal none running cJiLXh;
+ height: 16px;
+ width: 16px;
+ box-sizing: content-box!important;
+}
+
+.fJNpxn-32 {
+ margin-left: auto;
+ margin-right: auto;
+ animation: 1.116s linear 0s infinite normal none running cJiLXh;
+ padding: 1.5px;
+ height: 32px;
+ width: 32px;
+ box-sizing: content-box!important;
+}
+.fJNpxn-36 {
+ margin-left: auto;
+ margin-right: auto;
+ animation: 1.116s linear 0s infinite normal none running cJiLXh;
+ padding: 1.5px;
+ height: 38px;
+ width: 38px;
+ box-sizing: content-box!important;
+}
+
+.zqvWX {
+ fill: none;
+ stroke: rgba(255,255,255,0.5) ;
+ stroke-width: 8;
+}
+
+
+
+.cmLpsk {
+ animation: 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite normal none running fnezX;
+ fill: none;
+ stroke: #ffffff;
+ stroke-dasharray: 180;
+ transform-origin: center center;
+ stroke-width: 8;
+}
+
+
+
+@keyframes cJiLXh {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+
+@keyframes fnezX{
+ 0% {
+ stroke-dashoffset: 162;
+ transform: rotate(0deg);
+ }
+ 50% {
+ stroke-dashoffset: 90;
+ }
+ 100% {
+ stroke-dashoffset: 162;
+ transform: rotate(360deg);
+ }
+}
+
+
+ +
+ src/app/account/auth/login-admin/login-admin.component.ts
+
selector | +bgui-login-admin |
+
standalone | +true |
+
imports | +
+ CommonModule
+ FormsModule
+ MatButtonModule
+ MatCheckboxModule
+ MatFormFieldModule
+ MatIconModule
+ MatInputModule
+ ReactiveFormsModule
+ |
+
styleUrls | +./login-admin.component.scss |
+
templateUrl | +./login-admin.component.html |
+
+ Properties+ |
+
+ + | +
+ + + email + + + | +
+ Default value : new FormControl('', [Validators.required, Validators.email])
+ |
+
+ + | +
+ + + hide + + + | +
+ Default value : true
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + user + + + | +
+ Type : any
+
+ |
+
+ Default value : {
+ username: '',
+ password: '',
+ }
+ |
+
+ + | +
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+ FormControl,
+ FormsModule,
+ ReactiveFormsModule,
+ Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+ selector: 'bgui-login-admin',
+ standalone: true,
+ imports: [
+ CommonModule,
+ FormsModule,
+ MatButtonModule,
+ MatCheckboxModule,
+ MatFormFieldModule,
+ MatIconModule,
+ MatInputModule,
+ ReactiveFormsModule,
+ ],
+ templateUrl: './login-admin.component.html',
+ styleUrls: ['./login-admin.component.scss'],
+})
+export class LoginAdminComponent {
+ email = new FormControl('', [Validators.required, Validators.email]);
+ hide = true;
+ isActive = false;
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ user: any = {
+ username: '',
+ password: '',
+ };
+}
+
+
+
+ ./login-admin.component.scss
+
+ +
+ src/app/account/auth/login-standard-user/login-standard-user.component.ts
+
+
+ OnInit
+
selector | +bgui-login-standard-user |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ ReactiveFormsModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
styleUrls | +./login-standard-user.component.scss |
+
templateUrl | +./login-standard-user.component.html |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + connexionlogin + + + | +
+connexionlogin()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + getErrorAuth + + + | +
+getErrorAuth()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + getErrorMessage + + + | +
+getErrorMessage()
+ |
+
+ + | +
+
+
+ Returns :
+ "Impossible de trouver votre compte Beasy" | "" | "Adresse e-mail non valide"
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + onSubmit + + + | +
+onSubmit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + email + + + | +
+ Default value : new FormControl('', [Validators.required, Validators.email])
+ |
+
+ + | +
+ + + form + + + | +
+ Type : any
+
+ |
+
+ Default value : {
+ email: '',
+ password: '',
+ }
+ |
+
+ + | +
+ + + hide + + + | +
+ Default value : true
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + msgAuth + + + | +
+ Type : string
+
+ |
+
+ Default value : ''
+ |
+
+ + | +
+ + + password + + + | +
+ Default value : new FormControl('', [Validators.required])
+ |
+
+ + | +
+ + + Private + router + + + | +
+ Default value : inject(Router)
+ |
+
+ + | +
import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+ FormControl,
+ FormsModule,
+ ReactiveFormsModule,
+ Validators,
+} from '@angular/forms';
+import { CarouselComponent } from '../../../shared/carousel/carousel.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { Router, RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'bgui-login-standard-user',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './login-standard-user.component.html',
+ styleUrls: ['./login-standard-user.component.scss'],
+})
+export class LoginStandardUserComponent implements OnInit {
+ images = [
+ {
+ imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ {
+ imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ ];
+
+ email = new FormControl('', [Validators.required, Validators.email]);
+ password = new FormControl('', [Validators.required]);
+
+ form: any = {
+ email: '',
+ password: '',
+ };
+
+ getErrorMessage() {
+ if (this.email.hasError('required')) {
+ return 'Impossible de trouver votre compte Beasy';
+ }
+
+ return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+ }
+
+ getErrorAuth() {
+ this.msgAuth = '';
+ }
+
+ hide = true;
+ isActive = false;
+
+ msgAuth = '';
+
+ private router = inject(Router);
+
+ // constructor(private router:Router) {
+ // //...
+ // }
+
+ // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+ ngOnInit(): void {
+ //...
+ }
+
+ onSubmit(): void {
+ console.log(this.form);
+ this.connexionlogin();
+ }
+ connexionlogin() {
+ //console.log("Nous sommes ici");
+ if (
+ this.form.email === 'mrfrancice@gmail.com' &&
+ this.form.password === 'p@ssw0rd'
+ ) {
+ localStorage.setItem('isLoggedIn', 'true');
+ localStorage.setItem('token', this.form.email);
+ // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ console.log("Redirection vers 'dash'");
+ this.router.navigate(['/admin']);
+ //window.location.href = '/';
+ } else {
+ this.router.navigate(['/auth']);
+ this.msgAuth = 'Login ou PassWord incorrect...';
+ }
+ }
+
+ // deconnxionlogin()
+ // {
+
+ // localStorage.setItem('isLoggedIn', "false");
+ // localStorage.removeItem('token');
+ // // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ // // console.log("Redirection vers 'dash'");
+ // // this.router.navigate(['/admin']);
+ // // //window.location.href = '/';
+ // }
+}
+
+ <section class="fxt-template-animation fxt-template-layout20 imagedefont">
+ <div class="container">
+ <div
+ [class.mat-elevation-z1]="!isActive"
+ class="row fxt-bg-color fxt-templateshadow-01">
+ <div class="col-xl-7 col-lg-6 col-12 fxt-none-991 fxt-bg-img">
+ <bgui-carousel [images]="images" [autoSlide]="true"></bgui-carousel>
+ </div>
+ <div class="col-xl-5 col-lg-6 col-12">
+ <div class="fxt-content">
+ <div class="fxt-header">
+ <a href="#" class="fxt-logo"
+ ><img
+ src="/assets/images/logo/logo-text-beasy.svg"
+ height="70"
+ alt="Logo"
+ /></a>
+ <h2>Bienvenue!</h2>
+ <p>Se connecter avec son compte</p>
+ <p style="color: red">{{ msgAuth }}</p>
+ <ul class="fxt-socials"></ul>
+ </div>
+ <div class="fxt-form">
+ <form
+ name="form"
+ #f="ngForm"
+ (ngSubmit)="f.form.valid && onSubmit()">
+ <div class="form-group">
+ <div class="fxt-transformY-50 fxt-transition-delay-1">
+ <mat-form-field class="gui-form-width" appearance="fill">
+ <mat-label>Identifiant</mat-label>
+ <input
+ (click)="getErrorAuth()"
+ matInput
+ placeholder="pat@example.com"
+ name="email"
+ [(ngModel)]="form.email"
+ required />
+ <!-- <mat-error *ngIf="email.invalid" >{{
+ getErrorMessage()
+ }}</mat-error> -->
+ </mat-form-field>
+ </div>
+ <div
+ class="form_error"
+ style="color: red"
+ *ngIf="
+ email.errors &&
+ f.submitted &&
+ email.touched &&
+ email.invalid
+ ">
+ <div *ngIf="form.errors?.required">Email est Requis!</div>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="fxt-transformY-50 fxt-transition-delay-2">
+ <mat-form-field class="gui-form-width" appearance="fill">
+ <mat-label>Mot de passe</mat-label>
+ <input
+ matInput
+ [type]="hide ? 'password' : 'text'"
+ id="password"
+ name="password"
+ [(ngModel)]="form.password"
+ required
+ minlength="8" />
+ <button
+ mat-icon-button
+ matSuffix
+ (click)="hide = !hide"
+ [attr.aria-label]="'Hide password'"
+ [attr.aria-pressed]="hide">
+ <mat-icon>{{
+ hide ? 'visibility_off' : 'visibility'
+ }}</mat-icon>
+ </button>
+ </mat-form-field>
+ </div>
+ <div class="form_error" style="color: red" *ngIf="f.submitted">
+ <div *ngIf="form.password.errors?.required">
+ Le mot de passe est obligatoire
+ </div>
+ <div *ngIf="form.password.errors?.minlength">
+ Le mot de passe doit contenir au moins 8 caractères
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="fxt-transformY-50 fxt-transition-delay-3">
+ <div class="fxt-checkbox-area">
+ <div class="checkbox">
+ <mat-checkbox class="caption"
+ >Se souvenir de moi</mat-checkbox
+ >
+ </div>
+ <a href="auth/forgot-password" class="switcher-text"
+ >Mot de passe oublié?</a
+ >
+ </div>
+ </div>
+ </div>
+ <div class="form-group m-b-125">
+ <div class="fxt-transformY-50 fxt-transition-delay-4">
+ <button
+ (click)="connexionlogin()"
+ [disabled]="f.invalid"
+ [disabled]="!password"
+ mat-raised-button
+ shape-semi-round
+ color="primary"
+ class="w-100">
+ Connectez-vous
+ </button>
+ </div>
+ <!-- <div>
+ <div>Email:{{ form.email }}</div>
+ <div>passe:{{ form.password }}</div>
+ </div> -->
+ </div>
+ </form>
+ </div>
+ <div class="fxt-footer">
+ <div class="fxt-transformY-50 fxt-transition-delay-5">
+ <p>
+ Nouveau sur notre plateforme?<a
+ href="auth/register"
+ class="switcher-text2 inline-text"
+ >Créer un compte</a
+ >
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+
+ ./login-standard-user.component.scss
+
+*{
+ font-family: 'Roboto';
+}
+
+.fxt-template-layout20 {
+ min-height: 100vh;
+ background-color: rgb(244, 246, 248);
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ @media only screen and (max-width: 991px) {
+ padding: 15px;
+ }
+ @media only screen and (min-width: 1380px) {
+ .container {
+ max-width: 958.5px;
+ }
+ }
+ .fxt-checkbox-area {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ margin-bottom: 40px;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ }
+ .bgui-bg-color-grey {
+ background-color: #F4F5F7;
+ }
+ .fxt-bg-color {
+ background-color: #ffffff;
+ padding: 0;
+ }
+ .fxt-bg-img {
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ margin: 0;
+ padding: 15px;
+ }
+ .fxt-content {
+ border-radius: 15px 15px 15px 15px;
+ padding: 25px 10px 25px 0px;
+ width: 100%;
+ /* -webkit-box-shadow: 3px 0 79px 0 rgba(#000, 0.08);
+ box-shadow: 3px 0 79px 0 rgba(#000, 0.08);*/
+ @media only screen and (max-width: 1199px) {
+ padding: 100px 35px 70px 50px;
+ }
+ @media only screen and (max-width: 991px) {
+ padding: 100px 70px 70px 70px;
+ }
+ @media only screen and (max-width: 767px) {
+ padding: 80px 50px 50px 50px;
+ }
+ @media only screen and (max-width: 575px) {
+ padding: 60px 30px 30px 30px;
+ }
+ @media only screen and (max-width: 479px) {
+ padding: 50px 20px 20px 20px;
+ }
+ }
+ .fxt-templateshadow-01 {
+ border-radius: 15px;
+ width: 100%;
+ /* -webkit-box-shadow: 3px 0 79px 0 rgb(0 0 0 / 8%);
+ box-shadow: 3px 0 79px 0 rgb(0 0 0 / 8%);*/
+ }
+ .fxt-header {
+ text-align: left;
+ }
+ .fxt-logo {
+ display: block;
+ margin-bottom: 27px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 40vw;
+ }
+ .fxt-form {
+ h2 {
+ text-align: center;
+ font-weight: 700;
+ margin-bottom: 25px;
+ }
+ .fxt-otp-logo {
+ margin-bottom: 20px;
+ display: block;
+ text-align: center;
+ }
+ .fxt-otp-label {
+ margin-bottom: 15px;
+ font-size: 18px;
+ font-weight: 500;
+ text-align: center;
+ width: 100%;
+ }
+ p {
+ font-size: 18px;
+ color: #111111;
+ text-align: center;
+ span {
+ display: block;
+ }
+ }
+ .form-group {
+ position: relative;
+ z-index: 1;
+ margin-bottom: 0.5rem;
+ }
+ .m-b-125 {
+ margin-bottom: 1.25rem;
+ }
+ .form-control {
+ min-height: 50px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 1px solid #e7e7e7;
+ padding: 10px 15px;
+ color: #111111;
+ }
+ input::-webkit-input-placeholder {
+ color: #a1a1a1;
+ font-size: 15px;
+ font-weight: 300;
+ }
+ input::-moz-placeholder {
+ color: #a1a1a1;
+ font-size: 15px;
+ font-weight: 300;
+ }
+ input:-moz-placeholder {
+ color: #a1a1a1;
+ font-size: 15px;
+ font-weight: 300;
+ }
+ input:-ms-input-placeholder {
+ color: #a1a1a1;
+ font-size: 15px;
+ font-weight: 300;
+ }
+ .fxt-form-row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 25px;
+ .fxt-form-col {
+ padding: 10px 5px;
+ text-align: center;
+ margin-right: 10px;
+ flex-basis: 0;
+ flex-grow: 1;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ .fxt-form-btn {
+ margin-bottom: 10px;
+ }
+ }
+ .mat-form-field-appearance-fill .mat-form-field-flex {
+ border-radius: 8px 8px 0 0 !important;
+ padding: 0.4em 0.75em 0 0.75em !important;
+ }
+ .mat-raised-button{
+ line-height: 40px;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ width: 100%;
+ margin-bottom: 10px;
+ }
+ .fxt-btn-fill {
+ font-family: 'Roboto', sans-serif;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 17px;
+ font-weight: 500;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+ border: 0;
+ color: #fff;
+ border-radius: 3px;
+ background-color: #6b79fd;
+ padding: 10px 36px;
+ margin-bottom: 10px;
+ width: 100%;
+ -webkit-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ &:hover {
+ background-color: #4f5fec;
+ border-color: #4f5fec;
+ }
+ &:focus {
+ outline: none;
+ }
+ }
+ .switcher-text {
+ font-size: 12px;
+ margin-bottom: 5px;
+ display: block;
+ -webkit-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ &:hover {
+ color: #000000;
+ }
+ }
+ .switcher-text2 {
+ font-size: 15px;
+ display: inline-block;
+ -webkit-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ &.inline-text {
+ margin-left: 3px;
+ }
+ &:hover {
+ color: #000000;
+ }
+ }
+ .fxt-style-line {
+ overflow: hidden;
+ text-align: center;
+ h2 {
+ text-align: center;
+ font-weight: 300;
+ margin-bottom: 30px;
+ font-size: 20px;
+ color: #a4a4a4;
+ display: inline-block;
+ position: relative;
+ padding: 0 25px;
+ z-index: 1;
+ &:before {
+ display: inline-block;
+ content: "";
+ height: 1px;
+ width: 100%;
+ background-color: #ebebeb;
+ left: 100%;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ position: absolute;
+ z-index: 1;
+ }
+ &:after {
+ display: inline-block;
+ content: "";
+ height: 1px;
+ width: 100%;
+ background-color: #ebebeb;
+ right: 100%;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ position: absolute;
+ z-index: 1;
+ }
+ }
+ }
+ ul.fxt-socials {
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-right: -5px;
+ margin-left: -5px;
+ margin-bottom: 20px;
+ li {
+ max-width: 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 33.33333%;
+ flex: 0 0 33.33333%;
+ padding-left: 5px;
+ padding-right: 5px;
+ margin-bottom: 10px;
+ @media only screen and (max-width: 575px) {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ }
+ @media only screen and (max-width: 350px) {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ }
+ a {
+ border-radius: 2px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: flex-start;
+ -ms-flex-pack: flex-start;
+ justify-content: flex-start;
+ font-size: 14px;
+ height: 45px;
+ color: #ffffff;
+ -webkit-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ i {
+ border-radius: 2px 0 0 2px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ }
+ span {
+ height: 100%;
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ }
+ }
+ }
+ li.fxt-facebook {
+ a {
+ i {
+ background-color: #4867aa;
+ }
+ &:hover {
+ background-color: #5676bb;
+ }
+ }
+ }
+ li.fxt-twitter {
+ a {
+ i {
+ background-color: #33ccff;
+ }
+ &:hover {
+ background-color: #3dc5f3;
+ }
+ }
+ }
+ li.fxt-google {
+ a {
+ i {
+ background-color: #db4437;
+ }
+ &:hover {
+ background-color: #e75042;
+ }
+ }
+ }
+ }
+ .checkbox {
+ padding-left: 5px;
+ margin-right: 30px;
+ margin-bottom: 5px;
+ label {
+ padding-left: 20px;
+ color: #a4a4a4;
+ margin-bottom: 0;
+ font-size: 12px;
+ position: relative;
+ &:before {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ top: 4px;
+ left: 0;
+ margin-left: -5px;
+ border: 1px solid;
+ border-color: #dcdcdc;
+ border-radius: 3px;
+ background-color: #fff;
+ -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ }
+ &:after {
+ position: absolute;
+ margin-left: -20px;
+ padding-left: 3px;
+ font-size: 10px;
+ color: #555555;
+ }
+ }
+ input[type="checkbox"] {
+ display: none;
+ }
+ input[type="checkbox"]:checked+label::after {
+ font-family: 'Font Awesome 5 Free';
+ content: "\f00c";
+ font-weight: 900;
+ color: #ffffff;
+ left: 15px;
+ top: 4px;
+ }
+ input[type="checkbox"]:checked+label::before {
+ background-color: #6b79fd;
+ border-color: #6b79fd;
+ }
+ }
+ .fxt-footer {
+ text-align: center;
+ .fxt-resend-wrap {
+ margin-bottom: 10px;
+ display: inline-flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ font-size: 18px;
+ width: 100%;
+ }
+ .fxt-btn-resend {
+ margin-left: 3px;
+ box-shadow: none;
+ border: 0;
+ background-color: transparent;
+ cursor: pointer;
+ padding: 0;
+ text-decoration: underline;
+ transition: all 0.3s ease-in-out;
+ &:focus {
+ outline: none;
+ }
+ &:hover {
+ color: #000000;
+ }
+ }
+ .text-or {
+ margin-left: 3px;
+ color: #000000;
+ }
+ }
+ .gui-form-width {
+ display: block;
+ }
+}
+
+
+ +
+ src/app/core/layout/main-layout/main-layout.component.ts
+
selector | +bgui-main-layout |
+
standalone | +true |
+
imports | +
+ CommonModule
+ SidebarComponent
+ NavbarComponent
+ FooterComponent
+ RouterOutlet
+ MatButtonModule
+ MatIconModule
+ |
+
styleUrls | +./main-layout.component.scss |
+
templateUrl | +./main-layout.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(router: Router)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + actionMenuCompact + + + | +
+actionMenuCompact()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + menuCompact + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + showHeader + + + | +
+ Type : boolean
+
+ |
+
+ Default value : true
+ |
+
+ + | +
import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { NavbarComponent } from '../navbar/navbar.component';
+import { FooterComponent } from '../footer/footer.component';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+ selector: 'bgui-main-layout',
+ standalone: true,
+ imports: [
+ CommonModule,
+ SidebarComponent,
+ NavbarComponent,
+ FooterComponent,
+ RouterOutlet,
+ MatButtonModule,
+ MatIconModule,
+ ],
+ templateUrl: './main-layout.component.html',
+ styleUrls: ['./main-layout.component.scss'],
+})
+export class MainLayoutComponent {
+ showHeader: boolean = true;
+
+ constructor(private router: Router) {
+ router.events.subscribe(val => {
+ if (val instanceof NavigationEnd) {
+ this.showHeader = !(val.url == '/' || val.url == '/caisse');
+ this.menuCompact = val.url == '/' || val.url == '/caisse';
+ }
+ });
+ }
+
+ menuCompact = false;
+
+ actionMenuCompact() {
+ this.menuCompact = !this.menuCompact;
+ }
+}
+
+ <main class="has-sidebar">
+ <div class="nk-app-root">
+ <div class="nk-main">
+ <div
+ class="nk-sidebar nk-sidebar-fixed is-dark"
+ [ngClass]="{ 'is-compact': menuCompact }">
+ <div class="nk-sidebar-element nk-sidebar-head">
+ <div class="nk-sidebar-brand">
+ <a class="logo-link nk-sidebar-logo">
+ <img
+ class="logo-light logo-img"
+ src="assets/images/logo/logo-text-beasy.svg"
+ srcset="./images/logo2x.png 2x"
+ alt="logo"
+ height="40" />
+ <img
+ class="logo-dark logo-img"
+ src="assets/images/logo/logo-text-beasy.svg "
+ srcset="./images/logo-dark2x.png 2x"
+ alt="logo-dark"
+ height="40" />
+ <img
+ class="logo-small logo-img logo-img-small"
+ src="assets/images/logo/auth_logo.png"
+ srcset="./images/logo-small2x.png 2x"
+ alt="logo-small" />
+ </a>
+ </div>
+ <div class="nk-menu-trigger me-n2">
+ <a
+ class="nk-nav-toggle nk-quick-nav-icon d-xl-none"
+ data-target="sidebarMenu"
+ ><em class="icon ni ni-arrow-left"></em
+ ></a>
+ <a
+ class="nk-nav-compact nk-quick-nav-icon d-none d-xl-inline-flex"
+ data-target="sidebarMenu"
+ ><mat-icon
+ fontSet="material-icons-round "
+ class="icon nk-menu-icon-sid"
+ (click)="actionMenuCompact()"
+ >trip_origin</mat-icon
+ ></a
+ >
+ </div>
+ </div>
+ <bgui-sidebar class="active"></bgui-sidebar>
+ </div>
+ <div class="nk-wrap">
+ <bgui-navbar
+ class="nk-header nk-header-fixed is-light"
+ *ngIf="showHeader">
+ </bgui-navbar>
+
+ <!-- content @s -->
+ <div class="nk-content">
+ <div class="container-fluid">
+ <div class="nk-content-inner">
+ <div class="nk-content-body">
+ <router-outlet></router-outlet>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- content @e -->
+ </div>
+ </div>
+
+ <bgui-footer></bgui-footer>
+ </div>
+</main>
+
+
+ ./main-layout.component.scss
+
+ +
+ src/app/integrations/integration/moodel/moodel.component.ts
+
selector | +bgui-moodel |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./moodel.component.html |
+
styleUrl | +./moodel.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-moodel',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './moodel.component.html',
+ styleUrl: './moodel.component.scss',
+})
+export class MoodelComponent {}
+
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">Moodel</span></h3>
+</div>
+<section>
+ <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>
+ <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>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</section>
+
+ +
+ src/app/core/layout/navbar/navbar.component.ts
+
selector | +bgui-navbar |
+
standalone | +true |
+
imports | +
+ CommonModule
+ MatIconModule
+ |
+
styleUrls | +./navbar.component.scss |
+
templateUrl | +./navbar.component.html |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + deconnxionlogin + + + | +
+deconnxionlogin()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + Private + router + + + | +
+ Default value : inject(Router)
+ |
+
+ + | +
+ + + userEmail + + + | +
+ Type : string | null | undefined
+
+ |
+
+ + | +
import { Component, Input, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'bgui-navbar',
+ standalone: true,
+ imports: [CommonModule, MatIconModule],
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.scss'],
+})
+export class NavbarComponent {
+ userEmail: string | null | undefined;
+ ngOnInit() {
+ this.userEmail = localStorage.getItem('username');
+ console.log(this.userEmail);
+ }
+
+ private router = inject(Router);
+
+ deconnxionlogin() {
+ localStorage.setItem('isLoggedIn', 'false');
+ localStorage.removeItem('token');
+ // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ // console.log("Redirection vers 'dash'");
+ this.router.navigate(['/auth']);
+ // //window.location.href = '/';
+ }
+}
+
+ <div class="container-fluid">
+ <div class="nk-header-wrap">
+ <div class="nk-menu-trigger d-xl-none ms-n1">
+ <a
+ href="#"
+ class="nk-nav-toggle nk-quick-nav-icon"
+ data-target="sidebarMenu"
+ ><em class="icon ni ni-menu"></em
+ ></a>
+ </div>
+ <div class="nk-header-brand d-xl-none">
+ <a href="html/index.html" class="logo-link"> </a>
+ </div>
+ <div class="nk-header-tools">
+ <ul class="nk-quick-nav">
+ <li class="dropdown user-dropdown">
+ <a href="#" class="dropdown-toggle me-n1" data-bs-toggle="dropdown">
+ <div class="user-toggle">
+ <div class="user-avatar sm">
+ <mat-icon fontSet="material-icons-round" class="icon"
+ >account_circle</mat-icon
+ >
+ </div>
+ <div class="user-info d-none d-xl-block">
+ <div class="user-status user-status-unverified">Caissière</div>
+ <div class="user-name text-light">{{ userEmail }}</div>
+ </div>
+ </div>
+ </a>
+ <div class="dropdown-menu dropdown-menu-md dropdown-menu-end">
+ <div
+ class="dropdown-inner user-card-wrap bg-lighter d-none d-md-block">
+ <div class="user-card">
+ <div class="user-info">
+ <span class="lead-text">Ines N'Dri</span>
+ <span class="sub-text">Caissière</span>
+ </div>
+ </div>
+ </div>
+ <div class="dropdown-inner">
+ <ul class="link-list">
+ <li>
+ <a href=""
+ ><em class="icon ni"
+ ><mat-icon fontSet="material-icons-round"
+ >manage_accounts</mat-icon
+ ></em
+ ><span>Mon profil</span></a
+ >
+ </li>
+ <li>
+ <a href=""
+ ><em class="icon ni"
+ ><mat-icon fontSet="material-icons-round"
+ >contact_support</mat-icon
+ ></em
+ ><span>Aide</span></a
+ >
+ </li>
+ </ul>
+ </div>
+ <div class="dropdown-inner">
+ <ul class="link-list">
+ <li>
+ <button class="btn btn-danger" (click)="deconnxionlogin()">
+ <em class="icon ni">
+ <mat-icon fontSet="material-icons-round"
+ >logout</mat-icon
+ ></em
+ ><span>Se déconnecter</span>
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- .nk-header-wrap -->
+</div>
+
+
+ ./navbar.component.scss
+
+ +
+ src/app/core/layout/navbar/navbar-fullscreen-toggle/navbar-fullscreen-toggle.component.ts
+
selector | +bgui-navbar-fullscreen-toggle |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./navbar-fullscreen-toggle.component.scss |
+
templateUrl | +./navbar-fullscreen-toggle.component.html |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'bgui-navbar-fullscreen-toggle',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './navbar-fullscreen-toggle.component.html',
+ styleUrls: ['./navbar-fullscreen-toggle.component.scss']
+})
+export class NavbarFullscreenToggleComponent {
+
+}
+
+ <p>navbar-fullscreen-toggle works!</p>
+
+
+ ./navbar-fullscreen-toggle.component.scss
+
+ +
+ src/app/core/layout/navbar/navbar-notifications/navbar-notifications.component.ts
+
selector | +bgui-navbar-notifications |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./navbar-notifications.component.scss |
+
templateUrl | +./navbar-notifications.component.html |
+
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'bgui-navbar-notifications',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './navbar-notifications.component.html',
+ styleUrls: ['./navbar-notifications.component.scss']
+})
+export class NavbarNotificationsComponent {
+
+}
+
+ <p>navbar-notifications works!</p>
+
+
+ ./navbar-notifications.component.scss
+
+ +
+ src/app/core/layout/navbar/navbar-user/navbar-user.component.ts
+
+
+ OnInit
+
selector | +bgui-navbar-user |
+
standalone | +true |
+
imports | +
+ CommonModule
+ MatIconModule
+ MatDividerModule
+ MatRippleModule
+ ClickOutsideDirective
+ MatButtonModule
+ RouterLink
+ |
+
styleUrls | +./navbar-user.component.scss |
+
templateUrl | +./navbar-user.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor()
+ |
+
+ + | +
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + onClickOutside + + + | +
+onClickOutside()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + toggleDropdown + + + | +
+toggleDropdown()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + isOpen + + + | +
+ Type : boolean
+
+ |
+
+ + | +
import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatRippleModule } from '@angular/material/core';
+import { ClickOutsideDirective } from '../../../../shared/click-outside/click-outside.directive';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'bgui-navbar-user',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatIconModule,
+ MatDividerModule,
+ MatRippleModule,
+ ClickOutsideDirective,
+ MatButtonModule,
+ RouterLink,
+ ],
+ templateUrl: './navbar-user.component.html',
+ styleUrls: ['./navbar-user.component.scss'],
+})
+export class NavbarUserComponent implements OnInit {
+ isOpen!: boolean;
+
+ constructor() {}
+
+ ngOnInit() {}
+
+ toggleDropdown() {
+ this.isOpen = !this.isOpen;
+ }
+
+ onClickOutside() {
+ this.isOpen = false;
+ }
+}
+
+
+
+ ./navbar-user.component.scss
+
@use 'sass:math';
+
+
+.toolbar-user {
+ position: relative;
+ display: flex;
+
+ .button {
+ min-width: 64px;
+ border-radius: 0;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .name {
+ margin: 0 8px 0 10px;
+ }
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+ transform: rotate(0);
+ transition: transform .25s cubic-bezier(.25,.8,.25,1);
+ }
+
+ &.open {
+ background: rgba(0, 0, 0, .05);
+
+ .icon {
+ transform: rotate(-180deg);
+ }
+ }
+ }
+
+ .dropdown {
+ position: absolute;
+ top: 64px;
+ right: 0;
+ width: 100%;
+ min-width: 160px;
+ z-index: -1;
+ transform: translateY(-110%);
+ visibility: hidden;
+ transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
+ border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ background: white;
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+
+ .list {
+ padding-top: math.div(24px, 3);
+
+ .list-item {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: center;
+ height: 48px;
+ padding: 0 math.div(24px, 1.5);
+ position: relative;
+ cursor: pointer;
+ outline: none;
+
+ .list-item-icon {
+ padding-right: math.div(24px, 1.5);
+ }
+ }
+ }
+
+ &.open {
+ transform: translateY(0);
+ visibility: visible;
+ }
+ }
+}
+
+
+nav{
+ position: absolute;
+ top: 200%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+nav .drop-btn{
+ width: 400px;
+ background: #242526;
+ color: #b0b3b8;
+ line-height: 50px;
+ padding: 0 20px;
+ border-radius: 5px;
+ font-size: 20px;
+ font-weight: 500;
+}
+
+nav .drop-btn span {
+ float: right;
+ line-height: 50px;
+ font-size: 28px;
+ cursor: pointer;
+}
+
+nav .wrapper {
+ position: absolute;
+ top: 65px;
+ display: flex;
+ width: 400px;
+ background: #242526;
+ border-radius: 5px;
+}
+
+nav .wrapper ul {
+ list-style: none;
+ width: 400px;
+ padding: 10px;
+}
+
+nav .wrapper ul li {
+ line-height: 55px;
+}
+
+nav .wrapper ul li a {
+ position: relative;
+ text-decoration: none;
+ color: #b0b3b8;
+ display: flex;
+ font-size: 18px;
+ font-weight: 500;
+ padding: 0 10px;
+ align-items: center;
+ border-radius: 8px;
+}
+
+nav .wrapper ul li:hover a{
+ background: #3A3b3c;
+}
+
+.wrapper ul li a .icon {
+ height: 40px;
+ width: 40px;
+ margin-right: 13px;
+ background: #ffffff1a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ border-radius: 50px;
+}
+
+.wrapper ul li a i {
+ position: absolute;
+ right: 10px;
+ font-size: 25px;
+ pointer-events: none;
+
+}
+
+ +
+ src/app/shared/ui/pagetitle/pagetitle.component.ts
+
+
+ OnInit
+
selector | +bgui-pagetitle |
+
standalone | +true |
+
imports | +
+ CommonModule
+ |
+
styleUrls | +./pagetitle.component.scss |
+
templateUrl | +./pagetitle.component.html |
+
+ Methods+ |
+
+
|
+
+ Inputs+ |
+
+
|
+
+constructor()
+ |
+
+ + | +
+ + breadcrumbItems + | +|
+ Type : any
+
+ |
+ |
+ + | +
+ + title + | +|
+ Type : string | undefined
+
+ |
+ |
+ + | +
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'bgui-pagetitle',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './pagetitle.component.html',
+ styleUrls: ['./pagetitle.component.scss'],
+})
+export class PagetitleComponent implements OnInit {
+ @Input() breadcrumbItems: any;
+ @Input() title: string | undefined;
+
+ constructor() {}
+
+ ngOnInit() {}
+}
+
+ <!-- breadcrumb item -->
+
+<div class="nk-block-head-content">
+ <h3 class="nk-block-title page-title">{{ title }}</h3>
+ <div class="nk-block-des text-soft">
+ <ng-container *ngFor="let item of breadcrumbItems">
+ <div class="nk-block-des text-soft" *ngIf="!item.active">
+ <p>{{ item.label }}</p>
+ </div>
+ <li class="nk-block-des text-soft active" *ngIf="item.active">
+ {{ item.label }}
+ </li>
+ </ng-container>
+ </div>
+</div>
+
+
+ ./pagetitle.component.scss
+
*{
+ font-family: 'Roboto';
+}
+ +
+ src/app/integrations/integration/php/php.component.ts
+
selector | +bgui-php |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./php.component.html |
+
styleUrl | +./php.component.scss |
+
+ Methods+ |
+
+
|
+
+ + + copyLink + + + | +
+copyLink()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + downloadDocumentation + + + | +
+downloadDocumentation()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-php',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './php.component.html',
+ styleUrl: './php.component.scss',
+})
+export class PhpComponent {
+ downloadDocumentation() {
+ throw new Error('Method not implemented.');
+ }
+
+ copyLink() {
+
+ }
+}
+
+ <div class="content">
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">Php</span></h3>
+ </div>
+ <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-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.
+ </p>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ <div class="col-md-5">
+ <mat-card class="grid simple">
+ <mat-card-header>
+ <mat-card-title> PHP</mat-card-title>
+ </mat-card-header>
+ <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" />
+ </div>
+ <div class="col-md-6">
+ <mat-form-field>
+ <input matInput type="text" readonly value="PP-F2736" />
+ <mat-label>ID MARCHAND</mat-label>
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <button
+ mat-raised-button
+ color="success"
+ (click)="downloadDocumentation()">
+ Télécharger la documentation <mat-icon>file_download</mat-icon>
+ </button>
+ </div>
+ <div class="col-md-6">
+ <a
+ target="_blank"
+ href="_files/OnlinePayment_v1.3_OK.pdf"
+ mat-raised-button
+ color="primary"
+ >Visualiser la documentation
+ <mat-icon>picture_as_pdf</mat-icon></a
+ >
+ </div>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/integrations/integration/prestashop/prestashop.component.ts
+
selector | +bgui-prestashop |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./prestashop.component.html |
+
styleUrl | +./prestashop.component.scss |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-prestashop',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './prestashop.component.html',
+ styleUrl: './prestashop.component.scss',
+})
+export class PrestashopComponent {}
+
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">Prestashop</span></h3>
+</div>
+<section>
+ <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>
+ <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>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</section>
+
+ +
+ src/app/account/auth/register/register.component.ts
+
selector | +bgui-register |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ ReactiveFormsModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
styleUrls | +./register.component.scss |
+
templateUrl | +./register.component.html |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + register + + + | +
+register()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + cfPassword + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + email + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + lastName + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + name + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + password + + + | +
+ Type : string
+
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-register',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './register.component.html',
+ styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent {
+ name!: string;
+ lastName!: string;
+ email!: string;
+ password!: string;
+ cfPassword!: string;
+ images = [
+ {
+ imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ {
+ imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ ];
+
+ // email = new FormControl('', [Validators.required, Validators.email]);
+ // password = new FormControl('', [Validators.required]);
+
+ // form: any = {
+ // email: '',
+ // password: '',
+ // };
+
+ // getErrorMessage() {
+ // if (this.email.hasError('required')) {
+ // return 'Impossible de trouver votre compte Beasy';
+ // }
+
+ // return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+ // }
+
+ // getErrorAuth() {
+ // this.msgAuth = '';
+ // }
+
+ // hide = true;
+ isActive = false;
+
+ // msgAuth = '';
+
+ // private router = inject(Router);
+
+ // constructor(private router:Router) {
+ // //...
+ // }
+
+ // ngOnInit(): void {
+ // //...
+ // }
+
+ // onSubmit(): void {
+ // console.log(this.form);
+ // this.connexionlogin();
+ // }
+ // connexionlogin() {
+ // //console.log("Nous sommes ici");
+ // if (
+ // this.form.email === 'mrfrancice@gmail.com' &&
+ // this.form.password === 'p@ssw0rd'
+ // ) {
+ // localStorage.setItem('isLoggedIn', 'true');
+ // localStorage.setItem('token', this.form.email);
+ // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ // console.log("Redirection vers 'dash'");
+ // this.router.navigate(['/admin']);
+ // //window.location.href = '/';
+ // } else {
+ // this.router.navigate(['/auth']);
+ // this.msgAuth = 'Login ou PassWord incorrect...';
+ // }
+ // }
+
+ register() {}
+}
+
+ <section
+ class="fxt-template-animation fxt-template-layout20 imagedefont m-125 d-flex justify-content-center align-items-center">
+ <div class="container-fluid">
+ <div
+ [class.mat-elevation-z1]="!isActive"
+ class="row fxt-bg-color fxt-templateshadow-01">
+ <div class="row mt-5">
+ <div class="col"></div>
+ <div class="col-4">
+ <div class="card shadow">
+ <div class="card-body">
+ <form>
+ <a href="#" class="fxt-logo">
+ <img
+ src="/assets/images/logo/logo-text-beasy.svg"
+ height="70"
+ alt="Logo" />
+ </a>
+ <div class="mb-3">
+ <h4 class="text-dark text-muted">Creer un compte</h4>
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputName" class="form-label">Nom</label>
+ <input
+ type="text"
+ class="form-control"
+ name="name"
+ [(ngModel)]="name" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputLastName" class="form-label"
+ >Prenoms</label
+ >
+ <input
+ type="text"
+ class="form-control"
+ name="lastName"
+ [(ngModel)]="lastName" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputEmail1" class="form-label"
+ >Email</label
+ >
+ <input
+ type="email"
+ class="form-control"
+ name="email"
+ [(ngModel)]="email" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputPassword1" class="form-label"
+ >Password</label
+ >
+ <input
+ type="password"
+ class="form-control"
+ name="password"
+ [(ngModel)]="password" />
+ </div>
+ <div class="mb-3">
+ <label for="exampleInputPassword1" class="form-label"
+ >Confirmer mot de passe</label
+ >
+ <input
+ type="password"
+ class="form-control"
+ name="password"
+ [(ngModel)]="cfPassword" />
+ </div>
+ <button type="button" class="btn btn-info" (click)="register()">
+ S'enregistrer
+ </button>
+ <div class="row">
+ <div class="col-md-8">
+ <a
+ href="auth/login-standard-user"
+ style="text-decoration: none"
+ >J'ai deja un compte ?
+ <span class="text-danger">Se Connecter</span></a
+ >
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col"></div>
+ </div>
+ </div>
+ </div>
+</section>
+
+
+ ./register.component.scss
+
+ +
+ src/app/reversements/reversement/reversement/reversement.component.ts
+
selector | +bgui-reversement |
+
standalone | +true |
+
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 |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource(ELEMENT_DATA)
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator | undefined
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
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;
+}
+
+const ELEMENT_DATA: Element[] = [
+ {
+ 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,
+ 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',
+})
+export class ReversementComponent {
+ 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();
+ }
+}
+
+ <!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
+<div class="page-title">
+ <h3>Reversements</h3>
+</div>
+<div class="row" style="margin-top: 40px">
+ <div class="col-md-3">
+ <label for="debut">De</label>
+ <input
+ type="date"
+ value="2024-04-16"
+ required=""
+ name="debut"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-3">
+ <label for="fin">À</label>
+ <input
+ type="date"
+ value="2024-04-16"
+ required=""
+ name="fin"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-2">
+ <label style="visibility: hidden">Recherche</label>
+ <div class="card-title">
+ <button class="btn btn-primary btn-sm">
+ Recherche <i class="fa fa-search"></i>
+ </button>
+ </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>
+
+ <!-- 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>
+
+ <!-- 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>
+
+ <!-- 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">
+ <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">
+ <mat-header-cell *matHeaderCellDef> DATE REVERSEMENT </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ {{ element.dateReversement }}
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+
+ <mat-paginator
+ #paginator
+ [pageSize]="5"
+ [pageSizeOptions]="[5, 10, 20]"
+ [showFirstLastButtons]="true">
+ </mat-paginator>
+</div>
+
+ +
+ src/app/reversements/reversements.component.ts
+
selector | +bgui-reversements |
+
standalone | +true |
+
imports | +
+ DemandeComponent
+ ReversementComponent
+ RouterOutlet
+ |
+
templateUrl | +./reversements.component.html |
+
styleUrl | +./reversements.component.scss |
+
import { Component } from '@angular/core';
+import { DemandeComponent } from './reversement/demande/demande.component';
+import { ReversementComponent } from './reversement/reversement/reversement.component';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+ selector: 'bgui-reversements',
+ standalone: true,
+ imports: [DemandeComponent, ReversementComponent,RouterOutlet,],
+ templateUrl: './reversements.component.html',
+ styleUrl: './reversements.component.scss'
+})
+export class ReversementsComponent {
+
+}
+
+
+<router-outlet></router-outlet>
+ +
+ src/app/core/layout/sidebar/sidebar.component.ts
+
selector | +bgui-sidebar |
+
standalone | +true |
+
imports | +
+ CommonModule
+ MatIconModule
+ SimplebarAngularModule
+ RouterLinkActive
+ RouterLink
+ SublevelMenuComponent
+ |
+
styleUrls | +./sidebar.component.scss |
+
templateUrl | +./sidebar.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + actionMenuCompact + + + | +
+actionMenuCompact()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + handleClick + + + | +||||||
+handleClick(item: MenuItem)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + collapsed + + + | +
+ Default value : true
+ |
+
+ + | +
+ + + menuCompact + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + multiple + + + | +
+ Type : boolean
+
+ |
+
+ Default value : false
+ |
+
+ + | +
+ + + Protected + Readonly + navbarData + + + | +
+ Default value : navbarData
+ |
+
+ + | +
import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { SimplebarAngularModule } from 'simplebar-angular';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { navbarData } from './nav-data';
+import { SublevelMenuComponent } from './sublevel-menu.component';
+import { MenuItem } from './menu.model';
+
+@Component({
+ selector: 'bgui-sidebar',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatIconModule,
+ SimplebarAngularModule,
+ RouterLinkActive,
+ RouterLink,
+ SublevelMenuComponent,
+ ],
+ templateUrl: './sidebar.component.html',
+ styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+ collapsed = true;
+ multiple: boolean = false;
+ menuCompact = false;
+ actionMenuCompact() {
+ this.menuCompact = !this.menuCompact;
+ }
+
+ protected readonly navbarData = navbarData;
+
+ handleClick(item: MenuItem): void {
+ if (!this.multiple) {
+ for (const modelItem of this.navbarData) {
+ if (item !== modelItem && modelItem.expanded) {
+ modelItem.expanded = false;
+ }
+ }
+ }
+ item.expanded = !item.expanded;
+ }
+}
+
+ <div class="nk-sidebar-element">
+ <div class="nk-sidebar-content">
+ <div class="nk-sidebar-menu">
+ <ul class="nk-menu">
+ <ng-container *ngFor="let data of navbarData">
+ <li class="nk-menu-heading" *ngIf="data.isTitle">
+ <h6 class="overline-title text-primary-alt">{{ data.label }}</h6>
+ </li>
+ <!-- .nk-menu-item -->
+ <li
+ class="nk-menu-item has-sub"
+ *ngIf="!data.isTitle"
+ routerLinkActive="active"
+ [routerLinkActiveOptions]="{ exact: true }">
+ <div class="">
+ <a
+ class="nk-menu-link"
+ (click)="handleClick(data)"
+ *ngIf="data.items && data.items.length > 0">
+ <mat-icon fontSet="material-icons-round" class="icon">{{
+ data.icon
+ }}</mat-icon>
+ <span class="nk-menu-text">{{ data.label }}</span>
+ <i
+ *ngIf="data.items && collapsed"
+ class="bgui-menu-toggle"
+ [ngClass]="
+ !data.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'
+ "></i>
+ </a>
+ </div>
+ <a
+ class="nk-menu-link"
+ [routerLink]="[data.routeLink]"
+ *ngIf="!data.items || (data.items && data.items.length === 0)"
+ routerLinkActive="active"
+ [routerLinkActiveOptions]="{ exact: true }">
+ <span class="nk-menu-icon">
+ <mat-icon fontSet="material-icons-round" class="icon">{{
+ data.icon
+ }}</mat-icon></span
+ >
+ <span class="nk-menu-text">{{ data.label }}</span>
+ </a>
+ <div *ngIf="collapsed && data.items && data.items.length > 0">
+ <bgui-sublevel-menu
+ [data]="data"
+ [collapsed]="collapsed"
+ [multiple]="multiple"
+ [expanded]="data.expanded"></bgui-sublevel-menu>
+ </div></li
+ ></ng-container>
+ </ul>
+ </div>
+ </div>
+</div>
+
+
+ ./sidebar.component.scss
+
.bgui-menu-toggle {
+ position: absolute;
+ top: 50%;
+ right: 1.25rem;
+ transform: translateY(-50%);
+
+ font-size: 1.3rem;
+ color: #aedcb6;
+ transition: transform 0.3s, color 0.1s, opacity 0.3s ease 0.3s;
+}
+
+ +
+ src/app/core/layout/sidebar/sublevel-menu.component.ts
+
selector | +bgui-sublevel-menu |
+
standalone | +true |
+
imports | +
+ NgIf
+ NgForOf
+ NgClass
+ RouterLink
+ RouterLinkActive
+ |
+
styleUrls | +./sidebar.component.scss |
+
template | +
|
+
+ Methods+ |
+
+
|
+
+ Inputs+ |
+
+ + | +
+ + animating + | +|
+ Type : boolean | undefined
+
+ |
+ |
+ + | +
+ + collapsed + | +|
+ Type : boolean
+
+ |
+ |
+ Default value : false
+ |
+ |
+ + | +
+ + data + | +|
+ Type : MenuItem
+
+ |
+ |
+ Default value : {
+ routeLink: '',
+ icon: '',
+ label: '',
+ items: [],
+ }
+ |
+ |
+ + | +
+ + expanded + | +|
+ Type : boolean | undefined
+
+ |
+ |
+ + | +
+ + multiple + | +|
+ Type : boolean
+
+ |
+ |
+ Default value : false
+ |
+ |
+ + | +
+ + + handleClick + + + | +||||||
+handleClick(item: any)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
import { Component, Input } from '@angular/core';
+import { MenuItem } from './menu.model';
+import { NgClass, NgForOf, NgIf } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import {
+ animate,
+ state,
+ style,
+ transition,
+ trigger,
+} from '@angular/animations';
+
+@Component({
+ selector: 'bgui-sublevel-menu',
+ standalone: true,
+ imports: [NgIf, NgForOf, NgClass, RouterLink, RouterLinkActive],
+ template: `
+ <ul
+ *ngIf="collapsed && data.items && data.items.length > 0"
+ [@submenu]="
+ expanded
+ ? {
+ value: 'visible',
+ params: {
+ transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)',
+ height: '*'
+ }
+ }
+ : {
+ value: 'hidden',
+ params: {
+ transitionParams: '400ms cubic-bezier(0.86, 0, 0.07, 1)',
+ height: '0'
+ }
+ }
+ "
+ class="nk-menu-sub">
+ <li *ngFor="let item of data.items" class="">
+ <a
+ class="nk-menu-link"
+ (click)="handleClick(item)"
+ *ngIf="item.items && item.items.length > 0">
+ <i class="sublevel-link-icon fa fa-circle"></i>
+ <span class="nk-menu-text" *ngIf="collapsed">{{ item.label }}</span>
+ <i
+ *ngIf="item.items && collapsed"
+ class="bgui-menu-toggle"
+ [ngClass]="
+ !item.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'
+ ">
+ </i>
+ </a>
+ <a
+ class="nk-menu-link"
+ *ngIf="!item.items || (item.items && item.items.length === 0)"
+ [routerLink]="[item.routeLink]"
+ routerLinkActive="active-sublevel"
+ [routerLinkActiveOptions]="{ exact: true }">
+ <span class="nk-menu-text" *ngIf="collapsed">{{ item.label }}</span>
+ </a>
+ <div *ngIf="item.items && item.items.length > 0">
+ <bgui-sublevel-menu
+ [collapsed]="collapsed"
+ [multiple]="multiple"
+ [expanded]="item.expanded"></bgui-sublevel-menu>
+ </div>
+ </li>
+ </ul>
+ `,
+ styleUrls: ['./sidebar.component.scss'],
+ animations: [
+ trigger('submenu', [
+ state(
+ 'hidden',
+ style({
+ height: '0',
+ overflow: 'hidden',
+ })
+ ),
+ state(
+ 'visible',
+ style({
+ height: '*',
+ })
+ ),
+ transition('visible <=> hidden', [
+ style({ overflow: 'hidden' }),
+ animate('{{transitionParams}}'),
+ transition('void => *', animate(0)),
+ ]),
+ ]),
+ ],
+})
+export class SublevelMenuComponent {
+ @Input() data: MenuItem = {
+ routeLink: '',
+ icon: '',
+ label: '',
+ items: [],
+ };
+ @Input() collapsed = false;
+ @Input() animating: boolean | undefined;
+ @Input() expanded: boolean | undefined;
+ @Input() multiple: boolean = false;
+
+ handleClick(item: any): void {
+ if (!this.multiple) {
+ if (this.data.items && this.data.items.length > 0) {
+ for (const modelItem of this.data.items) {
+ if (item !== modelItem && modelItem.expanded) {
+ modelItem.expanded = false;
+ }
+ }
+ }
+ }
+ item.expanded = !item.expanded;
+ }
+}
+
+
+ ./sidebar.component.scss
+
.bgui-menu-toggle {
+ position: absolute;
+ top: 50%;
+ right: 1.25rem;
+ transform: translateY(-50%);
+
+ font-size: 1.3rem;
+ color: #aedcb6;
+ transition: transform 0.3s, color 0.1s, opacity 0.3s ease 0.3s;
+}
+
+ +
+ src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts
+
selector | +bgui-suivi-paiement |
+
standalone | +true |
+
imports | +
+ MatFormFieldModule
+ MatInputModule
+ MatTableModule
+ MatPaginatorModule
+ CommonModule
+ HttpClientModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./suivi-paiement.component.html |
+
styleUrl | +./suivi-paiement.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(httpClient: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + fetchOperateurs + + + | +
+fetchOperateurs()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + onOperateurChange + + + | +||||||
+onOperateurChange(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource(ELEMENT_DATA)
+ |
+
+ + | +
+ + + operateurs + + + | +
+ Type : IOperateur[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator | undefined
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
+ + + selectedOperateur + + + | +
+ Type : string
+
+ |
+
+ Default value : ''
+ |
+
+ + | +
+ + + Private + url + + + | +
+ Type : string
+
+ |
+
+ Default value : 'http://192.168.1.223:8001/operateur/'
+ |
+
+ + | +
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 { FormsModule } from '@angular/forms';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { RouterLink } from '@angular/router';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+
+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',
+ },
+];
+
+@Component({
+ selector: 'bgui-suivi-paiement',
+ standalone: true,
+ imports: [
+ MatFormFieldModule,
+ MatInputModule,
+ MatTableModule,
+ MatPaginatorModule,
+ CommonModule,
+ HttpClientModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './suivi-paiement.component.html',
+ styleUrl: './suivi-paiement.component.scss',
+})
+export class SuiviPaiementComponent {
+ private url = 'http://192.168.1.223:8001/operateur/';
+
+ operateurs: IOperateur[] = [];
+ selectedOperateur: string = '';
+
+ displayedColumns: string[] = [
+ 'nfacture',
+ 'nom',
+ 'prenom',
+ 'contact',
+ 'service',
+ 'email',
+ 'montant',
+ 'modePaiement',
+ 'status',
+ 'dateTransaction',
+ ];
+ 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;
+ }
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ <!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
+<div class="page-title">
+ <h3>Paiemnts</h3>
+</div>
+<div class="row" style="margin-top: 40px">
+ <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>
+ <select class="form-control filtre" style="width: 100%">
+ <option value="">Tout</option>
+ </select>
+ </div>
+ <div class="col-md-3">
+ <label for="debut">De</label>
+ <input
+ type="date"
+ value="2024-04-16"
+ required=""
+ name="debut"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-3">
+ <label for="fin">À</label>
+ <input
+ type="date"
+ value="2024-04-16"
+ required=""
+ name="fin"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-2">
+ <label style="visibility: hidden">Recherche</label>
+ <div class="card-title">
+ <button class="btn btn-primary btn-sm">
+ Recherche <i class="fa fa-search"></i>
+ </button>
+ </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="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">
+ <mat-header-cell *matHeaderCellDef> Nom </mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{ element.nom }} </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>
+ </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">
+ <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>
+ </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">
+ <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">
+ <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">
+ <mat-header-cell *matHeaderCellDef> Date Transaction </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ {{ element.dateTransaction }}
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+
+ <mat-paginator
+ #paginator
+ [pageSize]="5"
+ [pageSizeOptions]="[5, 10, 20]"
+ [showFirstLastButtons]="true">
+ </mat-paginator>
+</div>
+
+ +
+ src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts
+
+
+ AfterViewInit
+
selector | +bgui-suivi-transaction |
+
standalone | +true |
+
imports | +
+ CommonModule
+ HttpClientModule
+ RouterLink
+ FormsModule
+ MatTableModule
+ MatPaginatorModule
+ MatFormFieldModule
+ MatInputModule
+ |
+
styleUrls | +./suivi-transaction.component.scss |
+
templateUrl | +./suivi-transaction.component.html |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(transactionService: TransactionService, operateurservice: OperateurService)
+ |
+ |||||||||
+ + | +|||||||||
+
+ Parameters :
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource<ITransaction>()
+ |
+
+ + | +
+ + + endDate + + + | +
+ Type : any
+
+ |
+
+ + | +
+ + + operateurs + + + | +
+ Type : IOperateur[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
+ + + selectedOperateur + + + | +
+ Type : string
+
+ |
+
+ Default value : ''
+ |
+
+ + | +
+ + + startDate + + + | +
+ Type : any
+
+ |
+
+ + | +
+ + + transactions + + + | +
+ Type : ITransaction[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+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 { HttpClientModule } from '@angular/common/http';
+import { RouterLink } from '@angular/router';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { OperateurService } from 'src/app/_services/trafics/operateur/operateur.service';
+
+@Component({
+ selector: 'bgui-suivi-transaction',
+ standalone: true,
+ imports: [
+ CommonModule,
+ HttpClientModule,
+ RouterLink,
+ FormsModule,
+ MatTableModule,
+ MatPaginatorModule,
+ MatFormFieldModule,
+ MatInputModule,
+ ],
+ templateUrl: './suivi-transaction.component.html',
+ styleUrls: ['./suivi-transaction.component.scss'],
+})
+export class SuiviTransactionComponent implements AfterViewInit {
+ transactions: ITransaction[] = [];
+ operateurs: IOperateur[] = [];
+ selectedOperateur: string = '';
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ startDate: any;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ endDate: any;
+
+ displayedColumns: string[] = [
+ 'transaction_id',
+ 'type_paiement_label',
+ 'marchand',
+ 'service',
+ 'montant',
+ 'date',
+ 'commentaire',
+ 'etat',
+ 'status',
+ 'reference',
+ ];
+
+ dataSource = new MatTableDataSource<ITransaction>();
+
+ @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+ constructor(
+ private transactionService: TransactionService,
+ private operateurservice: OperateurService
+ ) {}
+
+ ngOnInit(): void {
+ this.transactionService.getAll().subscribe((data: ITransaction[]) => {
+ this.transactions = data;
+ console.log('transactions=>', this.transactions);
+ this.dataSource.data = this.transactions;
+ });
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ this.operateurservice.getAllOperator().subscribe((operateur: any) => {
+ this.operateurs = operateur.results;
+
+ console.log('operateurs==>', this.operateurs);
+ });
+ }
+
+ ngAfterViewInit() {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.paginator.pageIndex = this.paginator.pageSize;
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ <div class="page-title">
+ <h3>Transactions</h3>
+</div>
+<div class="row" style="margin-top: 40px">
+ <div class="col-md-2">
+ <label for="operateurs">Opérateurs</label>
+ <select
+ class="form-control filtre"
+ id="operateurs"
+ placeholder="operateur"
+ style="width: 100%">
+ <option *ngFor="let operateur of operateurs" [value]="operateur.code">
+ {{ operateur.code }}
+ </option>
+ </select>
+ </div>
+ <div class="col-md-2">
+ <label for="services">Services</label>
+ <select class="form-control filtre" style="width: 100%">
+ <option value="">Tout</option>
+ </select>
+ </div>
+ <div class="col-md-3">
+ <label for="debut">De</label>
+ <input
+ type="date"
+ [(ngModel)]="startDate"
+ required
+ name="debut"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-3">
+ <label for="fin">À</label>
+ <input
+ type="date"
+ [(ngModel)]="endDate"
+ required
+ name="fin"
+ class="form-control form-control-sm" />
+ </div>
+ <div class="col-md-2">
+ <label style="visibility: hidden">Recherche</label>
+ <div class="card-title">
+ <button class="btn btn-primary btn-sm">
+ Recherche <i class="fa fa-search"></i>
+ </button>
+ </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.." #input />
+ </mat-form-field>
+
+ <mat-table [dataSource]="dataSource">
+ <ng-container matColumnDef="transaction_id">
+ <mat-header-cell *matHeaderCellDef class="text"> ID </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.transaction_id }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="type_paiement">
+ <mat-header-cell *matHeaderCellDef class="text"
+ >ID type paiement
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.type_paiement }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="type_paiement_label">
+ <mat-header-cell *matHeaderCellDef class="text"
+ >Type paiement
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.type_paiement_label }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="marchand">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Marchand
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.marchand }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="service">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Service
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.service }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="montant">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Montant
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.montant }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="date">
+ <mat-header-cell *matHeaderCellDef class="text"> Date </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.date | date: 'dd/MM/yyyy' }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="commentaire">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Commentaire
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.commentaire }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="etat">
+ <mat-header-cell *matHeaderCellDef class="text"> Etat </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.etat }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="status">
+ <mat-header-cell *matHeaderCellDef class="text"> Status </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.status }}
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="reference">
+ <mat-header-cell *matHeaderCellDef class="text">
+ Réference
+ </mat-header-cell>
+ <mat-cell *matCellDef="let transaction">
+ {{ transaction.reference }}
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+
+ <mat-paginator
+ [pageSize]="5"
+ [pageSizeOptions]="[5, 10, 20, 40, 60, 80, 100]"
+ [showFirstLastButtons]="true">
+ </mat-paginator>
+</div>
+
+
+ ./suivi-transaction.component.scss
+
table {
+ width: 100%;
+ }
+
+ .mat-mdc-form-field {
+ font-size: 14px;
+ width: 100%;
+ }
+
+
+ .text {
+ color:blue;
+ font-weight: bold;
+ font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
+}
+ +
+ src/app/trafics/trafics.component.ts
+
providers | +
+ TransactionService
+ OperateurService
+ |
+
selector | +bgui-trafics |
+
standalone | +true |
+
imports | +
+ SuiviPaiementComponent
+ SuiviTransactionComponent
+ RouterOutlet
+ CommonModule
+ |
+
templateUrl | +./trafics.component.html |
+
styleUrl | +./trafics.component.scss |
+
import { Component } from '@angular/core';
+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,
+ CommonModule,
+ ],
+ providers: [TransactionService, OperateurService],
+})
+export class TraficsComponent {}
+
+ <router-outlet></router-outlet>
+
+ +
+ src/app/utilisateurs/utilisateurs.component.ts
+
selector | +bgui-utilisateurs |
+
standalone | +true |
+
imports | +
+ CommonModule
+ MatPaginator
+ MatTableModule
+ MatFormFieldModule
+ MatInputModule
+ CarouselComponent
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterOutlet
+ MatPaginatorModule
+ RouterLink
+ FormsModule
+ MatMenuModule
+ |
+
templateUrl | +./utilisateurs.component.html |
+
styleUrl | +./utilisateurs.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + deleteUser + + + | +
+deleteUser()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + editUser + + + | +
+editUser()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource(ELEMENT_DATA)
+ |
+
+ + | +
+ + + dataTypePaiements + + + | +
+ Type : any[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : ['id', 'nom', 'prenom', 'email', 'actions']
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator | undefined
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
import { Component, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+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, RouterOutlet } 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;
+ email: string;
+ nom: string;
+ prenom: string;
+ actions: string;
+}
+
+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: [
+ CommonModule,
+ MatPaginator,
+ MatTableModule,
+ MatFormFieldModule,
+ MatInputModule,
+ CarouselComponent,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterOutlet,
+ MatPaginatorModule,
+ RouterLink,
+ FormsModule,
+ MatMenuModule,
+ ],
+ providers: [],
+ templateUrl: './utilisateurs.component.html',
+ 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.');
+ }
+ 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) {
+ this.dataSource.paginator = this.paginator;
+ }
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ <div class="container-fluid"><h3>Utilisateurs</h3></div>
+<div class="page-title d-flex justify-content-between">
+ <a [routerLink]="['create-users/']" 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
+ class="textFilter"
+ matInput
+ (keyup)="applyFilter($event)"
+ placeholder="Ex. ium"
+ #input />
+ </mat-form-field>
+
+ <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+ <!-- ID Column -->
+ <ng-container matColumnDef="id">
+ <mat-header-cell *matHeaderCellDef class="bold-text">ID</mat-header-cell>
+ <mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
+ </ng-container>
+
+ <!-- Nom Column -->
+ <ng-container matColumnDef="nom">
+ <mat-header-cell *matHeaderCellDef class="bold-text">Nom</mat-header-cell>
+ <mat-cell *matCellDef="let user">{{ user.nom }}</mat-cell>
+ </ng-container>
+
+ <!-- Prénoms Column -->
+ <ng-container matColumnDef="prenom">
+ <mat-header-cell *matHeaderCellDef class="bold-text"
+ >Prénoms</mat-header-cell
+ >
+ <mat-cell *matCellDef="let user">{{ user.prenom }}</mat-cell>
+ </ng-container>
+
+ <!-- Email Column -->
+ <ng-container matColumnDef="email">
+ <mat-header-cell *matHeaderCellDef class="bold-text"
+ >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 class="bold-text"
+ >Actions</mat-header-cell
+ >
+ <mat-cell *matCellDef="let user" style="text-align: right">
+ <a href="#" class="m-2" [routerLink]="['view-user']"
+ ><mat-icon style="color: blue" title="Voir"
+ >remove_red_eye</mat-icon
+ ></a
+ >
+ <a href="#" class="m-2" [routerLink]="['edit-user/id']"
+ ><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
+ >
+ <a href="#" class="m-2" [routerLink]="['delete-user/id']">
+ <mat-icon style="color: red" title="Supprimer">
+ delete_sweep
+ </mat-icon>
+ </a>
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+
+ <mat-paginator
+ #paginator
+ [pageSize]="5"
+ [pageSizeOptions]="[5, 10, 20]"
+ [showFirstLastButtons]="true">
+ </mat-paginator>
+</div>
+
+ +
+ src/app/assistances/assistance/view-service/view-service.component.ts
+
selector | +bgui-view-service |
+
standalone | +true |
+
imports | +
+ RouterLink
+ RouterOutlet
+ CommonModule
+ MatPaginator
+ MatTableModule
+ MatFormFieldModule
+ MatInputModule
+ CarouselComponent
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ MatPaginatorModule
+ FormsModule
+ MatMenuModule
+ |
+
templateUrl | +./view-service.component.html |
+
styleUrl | +./view-service.component.scss |
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(service: ServiceService)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + applyFilter + + + | +||||||
+applyFilter(event: Event)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + ngAfterViewInit + + + | +
+ngAfterViewInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + ngOnInit + + + | +
+ngOnInit()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + dataSource + + + | +
+ Default value : new MatTableDataSource<IService>()
+ |
+
+ + | +
+ + + displayedColumns + + + | +
+ Type : string[]
+
+ |
+
+ Default value : [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ]
+ |
+
+ + | +
+ + + + paginator + + + | +
+ Type : MatPaginator
+
+ |
+
+ Decorators :
+ +
+ @ViewChild(MatPaginator)
+ |
+
+ + | +
+ + + services + + + | +
+ Type : IService[]
+
+ |
+
+ Default value : []
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { IService } from 'src/app/_interfaces/servives/service';
+import { ServiceService } from 'src/app/_services/service/service.service';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-view-service',
+ standalone: true,
+ imports: [
+ RouterLink,
+ RouterOutlet,
+ CommonModule,
+ MatPaginator,
+ MatTableModule,
+ MatFormFieldModule,
+ MatInputModule,
+ CarouselComponent,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ MatPaginatorModule,
+ FormsModule,
+ MatMenuModule,
+ ],
+ templateUrl: './view-service.component.html',
+ styleUrl: './view-service.component.scss',
+})
+export class ViewServiceComponent {
+ services: IService[] = [];
+
+ displayedColumns: string[] = [
+ 'service_id',
+ 'nom_service',
+ 'description',
+ 'marchand',
+ ];
+ dataSource = new MatTableDataSource<IService>();
+
+ @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+ constructor(private service: ServiceService) {}
+
+ ngOnInit(): void {
+ this.service.getServices().subscribe((data: IService[]) => {
+ this.services = data;
+ console.log('services=>', this.services);
+ this.dataSource.data = this.services;
+ });
+ }
+
+ ngAfterViewInit() {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.paginator.pageIndex = this.paginator.pageSize;
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ <div class="content sm-gutter">
+ <div class="page-title mb-20">
+ <h3 style="margin-bottom: 25px">Services</h3>
+ </div>
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <!-- <h5 class="mb-3 text-center">Details Service</h5> -->
+ <form method="post">
+ <div class="row justify-content-center">
+ <div class="col-md-5 mb-2">
+ <label for="service_id" class="Ftext">Id Service</label>
+ <input
+ type="text"
+ id="service_id"
+ placeholder="ID"
+ class="form-control"
+ name="service_id"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5 mb-2">
+ <label for="nom_service" class="Ftext"
+ >Nom Service</label
+ >
+ <input
+ type="text"
+ id="nom_service"
+ placeholder="Nom Service"
+ class="form-control"
+ name="nom_service"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-5 mb-2">
+ <label for="description" class="Ftext"
+ >Description</label
+ >
+ <input
+ type="text"
+ id="description"
+ placeholder="Description"
+ class="form-control"
+ name="description"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5 mb-2">
+ <label for="marchand" class="Ftext">Marchand</label>
+ <input
+ type="text"
+ id="marchand"
+ placeholder="Marchand"
+ class="form-control"
+ name="marchand"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-12">
+ <div class="d-flex justify-content-end mt-3">
+ <button
+ class="btn btn-sm btn-success"
+ id="save_button">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!--+++++++++++++++++++++++++++++++++++++++++++++++-->
+
+<div class="page-title d-flex justify-content-between">
+ <a
+ data-bs-toggle="modal"
+ data-bs-target="#exampleModal"
+ [routerLink]="['create-users/']"
+ class="btn btn-sm btn-success m-2">
+ Ajouter un utilisateur
+ </a>
+</div>
+<div class="page-title d-flex justify-content-between">
+ <a
+ [routerLink]="['/assistances/create-service']"
+ class="btn btn-sl btn-success mt-5">
+ Ajouter
+ </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>
+
+ <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+ <!-- Nom Column -->
+ <ng-container matColumnDef="service_id">
+ <mat-header-cell *matHeaderCellDef class="text">ID</mat-header-cell>
+ <mat-cell *matCellDef="let service">{{ service.service_id }}</mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="nom_service">
+ <mat-header-cell *matHeaderCellDef class="text">Nom</mat-header-cell>
+ <mat-cell *matCellDef="let service">{{ service.nom_service }}</mat-cell>
+ </ng-container>
+
+ <!-- Prenoms Column -->
+ <ng-container matColumnDef="description">
+ <mat-header-cell *matHeaderCellDef class="text"
+ >Description</mat-header-cell
+ >
+ <mat-cell *matCellDef="let service">{{ service.description }}</mat-cell>
+ </ng-container>
+
+ <!-- Email Column -->
+ <ng-container matColumnDef="marchand">
+ <mat-header-cell *matHeaderCellDef class="text">Marchand</mat-header-cell>
+ <mat-cell *matCellDef="let service">{{ service.marchand }}</mat-cell>
+ </ng-container>
+
+ <!-- Actions Column -->
+ <ng-container matColumnDef="actions">
+ <mat-header-cell *matHeaderCellDef class="text">Actions</mat-header-cell>
+ <mat-cell *matCellDef="let service" style="text-align: right">
+ <a href="#" class="m-2" [routerLink]="['view-service']"
+ ><mat-icon style="color: blue" title="Voir"
+ >remove_red_eye</mat-icon
+ ></a
+ >
+ <a href="#" class="m-2" [routerLink]="['edit-service/id']"
+ ><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
+ >
+ <a href="#" class="m-2" [routerLink]="['delete-service/id']">
+ <mat-icon style="color: red" title="Supprimer">
+ delete_sweep
+ </mat-icon>
+ </a>
+ </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+ </mat-table>
+
+ <mat-paginator
+ #paginator
+ [pageSize]="5"
+ [pageSizeOptions]="[5, 10, 20]"
+ [showFirstLastButtons]="true">
+ </mat-paginator>
+</div>
+
+ +
+ src/app/utilisateurs/view-user/view-user.component.ts
+
selector | +bgui-view-user |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ ReactiveFormsModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./view-user.component.html |
+
styleUrl | +./view-user.component.scss |
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+ + + register + + + | +
+register()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + email + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + ffPassword + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + isActive + + + | +
+ Default value : false
+ |
+
+ + | +
+ + + lastName + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + name + + + | +
+ Type : string
+
+ |
+
+ + | +
+ + + password + + + | +
+ Type : string
+
+ |
+
+ + | +
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-view-user',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './view-user.component.html',
+ styleUrl: './view-user.component.scss',
+})
+export class ViewUserComponent {
+ name!: string;
+ lastName!: string;
+ email!: string;
+ password!: string;
+ ffPassword!: string;
+ images = [
+ {
+ imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ {
+ imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
+ imageAlt: 'nature1',
+ },
+ ];
+
+ // email = new FormControl('', [Validators.required, Validators.email]);
+ // password = new FormControl('', [Validators.required]);
+
+ // form: any = {
+ // email: '',
+ // password: '',
+ // };
+
+ // getErrorMessage() {
+ // if (this.email.hasError('required')) {
+ // return 'Impossible de trouver votre compte Beasy';
+ // }
+
+ // return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
+ // }
+
+ // getErrorAuth() {
+ // this.msgAuth = '';
+ // }
+
+ // hide = true;
+ isActive = false;
+
+ // msgAuth = '';
+
+ // private router = inject(Router);
+
+ // constructor(private router:Router) {
+ // //...
+ // }
+
+ // ngOnInit(): void {
+ // //...
+ // }
+
+ // onSubmit(): void {
+ // console.log(this.form);
+ // this.connexionlogin();
+ // }
+ // connexionlogin() {
+ // //console.log("Nous sommes ici");
+ // if (
+ // this.form.email === 'mrfrancice@gmail.com' &&
+ // this.form.password === 'p@ssw0rd'
+ // ) {
+ // localStorage.setItem('isLoggedIn', 'true');
+ // localStorage.setItem('token', this.form.email);
+ // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
+ // console.log("Redirection vers 'dash'");
+ // this.router.navigate(['/admin']);
+ // //window.location.href = '/';
+ // } else {
+ // this.router.navigate(['/auth']);
+ // this.msgAuth = 'Login ou PassWord incorrect...';
+ // }
+ // }
+
+ register() {}
+}
+
+ <!-- <section
+ class="fxt-template-animation fxt-template-layout20 imagedefont m-125 d-flex justify-content-center align-items-center">
+ <div class="container-fluid">
+ <div
+ [class.mat-elevation-z1]="!isActive"
+ class="row fxt-bg-color fxt-templateshadow-01">
+ <div class="row mt-5">
+ <div class="col"></div>
+ <div class="col-4">
+ <div class="card shadow">
+ <div class="card-body">
+ <form>
+ <div class="mb-3">
+ <h4 class="text-dark text-muted">Ajouter un Utilisateur</h4>
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputName" class="form-label">Nom</label>
+ <input
+ type="text"
+ class="form-control"
+ name="name"
+ [(ngModel)]="name" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputLastName" class="form-label"
+ >Prenoms</label
+ >
+ <input
+ type="text"
+ class="form-control"
+ name="lastName"
+ [(ngModel)]="lastName" />
+ </div>
+
+ <div class="mb-3">
+ <label for="exampleInputEmail1" class="form-label"
+ >Email</label
+ >
+ <input
+ type="email"
+ class="form-control"
+ name="email"
+ [(ngModel)]="email" />
+ </div>
+
+ <button type="button" class="btn btn-info" (click)="register()">
+ Retur
+ </button>
+ <div class="row">
+ <div class="col-md-8"></div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col"></div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<ng-template let-data> Hello, {{ data.name }} </ng-template> -->
+
+<!-- <div class="content sm-gutter">
+ <div class="row">
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card">
+ <div class="card-title">
+ <div class="card-body">
+ <h5>Informations Utilisateur</h5>
+ <form
+ method="post"
+ action="add_ppci_other_user"
+ class="add_ppci_other_user">
+ <div class="row">
+ <div class="col-md-5 mb-2">
+ <input
+ type="text"
+ placeholder="Nom"
+ class="form-control"
+ name="first_name"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ required="" />
+ </div>
+
+ <div class="col-md-5">
+ <input
+ type="email"
+ placeholder="Email"
+ class="form-control"
+ name="username"
+ value=""
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Mot de passe"
+ class="form-control"
+ name="password"
+ value=""
+ required="" />
+ </div>
+ <input
+ type="hidden"
+ class="form-control"
+ name="user_id"
+ value="2807" />
+ <input
+ type="hidden"
+ class="form-control"
+ name="id"
+ value="" />
+
+ <div class="col-md-12 row" style="margin-top: 30px">
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Transactions" />
+ Transactions
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Liste reversement" />
+ Liste reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Demande de reversement" />
+ Demande de reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Services" />
+ Services
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Intégrations" />
+ Intégrations
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Application android" />
+ Application android
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Compte associé" />
+ Compte associé
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Utilisateurs" />
+ Utilisateurs
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mon profile" />
+ Mon profile
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Modifer" />
+ Modifer
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ value="Mot de passe" />
+ Mot de passe
+ </label>
+ </div>
+ </div>
+
+ <div class="col-md-12 text-center">
+ <br />
+ <div class="card-title">
+ <button
+ id="add_ppci_other_user"
+ class="btn-round btn btn-primary btn-sm m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div> -->
+
+<div class="content sm-gutter">
+ <!-- END DASHBOARD TILES -->
+ <div class="row">
+ <!-- BEGIN WORLD MAP WIDGET - MAP -->
+ <div class="col-md-12 col-vlg-12 m-b-10">
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="grid simple">
+ <div class="card mb-2">
+ <div class="card-title">
+ <div class="card-body m-3">
+ <h5 class="mb-3">Informations Utilisateur</h5>
+ <form
+ method="post"
+ action="add_ppci_other_user"
+ class="add_ppci_other_user">
+ <div class="row">
+ <div class="col-md-5 mb-2">
+ <input
+ type="text"
+ placeholder="Nom"
+ class="form-control"
+ name="first_name"
+ value=""
+ readonly="true"
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Prénoms"
+ class="form-control"
+ name="last_name"
+ value=""
+ readonly="true"
+ required="" />
+ </div>
+
+ <div class="col-md-5">
+ <input
+ type="email"
+ placeholder="Email"
+ class="form-control"
+ name="username"
+ value=""
+ readonly="true"
+ required="" />
+ </div>
+ <div class="col-md-5">
+ <input
+ type="text"
+ placeholder="Mot de passe"
+ class="form-control"
+ name="password"
+ value=""
+ readonly="true"
+ required="" />
+ </div>
+ <input
+ type="hidden"
+ class="form-control"
+ name="user_id"
+ value="2807" />
+ <input
+ type="hidden"
+ class="form-control"
+ name="id"
+ value="" />
+
+ <div class="col-md-12 row" style="margin-top: 30px">
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ name="access[]"
+ [disabled]="true"
+ value="Transactions" />
+ Transactions
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Liste reversement" />
+ Liste reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Demande de reversement" />
+ Demande de reversement
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Services" />
+ Services
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Intégrations" />
+ Intégrations
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Application android" />
+ Application android
+ </label>
+ </div>
+
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Compte associé" />
+ Compte associé
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Utilisateurs" />
+ Utilisateurs
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Mon profile" />
+ Mon profile
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Modifer" />
+ Modifer
+ </label>
+ </div>
+ <div class="col-md-3">
+ <label>
+ <input
+ type="checkbox"
+ [disabled]="true"
+ name="access[]"
+ value="Mot de passe" />
+ Mot de passe
+ </label>
+ </div>
+ </div>
+
+ <div class="col-md-12 text-center">
+ <br />
+ <div class="card-title">
+ <button
+ id="add_ppci_other_user"
+ class="btn-round btn btn-primary btn-sm m-1">
+ Enregistrer <i class="fa fa-save"></i>
+ </button>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ +
+ src/app/integrations/integration/wordpress/wordpress.component.ts
+
selector | +bgui-wordpress |
+
standalone | +true |
+
imports | +
+ CommonModule
+ CarouselComponent
+ MatFormFieldModule
+ MatCardModule
+ MatCardTitle
+ ReactiveFormsModule
+ MatInputModule
+ MatInputModule
+ MatButtonModule
+ MatIconModule
+ MatCheckboxModule
+ RouterLink
+ FormsModule
+ |
+
templateUrl | +./wordpress.component.html |
+
styleUrl | +./wordpress.component.scss |
+
+ Methods+ |
+
+
|
+
+ + + copyLink + + + | +
+copyLink()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';
+
+@Component({
+ selector: 'bgui-wordpress',
+ standalone: true,
+ imports: [
+ CommonModule,
+ CarouselComponent,
+ MatFormFieldModule,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './wordpress.component.html',
+ styleUrl: './wordpress.component.scss',
+})
+export class WordpressComponent {
+ copyLink() {
+ console.log('');
+ }
+}
+
+ <div class="page-title">
+ <h3>Integration - <span class="semi-bold">WordPress</span></h3>
+</div>
+<section>
+ <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>
+ <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>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ </div>
+</section>
+
+ File | +Type | +Identifier | +Statements | +
---|---|---|---|
+ + src/app/_helpers/auth.guard.ts + | +guard | +AuthGuard | ++ 0 % + (0/4) + | +
+ + src/app/_helpers/models/token.ts + | +interface | +IToken | ++ 0 % + (0/2) + | +
+ + src/app/_helpers/models/user.ts + | +interface | +ICredential | ++ 0 % + (0/3) + | +
+ + src/app/_helpers/services/auth.service.ts + | +injectable | +AuthService | ++ 0 % + (0/15) + | +
+ + src/app/_helpers/token.interceptor.ts + | +interceptor | +TokenInterceptor | ++ 0 % + (0/3) + | +
+ + src/app/_interfaces/servives/service.ts + | +interface | +IService | ++ 0 % + (0/5) + | +
+ + src/app/_interfaces/trafics/operateur/operateur.ts + | +interface | +IOperateur | ++ 0 % + (0/7) + | +
+ + src/app/_interfaces/trafics/paiement/paiement.ts + | +interface | +IPaiement | ++ 0 % + (0/17) + | +
+ + src/app/_interfaces/trafics/transaction/transaction.ts + | +interface | +IMerchantData | ++ 0 % + (0/8) + | +
+ + src/app/_interfaces/trafics/transaction/transaction.ts + | +interface | +ITransaction | ++ 0 % + (0/12) + | +
+ + src/app/_interfaces/trafics/transaction/transaction.ts + | +interface | +ITypeOperateur | ++ 0 % + (0/4) + | +
+ + src/app/_services/service/service.service.ts + | +injectable | +ServiceService | ++ 0 % + (0/8) + | +
+ + src/app/_services/trafics/operateur/operateur.service.ts + | +injectable | +OperateurService | ++ 0 % + (0/4) + | +
+ + src/app/_services/trafics/paiement/paiement.service.ts + | +injectable | +PaiementService | ++ 0 % + (0/6) + | +
+ + src/app/_services/trafics/transaction/transaction.service.ts + | +injectable | +TransactionService | ++ 0 % + (0/12) + | +
+ + src/app/account/account.component.ts + | +component | +AccountComponent | ++ 0 % + (0/1) + | +
+ + src/app/account/auth/forgot-password/forgot-password.component.ts + | +component | +ForgotPasswordComponent | ++ 0 % + (0/3) + | +
+ + src/app/account/auth/login-admin/login-admin.component.ts + | +component | +LoginAdminComponent | ++ 0 % + (0/5) + | +
+ + src/app/account/auth/login-standard-user/login-standard-user.component.ts + | +component | +LoginStandardUserComponent | ++ 0 % + (0/14) + | +
+ + src/app/account/auth/register/register.component.ts + | +component | +RegisterComponent | ++ 0 % + (0/9) + | +
+ + src/app/admin-test/admin-test.component.ts + | +component | +AdminTestComponent | ++ 0 % + (0/12) + | +
+ + src/app/admin/dashboards/beasy-dashboard/beasy-dashboard.component.ts + | +component | +BeasyDashboardComponent | ++ 0 % + (0/4) + | +
+ + src/app/app.component.ts + | +component | +AppComponent | ++ 0 % + (0/2) + | +
+ + src/app/app.config.ts + | +variable | +appConfig | ++ 0 % + (0/1) + | +
+ + src/app/application-android/application-android.component.ts + | +component | +ApplicationAndroidComponent | ++ 0 % + (0/1) + | +
+ + src/app/assistances/assistance/create-service/create-service.component.ts + | +component | +CreateServiceComponent | ++ 0 % + (0/5) + | +
+ + src/app/assistances/assistance/delete-service/delete-service.component.ts + | +component | +DeleteServiceComponent | ++ 0 % + (0/1) + | +
+ + src/app/assistances/assistance/edit-service/edit-service.component.ts + | +component | +EditServiceComponent | ++ 0 % + (0/3) + | +
+ + src/app/assistances/assistance/view-service/view-service.component.ts + | +component | +ViewServiceComponent | ++ 0 % + (0/9) + | +
+ + src/app/assistances/assistances.component.ts + | +component | +AssistancesComponent | ++ 0 % + (0/3) + | +
+ + src/app/compte-associe/compte-associe.component.ts + | +component | +CompteAssocieComponent | ++ 0 % + (0/2) + | +
+ + src/app/core/layout/footer/footer.component.ts + | +component | +FooterComponent | ++ 0 % + (0/1) + | +
+ + src/app/core/layout/main-layout/main-layout.component.ts + | +component | +MainLayoutComponent | ++ 0 % + (0/5) + | +
+ + src/app/core/layout/navbar/navbar-fullscreen-toggle/navbar-fullscreen-toggle.component.ts + | +component | +NavbarFullscreenToggleComponent | ++ 0 % + (0/1) + | +
+ + src/app/core/layout/navbar/navbar-notifications/navbar-notifications.component.ts + | +component | +NavbarNotificationsComponent | ++ 0 % + (0/1) + | +
+ + src/app/core/layout/navbar/navbar-user/navbar-user.component.ts + | +component | +NavbarUserComponent | ++ 0 % + (0/6) + | +
+ + src/app/core/layout/navbar/navbar.component.ts + | +component | +NavbarComponent | ++ 0 % + (0/5) + | +
+ + src/app/core/layout/sidebar/menu.model.ts + | +interface | +MenuItem | ++ 0 % + (0/12) + | +
+ + src/app/core/layout/sidebar/nav-data.ts + | +variable | +navbarData | ++ 0 % + (0/1) + | +
+ + src/app/core/layout/sidebar/sidebar.component.ts + | +component | +SidebarComponent | ++ 0 % + (0/7) + | +
+ + src/app/core/layout/sidebar/sublevel-menu.component.ts + | +component | +SublevelMenuComponent | ++ 0 % + (0/7) + | +
+ + src/app/facturation/facturation-add/facturation-add.component.ts + | +component | +FacturationAddComponent | ++ 0 % + (0/1) + | +
+ + src/app/facturation/facturation.component.ts + | +component | +FacturationComponent | ++ 0 % + (0/1) + | +
+ + src/app/integrations/integration/code-provider/code-provider.component.ts + | +component | +CodeProviderComponent | ++ 0 % + (0/6) + | +
+ + src/app/integrations/integration/dart/dart.component.ts + | +component | +DartComponent | ++ 0 % + (0/1) + | +
+ + src/app/integrations/integration/java-script/java-script.component.ts + | +component | +JavaScriptComponent | ++ 0 % + (0/1) + | +
+ + src/app/integrations/integration/moodel/moodel.component.ts + | +component | +MoodelComponent | ++ 0 % + (0/1) + | +
+ + src/app/integrations/integration/php/php.component.ts + | +component | +PhpComponent | ++ 0 % + (0/3) + | +
+ + src/app/integrations/integration/prestashop/prestashop.component.ts + | +component | +PrestashopComponent | ++ 0 % + (0/1) + | +
+ + src/app/integrations/integration/wordpress/wordpress.component.ts + | +component | +WordpressComponent | ++ 0 % + (0/2) + | +
+ + src/app/integrations/integrations.component.ts + | +component | +IntegrationsComponent | ++ 0 % + (0/1) + | +
+ + src/app/interfaces/core-parameter.interface.ts + | +interface | +ICoreParameter | ++ 0 % + (0/10) + | +
+ + src/app/interfaces/user.ts + | +interface | +IDataUser | ++ 0 % + (0/2) + | +
+ + src/app/interfaces/user.ts + | +interface | +ISingleUser | ++ 0 % + (0/2) + | +
+ + src/app/interfaces/user.ts + | +interface | +ITokenUser | ++ 0 % + (0/7) + | +
+ + src/app/interfaces/user.ts + | +interface | +IUser | ++ 0 % + (0/10) + | +
+ + src/app/reversements/reversement/demande/demande.component.ts + | +component | +DemandeComponent | ++ 0 % + (0/1) + | +
+ + src/app/reversements/reversement/reversement/reversement.component.ts + | +component | +ReversementComponent | ++ 0 % + (0/6) + | +
+ + src/app/reversements/reversement/reversement/reversement.component.ts + | +interface | +Element | ++ 0 % + (0/7) + | +
+ + src/app/reversements/reversement/reversement/reversement.component.ts + | +variable | +ELEMENT_DATA | ++ 0 % + (0/1) + | +
+ + src/app/reversements/reversements.component.ts + | +component | +ReversementsComponent | ++ 0 % + (0/1) + | +
+ + src/app/services/affichage.service.ts + | +injectable | +AffichageService | ++ 0 % + (0/10) + | +
+ + src/app/services/codebarre.service.ts + | +injectable | +CodebarreService | ++ 0 % + (0/11) + | +
+ + src/app/services/http.service.ts + | +injectable | +HttpService | ++ 0 % + (0/6) + | +
+ + src/app/services/ip.service.ts + | +injectable | +IpService | ++ 0 % + (0/2) + | +
+ + src/app/services/paiement.service.ts + | +injectable | +PaiementService | ++ 0 % + (0/6) + | +
+ + src/app/shared/carousel/carousel.component.ts + | +component | +CarouselComponent | ++ 0 % + (0/13) + | +
+ + src/app/shared/carousel/carousel.component.ts + | +interface | +carouselImage | ++ 0 % + (0/3) + | +
+ + src/app/shared/click-outside/click-outside.directive.ts + | +directive | +ClickOutsideDirective | ++ 0 % + (0/5) + | +
+ + src/app/shared/ui/loader/loader.component.ts + | +component | +LoaderComponent | ++ 0 % + (0/1) + | +
+ + src/app/shared/ui/pagetitle/pagetitle.component.ts + | +component | +PagetitleComponent | ++ 0 % + (0/5) + | +
+ + src/app/trafics/trafics.component.ts + | +component | +TraficsComponent | ++ 0 % + (0/1) + | +
+ + src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts + | +component | +SuiviPaiementComponent | ++ 0 % + (0/13) + | +
+ + src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts + | +interface | +PElement | ++ 0 % + (0/11) + | +
+ + src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts + | +variable | +ELEMENT_DATA | ++ 0 % + (0/1) + | +
+ + src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.ts + | +component | +SuiviTransactionComponent | ++ 0 % + (0/13) + | +
+ + src/app/ui/buttons/buttons.component.ts + | +component | +ButtonsComponent | ++ 0 % + (0/1) + | +
+ + src/app/ui/forms-fields/forms-fields.component.ts + | +component | +FormsFieldsComponent | ++ 0 % + (0/3) + | +
+ + src/app/ui/forms-fields/forms-fields.component.ts + | +interface | +Food | ++ 0 % + (0/3) + | +
+ + src/app/utilisateurs/create-users/create-users.component.ts + | +component | +CreateUsersComponent | ++ 0 % + (0/9) + | +
+ + src/app/utilisateurs/delete-user/delete-user.component.ts + | +component | +DeleteUserComponent | ++ 0 % + (0/1) + | +
+ + src/app/utilisateurs/edit-user/edit-user.component.ts + | +component | +EditUserComponent | ++ 0 % + (0/9) + | +
+ + src/app/utilisateurs/utilisateurs.component.ts + | +component | +UtilisateursComponent | ++ 0 % + (0/11) + | +
+ + src/app/utilisateurs/utilisateurs.component.ts + | +interface | +IUsers | ++ 0 % + (0/6) + | +
+ + src/app/utilisateurs/utilisateurs.component.ts + | +variable | +ELEMENT_DATA | ++ 0 % + (0/1) + | +
+ + src/app/utilisateurs/view-user/view-user.component.ts + | +component | +ViewUserComponent | ++ 0 % + (0/9) + | +
+ + src/core/config.ts + | +variable | +added_user_dev | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +API_UR | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +API_URL | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +API_URl_WORKFLOW | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +APP_DEFAULT_LANG | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +APP_HOST | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +CORE_ENDPOINT | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +CORE_LOCAL | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +DJ_HOST | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +DJANGO_URL | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +DNGO_URL | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +FOR_ACCOUNT_ROOT | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +FOR_MENU_ROOT | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +FOR_PROFILE_ROOT | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +HEADER_OPTIONS | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +HOST | ++ 0 % + (0/1) + | +
+ + src/core/config.ts + | +variable | +PARAMETERS_ENDPOINT | ++ 0 % + (0/1) + | +
+ + src/environments/environment.api.ts + | +variable | +environment | ++ 0 % + (0/1) + | +
+ + src/environments/environment.ts + | +variable | +environment | ++ 0 % + (0/1) + | +
+
+ src/app/shared/click-outside/click-outside.directive.ts
+
Selector | +[bguiClickOutside] |
+
Standalone | +true |
+
+ Methods+ |
+
+
|
+
+ Outputs+ |
+
+
|
+
+ HostListeners+ |
+
+
|
+
+constructor(_elementRef: ElementRef)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + bguiClickOutside + | +|
+ Type : EventEmitter
+
+ |
+ |
+ + | +
+ + + + document:click + + + + | +
+ Arguments : '$event' '$event.target'
+ |
+
+ + | +
+ + + + Public + onClick + + + | +|||||||||
+
+ onClick(event: MouseEvent, targetElement: HTMLElement)
+ |
+ |||||||||
+ Decorators :
+ + @HostListener('document:click', ['$event', '$event.target'])
+ |
+ |||||||||
+ + | +|||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
import {
+ Directive,
+ ElementRef,
+ EventEmitter,
+ HostListener,
+ Output,
+} from '@angular/core';
+
+@Directive({
+ standalone: true,
+ selector: '[bguiClickOutside]',
+})
+export class ClickOutsideDirective {
+ constructor(private _elementRef: ElementRef) {}
+
+ @Output()
+ public bguiClickOutside = new EventEmitter<MouseEvent>();
+
+ @HostListener('document:click', ['$event', '$event.target'])
+ public onClick(event: MouseEvent, targetElement: HTMLElement): void {
+ if (!targetElement) {
+ return;
+ }
+
+ const clickedInside =
+ this._elementRef.nativeElement.contains(targetElement);
+ if (!clickedInside) {
+ this.bguiClickOutside.emit(event);
+ }
+ }
+}
+
+ +
+ src/app/_helpers/auth.guard.ts
+
+ Methods+ |
+
+
|
+
+constructor(router: Router)
+ |
+ ||||||
+ Defined in src/app/_helpers/auth.guard.ts:13
+ |
+ ||||||
+
+ Parameters :
+
+
|
+
+ + + canActivate + + + | +|||||||||
+canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
+ |
+ |||||||||
+ Defined in src/app/_helpers/auth.guard.ts:16
+ |
+ |||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable | Promise | boolean
+
+
+
+
+ |
+
+ + + Public + isLoggedIn + + + | +
+
+ isLoggedIn()
+ |
+
+ Defined in src/app/_helpers/auth.guard.ts:26
+ |
+
+
+
+ Returns :
+ boolean
+
+ |
+
import { Injectable } from '@angular/core';
+import {
+ ActivatedRouteSnapshot,
+ RouterStateSnapshot,
+ Router,
+ CanActivate,
+} from '@angular/router';
+import type { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+ constructor(private router: Router) {}
+
+ canActivate(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable<boolean> | Promise<boolean> | boolean {
+ if (this.isLoggedIn()) {
+ return true;
+ }
+ this.router.navigate(['/auth']);
+ return false;
+ }
+ public isLoggedIn(): boolean {
+ let status = false;
+ if (localStorage.getItem('isLoggedIn') === 'true') {
+ status = true;
+ } else {
+ status = false;
+ }
+ return status;
+ }
+}
+
+
+ This project was generated with Angular CLI version 17.0.8.
+Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
+
+ src/app/services/affichage.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(printService: PrintService)
+ |
+ ||||||
+ Defined in src/app/services/affichage.service.ts:12
+ |
+ ||||||
+
+ Parameters :
+
+
|
+
+ + + detectUsbPrinters + + + | +
+detectUsbPrinters()
+ |
+
+ Defined in src/app/services/affichage.service.ts:19
+ |
+
+
+
+ Returns :
+ void
+
+ |
+
+ + + envoyerMessage + + + | +||||||
+envoyerMessage(ticket: any)
+ |
+ ||||||
+ Defined in src/app/services/affichage.service.ts:81
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + getData + + + | +|||||||||
+getData(param1: string, param2: string)
+ |
+ |||||||||
+ Defined in src/app/services/affichage.service.ts:95
+ |
+ |||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + requestUsb + + + | +
+requestUsb()
+ |
+
+ Defined in src/app/services/affichage.service.ts:67
+ |
+
+
+
+ Returns :
+ void
+
+ |
+
+ + + ImprimStatut + + + | +
+ Type : boolean
+
+ |
+
+ Default value : false
+ |
+
+ Defined in src/app/services/affichage.service.ts:12
+ |
+
+ + + status + + + | +
+ Type : boolean
+
+ |
+
+ Default value : false
+ |
+
+ Defined in src/app/services/affichage.service.ts:10
+ |
+
+ + + usbPrintDrivers + + + | +
+ Type : UsbDriver[]
+
+ |
+
+ Default value : []
+ |
+
+ Defined in src/app/services/affichage.service.ts:9
+ |
+
+ + + usbPrintersToDetect + + + | +
+ Type : string[]
+
+ |
+
+ Default value : []
+ |
+
+ Defined in src/app/services/affichage.service.ts:11
+ |
+
import { Injectable } from '@angular/core';
+import { PrintService, UsbDriver, WebPrintDriver } from 'ng-thermal-print';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AffichageService {
+ usbPrintDrivers: UsbDriver[] = []; // Tableau pour stocker les pilotes USB disponibles
+ status: boolean = false;
+ usbPrintersToDetect: string[] = [];
+ ImprimStatut: boolean = false;
+
+ constructor(
+ private printService: PrintService
+ // private http: HttpClient
+ ) {}
+
+ detectUsbPrinters() {
+ const usbPrintersToDetect = [
+ { vendorId: 0x04b8, productId: 0x0202 }, // Epson TM-U220B M188B
+ { vendorId: 0x1208, productId: 0x0780 }, // Exemple de second périphérique
+ { vendorId: 0x1208, productId: 0x0514 }, // Exemple de second périphérique
+
+ // { vendorId: 0x4616, productId: 0x1920 }, // Exemple de second périphérique
+ ];
+ let printerFound = false; // Variable pour garder une trace de l'état de la connexion
+ console.log('Imprimante non trouvée');
+ console.log(printerFound);
+ this.ImprimStatut = false;
+
+ for (const printerInfo of usbPrintersToDetect) {
+ console.log(this.usbPrintersToDetect);
+ console.log(printerInfo);
+ const usbDriver = new UsbDriver(
+ printerInfo.vendorId,
+ printerInfo.productId
+ );
+ usbDriver.isConnected.subscribe(result => {
+ if (result && !printerFound) {
+ // Vérifiez que l'imprimante n'a pas encore été trouvée
+ console.log(
+ `Connected to USB printer - Vendor ID: ${printerInfo.vendorId}, Product ID: ${printerInfo.productId}`
+ );
+ this.status = true;
+ this.printService.setDriver(usbDriver);
+ printerFound = true; // Définir la variable pour indiquer que l'imprimante a été trouvée
+ this.ImprimStatut = true;
+ console.log('Imprimante trouvée');
+ console.log(printerFound);
+ }
+ });
+
+ // Ajouter le pilote USB à la liste
+ this.usbPrintDrivers.push(usbDriver);
+
+ // Déclencher la connexion pour chaque pilote USB
+ usbDriver.connect();
+
+ // Sortir de la boucle si l'imprimante a été trouvée
+ if (printerFound) {
+ break;
+ }
+ }
+ }
+
+ requestUsb() {
+ const usbDriver = new UsbDriver();
+ usbDriver.requestUsb().subscribe(
+ result => {
+ this.printService.setDriver(usbDriver, 'ESC/POS');
+ this.detectUsbPrinters();
+ // this.reloadComponent();
+ },
+ error => {
+ console.log(error);
+ }
+ );
+ }
+
+ envoyerMessage(ticket: any) {
+ const panier = ticket;
+ const payload = { user_id: 101293 };
+ const apiUrl = `http://127.0.0.1:8000/api/ticket/${panier}`;
+ // return this.http.post<boolean>(apiUrl, payload);
+
+ this.printService
+ .init()
+ .writeLine(
+ '<epos-display xmlns="http://www.epson-pos.com/schemas/2012/09/epos-display"><text>Hello world!!</text></epos-display>'
+ )
+ .flush();
+ }
+
+ getData(param1: string, param2: string) {
+ const requestData = {
+ user_id: param1,
+ };
+ // console.log(param3)
+ // this.apiUrl =`http://127.0.0.1:8000/api/ticket/${param2}`
+ // return this.http.post<boolean>(this.apiUrl, requestData);
+ }
+}
+
+ +
+ src/app/_helpers/services/auth.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient)
+ |
+ ||||||
+ Defined in src/app/_helpers/services/auth.service.ts:32
+ |
+ ||||||
+
+ Parameters :
+
+
|
+
+ + + Public + login + + + | +||||||
+
+ login(user: literal type)
+ |
+ ||||||
+ Defined in src/app/_helpers/services/auth.service.ts:69
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ any
+
+
+
+
+ |
+
+ + + Public + logout + + + | +
+
+ logout()
+ |
+
+ + | +
+
+
+ Returns :
+ void
+
+ |
+
+ + + Public + refreshToken + + + | +
+
+ refreshToken()
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:90
+ |
+
+
+
+ Returns :
+ any
+
+ |
+
+ + + Private + updateData + + + | +||||||
+
+ updateData(token: string)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + Public + verifyToken + + + | +||||||
+
+ verifyToken(token: string)
+ |
+ ||||||
+ Defined in src/app/_helpers/services/auth.service.ts:36
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<literal type>
+
+
+
+
+ |
+
+ + + Private + ApiRefAuthUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/api-token-refresh/`
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:15
+ |
+
+ + + Private + ApiTokAuthUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/api/token/`
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:13
+ |
+
+ + + Private + ApiVerifAuthUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/api/token/verify/`
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:11
+ |
+
+ + + Public + errors + + + | +
+ Type : any[]
+
+ |
+
+ Default value : []
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:32
+ |
+
+ + + Private + httpOptions + + + | +
+ Type : object
+
+ |
+
+ Default value : {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+ }
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:17
+ |
+
+ + + Public + token + + + | +
+ Type : string | undefined
+
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:22
+ |
+
+ + + Public + token_expires + + + | +
+ Type : Date | undefined
+
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:25
+ |
+
+ + + Public + username + + + | +
+ Type : string | undefined
+
+ |
+
+ Defined in src/app/_helpers/services/auth.service.ts:28
+ |
+
import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AuthService {
+ private ApiVerifAuthUrl = `${environment.apiBaseUrl}/api/token/verify/`;
+
+ private ApiTokAuthUrl = `${environment.apiBaseUrl}/api/token/`;
+
+ private ApiRefAuthUrl = `${environment.apiBaseUrl}/api-token-refresh/`;
+ // Options HTTP utilisées pour effectuer les appels API
+ private httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+ };
+
+ // Le jeton JWT réel
+ public token: string | undefined;
+
+ // La date d'expiration du jeton
+ public token_expires: Date | undefined;
+
+ // Le nom d'utilisateur de l'utilisateur connecté
+ public username: string | undefined;
+
+ // Messages d'erreur reçus lors de la tentative de connexion
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ public errors: any[] = [];
+
+ constructor(private http: HttpClient) {}
+
+ public verifyToken(
+ token: string
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ): Observable<{ status: boolean; data?: any }> {
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken':
+ 'eiasfUdm3tAA1j8nJYoL3fqBR6uFk3dJ7XCffWJ7v3oAGBXHKW4rWXxL1FoRUnXZ',
+ });
+
+ const body = { token };
+
+ return (
+ this.http
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ .post<any>(this.ApiVerifAuthUrl, body, {
+ headers,
+ observe: 'response',
+ })
+ .pipe(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ map((response: HttpResponse<any>) => {
+ return { status: response.status === 200, data: response.body };
+ }),
+ catchError(error => {
+ console.error('An error occurred:', error);
+ return throwError({ status: false });
+ })
+ )
+ );
+ }
+
+ // Utilise http.post() pour obtenir un jeton d'authentification à partir de l'endpoint djangorestframework-jwt
+ public login(user: { username: string; password: string }) {
+ return (
+ this.http
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ .post<any>(this.ApiTokAuthUrl, user, this.httpOptions)
+ .subscribe(
+ data => {
+ console.log(data['access']);
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const token = data['access'];
+ console.log('====>', token);
+ this.updateData(data['access']);
+ },
+ err => {
+ this.errors = err.error;
+ }
+ )
+ );
+ }
+
+ // Rafraîchit le jeton JWT pour prolonger la session de l'utilisateur
+ public refreshToken() {
+ return (
+ this.http
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ .post<any>(this.ApiRefAuthUrl, { token: this.token }, this.httpOptions)
+ .subscribe(
+ data => {
+ data;
+ console.log(data);
+ },
+ err => {
+ this.errors = err.error;
+ }
+ )
+ );
+ }
+
+ // Déconnexion de l'utilisateur
+ public logout() {
+ this.token = '';
+ this.token_expires;
+ this.username = '';
+ }
+
+ // Met à jour les données utilisateur après une connexion réussie ou un rafraîchissement de jeton
+ private updateData(token: string) {
+ this.token = token;
+ this.errors = [];
+
+ // Décoder le jeton pour lire le nom d'utilisateur et le timestamp d'expiration
+ const token_parts = token.split(/\./);
+ const token_decoded = JSON.parse(atob(token_parts[1]));
+ this.token_expires = new Date(token_decoded.exp * 1000);
+ this.username = token_decoded.username;
+ }
+}
+
+ +
+ src/app/services/codebarre.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + countBackslashes + + + | +||||||
+countBackslashes(input: string)
+ |
+ ||||||
+ Defined in src/app/services/codebarre.service.ts:22
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ number
+
+
+
+
+ |
+
+ + + getBarcodeStream + + + | +
+getBarcodeStream()
+ |
+
+ Defined in src/app/services/codebarre.service.ts:13
+ |
+
+
+
+ Returns :
+ any
+
+ |
+
+ + + isCurrentlyListening + + + | +
+isCurrentlyListening()
+ |
+
+ Defined in src/app/services/codebarre.service.ts:58
+ |
+
+
+
+ Returns :
+ boolean
+
+ |
+
+ + + nettoyer + + + | +||||||
+nettoyer(input: string)
+ |
+ ||||||
+ Defined in src/app/services/codebarre.service.ts:17
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ string
+
+
+
+
+ |
+
+ + + startListening + + + | +
+startListening()
+ |
+
+ Defined in src/app/services/codebarre.service.ts:28
+ |
+
+
+
+ Returns :
+ void
+
+ |
+
+ + + stopListening + + + | +
+stopListening()
+ |
+
+ Defined in src/app/services/codebarre.service.ts:53
+ |
+
+
+
+ Returns :
+ void
+
+ |
+
+ + + Private + barcodeSubject + + + | +
+ Default value : new Subject<string>()
+ |
+
+ Defined in src/app/services/codebarre.service.ts:9
+ |
+
+ + + Private + fullBarcode + + + | +
+ Type : string
+
+ |
+
+ Default value : ''
+ |
+
+ Defined in src/app/services/codebarre.service.ts:10
+ |
+
+ + + Public + isListening + + + | +
+ Type : boolean
+
+ |
+
+ Default value : false
+ |
+
+ Defined in src/app/services/codebarre.service.ts:8
+ |
+
+ + + Private + taille + + + | +
+ Type : number
+
+ |
+
+ Default value : 0
+ |
+
+ Defined in src/app/services/codebarre.service.ts:11
+ |
+
import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+@Injectable({
+ providedIn: 'root'
+})
+export class CodebarreService {
+
+ public isListening: boolean = false;
+ private barcodeSubject = new Subject<string>();
+ private fullBarcode = ''; // Stockage du code-barres complet
+ private taille : number = 0;
+
+ getBarcodeStream() {
+ return this.barcodeSubject.asObservable();
+ }
+
+ nettoyer(input: string): string {
+ const cleanedString = input.replace(/[\\']/g, '');
+ return cleanedString;
+ }
+
+ countBackslashes(input: string): number {
+ const occurrences = input.split("\\").length - 1;
+ return occurrences;
+ }
+
+
+ startListening() {
+ this.isListening = true;
+ this.fullBarcode = '';
+ document.addEventListener('keypress', (event: KeyboardEvent) => {
+ const barcodeElement = event.key;
+ this.fullBarcode += barcodeElement; // Ajouter l'élément au code-barres complet
+ console.log(barcodeElement)
+ console.log(this.fullBarcode)
+ console.log(this.taille)
+ const codefull = this.countBackslashes(this.fullBarcode);
+ console.log(codefull); // 2
+ if (codefull == 2) { // Supposons que "Enter" termine la numérisation
+ // this.fullBarcode = ''; // Réinitialiser pour le prochain code-barres
+ console.log(this.fullBarcode)
+ const final = this.fullBarcode.split("\\")[1];
+ console.log(final)
+ const codebarre = this.nettoyer(final);
+ this.barcodeSubject.next(codebarre); // Envoyer le code-barres complet
+ console.log(codebarre)
+ this.fullBarcode = '';
+
+ }
+ });
+ }
+
+ stopListening() {
+ this.isListening = false;
+ // Ajoutez ici la logique pour arrêter l'écoute du scanner de codes-barres
+ }
+
+ isCurrentlyListening() {
+ return this.isListening;
+ }
+
+}
+
+ +
+ src/app/services/http.service.ts
+
+ Properties+ |
+
+ + | +
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient, logger: NGXLogger, router: Router)
+ |
+ ||||||||||||
+ Defined in src/app/services/http.service.ts:16
+ |
+ ||||||||||||
+
+ Parameters :
+
+
|
+
+ + + tedData + + + | +|||||||||
+tedData(url: string, data: any)
+ |
+ |||||||||
+ Defined in src/app/services/http.service.ts:25
+ |
+ |||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<HttpResponse<any>>
+
+
+
+
+ |
+
+ + + Public + http + + + | +
+ Type : HttpClient
+
+ |
+
+ Defined in src/app/services/http.service.ts:19
+ |
+
+ + + Public + logger + + + | +
+ Type : NGXLogger
+
+ |
+
+ Defined in src/app/services/http.service.ts:20
+ |
+
+ + + Public + router + + + | +
+ Type : Router
+
+ |
+
+ Defined in src/app/services/http.service.ts:22
+ |
+
import {
+ HttpClient,
+ HttpErrorResponse,
+ HttpResponse,
+} from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { NGXLogger } from "ngx-logger";
+import { Observable, of, Subject, throwError } from "rxjs";
+import { catchError, map, retry } from "rxjs/operators";
+import { HEADER_OPTIONS } from "../../core/config";
+// import { EnvironmentService } from "src/core/environment.service";
+@Injectable({
+ providedIn: 'root'
+})
+export class HttpService {
+
+ constructor(
+ public http: HttpClient,
+ public logger: NGXLogger,
+ // public env: EnvironmentService,
+ public router: Router
+ ) { }
+
+ tedData(url: string, data: any): Observable<HttpResponse<any>> {
+ const body = JSON.stringify(data);
+
+ return this.http
+ .post(url, body, {
+ headers: HEADER_OPTIONS,
+ observe: "response",
+ })
+ .pipe(
+ map((res) => {
+ console.log(res);
+ const response = JSON.parse(JSON.stringify(res.body)).response;
+ // console.log('postdata =>', response)
+ res = res.clone({
+ // body: responseDecode(response || '', this.env.environment.config.exchange_key)
+ body: response,
+ });
+
+ return res;
+ }),
+ // catchError((error) => {
+ // let errorMessage;
+ // switch (error.status) {
+ // case 201:
+ // errorMessage = responseDecode(
+ // error?.error?.response,
+ // this.env.environment.config.exchange_key
+ // );
+ // break;
+ // case 200:
+ // errorMessage = responseDecode(
+ // error?.error?.response,
+ // this.env.environment.config.exchange_key
+ // );
+ // break;
+ // case 400:
+ // errorMessage = responseDecode(
+ // error?.error?.response,
+ // this.env.environment.config.exchange_key
+ // );
+ // break;
+ // case 422:
+ // errorMessage = responseDecode(
+ // error?.error?.response,
+ // this.env.environment.config.exchange_key
+ // );
+ // break;
+ // case 401:
+ // errorMessage = { message: "Votre session a expiré" };
+
+ // // document.location.href = '#/public/sign-in/?sessionExpired=true'
+ // this.router.navigate(["/public/sign-in"], {
+ // queryParams: { sessionExpired: true },
+ // });
+ // break;
+ // case 403:
+ // this.router.navigate(["/public/403"]);
+ // break;
+ // default:
+ // errorMessage = { message: error.statusText };
+ // break;
+ // }
+ // return throwError({
+ // status: error.status,
+ // ok: error.ok,
+ // statusText: error.statusText,
+ // error: errorMessage,
+ // });
+ // })
+ );
+ }
+}
+
+ +
+ src/app/services/ip.service.ts
+
+ Methods+ |
+
+
|
+
+ + + Async + getLocalIpAddress + + + | +
+
+ getLocalIpAddress()
+ |
+
+ Defined in src/app/services/ip.service.ts:9
+ |
+
+
+
+ Returns :
+ Promise<string | undefined>
+
+ |
+
import { Injectable } from '@angular/core';
+import { internalIpV4 } from 'internal-ip';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class IpService {
+ async getLocalIpAddress(): Promise<string | undefined> {
+ const ipAddress = await internalIpV4();
+ console.log(ipAddress)
+ return ipAddress;
+ }
+}
+
+ +
+ src/app/_services/trafics/operateur/operateur.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + getAllOperator + + + | +
+getAllOperator()
+ |
+
+ + | +
+
+
+ Returns :
+ Observable<IOperateur[]>
+
+ |
+
+ + + Private + OpUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/operateur/`
+ |
+
+ + | +
import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class OperateurService {
+ //private OpUrl = 'http://192.168.1.223:8001/operateur/';
+ private OpUrl = `${environment.apiBaseUrl}/operateur/`;
+
+ constructor(
+ private http: HttpClient
+ // public operateur: IOperateur
+ ) {}
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ getAllOperator(): Observable<IOperateur[]> {
+ return this.http.get<IOperateur[]>(this.OpUrl);
+ }
+}
+
+ +
+ src/app/_services/trafics/paiement/paiement.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + errorHandler + + + | +||||||
+errorHandler(error: any)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ any
+
+
+
+
+ |
+
+ + + getAllPaiment + + + | +
+getAllPaiment()
+ |
+
+ + | +
+
+
+ Returns :
+ Observable<IPaiement[]>
+
+ |
+
+ + + httpOptions + + + | +
+ Type : object
+
+ |
+
+ Default value : {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ }
+ |
+
+ + | +
+ + + Private + PUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/paymentdata/`
+ |
+
+ + | +
import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, catchError, throwError } from 'rxjs';
+import { IPaiement } from 'src/app/_interfaces/trafics/paiement/paiement';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class PaiementService {
+ private PUrl = `${environment.apiBaseUrl}/paymentdata/`;
+
+ httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ };
+
+ constructor(private http: HttpClient) {}
+
+ getAllPaiment(): Observable<IPaiement[]> {
+ return this.http
+ .get<IPaiement[]>(this.PUrl)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ errorHandler(error: any) {
+ let errorMessage = '';
+ if (error.error instanceof ErrorEvent) {
+ errorMessage = error.error.message;
+ } else {
+ errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+ }
+ return throwError(errorMessage);
+ }
+}
+
+ +
+ src/app/services/paiement.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+ + + getSharedData + + + | +
+getSharedData()
+ |
+
+ Defined in src/app/services/paiement.service.ts:18
+ |
+
+
+
+ Returns :
+ any
+
+ |
+
+ + + setSharedData + + + | +||||||
+setSharedData(data: any)
+ |
+ ||||||
+ Defined in src/app/services/paiement.service.ts:14
+ |
+ ||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ void
+
+
+
+
+ |
+
+ + + Private + sharedData + + + | +
+ Type : any
+
+ |
+
+ Defined in src/app/services/paiement.service.ts:9
+ |
+
+ + + sharedData$ + + + | +
+ Type : Observable<any>
+
+ |
+
+ Default value : this.sharedDataSubject.asObservable()
+ |
+
+ Defined in src/app/services/paiement.service.ts:12
+ |
+
+ + + Private + sharedDataSubject + + + | +
+ Type : BehaviorSubject<any>
+
+ |
+
+ Default value : new BehaviorSubject<any>(null)
+ |
+
+ Defined in src/app/services/paiement.service.ts:11
+ |
+
import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PaiementService {
+
+ private sharedData: any;
+
+ private sharedDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+ sharedData$: Observable<any> = this.sharedDataSubject.asObservable();
+
+ setSharedData(data: any): void {
+ this.sharedDataSubject.next(data);
+ }
+
+ getSharedData(): any {
+ return this.sharedData;
+ }
+}
+
+ +
+ src/app/_services/service/service.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(http: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + createService + + + | +||||||
+createService(service: IService)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<IService>
+
+
+
+
+ |
+
+ + + deleteService + + + | +||||||
+deleteService(id: number)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<void>
+
+
+
+
+ |
+
+ + + getServiceById + + + | +||||||
+getServiceById(id: number)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<IService>
+
+
+
+
+ |
+
+ + + getServices + + + | +
+getServices()
+ |
+
+ + | +
+
+
+ Returns :
+ Observable<IService[]>
+
+ |
+
+ + + updateService + + + | +||||||
+updateService(service: IService)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<IService>
+
+
+
+
+ |
+
+ + + Private + SUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/services/`
+ |
+
+ + | +
import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IService } from 'src/app/_interfaces/servives/service';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class ServiceService {
+ //private SUrl = 'http://192.168.1.223:8001/services/'; // Remplacez par l'URL de votre API
+ private SUrl = `${environment.apiBaseUrl}/services/`;
+
+ constructor(private http: HttpClient) {}
+
+ // Get all services
+ getServices(): Observable<IService[]> {
+ return this.http.get<IService[]>(this.SUrl);
+ }
+
+ // Get a single service by id
+ getServiceById(id: number): Observable<IService> {
+ const url = `${this.SUrl}/${id}`;
+ return this.http.get<IService>(url);
+ }
+
+ // Create a new service
+ createService(service: IService): Observable<IService> {
+ return this.http.post<IService>(this.SUrl, service, {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ });
+ }
+
+ // Update an existing service
+ updateService(service: IService): Observable<IService> {
+ const url = `${this.SUrl}/${service.service_id}`;
+ return this.http.put<IService>(url, service, {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ });
+ }
+
+ // Delete a service
+ deleteService(id: number): Observable<void> {
+ const url = `${this.SUrl}/${id}`;
+ return this.http.delete<void>(url);
+ }
+}
+
+ +
+ src/app/_services/trafics/transaction/transaction.service.ts
+
+ Properties+ |
+
+
|
+
+ Methods+ |
+
+
|
+
+constructor(httpClient: HttpClient)
+ |
+ ||||||
+ + | +||||||
+
+ Parameters :
+
+
|
+
+ + + create + + + | +||||||
+create(transaction: ITransaction)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<ITransaction>
+
+
+
+
+ |
+
+ + + delete + + + | +||||||
+delete(transaction_id: number)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<void>
+
+
+
+
+ |
+
+ + + Private + errorHandler + + + | +||||||
+
+ errorHandler(error: any)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ any
+
+
+
+
+ |
+
+ + + find + + + | +||||||
+find(transaction_id: number)
+ |
+ ||||||
+ + | +||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<ITransaction>
+
+
+
+
+ |
+
+ + + getAll + + + | +
+getAll()
+ |
+
+ + | +
+
+
+ Returns :
+ Observable<ITransaction[]>
+
+ |
+
+ + + getDataTable + + + | +
+getDataTable()
+ |
+
+ + | +
+
+
+ Returns :
+ Observable<IMerchantData>
+
+ |
+
+ + + update + + + | +|||||||||
+update(transaction_id: number, transaction: ITransaction)
+ |
+ |||||||||
+ + | +|||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<ITransaction>
+
+
+
+
+ |
+
+ + + httpOptions + + + | +
+ Type : object
+
+ |
+
+ Default value : {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ }
+ |
+
+ + | +
+ + + Private + HtUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/api/tableau_bord/1`
+ |
+
+ + | +
+ + + Private + TUrl + + + | +
+ Default value : `${environment.apiBaseUrl}/transactions`
+ |
+
+ + | +
import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, catchError, throwError } from 'rxjs';
+import {
+ ITransaction,
+ IMerchantData,
+} from 'src/app/_interfaces/trafics/transaction/transaction';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class TransactionService {
+ private HtUrl = `${environment.apiBaseUrl}/api/tableau_bord/1`;
+ private TUrl = `${environment.apiBaseUrl}/transactions`;
+
+ httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ }),
+ };
+
+ constructor(private httpClient: HttpClient) {}
+
+ // Get all transactions
+ getAll(): Observable<ITransaction[]> {
+ return this.httpClient
+ .get<ITransaction[]>(this.TUrl)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Get merchant data for a table
+ getDataTable(): Observable<IMerchantData> {
+ return this.httpClient
+ .get<IMerchantData>(this.HtUrl)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Create a new transaction
+ create(transaction: ITransaction): Observable<ITransaction> {
+ return this.httpClient
+ .post<ITransaction>(this.TUrl, transaction, this.httpOptions)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Find a transaction by id
+ find(transaction_id: number): Observable<ITransaction> {
+ const url = `${this.TUrl}/${transaction_id}`;
+ return this.httpClient
+ .get<ITransaction>(url)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Update an existing transaction
+ update(
+ transaction_id: number,
+ transaction: ITransaction
+ ): Observable<ITransaction> {
+ const url = `${this.TUrl}/${transaction_id}`;
+ return this.httpClient
+ .put<ITransaction>(url, transaction, this.httpOptions)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Delete a transaction
+ delete(transaction_id: number): Observable<void> {
+ const url = `${this.TUrl}/${transaction_id}`;
+ return this.httpClient
+ .delete<void>(url, this.httpOptions)
+ .pipe(catchError(this.errorHandler));
+ }
+
+ // Error handler
+ private errorHandler(error: any) {
+ let errorMessage = '';
+ if (error.error instanceof ErrorEvent) {
+ errorMessage = error.error.message;
+ } else {
+ errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+ }
+ return throwError(() => new Error(errorMessage));
+ }
+}
+
+ +
+ src/app/_helpers/token.interceptor.ts
+
+ Methods+ |
+
+
|
+
+constructor(authService: AuthService, router: Router)
+ |
+ |||||||||
+ Defined in src/app/_helpers/token.interceptor.ts:16
+ |
+ |||||||||
+
+ Parameters :
+
+
|
+
+ + + intercept + + + | +|||||||||
+intercept(request: HttpRequest
+ |
+ |||||||||
+ Defined in src/app/_helpers/token.interceptor.ts:22
+ |
+ |||||||||
+
+
+ Parameters :
+
+
+
+ Returns :
+ Observable<HttpEvent<any>>
+
+
+
+
+ |
+
import { Injectable } from '@angular/core';
+import {
+ HttpRequest,
+ HttpHandler,
+ HttpEvent,
+ HttpInterceptor,
+ HttpErrorResponse,
+} from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { AuthService } from './services/auth.service';
+import { Router } from '@angular/router';
+import { environment } from 'src/environments/environment';
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+ constructor(
+ private authService: AuthService,
+ private router: Router
+ ) {}
+
+ intercept(
+ request: HttpRequest<any>,
+ next: HttpHandler
+ ): Observable<HttpEvent<any>> {
+ if (request.url.startsWith(environment.apiBaseUrl + '/api/token')) {
+ const token = this.authService.getToken();
+ if (token) {
+ request = request.clone({
+ setHeaders: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ }
+ }
+ return next.handle(request).pipe(
+ catchError((error: HttpErrorResponse) => {
+ if (error.status === 401) {
+ this.authService.logout();
+ this.router.navigate(['/auth']);
+ }
+ return throwError(error);
+ })
+ );
+ }
+}
+
+ +
+ src/app/reversements/reversement/reversement/reversement.component.ts
+
+ Properties+ |
+
+
|
+
+ + dateDemande + + + + + | +
+ dateDemande:
+ |
+
+ Type : string
+
+ |
+
+ + dateReversement + + + + + | +
+ dateReversement:
+ |
+
+ Type : string
+
+ |
+
+ + montant + + + + + | +
+ montant:
+ |
+
+ Type : number
+
+ |
+
+ + numReversement + + + + + | +
+ numReversement:
+ |
+
+ Type : number
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : string
+
+ |
+
+ + typeReversement + + + + + | +
+ typeReversement:
+ |
+
+ Type : string
+
+ |
+
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;
+}
+
+const ELEMENT_DATA: Element[] = [
+ {
+ 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,
+ 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',
+})
+export class ReversementComponent {
+ 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/ui/forms-fields/forms-fields.component.ts
+
+ Properties+ |
+
+
|
+
+ + value + + + + + | +
+ value:
+ |
+
+ Type : string
+
+ |
+
+ + viewValue + + + + + | +
+ viewValue:
+ |
+
+ Type : string
+
+ |
+
import { Component } from '@angular/core';
+import {
+ MatFormField,
+ MatLabel,
+ MatHint,
+ MatPrefix,
+ MatSuffix,
+ MatFormFieldModule,
+} from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatIcon } from '@angular/material/icon';
+import {
+ MatButtonModule,
+ MatIconAnchor,
+ MatIconButton,
+} from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatOption, MatSelect } from '@angular/material/select';
+
+interface Food {
+ value: string;
+ viewValue: string;
+}
+
+@Component({
+ selector: 'bgui-forms-fields',
+ standalone: true,
+ imports: [
+ MatFormField,
+ MatFormFieldModule,
+ MatLabel,
+ MatHint,
+ MatButtonModule,
+ MatInput,
+ MatPrefix,
+ MatSuffix,
+ MatIcon,
+ MatIconButton,
+ MatTooltip,
+ MatIconAnchor,
+ RouterLink,
+ FormsModule,
+ MatSelect,
+ MatOption,
+ ],
+ templateUrl: './forms-fields.component.html',
+ styleUrl: './forms-fields.component.scss',
+})
+export class FormsFieldsComponent {
+ value = 'Clear me';
+
+ foods: Food[] = [
+ { value: 'steak-0', viewValue: 'Steak' },
+ { value: 'pizza-1', viewValue: 'Pizza' },
+ { value: 'tacos-2', viewValue: 'Tacos' },
+ ];
+}
+
+ +
+ src/app/interfaces/core-parameter.interface.ts
+
+ Properties+ |
+
+
|
+
+ + category + + + + + | +
+ category:
+ |
+
+ Type : string
+
+ |
+
+ + description + + + + + | +
+ description:
+ |
+
+ Type : string
+
+ |
+
+ + family + + + + + | +
+ family:
+ |
+
+ Type : string
+
+ |
+
+ + id + + + + + | +
+ id:
+ |
+
+ Type : string
+
+ |
+
+ + is_load_onstart + + + + + | +
+ is_load_onstart:
+ |
+
+ Type : boolean
+
+ |
+
+ + key + + + + + | +
+ key:
+ |
+
+ Type : string
+
+ |
+
+ + parent_key + + + + + | +
+ parent_key:
+ |
+
+ Type : string
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : boolean
+
+ |
+
+ + value + + + + + | +
+ value:
+ |
+
+ Type : string
+
+ |
+
export interface ICoreParameter {
+ id: string
+ key: string
+ value: string
+ description: string
+ family: string
+ category: string
+ parent_key: string
+ is_load_onstart: boolean
+ status: boolean
+}
+ +
+ src/app/_helpers/models/user.ts
+
+ Properties+ |
+
+
|
+
+ + password + + + + + | +
+ password:
+ |
+
+ Type : string
+
+ |
+
+ + username + + + + + | +
+ username:
+ |
+
+ Type : string
+
+ |
+
export interface ICredential {
+ username: string;
+ password: string;
+}
+
+ +
+ src/app/interfaces/user.ts
+
+ Properties+ |
+
+
|
+
+ + data + + + + + | +
+ data:
+ |
+
+ Type : IUser[]
+
+ |
+
export interface IUser {
+ username: string;
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ password: string;
+ createdAt: string;
+ updatedAt: string;
+ deletedAt: null | string;
+}
+
+export interface ISingleUser {
+ data: IUser;
+}
+
+export interface IDataUser {
+ data: IUser[];
+}
+
+export interface ITokenUser {
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ iap?: number;
+ exp?: number;
+}
+
+ +
+ src/app/_interfaces/trafics/transaction/transaction.ts
+
+ Properties+ |
+
+
|
+
+ + last_five_transactions + + + + + | +
+ last_five_transactions:
+ |
+
+ Type : ITransaction[]
+
+ |
+
+ + merchant_key + + + + + | +
+ merchant_key:
+ |
+
+ Type : string
+
+ |
+
+ + revesement + + + + + | +
+ revesement:
+ |
+
+ Type : number
+
+ |
+
+ + solde + + + + + | +
+ solde:
+ |
+
+ Type : number
+
+ |
+
+ + total_journee + + + + + | +
+ total_journee:
+ |
+
+ Type : number
+
+ |
+
+ + total_transaction + + + + + | +
+ total_transaction:
+ |
+
+ Type : number
+
+ |
+
+ + type_operateur + + + + + | +
+ type_operateur:
+ |
+
+ Type : ITypeOperateur[]
+
+ |
+
export interface ITypeOperateur {
+ id_type_paiement: number;
+ label: string;
+ total_montant: number;
+}
+
+export interface ITransaction {
+ type_paiement: number;
+ type_paiement_label: string;
+ marchand: string;
+ service: string;
+ montant: number;
+ date: string;
+ commentaire: string;
+ etat: boolean;
+ status: number;
+ reference: string;
+ transaction_id: number;
+}
+
+ export interface IMerchantData {
+ merchant_key: string;
+ solde: number;
+ total_transaction: number;
+ total_journee: number;
+ revesement: number;
+ type_operateur: ITypeOperateur[];
+ last_five_transactions: ITransaction[];
+}
+
+ +
+ src/app/_interfaces/trafics/operateur/operateur.ts
+
+ Properties+ |
+
+
|
+
+ + code + + + + + | +
+ code:
+ |
+
+ Type : string
+
+ |
+
+ + etat + + + + + | +
+ etat:
+ |
+
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ + information + + + + + | +
+ information:
+ |
+
+ Type : string
+
+ |
+
+ + liens + + + + + | +
+ liens:
+ |
+
+ Type : string
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : number
+
+ |
+
export interface IOperateur {
+ id: number;
+ code: string;
+ liens: string;
+ etat: true;
+ status: number;
+ information: string;
+}
+ +
+ src/app/_interfaces/trafics/paiement/paiement.ts
+
+ Properties+ |
+
+
|
+
+ + amount + + + + + | +
+ amount:
+ |
+
+ Type : number
+
+ |
+
+ + cancel_url + + + + + | +
+ cancel_url:
+ |
+
+ Type : string
+
+ |
+
+ + currency + + + + + | +
+ currency:
+ |
+
+ Type : string
+
+ |
+
+ + description + + + + + | +
+ description:
+ |
+
+ Type : string
+
+ |
+
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ + lang + + + + + | +
+ lang:
+ |
+
+ Type : string
+
+ |
+
+ + merchant_key + + + + + | +
+ merchant_key:
+ |
+
+ Type : string
+
+ |
+
+ + message + + + + + | +
+ message:
+ |
+
+ Type : string
+
+ |
+
+ + notif_token + + + + + | +
+ notif_token:
+ |
+
+ Type : string
+
+ |
+
+ + notif_url + + + + + | +
+ notif_url:
+ |
+
+ Type : string
+
+ |
+
+ + order_id + + + + + | +
+ order_id:
+ |
+
+ Type : string
+
+ |
+
+ + pay_token + + + + + | +
+ pay_token:
+ |
+
+ Type : string
+
+ |
+
+ + payment_url + + + + + | +
+ payment_url:
+ |
+
+ Type : string
+
+ |
+
+ + reference + + + + + | +
+ reference:
+ |
+
+ Type : string
+
+ |
+
+ + return_url + + + + + | +
+ return_url:
+ |
+
+ Type : string
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : string
+
+ |
+
export interface IPaiement {
+ id: number;
+ merchant_key: string;
+ currency: string;
+ order_id: string;
+ amount: number;
+ return_url: string;
+ cancel_url: string;
+ notif_url: string;
+ lang: string;
+ reference: string;
+ status: string;
+ message: string;
+ pay_token: string;
+ payment_url: string;
+ notif_token: string;
+ description: string;
+
+}
+
+ +
+ src/app/_interfaces/servives/service.ts
+
+ Properties+ |
+
+
|
+
+ + description + + + + + | +
+ description:
+ |
+
+ Type : string
+
+ |
+
+ + marchand + + + + + | +
+ marchand:
+ |
+
+ Type : string
+
+ |
+
+ + nom_service + + + + + | +
+ nom_service:
+ |
+
+ Type : string
+
+ |
+
+ + service_id + + + + + | +
+ service_id:
+ |
+
+ Type : number
+
+ |
+
export interface IService {
+ service_id: number;
+ nom_service: string;
+ description: string;
+ marchand: string;
+}
+
+ +
+ src/app/interfaces/user.ts
+
+ Properties+ |
+
+
|
+
+ + data + + + + + | +
+ data:
+ |
+
+ Type : IUser
+
+ |
+
export interface IUser {
+ username: string;
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ password: string;
+ createdAt: string;
+ updatedAt: string;
+ deletedAt: null | string;
+}
+
+export interface ISingleUser {
+ data: IUser;
+}
+
+export interface IDataUser {
+ data: IUser[];
+}
+
+export interface ITokenUser {
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ iap?: number;
+ exp?: number;
+}
+
+ +
+ src/app/_helpers/models/token.ts
+
+ Properties+ |
+
+
|
+
+ + token + + + + + | +
+ token:
+ |
+
+ Type : string
+
+ |
+
export interface IToken {
+ token: string;
+}
+
+ +
+ src/app/interfaces/user.ts
+
+ Properties+ |
+
+ + | +
+ + email + + + + + | +
+ email:
+ |
+
+ Type : string
+
+ |
+
+ + exp + + + + + | +
+ exp:
+ |
+
+ Type : number
+
+ |
+
+ Optional + | +
+ + iap + + + + + | +
+ iap:
+ |
+
+ Type : number
+
+ |
+
+ Optional + | +
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ + nom + + + + + | +
+ nom:
+ |
+
+ Type : string
+
+ |
+
+ + prenom + + + + + | +
+ prenom:
+ |
+
+ Type : string
+
+ |
+
export interface IUser {
+ username: string;
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ password: string;
+ createdAt: string;
+ updatedAt: string;
+ deletedAt: null | string;
+}
+
+export interface ISingleUser {
+ data: IUser;
+}
+
+export interface IDataUser {
+ data: IUser[];
+}
+
+export interface ITokenUser {
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ iap?: number;
+ exp?: number;
+}
+
+ +
+ src/app/_interfaces/trafics/transaction/transaction.ts
+
+ Properties+ |
+
+
|
+
+ + commentaire + + + + + | +
+ commentaire:
+ |
+
+ Type : string
+
+ |
+
+ + date + + + + + | +
+ date:
+ |
+
+ Type : string
+
+ |
+
+ + etat + + + + + | +
+ etat:
+ |
+
+ Type : boolean
+
+ |
+
+ + marchand + + + + + | +
+ marchand:
+ |
+
+ Type : string
+
+ |
+
+ + montant + + + + + | +
+ montant:
+ |
+
+ Type : number
+
+ |
+
+ + reference + + + + + | +
+ reference:
+ |
+
+ Type : string
+
+ |
+
+ + service + + + + + | +
+ service:
+ |
+
+ Type : string
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : number
+
+ |
+
+ + transaction_id + + + + + | +
+ transaction_id:
+ |
+
+ Type : number
+
+ |
+
+ + type_paiement + + + + + | +
+ type_paiement:
+ |
+
+ Type : number
+
+ |
+
+ + type_paiement_label + + + + + | +
+ type_paiement_label:
+ |
+
+ Type : string
+
+ |
+
export interface ITypeOperateur {
+ id_type_paiement: number;
+ label: string;
+ total_montant: number;
+}
+
+export interface ITransaction {
+ type_paiement: number;
+ type_paiement_label: string;
+ marchand: string;
+ service: string;
+ montant: number;
+ date: string;
+ commentaire: string;
+ etat: boolean;
+ status: number;
+ reference: string;
+ transaction_id: number;
+}
+
+ export interface IMerchantData {
+ merchant_key: string;
+ solde: number;
+ total_transaction: number;
+ total_journee: number;
+ revesement: number;
+ type_operateur: ITypeOperateur[];
+ last_five_transactions: ITransaction[];
+}
+
+ +
+ src/app/_interfaces/trafics/transaction/transaction.ts
+
+ Properties+ |
+
+
|
+
+ + id_type_paiement + + + + + | +
+ id_type_paiement:
+ |
+
+ Type : number
+
+ |
+
+ + label + + + + + | +
+ label:
+ |
+
+ Type : string
+
+ |
+
+ + total_montant + + + + + | +
+ total_montant:
+ |
+
+ Type : number
+
+ |
+
export interface ITypeOperateur {
+ id_type_paiement: number;
+ label: string;
+ total_montant: number;
+}
+
+export interface ITransaction {
+ type_paiement: number;
+ type_paiement_label: string;
+ marchand: string;
+ service: string;
+ montant: number;
+ date: string;
+ commentaire: string;
+ etat: boolean;
+ status: number;
+ reference: string;
+ transaction_id: number;
+}
+
+ export interface IMerchantData {
+ merchant_key: string;
+ solde: number;
+ total_transaction: number;
+ total_journee: number;
+ revesement: number;
+ type_operateur: ITypeOperateur[];
+ last_five_transactions: ITransaction[];
+}
+
+ +
+ src/app/interfaces/user.ts
+
+ Properties+ |
+
+
|
+
+ + createdAt + + + + + | +
+ createdAt:
+ |
+
+ Type : string
+
+ |
+
+ + deletedAt + + + + + | +
+ deletedAt:
+ |
+
+ Type : null | string
+
+ |
+
+ + email + + + + + | +
+ email:
+ |
+
+ Type : string
+
+ |
+
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ + nom + + + + + | +
+ nom:
+ |
+
+ Type : string
+
+ |
+
+ + password + + + + + | +
+ password:
+ |
+
+ Type : string
+
+ |
+
+ + prenom + + + + + | +
+ prenom:
+ |
+
+ Type : string
+
+ |
+
+ + updatedAt + + + + + | +
+ updatedAt:
+ |
+
+ Type : string
+
+ |
+
+ + username + + + + + | +
+ username:
+ |
+
+ Type : string
+
+ |
+
export interface IUser {
+ username: string;
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ password: string;
+ createdAt: string;
+ updatedAt: string;
+ deletedAt: null | string;
+}
+
+export interface ISingleUser {
+ data: IUser;
+}
+
+export interface IDataUser {
+ data: IUser[];
+}
+
+export interface ITokenUser {
+ id: number;
+ nom: string;
+ prenom: string;
+ email: string;
+ iap?: number;
+ exp?: number;
+}
+
+ +
+ src/app/utilisateurs/utilisateurs.component.ts
+
+ Properties+ |
+
+
|
+
+ + actions + + + + + | +
+ actions:
+ |
+
+ Type : string
+
+ |
+
+ + email + + + + + | +
+ email:
+ |
+
+ Type : string
+
+ |
+
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ + nom + + + + + | +
+ nom:
+ |
+
+ Type : string
+
+ |
+
+ + prenom + + + + + | +
+ prenom:
+ |
+
+ Type : string
+
+ |
+
import { Component, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+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, RouterOutlet } 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;
+ email: string;
+ nom: string;
+ prenom: string;
+ actions: string;
+}
+
+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: [
+ CommonModule,
+ MatPaginator,
+ MatTableModule,
+ MatFormFieldModule,
+ MatInputModule,
+ CarouselComponent,
+ MatCardModule,
+ MatCardTitle,
+ ReactiveFormsModule,
+ MatButtonModule,
+ MatIconModule,
+ MatCheckboxModule,
+ RouterOutlet,
+ MatPaginatorModule,
+ RouterLink,
+ FormsModule,
+ MatMenuModule,
+ ],
+ providers: [],
+ templateUrl: './utilisateurs.component.html',
+ 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.');
+ }
+ 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) {
+ this.dataSource.paginator = this.paginator;
+ }
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ +
+ src/app/core/layout/sidebar/menu.model.ts
+
+ Properties+ |
+
+
|
+
+ + badge + + + + + | +
+ badge:
+ |
+
+ Type : any
+
+ |
+
+ Optional + | +
+ + expanded + + + + + | +
+ expanded:
+ |
+
+ Type : boolean
+
+ |
+
+ Optional + | +
+ + icon + + + + + | +
+ icon:
+ |
+
+ Type : string
+
+ |
+
+ Optional + | +
+ + id + + + + + | +
+ id:
+ |
+
+ Type : number
+
+ |
+
+ Optional + | +
+ + isTitle + + + + + | +
+ isTitle:
+ |
+
+ Type : boolean
+
+ |
+
+ Optional + | +
+ + items + + + + + | +
+ items:
+ |
+
+ Type : MenuItem[]
+
+ |
+
+ Optional + | +
+ + label + + + + + | +
+ label:
+ |
+
+ Type : string
+
+ |
+
+ Optional + | +
+ + link + + + + + | +
+ link:
+ |
+
+ Type : string
+
+ |
+
+ Optional + | +
+ + parentId + + + + + | +
+ parentId:
+ |
+
+ Type : number
+
+ |
+
+ Optional + | +
+ + routeLink + + + + + | +
+ routeLink:
+ |
+
+ Type : string
+
+ |
+
+ Optional + | +
+ + subItems + + + + + | +
+ subItems:
+ |
+
+ Type : any
+
+ |
+
+ Optional + | +
export interface MenuItem {
+ id?: number;
+ label?: string;
+ icon?: string;
+ link?: string;
+ expanded?: boolean;
+ subItems?: any;
+ isTitle?: boolean;
+ badge?: any;
+ parentId?: number;
+ routeLink?: string;
+ items?: MenuItem[];
+}
+
+ +
+ src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.ts
+
+ Properties+ |
+
+
|
+
+ + contact + + + + + | +
+ contact:
+ |
+
+ Type : string
+
+ |
+
+ + dateTransaction + + + + + | +
+ dateTransaction:
+ |
+
+ Type : string
+
+ |
+
+ + email + + + + + | +
+ email:
+ |
+
+ Type : string
+
+ |
+
+ + modePaiement + + + + + | +
+ modePaiement:
+ |
+
+ Type : string
+
+ |
+
+ + montant + + + + + | +
+ montant:
+ |
+
+ Type : number
+
+ |
+
+ + nfacture + + + + + | +
+ nfacture:
+ |
+
+ Type : number
+
+ |
+
+ + nom + + + + + | +
+ nom:
+ |
+
+ Type : string
+
+ |
+
+ + prenom + + + + + | +
+ prenom:
+ |
+
+ Type : string
+
+ |
+
+ + service + + + + + | +
+ service:
+ |
+
+ Type : string
+
+ |
+
+ + status + + + + + | +
+ status:
+ |
+
+ Type : string
+
+ |
+
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 { FormsModule } from '@angular/forms';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { RouterLink } from '@angular/router';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
+
+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',
+ },
+];
+
+@Component({
+ selector: 'bgui-suivi-paiement',
+ standalone: true,
+ imports: [
+ MatFormFieldModule,
+ MatInputModule,
+ MatTableModule,
+ MatPaginatorModule,
+ CommonModule,
+ HttpClientModule,
+ RouterLink,
+ FormsModule,
+ ],
+ templateUrl: './suivi-paiement.component.html',
+ styleUrl: './suivi-paiement.component.scss',
+})
+export class SuiviPaiementComponent {
+ private url = 'http://192.168.1.223:8001/operateur/';
+
+ operateurs: IOperateur[] = [];
+ selectedOperateur: string = '';
+
+ displayedColumns: string[] = [
+ 'nfacture',
+ 'nom',
+ 'prenom',
+ 'contact',
+ 'service',
+ 'email',
+ 'montant',
+ 'modePaiement',
+ 'status',
+ 'dateTransaction',
+ ];
+ 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;
+ }
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+}
+
+ +
+ src/app/shared/carousel/carousel.component.ts
+
+ Properties+ |
+
+
|
+
+ + imageAlt + + + + + | +
+ imageAlt:
+ |
+
+ Type : string
+
+ |
+
+ + imageSrc + + + + + | +
+ imageSrc:
+ |
+
+ Type : string
+
+ |
+
import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface carouselImage {
+ imageSrc: string;
+ imageAlt: string;
+}
+
+@Component({
+ selector: 'bgui-carousel',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.scss'],
+})
+export class CarouselComponent implements OnInit {
+ @Input() images: carouselImage[] = [];
+ @Input() indicators = true;
+ @Input() controls = true;
+ @Input() autoSlide = false;
+ @Input() slideInterval = 70;
+
+ selectedIndex = 0;
+
+ constructor() {}
+
+ ngOnInit(): void {
+ if (this.autoSlide) {
+ this.autoSlideImages();
+ }
+ }
+
+ autoSlideImages(): void {
+ setInterval(() => {
+ this.onNextClick();
+ }, this.slideInterval);
+ }
+
+ selectImage(index: number): void {
+ this.selectedIndex = index;
+ }
+
+ onPrevClick(): void {
+ if (this.selectedIndex === 0) {
+ this.selectedIndex = this.images.length - 1;
+ } else {
+ this.selectedIndex--;
+ }
+ }
+
+ onNextClick(): void {
+ if (this.selectedIndex === this.images.length - 1) {
+ this.selectedIndex = 0;
+ } else {
+ this.selectedIndex++;
+ }
+ }
+}
+
+ + + + added_user_dev + + + | +
+ Type : string
+
+ |
+
+ Default value : "8d7bda5e-e277-459f-9407-e6f45212f0c6"
+ |
+
+ + + API_UR + + + | +
+ Default value : environment.production? "http://127.0.0.1:8000/api" : "http://127.0.0.1:8000/api"
+ |
+
+ + + API_URL + + + | +
+ Default value : environment.production? "https://192.168.1.211:1919/api" : "https://192.168.1.211:1919/api"
+ |
+
+ + + API_URl_WORKFLOW + + + | +
+ Default value : environment.production
+ ? "http://192.168.1.211:18090"
+ : "http://192.168.1.211:18090"
+ |
+
+ + + APP_DEFAULT_LANG + + + | +
+ Type : string
+
+ |
+
+ Default value : 'fr'
+ |
+
+ + + APP_HOST + + + | +
+ Default value : environment.production? "http://localhost" : "http://localhost"
+ |
+
+ + + CORE_ENDPOINT + + + | +
+ Default value : API_URL+"/core-config/init"
+ |
+
+ + + CORE_LOCAL + + + | +
+ Type : string
+
+ |
+
+ Default value : ""
+ |
+
+ + + DJ_HOST + + + | +
+ Default value : environment.production? "http://localhost:8000" : "http://localhost:8000"
+ |
+
+ + + DJANGO_URL + + + | +
+ Default value : environment.production? "http://127.0.0.1:8000/api" : "http://127.0.0.1:8000:8000/api"
+ |
+
+ + + DNGO_URL + + + | +
+ Default value : environment.production? "http://127.0.0.1:8000/api" : "http://127.0.0.1:8000/api"
+ |
+
+ + + FOR_ACCOUNT_ROOT + + + | +
+ Type : []
+
+ |
+
+ Default value : ['root', 'admin']
+ |
+
+ + + FOR_MENU_ROOT + + + | +
+ Type : []
+
+ |
+
+ Default value : ['ADMINISTRATION', 'SETTINGS', 'ORGANIZATIONAL']
+ |
+
+ + + FOR_PROFILE_ROOT + + + | +
+ Type : []
+
+ |
+
+ Default value : ['PROF_ROOT', 'PROF_ADMIN']
+ |
+
+ + + HOST + + + | +
+ Default value : environment.production? "http://localhost:1919" : "http://localhost:1919"
+ |
+
+ + + PARAMETERS_ENDPOINT + + + | +
+ Default value : API_URL+"/parameters"
+ |
+
+ + + ELEMENT_DATA + + + | +
+ Type : Element[]
+
+ |
+
+ Default value : [
+ {
+ 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',
+ },
+]
+ |
+
+ + + environment + + + | +
+ Type : object
+
+ |
+
+ Default value : {
+ production: true,
+ apiBaseUrl: 'http://192.168.1.223:8001',
+ env: 'local',
+}
+ |
+
+ + + environment + + + | +
+ Type : object
+
+ |
+
+ Default value : {
+ production: false,
+ apiBaseUrl: 'http://192.168.1.223:8001',
+ env: 'local',
+}
+ |
+
+ + + navbarData + + + | +
+ Type : MenuItem[]
+
+ |
+
+ Default value : [
+ {
+ label: 'Tableaux De Bord',
+ isTitle: true,
+ },
+ {
+ routeLink: 'admin',
+ icon: 'dashboard',
+ label: 'Dashboard',
+ },
+ {
+ icon: 'compare_arrows',
+ label: 'Transactions',
+ items: [
+ {
+ routeLink: 'transactions/suivi-transaction',
+ label: ' Suivi des transactions ',
+ },
+ {
+ routeLink: 'transactions/suivi-paiement',
+ label: ' Suivi des paiements',
+ },
+ ],
+ },
+
+ {
+ icon: 'monetization_on',
+ label: 'Reversements',
+ items: [
+ {
+ routeLink: 'reversements/demande',
+ label: ' Demande ',
+ },
+ {
+ routeLink: 'reversements/reversement',
+ label: ' Reversements ',
+ },
+ ],
+ },
+
+ {
+ icon: 'card_travel',
+ label: 'Services',
+ items: [
+ {
+ routeLink: 'assistances/view-service',
+ label: ' Mes services ',
+ },
+ {
+ routeLink: 'assistances/create-service',
+ label: ' Ajouter un Service ',
+ },
+ ],
+ },
+
+ {
+ icon: 'link',
+ label: 'Intégrations',
+ items: [
+ {
+ routeLink: 'integrations/php',
+ label: ' Integration Php ',
+ },
+ {
+ routeLink: 'integrations/wordpress',
+ label: ' Integration wordPress ',
+ },
+ {
+ routeLink: 'integrations/java-script',
+ label: ' Integration JavaScript ',
+ },
+ {
+ routeLink: 'integrations/prestashop',
+ label: ' PrestaShop ',
+ },
+ {
+ routeLink: 'integrations/moodel',
+ label: ' Moodel ',
+ },
+ {
+ routeLink: 'integrations/dart',
+ label: ' Integration Dart ',
+ },
+ {
+ routeLink: 'integrations/code-provider',
+ label: ' Code Provider ',
+ },
+ ],
+ },
+
+ {
+ icon: 'shop_two',
+ routeLink: 'application-android',
+ label: 'Application android',
+ },
+ {
+ icon: 'group_add',
+ routeLink: 'compte-associe',
+ label: 'Compte associé',
+ },
+ {
+ icon: 'person_add',
+ routeLink: 'utilisateurs',
+ label: 'Utilisateurs',
+ },
+ // {
+ // icon: 'admin_panel_settings',
+ // label: 'Mon profile',
+ // items: [
+ // {
+ // routeLink: '#',
+ // label: ' Informations ',
+ // },
+ // {
+ // routeLink: '#',
+ // label: ' Mot de passe ',
+ // },
+ // {
+ // routeLink: '#',
+ // label: ' Deconnexion',
+ // },
+ // ],
+ // },
+
+ // {
+ // routeLink: '',
+ // icon: 'dashboard',
+ // label: 'Ajustement',
+ // },
+ // {
+ // routeLink: '',
+ // icon: 'dashboard',
+ // label: 'Achats',
+ // },
+ // {
+ // routeLink: '',
+ // icon: 'dashboard',
+ // label: 'Transferts',
+ // },
+ // {
+ // icon: 'assignment',
+ // label: 'R Utilisateur',
+ // items: [
+ // {
+ // routeLink: '#',
+ // label: 'Fournisseurs',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Clients',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Utilisateur',
+ // },
+ // ],
+ // },
+ // {
+ // icon: 'assignment',
+ // label: 'UI',
+ // items: [
+ // {
+ // routeLink: 'buttons',
+ // label: 'Buttons',
+ // },
+ // {
+ // routeLink: 'formsfields',
+ // label: 'formsfields',
+ // },
+ // {
+ // routeLink: 'facturation',
+ // label: 'Ajouter',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Éditer',
+ // },
+ // ],
+ // },
+ // {
+ // icon: 'assignment',
+ // label: 'Facturation',
+ // items: [
+ // {
+ // routeLink: '#',
+ // label: 'list',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Aperçu',
+ // },
+ // {
+ // routeLink: 'facturation',
+ // label: 'Ajouter',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Éditer',
+ // },
+ // ],
+ // },
+ // {
+ // routeLink: 'auth',
+ // icon: 'swap_horizontal_circle',
+ // label: 'Page connexion',
+ // },
+ // {
+ // routeLink: 'caisse',
+ // icon: 'fax',
+ // label: 'Caisse',
+ // },
+ // {
+ // routeLink: 'service',
+ // icon: 'fax',
+ // label: 'Service',
+ // items:[
+ // {
+ // routeLink: '#',
+ // label: 'list',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Aperçu',
+ // },
+ // {
+ // routeLink: 'facturation',
+ // label: 'Ajouter',
+ // },
+ // {
+ // routeLink: '#',
+ // label: 'Éditer',
+ // },
+ // ]
+ // },
+ // {
+ // label: 'Config',
+ // isTitle: true,
+ // },
+ // {
+ // routeLink: 'coupens',
+ // icon: 'vpn_key',
+ // label: 'Clé API',
+ // },
+ // {
+ // routeLink: 'pages',
+ // icon: 'person',
+ // label: 'Profil',
+ // },
+ // {
+ // routeLink: 'dash',
+ // icon: 'settings',
+ // label: 'Paramètre',
+ // },
+]
+ |
+