Skip to content

B
beasy-front-angular
Commit 1481f24e by zadi francice
Options

sauvegarde

parent 35a549ff
Showing with 602 additions and 9 deletions
package.json
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
"@angular/material": "^17.1.2", "@angular/material": "^17.1.2",
"@angular/platform-browser": "^17.1.3", "@angular/platform-browser": "^17.1.3",
"@angular/platform-browser-dynamic": "^17.1.3", "@angular/platform-browser-dynamic": "^17.1.3",
"@angular/platform-server": "^17.1.3", "@angular/platform-server": "^17.3.11",
"@angular/router": "^17.1.3", "@angular/router": "^17.1.3",
"@angular/ssr": "^17.1.3", "@angular/ssr": "^17.3.8",
"@fortawesome/angular-fontawesome": "^0.14.1", "@fortawesome/angular-fontawesome": "^0.14.1",
"@fortawesome/fontawesome-free": "^6.5.2", "@fortawesome/fontawesome-free": "^6.5.2",
"@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/fontawesome-svg-core": "^6.4.2",
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
"apexcharts": "^3.45.2", "apexcharts": "^3.45.2",
"bootstrap": "^5.3.2", "bootstrap": "^5.3.2",
"chart.js": "^4.4.3", "chart.js": "^4.4.3",
"express": "^4.18.2", "express": "^4.19.2",
"internal-ip": "^8.0.0", "internal-ip": "^8.0.0",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
...@@ -76,9 +76,9 @@ ...@@ -76,9 +76,9 @@
"@angular/cli": "~17.1.3", "@angular/cli": "~17.1.3",
"@angular/compiler-cli": "^17.1.3", "@angular/compiler-cli": "^17.1.3",
"@biomejs/biome": "^1.6.4", "@biomejs/biome": "^1.6.4",
"@types/express": "^4.17.17", "@types/express": "^4.17.21",
"@types/jasmine": "~4.3.5", "@types/jasmine": "~4.3.5",
"@types/node": "^18.18.0", "@types/node": "^18.19.34",
"@typescript-eslint/eslint-plugin": "6.15.0", "@typescript-eslint/eslint-plugin": "6.15.0",
"@typescript-eslint/parser": "6.15.0", "@typescript-eslint/parser": "6.15.0",
"browser-sync": "^3.0.0", "browser-sync": "^3.0.0",
......
server.ts 0 → 100644
/* eslint-disable prettier/prettier */
import 'zone.js/node';
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import * as express from 'express';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
import bootstrap from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/angular-beasy/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export default bootstrap;
src/app/app.component.ts
import { Component } from '@angular/core'; import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterLink, RouterOutlet } from '@angular/router';
import { FooterComponent } from "./core/layout/footer/footer.component"; import { FooterComponent } from './core/layout/footer/footer.component';
import { CommonModule, isPlatformBrowser } from '@angular/common';
@Component({ @Component({
selector: 'bgui-root', selector: 'bgui-root',
standalone: true, standalone: true,
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
imports: [RouterOutlet, FooterComponent] imports: [CommonModule, RouterOutlet, RouterLink, FooterComponent],
}) })
export class AppComponent { export class AppComponent {
title = "Beas'y"; title = "Beas'y";
constructor(@Inject(PLATFORM_ID) private platformId: object) {}
ngOnInit(): void {
if (isPlatformBrowser(this.platformId)) {
const navMain = document.getElementById('navbarCollapse');
if (navMain) {
navMain.onclick = function onClick() {
navMain.classList.remove('show');
};
}
}
}
} }
src/app/app.config.server.ts 0 → 100644
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
// Define server-specific configuration
const serverConfig: ApplicationConfig = {
providers: [provideServerRendering()], // Add server rendering providers
};
// Merge the main application config with the server-specific config
export const config = mergeApplicationConfig(appConfig, serverConfig);
src/app/reversements/reversement/paiement/paiement.component.html 0 → 100644
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" [routerLink]="['/transactions/suivi-paiement']"
>Transactions</a
>
</li>
<a
class="breadcrumb-item active"
aria-current="page"
[routerLink]="['/transactions/suivi-transaction']"
>Suivi paiement</a
>
</ol>
</nav>
<div class="page-title" style="margin: 10px 10px">
<h4>Paiements</h4>
</div>
<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">
<div class="row" style="margin: auto">
<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">A</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"
style="border-radius: 15px; box-sizing: border-box">
Recherche <i class="fa fa-search m-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px">
<mat-form-field>
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef class="bold-text">
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 class="bold-text">
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 class="bold-text">
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 class="bold-text">
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 class="bold-text">
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 class="bold-text">
Montant
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.montant | currency: ' FCFA' : 'symbol' : '1.0-0' }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="modePaiement">
<mat-header-cell *matHeaderCellDef class="bold-text">
Opérateur
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.modePaiement }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef class="bold-text">
Status
</mat-header-cell>
<mat-cell *matCellDef="let element">
<span [ngClass]="getStatusClass(element.status)">
{{ element.status }}
</span>
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="dateTransaction">
<mat-header-cell *matHeaderCellDef class="bold-text">
Date Transaction
</mat-header-cell>
<mat-cell *matCellDef="let element">
{{ element.dateTransaction | date: 'dd/MM/yyy h:mm:ss' }}
</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, 30, 40, 50, 60, 70, 80, 90, 100]"
[showFirstLastButtons]="true">
</mat-paginator>
</div>
src/app/reversements/reversement/paiement/paiement.component.scss 0 → 100644
.card {
border-radius:0 !important;
background-color: #ffffff61;
}
.text {
color:black;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
.bold-text {
color:rgb(0, 0, 0);
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
\ No newline at end of file
src/app/reversements/reversement/paiement/paiement.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PaiementComponent } from './paiement.component';
describe('PaiementComponent', () => {
let component: PaiementComponent;
let fixture: ComponentFixture<PaiementComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PaiementComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PaiementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/reversements/reversement/paiement/paiement.component.ts 0 → 100644
/* eslint-disable @typescript-eslint/ban-types */
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, RouterLinkActive, RouterOutlet } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
import { OperateurService } from 'src/app/_services/trafics/operateur/operateur.service';
import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
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,
RouterOutlet,
RouterLinkActive,
],
templateUrl: './paiement.component.html',
styleUrl: './paiement.component.scss',
})
export class PaiementComponent {
private url = 'http://192.168.1.223:8001/operateur/';
breadCrumbItems: Array<{}> = [
{ label: 'Suivi transactions', url: '/transactions/suivi-transaction' },
{ label: 'Suivi paiement', url: '/transactions/suivi-paiement' },
];
operateurs: IOperateur[] = [];
selectedOperateur: string = '';
displayedColumns: string[] = [
// 'nfacture',
'dateTransaction',
'montant',
'modePaiement',
'nom',
'prenom',
'service',
'contact',
'email',
'status',
];
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();
}
getStatusClass(status: string): string {
return status === 'valide' ? 'valid-status' : 'invalid-status';
}
}
src/main.server.ts 0 → 100644
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
const bootstrap = () => bootstrapApplication(AppComponent, config);
export default bootstrap;
tsconfig.server.json 0 → 100644
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "./out-tsc/server",
"types": [
"node"
]
},
"files": [
"src/main.server.ts",
"server.ts"
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment