Skip to content

B
beasy-front-angular
Commit 0d212ed5 by zadi francice
Options

ajout du composant tpe

parent bc7df4d7
Showing with 2479 additions and 333 deletions
src/app/_helpers/auth.guard.ts
...@@ -30,7 +30,7 @@ export class AuthGuard implements CanActivate { ...@@ -30,7 +30,7 @@ export class AuthGuard implements CanActivate {
if (isAuthenticated) { if (isAuthenticated) {
return true; return true;
} else { } else {
this.router.navigate(['/auth']); this.router.navigate(['/login']);
return false; return false;
} }
} }
......
src/app/_helpers/services/auth.service.ts
...@@ -8,6 +8,9 @@ import { environment } from 'src/environments/environment'; ...@@ -8,6 +8,9 @@ import { environment } from 'src/environments/environment';
providedIn: 'root', providedIn: 'root',
}) })
export class AuthService { export class AuthService {
isAuthenticated(): boolean {
return !!sessionStorage.getItem('username');
}
private ApiVerifAuthUrl = `${environment.apiBaseUrl}/api/token/verify/`; private ApiVerifAuthUrl = `${environment.apiBaseUrl}/api/token/verify/`;
private apiURL = `${environment.apiBaseUrl}/user-info/`; private apiURL = `${environment.apiBaseUrl}/user-info/`;
...@@ -34,13 +37,7 @@ export class AuthService { ...@@ -34,13 +37,7 @@ export class AuthService {
public errors: any[] = []; public errors: any[] = [];
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}
isAuthenticated(): boolean {
// implémenter la logique pour vérifier si l'utilisateur est authentifié
// cela peut impliquer de vérifier un token dans le localStorage ou sessionStorage
return !!sessionStorage.getItem('username');
}
public verifyToken( public verifyToken(
token: string token: string
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
...@@ -72,9 +69,6 @@ export class AuthService { ...@@ -72,9 +69,6 @@ export class AuthService {
) )
); );
} }
// Utilise http.post() pour obtenir un jeton d'authentification à partir de l'endpoint djangorestframework-jwt
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public login(username: string, password: string): Observable<any> { public login(username: string, password: string): Observable<any> {
const headers = new HttpHeaders({ const headers = new HttpHeaders({
Accept: 'application/json', Accept: 'application/json',
...@@ -124,13 +118,13 @@ export class AuthService { ...@@ -124,13 +118,13 @@ export class AuthService {
// Déconnexion de l'utilisateur // Déconnexion de l'utilisateur
public logout() { public logout() {
this.token = ''; // sessionStorage.removeItem('username');
this.token_expires;
this.username = ''; console.log('deconnxion en cours.................')
} }
// Met à jour les données utilisateur après une connexion réussie ou un rafraîchissement de jeton // Met à jour les données utilisateur après une connexion réussie ou un rafraîchissement de jeton
public updateData(token: string) { private updateData(token: string) {
this.token = token; this.token = token;
this.errors = []; this.errors = [];
......
src/app/_helpers/services/storage.service.spec.ts 0 → 100644
import { TestBed } from '@angular/core/testing';
import { StorageService } from './storage.service';
describe('StorageService', () => {
let service: StorageService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(StorageService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
src/app/_helpers/services/storage.service.ts 0 → 100644
import { Injectable } from '@angular/core';
const USER_KEY = 'auth';
@Injectable({
providedIn: 'root'
})
export class StorageService {
constructor() {}
clean(): void {
window.sessionStorage.clear();
}
public saveUser(user: any): void {
window.sessionStorage.removeItem(USER_KEY);
window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
}
public getUser(): any {
const user = window.sessionStorage.getItem(USER_KEY);
if (user) {
return JSON.parse(user);
}
return {};
}
public isLoggedIn(): boolean {
const user = window.sessionStorage.getItem(USER_KEY);
if (user) {
return true;
}
return false;
}
}
\ No newline at end of file
src/app/account/auth/login-standard-user/login-standard-user.component.ts
...@@ -12,7 +12,7 @@ import { MatInputModule } from '@angular/material/input'; ...@@ -12,7 +12,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { Router, RouterLink, RouterOutlet } from '@angular/router'; import { Router } from '@angular/router';
import { AuthService } from 'src/app/_helpers/services/auth.service'; import { AuthService } from 'src/app/_helpers/services/auth.service';
@Component({ @Component({
...@@ -31,14 +31,16 @@ import { AuthService } from 'src/app/_helpers/services/auth.service'; ...@@ -31,14 +31,16 @@ import { AuthService } from 'src/app/_helpers/services/auth.service';
], ],
templateUrl: './login-standard-user.component.html', templateUrl: './login-standard-user.component.html',
styleUrls: ['./login-standard-user.component.scss'], styleUrls: ['./login-standard-user.component.scss'],
providers: [AuthService, RouterLink, RouterOutlet], providers: [AuthService],
}) })
export class LoginStandardUserComponent implements OnInit { export class LoginStandardUserComponent implements OnInit {
router = inject(Router);
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
//authService: any; //authService: any;
constructor(private authService: AuthService) {} constructor(
private authService: AuthService,
private router: Router
) {}
images = [ images = [
{ {
...@@ -83,37 +85,29 @@ export class LoginStandardUserComponent implements OnInit { ...@@ -83,37 +85,29 @@ export class LoginStandardUserComponent implements OnInit {
password: '', password: '',
}; };
} }
login() { login() {
console.log('Username:', this.user.username); console.log('Username:', this.user.username);
console.log('Password:', this.user.password); console.log('Password:', this.user.password);
this.authService.login(this.user.username, this.user.password).subscribe( this.authService.login(this.user.username, this.user.password).subscribe(
(response: { status: boolean; data?: any; error?: string }) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any
console.log('currentUser =>', response.data); (response: any) => {
console.log('response.status', response.status); console.log('currentUser=>', response.data);
if (response.status) { if (response.status) {
console.log('Connexion réussie'); console.log('Connexion réussie');
// Stocker l'username dans une variable ou dans le localStorage si nécessaire
// Stocker l'username dans une variable ou dans le sessionStorage si nécessaire
const username = response.data; const username = response.data;
console.log('userInfos', username); console.log('userInfos', username);
sessionStorage.setItem('username', username);
try {
sessionStorage.setItem('username', username);
} catch (error) {
console.warn('Could not store username in sessionStorage', error);
}
// Redirection vers la page admin // Redirection vers la page admin
console.log('Redirection vers la page admin'); // this.router.navigate(['/admin']);
this.router.navigateByUrl('/admin'); this.router.navigateByUrl('/admin');
} else { } else {
console.error('Échec de la connexion :', response.error); console.error('Échec de la connexion :', response.error);
} }
}, },
(error: any) => { error => {
console.error('Erreur lors de la connexion :', error); console.error('Erreur lors de la connexion :', error);
// Gérer l'erreur de connexion ici // Gérer l'erreur de connexion ici
} }
......
src/app/app.routes.ts
...@@ -16,16 +16,20 @@ export const routes: Routes = [ ...@@ -16,16 +16,20 @@ export const routes: Routes = [
{ {
path: '', path: '',
component: MainLayoutComponent, component: MainLayoutComponent,
children: [ children: [
{ path: 'admin', component: AdminTestComponent }, {
path: 'admin',
component: AdminTestComponent,
// canActivate: [AuthGuard],
},
{ {
path: 'transactions', path: 'transactions',
loadChildren: () => loadChildren: () =>
import('./trafics/transactions/transaction.routes').then( import('./trafics/transactions/transaction.routes').then(
c => c.transactionsRoutes c => c.transactionsRoutes
), ),
// canActivate: [AuthGuard],
}, },
{ {
path: 'integrations', path: 'integrations',
...@@ -33,19 +37,21 @@ export const routes: Routes = [ ...@@ -33,19 +37,21 @@ export const routes: Routes = [
import('./integrations/integration/integration.routes').then( import('./integrations/integration/integration.routes').then(
c => c.integrationRoutes c => c.integrationRoutes
), ),
}, },
{ {
path: 'utilisateurs', path: 'utilisateurs',
loadChildren: () => loadChildren: () =>
import('./utilisateurs/user.routes').then(c => c.userRoutes), import('./utilisateurs/user.routes').then(c => c.userRoutes),
}, },
{ {
path: 'assistances', path: 'assistances',
loadChildren: () => loadChildren: () =>
import('./assistances/service.routes').then(c => c.userRoutes), import('./assistances/service.routes').then(c => c.userRoutes),
},
{
path: 'tpe',
loadChildren: () =>
import('./tpe/tpe.routes').then(c => c.tpeRoutes),
}, },
{ {
path: 'reversements', path: 'reversements',
...@@ -53,7 +59,6 @@ export const routes: Routes = [ ...@@ -53,7 +59,6 @@ export const routes: Routes = [
import('./reversements/reversement/reversement.routes').then( import('./reversements/reversement/reversement.routes').then(
c => c.reversementRoutes c => c.reversementRoutes
), ),
}, },
{ {
path: 'dash', path: 'dash',
...@@ -61,7 +66,6 @@ export const routes: Routes = [ ...@@ -61,7 +66,6 @@ export const routes: Routes = [
import( import(
'./admin/dashboards/beasy-dashboard/beasy-dashboard.component' './admin/dashboards/beasy-dashboard/beasy-dashboard.component'
).then(c => c.BeasyDashboardComponent), ).then(c => c.BeasyDashboardComponent),
}, },
{ {
path: 'application-android', path: 'application-android',
...@@ -69,7 +73,6 @@ export const routes: Routes = [ ...@@ -69,7 +73,6 @@ export const routes: Routes = [
import('./application-android/application-android.component').then( import('./application-android/application-android.component').then(
c => c.ApplicationAndroidComponent c => c.ApplicationAndroidComponent
), ),
}, },
{ {
path: 'compte-associe', path: 'compte-associe',
...@@ -77,7 +80,6 @@ export const routes: Routes = [ ...@@ -77,7 +80,6 @@ export const routes: Routes = [
import('./compte-associe/compte-associe.component').then( import('./compte-associe/compte-associe.component').then(
c => c.CompteAssocieComponent c => c.CompteAssocieComponent
), ),
}, },
{ {
path: 'utilisateurs', path: 'utilisateurs',
...@@ -85,7 +87,6 @@ export const routes: Routes = [ ...@@ -85,7 +87,6 @@ export const routes: Routes = [
import('./utilisateurs/utilisateurs.component').then( import('./utilisateurs/utilisateurs.component').then(
c => c.UtilisateursComponent c => c.UtilisateursComponent
), ),
}, },
{ {
path: 'facturation', path: 'facturation',
...@@ -93,9 +94,25 @@ export const routes: Routes = [ ...@@ -93,9 +94,25 @@ export const routes: Routes = [
import('./facturation/facturation.component').then( import('./facturation/facturation.component').then(
c => c.FacturationComponent c => c.FacturationComponent
), ),
// // canActivate: [AuthGuard],
},
{
path: 'etablissement',
loadComponent: () =>
import('./etablissement/etablissement.component').then(
c => c.EtablissementComponent
),
},
{
path: 'ecommerce',
loadComponent: () =>
import('./ecommerce/ecommerce.component').then(
c => c.EcommerceComponent
),
}, },
],canActivate: [AuthGuard], ],
canActivate: [AuthGuard],
}, },
{ {
path: '**', path: '**',
......
src/app/assistances/assistance/view-service/view-service.component.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px"> style="margin-top: 40px">
<mat-form-field> <mat-form-field appearance="outline">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input <input
matInput matInput
......
src/app/core/layout/main-layout/main-layout.component.html
...@@ -47,13 +47,11 @@ ...@@ -47,13 +47,11 @@
<bgui-sidebar class="active"></bgui-sidebar> <bgui-sidebar class="active"></bgui-sidebar>
</div> </div>
<div class="nk-wrap"> <div class="nk-wrap">
<bgui-navbar <bgui-navbar class="nk-header is-light" *ngIf="showHeader">
class="nk-header nk-header-fixed is-light"
*ngIf="showHeader">
</bgui-navbar> </bgui-navbar>
<!-- content @s --> <!-- content @s -->
<div class="nk-content" style="z-index: -1;"> <div class="nk-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="nk-content-inner"> <div class="nk-content-inner">
<div class="nk-content-body"> <div class="nk-content-body">
......
src/app/core/layout/navbar/navbar-user/navbar-user.component.scss
...@@ -159,3 +159,6 @@ nav .wrapper ul li:hover a{ ...@@ -159,3 +159,6 @@ nav .wrapper ul li:hover a{
pointer-events: none; pointer-events: none;
} }
src/app/core/layout/navbar/navbar.component.html
<div class="container-fluid"> <div class="container-fluid">
<div class="nk-header-wrap"> <div class="nk-header-wrap">
<!-- -->
<div id="ticker_window">
<div id="day_and_time">
<p id="date" class="hidden-xs">{{ date | date: 'EEEE d MMMM y' }}</p>
<span style="display: inline-block; width: 10px"></span>
<p id="clock" class="hidden-xs">18:44:45</p>
<ul id="ticker"></ul>
</div>
</div>
<!-- -->
<div class="nk-menu-trigger d-xl-none ms-n1"> <div class="nk-menu-trigger d-xl-none ms-n1">
<a <a
href="#" href="#"
...@@ -8,13 +18,9 @@ ...@@ -8,13 +18,9 @@
><em class="icon ni ni-menu"></em ><em class="icon ni ni-menu"></em
></a> ></a>
</div> </div>
<div class="nk-header-brand d-xl-none"> <div class="nk-header-brand d-xl-none"></div>
<!-- <a href="html/index.html" class="logo-link"> </a> --> <div class="nk-header-tools">
</div>
<div class="nk-header-tools">
<!-- ajouter un div qui comporter la date et l'heure du jour -->
<ul class="nk-quick-nav"> <ul class="nk-quick-nav">
<li class="dropdown user-dropdown"> <li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle me-n1" data-bs-toggle="dropdown"> <a href="#" class="dropdown-toggle me-n1" data-bs-toggle="dropdown">
<div class="user-toggle"> <div class="user-toggle">
...@@ -29,7 +35,7 @@ ...@@ -29,7 +35,7 @@
</div> </div>
</div> </div>
</a> </a>
<div class="dropdown-menu dropdown-menu-md dropdown-menu-end" > <div class="dropdown-menu dropdown-menu-md dropdown-menu-end">
<div <div
class="dropdown-inner user-card-wrap bg-lighter d-none d-md-block"> class="dropdown-inner user-card-wrap bg-lighter d-none d-md-block">
<div class="user-card"> <div class="user-card">
...@@ -79,5 +85,4 @@ ...@@ -79,5 +85,4 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- .nk-header-wrap -->
</div> </div>
src/app/core/layout/navbar/navbar.component.scss
#day_and_time{
display: flex !important;
color: white;
align-content:space-between !important;
}
p#clock.hidden-xs{
margin-right: 5px;
}
\ No newline at end of file
src/app/core/layout/navbar/navbar.component.ts
...@@ -15,6 +15,8 @@ import { AuthService } from 'src/app/_helpers/services/auth.service'; ...@@ -15,6 +15,8 @@ import { AuthService } from 'src/app/_helpers/services/auth.service';
}) })
export class NavbarComponent { export class NavbarComponent {
userEmail: string | null | undefined; userEmail: string | null | undefined;
private clockInterval: any;
public date = new Date();
private router = inject(Router); private router = inject(Router);
...@@ -23,14 +25,42 @@ export class NavbarComponent { ...@@ -23,14 +25,42 @@ export class NavbarComponent {
ngOnInit() { ngOnInit() {
this.userEmail = localStorage.getItem('username'); this.userEmail = localStorage.getItem('username');
console.log(this.userEmail); console.log(this.userEmail);
this.startClock();
} }
deconnxionlogin() { deconnxionlogin() {
localStorage.setItem('isLoggedIn', 'false'); localStorage.setItem('isLoggedIn', 'false');
localStorage.removeItem('token'); localStorage.removeItem('token');
sessionStorage.removeItem('username');
// // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
// console.log("Redirection vers 'dash'"); // console.log("Redirection vers 'dash'");
this.router.navigate(['/auth']); this.router.navigate(['/auth']);
// //window.location.href = '/'; // //window.location.href = '/';
} }
ngOnDestroy() {
if (this.clockInterval) {
clearInterval(this.clockInterval);
}
}
private startClock() {
this.updateClock(); // Initial call to display clock immediately
this.clockInterval = setInterval(() => this.updateClock(), 1000);
}
private updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
const clockElement = document.getElementById('clock');
if (clockElement) {
clockElement.textContent = timeString;
}
}
} }
src/app/core/layout/sidebar/nav-data.ts
...@@ -100,6 +100,35 @@ export const navbarData: MenuItem[] = [ ...@@ -100,6 +100,35 @@ export const navbarData: MenuItem[] = [
label: 'Application android', label: 'Application android',
}, },
{ {
routeLink: 'ecommerce',
icon: 'group_add',
label: 'E-commerce',
},
{
routeLink: 'etablissement',
icon: 'group_add',
label: 'Etablissements',
},
{
icon: 'group_add',
routeLink: 'tpe',
label: 'Tpe',
items: [
{
routeLink: 'tpe/gerer-mes-tpe',
label: 'Mes TPE',
},
{
routeLink: 'tpe/groupe-tpe',
label: 'Groupe TPE ',
},
{
routeLink: 'tpe/transaction-tpe',
label: 'Transaction TPE',
},
],
},
{
icon: 'group_add', icon: 'group_add',
routeLink: 'compte-associe', routeLink: 'compte-associe',
label: 'Compte associé', label: 'Compte associé',
...@@ -129,21 +158,6 @@ export const navbarData: MenuItem[] = [ ...@@ -129,21 +158,6 @@ export const navbarData: MenuItem[] = [
// }, // },
// { // {
// routeLink: '',
// icon: 'dashboard',
// label: 'Ajustement',
// },
// {
// routeLink: '',
// icon: 'dashboard',
// label: 'Achats',
// },
// {
// routeLink: '',
// icon: 'dashboard',
// label: 'Transferts',
// },
// {
// icon: 'assignment', // icon: 'assignment',
// label: 'R Utilisateur', // label: 'R Utilisateur',
// items: [ // items: [
...@@ -161,6 +175,7 @@ export const navbarData: MenuItem[] = [ ...@@ -161,6 +175,7 @@ export const navbarData: MenuItem[] = [
// }, // },
// ], // ],
// }, // },
// { // {
// icon: 'assignment', // icon: 'assignment',
// label: 'UI', // label: 'UI',
......
src/app/ecommerce/ecommerce.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EcommerceComponent } from './ecommerce.component';
describe('EcommerceComponent', () => {
let component: EcommerceComponent;
let fixture: ComponentFixture<EcommerceComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EcommerceComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EcommerceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/ecommerce/ecommerce.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'bgui-ecommerce',
standalone: true,
imports: [],
templateUrl: './ecommerce.component.html',
styleUrl: './ecommerce.component.scss'
})
export class EcommerceComponent {
}
src/app/etablissement/etablissement.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EtablissementComponent } from './etablissement.component';
describe('EtablissementComponent', () => {
let component: EtablissementComponent;
let fixture: ComponentFixture<EtablissementComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EtablissementComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EtablissementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/etablissement/etablissement.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'bgui-etablissement',
standalone: true,
imports: [],
templateUrl: './etablissement.component.html',
styleUrl: './etablissement.component.scss'
})
export class EtablissementComponent {
}
src/app/reversements/reversements.component.ts
...@@ -6,10 +6,8 @@ import { RouterOutlet } from '@angular/router'; ...@@ -6,10 +6,8 @@ import { RouterOutlet } from '@angular/router';
@Component({ @Component({
selector: 'bgui-reversements', selector: 'bgui-reversements',
standalone: true, standalone: true,
imports: [DemandeComponent, ReversementComponent,RouterOutlet,], imports: [DemandeComponent, ReversementComponent, RouterOutlet],
templateUrl: './reversements.component.html', templateUrl: './reversements.component.html',
styleUrl: './reversements.component.scss' styleUrl: './reversements.component.scss',
}) })
export class ReversementsComponent { export class ReversementsComponent {}
}
src/app/tpe/create-tpe/create-tpe.component.html 0 → 100644
<div class="content sm-gutter">
<div class="page-title mb-20">
<h4 style="margin-bottom: 25px">Ajouter un Tpe</h4>
</div>
<div class="row">
<div
*ngIf="showAlert"
class="alert alert-success custom-alert"
role="alert">
<svg
class="bi flex-shrink-0 me-1"
width="20"
height="10"
role="img"
aria-label="Success:">
<use xlink:href="#check-circle-fill" />
</svg>
<strong> Service créé avec succès.</strong>
</div>
<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">
<mat-dialog-content class="login-container">
<form
[formGroup]="tpeForm"
(ngSubmit)="onSubmit()"
class="example-form">
<div class="form-row">
<!-- <mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
type="Date"
placeholder="Date"
formControlName="date" />
<mat-label>Date</mat-label>
</mat-form-field> -->
<mat-form-field
class="example-full-width"
appearance="outline">
<mat-label>date</mat-label>
<input required matInput [matDatepicker]="picker" />
<mat-hint hidden="true">dd/MM/yyyy</mat-hint>
<mat-datepicker-toggle
matIconSuffix
[for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Transaction"
formControlName="transaction" />
<mat-label>Transaction</mat-label>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="TPE"
formControlName="tpe" />
<mat-label>TPE</mat-label>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Groupe"
formControlName="groupe" />
<mat-label>Groupe</mat-label>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
type="number"
placeholder="Montant"
formControlName="montant" />
<mat-label>Montant</mat-label>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Téléphone"
formControlName="telephone" />
<mat-label>Téléphone</mat-label>
</mat-form-field>
</div>
<!-- <mat-form-field
class="example-full-width"
appearance="outline">
<input
matInput
placeholder="Status"
formControlName="status" />
<mat-label>Status</mat-label>
</mat-form-field> -->
<mat-form-field
class="example-full-width"
appearance="outline">
<mat-label>Status</mat-label>
<mat-select required>
<mat-option>None</mat-option>
@for (state of status; track state) {
<mat-option [value]="state">{{ state }}</mat-option>
}
</mat-select>
</mat-form-field>
<div class="form-actions">
<button
mat-raised-button
color=""
type="submit"
routerLink="/tpe/view-tpe">
Retour<i class="fa fa-arrow-left m-1"></i>
</button>
<!-- <div class="left-buton"> -->
<div class="form-actions">
<button
mat-raised-button
color="primary"
type="submit">
Enregistrer<i class="fa fa-save m-1"></i>
</button>
</div>
<div class="form-actions">
<button
mat-raised-button
color="danger"
routerLink="/tpe/view-tpe"
type="submit">
Annuler<i class="fa fa-times m-1"></i>
</button>
</div>
<!-- </div> -->
</div>
</form>
</mat-dialog-content>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/tpe/create-tpe/create-tpe.component.scss 0 → 100644
//
.login-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.example-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row {
display: flex;
gap: 16px;
}
.form-row mat-form-field {
flex: 1;
}
// .form-actions {
// display: flex;
// justify-content: flex-end;
// }
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
// .right-button {
// margin-left: auto;
// }
// .left-buttons {
// display: flex;
// /* Espace entre les boutons */
// }
\ No newline at end of file
src/app/tpe/create-tpe/create-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateTpeComponent } from './create-tpe.component';
describe('CreateTpeComponent', () => {
let component: CreateTpeComponent;
let fixture: ComponentFixture<CreateTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CreateTpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CreateTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/create-tpe/create-tpe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { Router, RouterLink } from '@angular/router';
import { AuthService } from 'src/app/_helpers/services/auth.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { provideNativeDateAdapter } from '@angular/material/core';
@Component({
selector: 'bgui-create-tpe',
standalone: true,
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
MatIconModule,
RouterLink,
FormsModule,
MatCardModule,
MatPaginatorModule,
MatDialogModule,
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatDatepickerModule,
],
providers: [provideNativeDateAdapter()],
templateUrl: './create-tpe.component.html',
styleUrl: './create-tpe.component.scss',
})
export class CreateTpeComponent {
showAlert: any;
selectFormControl!: FormControl<any>;
status: any;
minDate: any;
maxDate: any;
onSubmit() {
throw new Error('Method not implemented.');
}
login() {
throw new Error('Method not implemented.');
}
hide = true;
public tpeForm!: FormGroup;
constructor(
private fb: FormBuilder,
private authservice: AuthService,
private router: Router
) {
this.tpeForm = this.fb.group({
date: ['', Validators.required],
transaction: ['', Validators.required],
tpe: ['', Validators.required],
groupe: ['', Validators.required],
montant: ['', Validators.required],
telephone: ['', Validators.required],
status: ['', Validators.required],
});
}
ngOnInit() {
this.tpeForm = this.fb.group({
date: this.fb.control(''),
transaction: this.fb.control(''),
tpe: this.fb.control(''),
groupe: this.fb.control(''),
montant: this.fb.control(''),
telephone: this.fb.control(''),
status: this.fb.control(''),
});
}
}
src/app/tpe/edit-tpe/edit-tpe.component.html 0 → 100644
<div class="content sm-gutter">
<div class="page-title mb-20">
<h4 style="margin-bottom: 25px">Ajouter un Tpe</h4>
</div>
<div class="row">
<div
*ngIf="showAlert"
class="alert alert-success custom-alert"
role="alert">
<svg
class="bi flex-shrink-0 me-1"
width="20"
height="10"
role="img"
aria-label="Success:">
<use xlink:href="#check-circle-fill" />
</svg>
<strong> Service créé avec succès.</strong>
</div>
<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">
<mat-dialog-content class="login-container">
<form
[formGroup]="tpeForm"
(ngSubmit)="onSubmit()"
class="example-form">
<div class="form-row">
<!-- <mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
type="Date"
placeholder="Date"
formControlName="date" />
<mat-label>Date</mat-label>
</mat-form-field> -->
<mat-form-field
class="example-full-width"
appearance="outline">
<mat-label>date</mat-label>
<input required matInput [matDatepicker]="picker" />
<mat-hint hidden="true">dd/MM/yyyy</mat-hint>
<mat-datepicker-toggle
matIconSuffix
[for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Transaction"
formControlName="transaction" />
<mat-label>Transaction</mat-label>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="TPE"
formControlName="tpe" />
<mat-label>TPE</mat-label>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Groupe"
formControlName="groupe" />
<mat-label>Groupe</mat-label>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
type="number"
placeholder="Montant"
formControlName="montant" />
<mat-label>Montant</mat-label>
</mat-form-field>
<mat-form-field
class="example-full-width"
appearance="outline">
<input
required
matInput
placeholder="Téléphone"
formControlName="telephone" />
<mat-label>Téléphone</mat-label>
</mat-form-field>
</div>
<!-- <mat-form-field
class="example-full-width"
appearance="outline">
<input
matInput
placeholder="Status"
formControlName="status" />
<mat-label>Status</mat-label>
</mat-form-field> -->
<mat-form-field
class="example-full-width"
appearance="outline">
<mat-label>Status</mat-label>
<mat-select required>
<mat-option>None</mat-option>
@for (state of status; track state) {
<mat-option [value]="state">{{ state }}</mat-option>
}
</mat-select>
</mat-form-field>
<div class="form-actions">
<button
mat-raised-button
color=""
type="submit"
routerLink="/tpe/view-tpe">
Retour<i class="fa fa-arrow-left m-1"></i>
</button>
<!-- <div class="left-buton"> -->
<div class="form-actions">
<button
mat-raised-button
color="primary"
type="submit">
Enregistrer<i class="fa fa-save m-1"></i>
</button>
</div>
<div class="form-actions">
<button
mat-raised-button
color="danger"
routerLink="/tpe/view-tpe"
type="submit">
Annuler<i class="fa fa-times m-1"></i>
</button>
</div>
<!-- </div> -->
</div>
</form>
</mat-dialog-content>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/tpe/edit-tpe/edit-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EditTpeComponent } from './edit-tpe.component';
describe('EditTpeComponent', () => {
let component: EditTpeComponent;
let fixture: ComponentFixture<EditTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EditTpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EditTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/edit-tpe/edit-tpe.component.ts 0 → 100644
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule, FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { provideNativeDateAdapter } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router';
import { Router } from 'express';
import { AuthService } from 'src/app/_helpers/services/auth.service';
@Component({
selector: 'bgui-edit-tpe',
standalone: true,
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
MatIconModule,
RouterLink,
FormsModule,
MatCardModule,
MatPaginatorModule,
MatDialogModule,
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatDatepickerModule,
],
providers: [provideNativeDateAdapter()],
templateUrl: './edit-tpe.component.html',
styleUrl: './edit-tpe.component.scss',
})
export class EditTpeComponent {
showAlert: any;
selectFormControl!: FormControl<any>;
status: any;
minDate: any;
maxDate: any;
onSubmit() {
throw new Error('Method not implemented.');
}
login() {
throw new Error('Method not implemented.');
}
hide = true;
public tpeForm!: FormGroup;
constructor(
private fb: FormBuilder,
// private authservice: AuthService,
// private router: Router
) {
this.tpeForm = this.fb.group({
date: ['', Validators.required],
transaction: ['', Validators.required],
tpe: ['', Validators.required],
groupe: ['', Validators.required],
montant: ['', Validators.required],
telephone: ['', Validators.required],
status: ['', Validators.required],
});
}
ngOnInit() {
this.tpeForm = this.fb.group({
date: this.fb.control(''),
transaction: this.fb.control(''),
tpe: this.fb.control(''),
groupe: this.fb.control(''),
montant: this.fb.control(''),
telephone: this.fb.control(''),
status: this.fb.control(''),
});
}
}
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.component.html 0 → 100644
<div class="page-title">
<h4>Gérer mes TPE</h4>
</div>
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<form>
<div class="row">
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="operateurs">Groupe</label>
<select
class="form-control filtre"
id="operateurs"
[(ngModel)]="element"
name="selectedOperateur">
<option value="">choisir un groupe</option>
<option
*ngFor="let operateur of element"
[ngValue]="operateur">
{{ operateur.code }}
</option>
</select>
</div>
</div>
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="services">Status</label>
<select
class="form-control filtre"
id="services"
[(ngModel)]="element"
name="selectedService">
<option value="">choisir un Status</option>
<option
*ngFor="let service of element"
[ngValue]="service">
{{ service.nom_service }}
</option>
</select>
</div>
</div>
<div class="col-md-2 group-width">
<button
class="btn btn-primary btn-sm mt-4 form-control"
(click)="onSearch()">
Recherche <i class="fa fa-search m-1"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</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="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button hidden="true"
style="border-radius: 15px"
[routerLink]="['/element/create-element']"
class="btn btn-sl btn-success m-5">
Ajouter
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
#input />
</mat-form-field>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
<!-- Groupe Column -->
<ng-container matColumnDef="groupe">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Groupe
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.groupe
}}</mat-cell>
</ng-container>
<!-- Nom Column -->
<ng-container matColumnDef="nom">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Nom
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.nom
}}</mat-cell>
</ng-container>
<!-- Service Column -->
<ng-container matColumnDef="service">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Service
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.service
}}</mat-cell>
</ng-container>
<!-- Solde Column -->
<ng-container matColumnDef="solde">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Solde
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.solde
}}</mat-cell>
</ng-container>
<!-- Fonction Column -->
<ng-container matColumnDef="fonction">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Fonction
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.fonction
}}</mat-cell>
</ng-container>
<!-- Statut Column -->
<ng-container matColumnDef="statut">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Statut
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.statut
}}</mat-cell>
</ng-container>
<!-- Activité Column -->
<ng-container matColumnDef="activite">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Activité
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.activite
}}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Actions
</mat-header-cell>
<mat-cell *matCellDef="let element">
<div class="btn-group" role="group">
<button
type="button"
class="btn btn-primary m-1"
[routerLink]="['/element/edit-element']">
<mat-icon class="mat-icon">edit</mat-icon>
</button>
<button
type="button"
class="btn btn-danger m-1"
[routerLink]="['/element/edit-element']">
<mat-icon class="mat-icon">delete</mat-icon>
</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.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 */
}
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GererMesTpeComponent } from './gerer-mes-tpe.component';
describe('GererMesTpeComponent', () => {
let component: GererMesTpeComponent;
let fixture: ComponentFixture<GererMesTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [GererMesTpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(GererMesTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { RouterLink } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTabsModule } from '@angular/material/tabs';
export interface Element {
groupe: string;
nom: string;
service: string;
solde: number;
fonction: string;
statut: string;
activite: string;
}
const ELEMENT_DATA: Element[] = [
{
groupe: 'A',
nom: 'John Doe',
service: 'Service A',
solde: 1000,
fonction: 'Fonction 1',
statut: 'Actif',
activite: 'Activité 1',
},
{
groupe: 'B',
nom: 'Jane Doe',
service: 'Service B',
solde: 2000,
fonction: 'Fonction 2',
statut: 'Inactif',
activite: 'Activité 2',
},
{
groupe: 'C',
nom: 'Bob Smith',
service: 'Service C',
solde: 3000,
fonction: 'Fonction 3',
statut: 'Actif',
activite: 'Activité 3',
},
{
groupe: 'C',
nom: 'John Doe',
service: 'Service A',
solde: 1000,
fonction: 'Fonction 1',
statut: 'Actif',
activite: 'Activité 1',
},
{
groupe: 'B',
nom: 'Jane Doe',
service: 'Service B',
solde: 2000,
fonction: 'Fonction 2',
statut: 'Inactif',
activite: 'Activité 2',
},
{
groupe: 'A',
nom: 'Bob Smith',
service: 'Service A',
solde: 3500,
fonction: 'Fonction 3',
statut: 'Actif',
activite: 'Activité 3',
},
];
@Component({
selector: 'bgui-gerer-mes-tpe',
standalone: true,
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
MatIconModule,
RouterLink,
FormsModule,
MatPaginatorModule,
],
templateUrl: './gerer-mes-tpe.component.html',
styleUrl: './gerer-mes-tpe.component.scss',
})
export class GererMesTpeComponent {
onSearch() {
throw new Error('Method not implemented.');
}
displayedColumns: string[] = [
'groupe',
'nom',
'service',
'solde',
'fonction',
'statut',
'activite',
'action',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator;
element: any;
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
\ No newline at end of file
src/app/tpe/groupe-tpe/groupe-tpe.component.html 0 → 100644
<div class="page-title">
<h4>Gérer mes TPE</h4>
</div>
<!-- <div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<form>
<div class="row">
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="operateurs">Groupe</label>
<select
class="form-control filtre"
id="operateurs"
[(ngModel)]="element"
name="selectedOperateur">
<option value="">choisir un groupe</option>
<option
*ngFor="let operateur of element"
[ngValue]="operateur">
{{ operateur.code }}
</option>
</select>
</div>
</div>
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="services">Status</label>
<select
class="form-control filtre"
id="services"
[(ngModel)]="element"
name="selectedService">
<option value="">choisir un Status</option>
<option
*ngFor="let service of element"
[ngValue]="service">
{{ service.nom_service }}
</option>
</select>
</div>
</div>
<div class="col-md-2 group-width">
<button
class="btn btn-primary btn-sm mt-4 form-control"
(click)="onSearch()">
Recherche <i class="fa fa-search m-1"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</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="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button
style="border-radius: 15px"
[routerLink]="['/element/create-element']"
class="btn btn-sl btn-success m-5">
Ajouter
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. Date création, Nom, Description"
#input />
</mat-form-field>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
<!-- Groupe Column -->
<ng-container matColumnDef="date">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Date Creation
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.date
}}</mat-cell>
</ng-container>
<!-- Nom Column -->
<ng-container matColumnDef="nom">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Nom
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.nom
}}</mat-cell>
</ng-container>
<!-- Service Column -->
<ng-container matColumnDef="description">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Description
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.description
}}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Actions
</mat-header-cell>
<mat-cell *matCellDef="let element">
<div class="btn-group" role="group">
<button
type="button"
class="btn btn-primary m-1"
[routerLink]="['/element/edit-element']">
<mat-icon class="mat-icon">edit</mat-icon>
</button>
<button
type="button"
class="btn btn-danger m-1"
[routerLink]="['/element/edit-element']">
<mat-icon class="mat-icon">delete</mat-icon>
</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/tpe/groupe-tpe/groupe-tpe.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 */
}
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
src/app/tpe/groupe-tpe/groupe-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GroupeTpeComponent } from './groupe-tpe.component';
describe('GroupeTpeComponent', () => {
let component: GroupeTpeComponent;
let fixture: ComponentFixture<GroupeTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [GroupeTpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(GroupeTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/groupe-tpe/groupe-tpe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
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';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router';
export interface Element {
date: string;
nom: string;
description: string;
}
const ELEMENT_DATA: Element[] = [
{
date: '10-10-2024',
nom: 'John Doe',
description: 'description A',
},
{
date: '10-10-2024',
nom: 'Jane Doe',
description: 'description B',
},
{
date: '17-10-2024',
nom: 'Bob Smith',
description: 'description C',
},
{
date: '10-10-2024',
nom: 'John Doe',
description: 'description A',
},
{
date: '19-10-2024',
nom: 'Jane Doe',
description: 'description B',
},
{
date: '10-10-2024',
nom: 'Bob Smith',
description: 'description A',
},
];
@Component({
selector: 'bgui-groupe-tpe',
standalone: true,
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
MatIconModule,
RouterLink,
FormsModule,
MatPaginatorModule,
],
templateUrl: './groupe-tpe.component.html',
styleUrl: './groupe-tpe.component.scss',
})
export class GroupeTpeComponent {
onSearch() {
throw new Error('Method not implemented.');
}
displayedColumns: string[] = ['date', 'nom', 'description'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator;
element: any;
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
src/app/tpe/tpe.component.html 0 → 100644
<div class="card-body mb-4">
<div class="row">
<div class="col-md-2"></div>
<div
class="d-flex justify-content-between align-items-center"
style="color: white">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" [routerLink]="['/tpe/view-tpe']">Tpe</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
<mat-card class="w-100">
<mat-card-content>
<router-outlet></router-outlet>
</mat-card-content>
</mat-card>
src/app/tpe/tpe.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 */
}
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
.card-body{
background-color: #edeff7;
height: 50px;
align-content: center;
margin-right: 10px !important;
}
\ No newline at end of file
src/app/tpe/tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TpeComponent } from './tpe.component';
describe('TpeComponent', () => {
let component: TpeComponent;
let fixture: ComponentFixture<TpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/tpe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { RouterLink, RouterOutlet } from '@angular/router';
import { UserService } from '../_services/utilisateur/user.service';
@Component({
selector: 'bgui-tpe',
standalone: true,
imports: [
CommonModule,
MatInputModule,
MatCardModule,
// ReactiveFormsModule,
RouterOutlet,
RouterLink,
],
providers: [UserService],
templateUrl: './tpe.component.html',
styleUrls: ['./tpe.component.scss'],
})
export class TpeComponent {}
src/app/tpe/tpe.routes.ts 0 → 100644
import { Routes } from '@angular/router';
import { CreateTpeComponent } from './create-tpe/create-tpe.component';
import { EditTpeComponent } from './edit-tpe/edit-tpe.component';
import { TpeComponent } from './tpe.component';
import { ViewTpeComponent } from './tpe/view-tpe.component';
import { GererMesTpeComponent } from './gerer-mes-tpe/gerer-mes-tpe.component';
import { GroupeTpeComponent } from './groupe-tpe/groupe-tpe.component';
import { TransactionTpeComponent } from './transaction-tpe/transaction-tpe.component';
export const tpeRoutes: Routes = [
{
path: '',
component: TpeComponent,
children: [
{ path: '', redirectTo: 'view-tpe', pathMatch: 'full' },
{
path: 'view-tpe',
component: ViewTpeComponent,
},
{
path: 'create-tpe',
component: CreateTpeComponent,
},
{
path: 'edit-tep/:id',
component: EditTpeComponent,
},
{
path: 'gerer-mes-tpe',
component: GererMesTpeComponent,
},
{
path: 'groupe-tpe',
component: GroupeTpeComponent,
},
{
path: 'transaction-tpe',
component: TransactionTpeComponent,
},
],
},
];
src/app/tpe/tpe/view-tpe.component.html 0 → 100644
<div class="page-title">
<h4>TPE</h4>
</div>
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<form>
<div class="row">
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="operateurs">Groupe</label>
<select
class="form-control filtre"
id="operateurs"
[(ngModel)]="tpe"
name="selectedOperateur">
<option value="">choisir un Tpe</option>
<option
*ngFor="let operateur of tpe"
[ngValue]="operateur">
{{ operateur.code }}
</option>
</select>
</div>
</div>
<div class="col-md-2 form-group-width">
<div class="form-group">
<label for="services">Status</label>
<select
class="form-control filtre"
id="services"
[(ngModel)]="tpe"
name="selectedService">
<option value="">choisir un Status</option>
<option *ngFor="let service of tpe" [ngValue]="service">
{{ service.nom_service }}
</option>
</select>
</div>
</div>
<div class="col-md-2 group-width">
<button
class="btn btn-primary btn-sm mt-4 form-control"
(click)="onSearch()">
Recherche <i class="fa fa-search m-1"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</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="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button
style="border-radius: 15px"
[routerLink]="['/tpe/create-tpe']"
class="btn btn-sl btn-success m-5">
Ajouter
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
<ng-container matColumnDef="date">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Date</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.date }}</mat-cell>
</ng-container>
<ng-container matColumnDef="transaction">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Transaction</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{
tpe.transaction
}}</mat-cell>
</ng-container>
<ng-container matColumnDef="tpe">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>TPE</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.tpe }}</mat-cell>
</ng-container>
<ng-container matColumnDef="groupe">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Groupe</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.groupe }}</mat-cell>
</ng-container>
<ng-container matColumnDef="montant">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Montant</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.montant }}</mat-cell>
</ng-container>
<ng-container matColumnDef="telephone">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Téléphone</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.telephone }}</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Status</mat-header-cell
>
<mat-cell *matCellDef="let tpe">{{ tpe.status }}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text"
>Actions</mat-header-cell
>
<mat-cell *matCellDef="let tpe">
<div class="btn-group" role="group">
<button
type="button"
class="btn btn-primary m-1"
[routerLink]="['/tpe/edit-tpe']">
<mat-icon class="mat-icon">edit</mat-icon>
</button>
<button
type="button"
class="btn btn-danger m-1"
[routerLink]="['/tpe/edit-tpe']">
<mat-icon class="mat-icon">delete</mat-icon>
</button>
</div>
</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]="[5, 10, 20]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <mat-dialog-content>
<form [formGroup]="tpeForm" (ngSubmit)="onSubmit()" class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Date" formControlName="date" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Transaction" formControlName="transaction" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="TPE" formControlName="tpe" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Groupe" formControlName="groupe" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input
matInput
type="number"
placeholder="Montant"
formControlName="montant" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Téléphone" formControlName="telephone" />
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Status" formControlName="status" />
</mat-form-field>
<button mat-raised-button color="primary" type="submit">Enregistrer</button>
</form>
</mat-dialog-content> -->
<!-- <div class="login-container">
<mat-card [formGroup]="loginForm">
<mat-card-header>
<mat-card-title> Login </mat-card-title>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-form-field appearance="outline">
<mat-label>Username</mat-label>
<input type="text" matInput formControlName="username" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input
matInput
placeholder="Enter your password"
[type]="hide ? 'password' : 'text'"
formControlName="password" />
<mat-icon matSuffix (click)="hide = !hide">{{
hide ? 'visibility_off' : 'visibility'
}}</mat-icon>
</mat-form-field>
</mat-card-content>
<mat-card-actions align="end">
<button (click)="login()" mat-raised-button color="accent">Login</button>
</mat-card-actions>
</mat-card>
</div> -->
src/app/tpe/tpe/view-tpe.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 */
}
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
src/app/tpe/tpe/view-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ViewTpeComponent } from './view-tpe.component';
describe('ViewTpeComponent', () => {
let component: ViewTpeComponent;
let fixture: ComponentFixture<ViewTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ViewTpeComponent],
}).compileComponents();
fixture = TestBed.createComponent(ViewTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/tpe/view-tpe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import {
FormGroup,
FormBuilder,
Validators,
FormsModule,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router';
import { UserService } from 'src/app/_services/utilisateur/user.service';
@Component({
selector: 'bgui-view-tpe',
standalone: true,
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
MatIconModule,
RouterLink,
FormsModule,
MatPaginatorModule,
],
templateUrl: './view-tpe.component.html',
styleUrl: './view-tpe.component.scss',
})
export class ViewTpeComponent {
services: any;
operateurs: any;
onExport() {
throw new Error('Method not implemented.');
}
onSearch() {
throw new Error('Method not implemented.');
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onDelete(arg0: any) {
throw new Error('Method not implemented.');
}
tpeForm: FormGroup;
constructor(
private http: HttpClient,
// private router: Router,
private snackBar: MatSnackBar,
private dialog: MatDialog,
private userService: UserService,
private fb: FormBuilder,
private matdialog: MatDialog
) {
this.tpeForm = this.fb.group({
date: ['', Validators.required],
transaction: ['', Validators.required],
tpe: ['', Validators.required],
groupe: ['', Validators.required],
montant: ['', Validators.required],
telephone: ['', Validators.required],
status: ['', Validators.required],
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
tpe: any[] = [
{
date: '2023-06-18',
transaction: 'Transaction 1',
tpe: 'TPE 1',
groupe: 'Groupe 1',
montant: 100,
telephone: '1234567890',
status: 'INVALIDE',
},
{
date: '2023-06-19',
transaction: 'Transaction 2',
tpe: 'TPE 2',
groupe: 'Groupe 2',
montant: 200,
telephone: '0987654321',
status: 'VALIDE',
},
// Ajout de 30 lignes supplémentaires
{
date: '2023-06-20',
transaction: 'Transaction 3',
tpe: 'TPE 3',
groupe: 'Groupe 3',
montant: 150,
telephone: '0123456789',
status: 'INVALIDE',
},
{
date: '2023-06-21',
transaction: 'Transaction 4',
tpe: 'TPE 4',
groupe: 'Groupe 4',
montant: 180,
telephone: '9876543210',
status: 'VALIDE',
},
{
date: '2023-06-18',
transaction: 'Transaction 1',
tpe: 'TPE 1',
groupe: 'Groupe 1',
montant: 100,
telephone: '1234567890',
status: 'INVALIDE',
},
{
date: '2023-06-19',
transaction: 'Transaction 2',
tpe: 'TPE 2',
groupe: 'Groupe 2',
montant: 200,
telephone: '0987654321',
status: 'VALIDE',
},
// Ajout de 30 lignes supplémentaires
{
date: '2023-06-20',
transaction: 'Transaction 3',
tpe: 'TPE 3',
groupe: 'Groupe 3',
montant: 150,
telephone: '0123456789',
status: 'INVALIDE',
},
{
date: '2023-06-21',
transaction: 'Transaction 4',
tpe: 'TPE 4',
groupe: 'Groupe 4',
montant: 180,
telephone: '9876543210',
status: 'VALIDE',
},
// Ajout de 5 lignes supplémentaires
{
date: '2023-06-22',
transaction: 'Transaction 5',
tpe: 'TPE 5',
groupe: 'Groupe 5',
montant: 120,
telephone: '5555555555',
status: 'VALIDE',
},
{
date: '2023-06-23',
transaction: 'Transaction 6',
tpe: 'TPE 6',
groupe: 'Groupe 6',
montant: 250,
telephone: '6666666666',
status: 'INVALIDE',
},
{
date: '2023-06-24',
transaction: 'Transaction 7',
tpe: 'TPE 7',
groupe: 'Groupe 7',
montant: 300,
telephone: '7777777777',
status: 'VALIDE',
},
{
date: '2023-06-25',
transaction: 'Transaction 8',
tpe: 'TPE 8',
groupe: 'Groupe 8',
montant: 280,
telephone: '8888888888',
status: 'INVALIDE',
},
{
date: '2023-06-26',
transaction: 'Transaction 9',
tpe: 'TPE 9',
groupe: 'Groupe 9',
montant: 150,
telephone: '9999999999',
status: 'VALIDE',
},
];
dataSource = new MatTableDataSource<any>(this.tpe);
@ViewChild(MatPaginator) paginator!: MatPaginator;
displayedColumns: string[] = [
'date',
'transaction',
'tpe',
'groupe',
'montant',
'telephone',
'status',
'action',
];
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
onSubmit() {
if (this.tpeForm.valid) {
console.log('Form submitted:', this.tpeForm.value);
// Add logic here to save or process the form data
} else {
console.error('Form is invalid');
}
}
}
src/app/tpe/transaction-tpe/transaction-tpe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TransactionTpeComponent } from './transaction-tpe.component';
describe('TransactionTpeComponent', () => {
let component: TransactionTpeComponent;
let fixture: ComponentFixture<TransactionTpeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TransactionTpeComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TransactionTpeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/tpe/transaction-tpe/transaction-tpe.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'bgui-transaction-tpe',
standalone: true,
imports: [],
templateUrl: './transaction-tpe.component.html',
styleUrl: './transaction-tpe.component.scss'
})
export class TransactionTpeComponent {
}
src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
...@@ -20,77 +20,6 @@ ...@@ -20,77 +20,6 @@
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
<div class="card-body m-3"> <div class="card-body m-3">
<!-- <form>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="operateurs">Opérateurs</label>
<select
class="form-control filtre"
id="operateurs"
[(ngModel)]="selectedOperateur">
<option value="" disabled>
Choisissez un opérateur
</option>
<option
*ngFor="let operateur of operateurs"
[ngValue]="operateur">
{{ operateur.code }}
</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="services">Services</label>
<select
class="form-control filtre"
id="services"
[(ngModel)]="selectedService">
<option value="" disabled>Choisissez un service</option>
<option
*ngFor="let service of services"
[ngValue]="service">
{{ service.nom_service }}
</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="debut">De</label>
<input
type="date"
[(ngModel)]="startDate"
required
name="debut"
class="form-control form-control-sm" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="fin">À</label>
<input
type="date"
[(ngModel)]="endDate"
required
name="fin"
class="form-control form-control-sm" />
</div>
</div>
<div class="col-md-2">
<button
style="border-radius: 15px"
class="btn btn-primary btn-sm mt-4"
(click)="onSearch()">
Recherche <i class="fa fa-search m-1"></i>
</button>
</div>
</div>
</form> -->
<form> <form>
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
...@@ -179,7 +108,7 @@ ...@@ -179,7 +108,7 @@
</div> </div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px"> <div class="example-container mat-elevation-z8" style="margin-top: 40px">
<mat-form-field> <mat-form-field appearance="outline">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex.." #input /> <input matInput (keyup)="applyFilter($event)" placeholder="Ex.." #input />
</mat-form-field> </mat-form-field>
......
src/app/utilisateurs/create-users/create-users.component.html
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<div class="content sm-gutter"> <div class="content sm-gutter">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<h5 class="mb-3">Ajouter Utilisateur</h5> <h5 class="mb-3">Ajouter Utilisateur</h5>
<!-- <span>{{ date | date: 'dd/MM/yyyy HH:mm:ss' }}</span> -->
</div> </div>
<div class="row"> <div class="row">
<div <div
...@@ -26,170 +25,11 @@ ...@@ -26,170 +25,11 @@
<div class="card"> <div class="card">
<div class="card-title"> <div class="card-title">
<div class="card-body m-3"> <div class="card-body m-3">
<!-- <form
(ngSubmit)="onSubmit()"
#userForm="ngForm"
method="post">
<div class="row justify-content-center">
<div class="col-md-6 mb-2">
<label for="first_name">Nom</label>
<input
type="text"
id="first_name"
placeholder="Nom"
class="form-control"
name="first_name"
[(ngModel)]="utilisateur.first_name"
required />
<div
*ngIf="utilisateur.first_name === ''"
class="text-danger">
Le nom est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="last_name">Prénoms</label>
<input
type="text"
id="last_name"
placeholder="last_name"
class="form-control"
name="last_name"
[(ngModel)]="utilisateur.last_name"
required />
<div
*ngIf="utilisateur.last_name === ''"
class="text-danger">
le prénoms est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="username">Nom utilisateur</label>
<input
type="username"
id="username"
placeholder="username"
class="form-control"
name="username"
[(ngModel)]="utilisateur.username"
required />
<div
*ngIf="!utilisateur.username"
class="text-danger">
username est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="user_email">Email</label>
<input
type="email"
id="email"
placeholder="email"
class="form-control"
name="email"
[(ngModel)]="utilisateur.email"
required />
<div *ngIf="!utilisateur.email" class="text-danger">
Email est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="user_password">Mot de passe</label>
<input
type="text"
id="password"
placeholder="password"
class="form-control"
name="password"
[(ngModel)]="utilisateur.password"
required />
<div
*ngIf="!utilisateur.password"
class="text-danger">
Mot de passe est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="role">Rôle</label>
<input
type="text"
id="role"
placeholder="role"
class="form-control"
name="role"
[(ngModel)]="utilisateur.role"
required />
<div *ngIf="!utilisateur.role" class="text-danger">
Rôle de passe est obligatoire
</div>
</div>
<div class="col-md-6 mb-2">
<label for="profile_photo">Photo profil</label>
<input
type="file"
id="profile_photo"
placeholder="profile_photo"
class="form-control-file"
name="profile_photo"
[(ngModel)]="utilisateur.profile_photo"
required />
<div
*ngIf="!utilisateur.profile_photo"
class="text-danger">
Veuillez charger la photo svp!!!
</div>
</div>
</div>
<div class="col-md-12">
<div class="d-flex justify-content-between mt-3">
<button
type="button"
class="btn btn-sm btn-secondary m-5"
[routerLink]="['/utilisateurs/view-user']"
style="border-radius: 15px">
Retour <i class="fa fa-arrow-left"></i>
</button>
<div>
<button
type="submit"
class="btn btn-sm btn-success m-5"
[disabled]="userForm.invalid"
style="border-radius: 15px">
Enregistrer <i class="fa fa-save"></i>
</button>
<button
type="button"
class="btn btn-sm btn-danger m-5"
style="border-radius: 15px"
(click)="onCancel()">
Annuler <i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</form> -->
<form <form
(ngSubmit)="onSubmit(utilisateur)" (ngSubmit)="onSubmit(utilisateur)"
#userForm="ngForm" #userForm="ngForm"
method="post"> method="post">
<div class="row justify-content-center"> <div class="row justify-content-center">
<!-- <div class="col-md-6 mb-2">
<label for="id">Id</label>
<input
type="text"
id="id"
placeholder="Id"
class="form-control"
name="id"
[(ngModel)]="utilisateur.id"
required />
<div
*ngIf="userForm.submitted && userForm.controls"
class="text-danger">
Le nom est obligatoire
</div>
</div> -->
<div class="col-md-6 mb-2"> <div class="col-md-6 mb-2">
<label for="first_name">Nom</label> <label for="first_name">Nom</label>
<input <input
...@@ -306,11 +146,6 @@ ...@@ -306,11 +146,6 @@
name="profile_photo" name="profile_photo"
[(ngModel)]="utilisateur.profile_photo" [(ngModel)]="utilisateur.profile_photo"
accept=".jpg, .jpeg, .png" /> accept=".jpg, .jpeg, .png" />
<!-- <div
*ngIf="userForm.submitted && userForm.controls"
class="text-danger">
Veuillez charger la photo svp!!!
</div> -->
</div> </div>
</div> </div>
......
src/app/utilisateurs/utilisateurs.component.ts
...@@ -5,7 +5,6 @@ import { ReactiveFormsModule } from '@angular/forms'; ...@@ -5,7 +5,6 @@ import { ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { UserService } from '../_services/utilisateur/user.service'; import { UserService } from '../_services/utilisateur/user.service';
import { IUtilisateur } from '../_interfaces/utilisateur/user';
@Component({ @Component({
selector: 'bgui-utilisateurs', selector: 'bgui-utilisateurs',
...@@ -23,15 +22,4 @@ import { IUtilisateur } from '../_interfaces/utilisateur/user'; ...@@ -23,15 +22,4 @@ import { IUtilisateur } from '../_interfaces/utilisateur/user';
}) })
export class UtilisateursComponent { export class UtilisateursComponent {
date = new Date(); date = new Date();
users: IUtilisateur[] = [];
displayedColumns: string[] = [
'id',
'first_name',
'last_name',
'password',
'email',
'password',
'role',
'profile_photo',
];
} }
src/app/utilisateurs/view-user/view-user.component.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px"> style="margin-top: 40px">
<mat-form-field> <mat-form-field appearance="outline">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input <input
matInput matInput
......
src/assets/scss/core/layouts/_header.scss
...@@ -51,10 +51,11 @@ ...@@ -51,10 +51,11 @@
border-bottom: 1px solid $header-border-bottom; border-bottom: 1px solid $header-border-bottom;
// border-radius: 12px; // border-radius: 12px;
padding: 0; padding: 0;
align-content:center !important;
margin: 0 !important; margin: 0 !important;
height: 4rem; height: 4rem;
box-shadow: 0px 1px 3px 0px rgba($base-color, 0.05); box-shadow: 0px 1px 3px 0px rgba($base-color, 0.05);
z-index: 0; // z-index: 0;
@if($dark_option==true) { @if($dark_option==true) {
&.is-dark:not([class*=bg-]){ &.is-dark:not([class*=bg-]){
background: $header-bg-dark-color; background: $header-bg-dark-color;
......
src/styles.scss
...@@ -343,11 +343,11 @@ tr.mat-mdc-row { ...@@ -343,11 +343,11 @@ tr.mat-mdc-row {
} }
.mat-column-action { // .mat-column-action {
max-width: 36px !important; // max-width: 36px !important;
} // }
.mat-mdc-header-row { .mat-mdc-header-row {
......
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