sanchezvem/pyrofetes-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sanchezvem:8b7d48779eb987bd70dd5d9141f2f289bccd2f66
Branches Tags
sanchezvem:master sanchezvem:develop sanchezvem:feature/dashboard sanchezvem:feature/filteredSearchBar
..
compare: sanchezvem:master
Branches Tags
sanchezvem:develop sanchezvem:feature/dashboard sanchezvem:feature/filteredSearchBar sanchezvem:master

4 Commits
8b7d48779e ... master

Author SHA1 Message Date
sanchezvem
39a831b99b revert dcaf85a316 
revert first commit of the day
 2025-11-20 14:31:18 +01:00
sanchezvem
0d26ac2457 fix audit error 2025-11-20 14:20:33 +01:00
sanchezvem
dcaf85a316 first commit of the day 2025-11-17 10:19:47 +01:00
sanchezvem
df651fd052 first commit 2025-11-15 13:23:51 +01:00
189 changed files with 181 additions and 12064 deletions
Expand all files Collapse all files

5
.postcssrc.json
View File

@@ -1,5 +0,0 @@
{
"plugins": {
"@tailwindcss/postcss": {}
}
}

3
openapi-generator.yaml
View File

@@ -1,3 +0,0 @@
additionalProperties:
fileNaming: kebab-case
modelPropertyNaming: camelCase

7
openapitools.json
View File

@@ -1,7 +0,0 @@
{
"$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
"spaces": 2,
"generator-cli": {
"version": "7.17.0"
}
}

1696
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -5,9 +5,7 @@
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"watch": "ng build --watch --configuration development", "watch": "ng build --watch --configuration development"
"openapi": "rm -rf src/app/services/api && openapi-generator-cli generate -i http://localhost:5298/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml",
"openapiWin": "set JAVA_TOOL_OPTIONS=-Dcom.sun.net.ssl.checkRevocation=false -Djavax.net.ssl.trustStoreType=WINDOWS-ROOT && openapi-generator-cli generate -i https://localhost:44379/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml\n"
}, },
"prettier": { "prettier": {
"printWidth": 100, "printWidth": 100,
@@ -29,11 +27,8 @@
"@angular/forms": "^20.3.0", "@angular/forms": "^20.3.0",
"@angular/platform-browser": "^20.3.0", "@angular/platform-browser": "^20.3.0",
"@angular/router": "^20.3.0", "@angular/router": "^20.3.0",
"@openapitools/openapi-generator-cli": "^2.25.2",
"@tailwindcss/postcss": "^4.1.17",
"@tailwindcss/vite": "^4.1.17", "@tailwindcss/vite": "^4.1.17",
"ng-zorro-antd": "^20.4.0", "ng-zorro-antd": "^20.4.0",
"postcss": "^8.5.6",
"rxjs": "~7.8.0", "rxjs": "~7.8.0",
"tailwindcss": "^4.1.17", "tailwindcss": "^4.1.17",
"tslib": "^2.3.0", "tslib": "^2.3.0",

95
src/app/app.css
View File

@@ -6,102 +6,35 @@
height: 100vh; height: 100vh;
} }
nz-header { .top-nav {
display: flex; line-height: 64px;
align-items: center;
background: #001529;
padding: 0 24px;
} }
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
/* --- LOGO + TITRE --- */
.logo { .logo {
display: flex; float: left;
align-items: center; height: 64px;
} padding-right: 24px;
line-height: 64px;
.logo a { background: #001529;
display: flex;
align-items: center;
text-decoration: none;
} }
.logo img { .logo img {
height: 40px; display: inline-block;
width: auto; height: 32px;
width: 32px;
vertical-align: middle;
} }
.logo h1 { .logo h1 {
margin: 0 0 0 10px; display: inline-block;
margin: 0 0 0 15px;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif; font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
vertical-align: middle;
} }
/* --- MENU PRINCIPAL --- */
.top-nav {
flex: 1;
margin: 0 40px;
line-height: 64px;
background: #001529;
border: none;
}
/* Couleur grise par défaut + effet blanc et zoom au survol */
.top-nav li {
transition: transform 0.2s ease, color 0.2s ease;
}
.top-nav li a {
color: #bfbfbf !important; /* gris clair par défaut */
transition: transform 0.2s ease, color 0.2s ease;
}
/* Au survol → zoom + blanc pur */
.top-nav li:hover {
transform: scale(1.08);
background: transparent !important;
color: #fff !important;
}
.top-nav li:hover a {
color: #ffffff !important;
}
/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
.top-nav li.ant-menu-item-active,
.top-nav li.ant-menu-item-selected {
background: transparent !important;
color: #fff !important;
}
/* --- ICONES DROITES --- */
.right-icons {
display: flex;
align-items: center;
gap: 20px;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.right-icons app-modal-nav {
transition: transform 0.2s ease, color 0.2s ease;
}
.right-icons app-modal-nav:hover {
color: #40a9ff;
transform: scale(1.2);
}
/* --- CONTENU --- */
nz-content { nz-content {
padding: 24px 50px; padding: 24px 50px;
} }

32
src/app/app.html
View File

@@ -1,19 +1,11 @@
<nz-layout class="app-layout"> <nz-layout class="app-layout">
<nz-header> <nz-header>
<div class="header-container">
<!-- LOGO -->
<div class="logo"> <div class="logo">
<a routerLink="/welcome"> <a routerLink="/welcome">
<img <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" <h1>PYRO FÊTES</h1>
alt="logo"
style="width: 100px; height: auto"
/>
<h1 class="text-amber-300">PYRO FÊTES</h1>
</a> </a>
</div> </div>
<!-- MENU PRINCIPAL -->
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal"> <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
<li nz-menu-item routerLinkActive="ant-menu-item-selected"> <li nz-menu-item routerLinkActive="ant-menu-item-selected">
<a routerLink="/stock"> <a routerLink="/stock">
@@ -65,25 +57,13 @@
<span>Utilisateur</span> <span>Utilisateur</span>
</a> </a>
</li> </li>
<li nz-menu-item><nz-icon nzType="bell" nzTheme="outline" /></li>
<li nz-menu-item><nz-icon nzType="user" nzTheme="outline" /></li>
<li nz-menu-item><nz-icon nzType="setting" nzTheme="outline" /></li>
</ul> </ul>
<!-- ICONES À DROITE -->
<div class="right-icons">
<app-modal-nav nameIcon="bell" name="Notification">
<app-notif-list></app-notif-list>
</app-modal-nav>
<app-modal-nav nameIcon="user" name="Profil">
<app-profil></app-profil>
</app-modal-nav>
<app-modal-nav nameIcon="setting" name="Paramètres">
<app-setting-form></app-setting-form>
</app-modal-nav>
</div>
</div>
</nz-header> </nz-header>
<nz-content> <nz-content>
<div class="inner-content overflow-auto"> <div class="inner-content">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</nz-content> </nz-content>

7
src/app/app.ts
View File

@@ -2,15 +2,12 @@ import { Component } from '@angular/core';
import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMenuModule } from 'ng-zorro-antd/menu';
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzIconDirective} from "ng-zorro-antd/icon"; import {NzIconDirective} from "ng-zorro-antd/icon";
import {ModalNav} from "./components/modal-nav/modal-nav";
import {Profil} from "./components/profil/profil";
import {NotifList} from "./components/notif-list/notif-list";
import {SettingForm} from "./components/setting-form/setting-form";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList, SettingForm], imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink],
templateUrl: './app.html', templateUrl: './app.html',
styleUrl: './app.css' styleUrl: './app.css'
}) })

0
src/app/components/create-purchaseorder-form/create-purchaseorder-form.css
View File

36
src/app/components/create-purchaseorder-form/create-purchaseorder-form.html
View File

@@ -1,36 +0,0 @@
<form [formGroup]="createPurchaseOrderForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="12" nzRequired>
Conditions générales de vente
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
</nz-form-control>
</nz-form-item>
<div class="overflow-x-auto">
<nz-table [nzBordered]="true" class="mx-auto text-center">
<thead>
<tr>
<th class="text-center">Produit</th>
<th class="text-center">Quantité</th>
</tr>
</thead>
<tbody formArrayName="lines">
@for (line of lines.controls.slice(); let i = $index; track i) {
<tr [formGroupName]="i" class="text-center">
<td class="text-center">{{ line.value.name }}</td>
<td class="text-center">
<nz-input-number
formControlName="quantity"
[nzMin]="1"
[nzStep]="1">
</nz-input-number>
</td>
</tr>
}
</tbody>
</nz-table>
</div>
</form>

52
src/app/components/create-purchaseorder-form/create-purchaseorder-form.ts
View File

@@ -1,52 +0,0 @@
import { Component } from '@angular/core';
import {FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormControl} from '@angular/forms';
import { GetProductDto } from '../../services/api';
import {NzTableComponent} from "ng-zorro-antd/table";
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
@Component({
selector: 'app-create-purchaseorder-form',
templateUrl: './create-purchaseorder-form.html',
styleUrl: './create-purchaseorder-form.css',
imports: [
ReactiveFormsModule,
NzTableComponent,
NzInputNumberComponent,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
]
})
export class CreatePurchaseorderForm {
createPurchaseOrderForm: FormGroup
constructor(private fb: FormBuilder) {
this.createPurchaseOrderForm = this.fb.group({
purchaseConditions: new FormControl<string | null>(null, Validators.required),
lines: this.fb.array([])
});
}
get lines(): FormArray {
return this.createPurchaseOrderForm.get('lines') as FormArray;
}
// Ajouter des produits sélectionnés dans le formulaire
syncSelectedProducts(selectedProducts: GetProductDto[]) {
this.lines.clear();
selectedProducts.forEach(p => {
this.lines.push(this.fb.group({
productId: [p.id],
name: [p.name],
quantity: [1, [Validators.required, Validators.min(1)]]
}));
});
}
}

0
src/app/components/create-quotation-form/create-quotation-form.css
View File

46
src/app/components/create-quotation-form/create-quotation-form.html
View File

@@ -1,46 +0,0 @@
<form [formGroup]="createQuotationForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="12" nzRequired>
Message
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Message" formControlName="message">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="12" nzRequired>
Conditions générales
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
</nz-form-control>
</nz-form-item>
<div class="overflow-x-auto">
<nz-table [nzBordered]="true" class="mx-auto text-center">
<thead>
<tr>
<th class="text-center">Produit</th>
<th class="text-center">Quantité</th>
</tr>
</thead>
<tbody formArrayName="lines">
@for (line of lines.controls.slice(); let i = $index; track i) {
<tr [formGroupName]="i" class="text-center">
<td class="text-center">{{ line.value.name }}</td>
<td class="text-center">
<nz-input-number
formControlName="quantity"
[nzMin]="1"
[nzStep]="1">
</nz-input-number>
</td>
</tr>
}
</tbody>
</nz-table>
</div>
</form>

62
src/app/components/create-quotation-form/create-quotation-form.ts
View File

@@ -1,62 +0,0 @@
import { Component } from '@angular/core';
import {
FormArray,
FormBuilder,
FormControl,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators
} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
import {NzTableComponent} from "ng-zorro-antd/table";
import {GetProductDto} from "../../services/api";
@Component({
selector: 'app-create-quotation-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
NzInputNumberComponent,
NzTableComponent,
ReactiveFormsModule
],
templateUrl: './create-quotation-form.html',
styleUrl: './create-quotation-form.css',
})
export class CreateQuotationForm {
createQuotationForm: FormGroup
constructor(private fb: FormBuilder) {
this.createQuotationForm = this.fb.group({
message: new FormControl<string>(null, Validators.required),
purchaseConditions: new FormControl<string>(null, Validators.required),
lines: this.fb.array([])
});
}
get lines(): FormArray {
return this.createQuotationForm.get('lines') as FormArray;
}
// Ajouter des produits sélectionnés dans le formulaire
syncSelectedProducts(selectedProducts: GetProductDto[]) {
this.lines.clear();
selectedProducts.forEach(p => {
this.lines.push(this.fb.group({
productId: [p.id],
name: [p.name],
quantity: [1, [Validators.required, Validators.min(1)]]
}));
});
}
}

0
src/app/components/deliverer-form/deliverer-form.css
View File

11
src/app/components/deliverer-form/deliverer-form.html
View File

@@ -1,11 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="delivererForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Transporteur
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Transporteur" formControlName="transporter">
</nz-form-control>
</nz-form-item>
</form>

39
src/app/components/deliverer-form/deliverer-form.ts
View File

@@ -1,39 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {GetDelivererDto} from "../../services/api";
@Component({
selector: 'app-deliverer-form',
imports: [
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './deliverer-form.html',
styleUrl: './deliverer-form.css',
})
export class DelivererForm {
delivererForm: FormGroup = new FormGroup({
transporter: new FormControl<string>(null, [Validators.required])
})
deliverer= input<GetDelivererDto>();
constructor() {
effect(() => {
if (this.deliverer()) {
this.delivererForm.patchValue({
transporter: this.deliverer().transporter
});
}
});
}
}

85
src/app/components/deliverer-table/deliverer-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

58
src/app/components/deliverer-table/deliverer-table.html
View File

@@ -1,58 +0,0 @@
<nz-table [nzData]="deliverers()"
[nzFrontPagination]="false"
[nzLoading]="deliverersLoading()">
<thead>
<tr class="text-center">
<th>Transporteur</th>
<th>Bon de livraison</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (deliverer of deliverers(); track deliverer.id) {
<tr>
<td>{{deliverer.transporter}}</td>
<td>
<app-modal-button type="link" name="Voir tout les bons de livraison" size="50%">
<div style="max-height: 400px; overflow-y: auto;">
<nz-table [nzData]="deliverers()"
[nzFrontPagination]="false">
<thead>
<tr class="text-center">
<th>Numéro de livraison</th>
<th>Date d'expédition</th>
<th>Date de livraison estimée</th>
<th>Date de livraison réelle</th>
</tr>
</thead>
<tbody class="text-center">
@for (deliveryInfo of deliverer.deliveryNotes; track deliveryInfo.id) {
<tr>
<td>{{deliveryInfo.trackingNumber}}</td>
<td>{{deliveryInfo.expeditionDate | date: 'dd/MM/yyyy'}}</td>
<td>{{deliveryInfo.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
<td>{{deliveryInfo.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
</tr>
}
</tbody>
</nz-table>
</div>
</app-modal-button>
</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliverer)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedDeliverer.id, delivererForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-deliverer-form #delivererForm [deliverer]="selectedDeliverer"></app-deliverer-form>
</app-modal-nav>
</div>

109
src/app/components/deliverer-table/deliverer-table.ts
View File

@@ -1,109 +0,0 @@
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {ModalButton} from "../modal-button/modal-button";
import {DatePipe} from "@angular/common";
import {DelivererForm} from "../deliverer-form/deliverer-form";
import {DeliverersService, GetDelivererDto, GetSupplierDto} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {SupplierForm} from "../supplier-form/supplier-form";
@Component({
selector: 'app-deliverer-table',
imports: [
ModalNav,
NzDividerComponent,
NzIconDirective,
NzTableComponent,
ModalButton,
DatePipe,
DelivererForm,
],
templateUrl: './deliverer-table.html',
styleUrl: './deliverer-table.css',
})
export class DelivererTable implements OnInit {
private deliverersService = inject(DeliverersService);
private notificationService = inject(NzNotificationService)
deliverers = signal<GetDelivererDto[]>([]);
deliverersLoading = signal<boolean>(false);
updateDeliverer = viewChild.required<DelivererForm>('delivererForm');
modal = viewChild.required<ModalNav>('modalNav');
async ngOnInit() {
await this.fetchDeliverers();
}
async fetchDeliverers() {
this.deliverersLoading.set(true)
try {
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint())
this.deliverers.set(deliverers);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.deliverersLoading.set(false)
}
async delete(deliverer:number) {
try {
await firstValueFrom(this.deliverersService.deleteDelivererEndpoint(deliverer))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
await this.fetchDeliverers();
}
async edit(id: number, updateDelivererComponent: DelivererForm) {
if (updateDelivererComponent.delivererForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const deliverers = updateDelivererComponent.delivererForm.getRawValue();
await firstValueFrom(this.deliverersService.updateDelivererEndpoint(id, deliverers))
this.notificationService.success('Success', 'Transporteur modifié')
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la modification')
}
}
selectedDeliverer: GetDelivererDto | null = null;
openEditModal(supplier: GetSupplierDto) {
this.selectedDeliverer = { ...supplier };
this.modal().showModal();
}
async onModalOk(supplierId: number, updateDelivererComponent: DelivererForm, modal: ModalNav) {
if (!this.selectedDeliverer) return;
await this.edit(supplierId, updateDelivererComponent);
updateDelivererComponent.delivererForm.reset();
modal.isVisible = false;
await this.fetchDeliverers();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
}

0
src/app/components/deliverery-note-form/deliverery-note-form.css
View File

45
src/app/components/deliverery-note-form/deliverery-note-form.html
View File

@@ -1,45 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="deliveryNoteForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Transporteur
</nz-form-label>
<nz-form-control nzSpan="9" nzErrorTip="Ce champ est requis">
<nz-select formControlName="delivererId" [nzPlaceHolder]="'Choisir un transporteur'" nzShowSearch [nzFilterOption]="filter">
@for (deliverer of deliverers(); track deliverer.id) {
<nz-option [nzValue]="deliverer.id" [nzLabel]="deliverer.transporter"></nz-option>
}
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Date d'expédition
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<nz-date-picker formControlName="expeditionDate"></nz-date-picker>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9">
Date de livraison estimée
</nz-form-label>
<nz-form-control nzSpan="12">
<nz-date-picker formControlName="estimatedDate"></nz-date-picker>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9">
Date de livraison réelle
</nz-form-label>
<nz-form-control nzSpan="12">
<nz-date-picker formControlName="realDeliveryDate"></nz-date-picker>
</nz-form-control>
</nz-form-item>
</form>

74
src/app/components/deliverery-note-form/deliverery-note-form.ts
View File

@@ -1,74 +0,0 @@
import {Component, effect, inject, input, OnInit, signal} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {DeliverersService, GetDelivererDto, GetDeliveryNoteDto} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-deliverery-note-form',
imports: [
NzFormItemComponent,
NzFormLabelComponent,
NzFormControlComponent,
NzColDirective,
NzFlexDirective,
NzFormDirective,
ReactiveFormsModule,
NzDatePickerComponent,
NzSelectComponent,
NzOptionComponent,
],
templateUrl: './deliverery-note-form.html',
styleUrl: './deliverery-note-form.css',
})
export class DelivereryNoteForm implements OnInit {
deliveryNoteForm: FormGroup = new FormGroup({
trackingNumber: new FormControl<string>(null),
delivererId: new FormControl<number>(null,[Validators.required]),
expeditionDate: new FormControl(null,[Validators.required]),
estimatedDate: new FormControl(null),
realDeliveryDate: new FormControl(null)
})
private deliverersService = inject(DeliverersService);
private notificationService = inject(NzNotificationService);
deliverers = signal<GetDelivererDto[]>([]);
async fetchDeliverers() {
try {
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
this.deliverers.set(deliverers);
} catch (e) {
this.notificationService.error('Erreur', 'Impossible de récupérer les transporteurs');
}
}
async ngOnInit() {
await this.fetchDeliverers();
}
filter(input: string, option: any) {
return option.nzLabel.toLowerCase().includes(input.toLowerCase());
}
deliveryNote= input<GetDeliveryNoteDto>();
constructor() {
effect(() => {
if (this.deliveryNote()) {
this.deliveryNoteForm.patchValue({
trackingNumber: this.deliveryNote().trackingNumber,
expeditionDate: this.deliveryNote().expeditionDate,
realDeliveryDate: this.deliveryNote().expeditionDate,
estimatedDate: this.deliveryNote().expeditionDate,
delivererId: this.deliveryNote().delivererId
});
}
});
}
}

85
src/app/components/deliverery-note-table/deliverery-note-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

69
src/app/components/deliverery-note-table/deliverery-note-table.html
View File

@@ -1,69 +0,0 @@
<nz-table [nzData]="deliveryNotes()"
class="mr-7"
[nzFrontPagination]="false"
[nzLoading]="deliveryNotesLoading()">
<thead>
<tr class="text-center">
<th>Numéro de livraison</th>
<th>Transporteur</th>
<th>Date d'expédition</th>
<th>Date de livraison estimée</th>
<th>Date de livraison réelle</th>
<th>Produits</th>
<th>Action</th>
</tr>
</thead >
<tbody class="text-center">
@for (deliveryNote of deliveryNotes(); track deliveryNote.id) {
<tr>
<td>{{deliveryNote.trackingNumber}}</td>
<td>{{deliveryNote.delivererTransporter}}</td>
<td>{{deliveryNote.expeditionDate | date: 'dd/MM/yyyy'}}</td>
<td>{{deliveryNote.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
<td>{{deliveryNote.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
<td>
<app-modal-button type="link" name="Voir les produits" size="40%">
<div style="max-height: 400px; overflow-y: auto;">
<nz-table [nzData]="deliveryNotes()"
[nzFrontPagination]="false">
<thead>
<tr class="text-center">
<th>Réference</th>
<th>Nom</th>
<th>Quantité</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of deliveryNote.products; track product.productId) {
<tr>
<td>{{product.productReference}}</td>
<td>{{product.productName}}</td>
<td>{{product.quantity}}</td>
</tr>
}
</tbody>
</nz-table>
</div>
</app-modal-button>
</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="check" nzTheme="outline" (click)="validate(deliveryNote.id)" class="cursor-pointer text-green-700"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliveryNote)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)" class="cursor-pointer text-red-700"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)" class="cursor-pointer text-green-700"/>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier un bon de livraison'" (ok)="onModalOk(selectedDeliveryNote.id, deliveryNoteForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-deliverery-note-form #deliveryNoteForm [deliveryNote]="selectedDeliveryNote"></app-deliverery-note-form>
</app-modal-nav>
</div>

178
src/app/components/deliverery-note-table/deliverery-note-table.ts
View File

@@ -1,178 +0,0 @@
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {DatePipe} from "@angular/common";
import {ModalButton} from "../modal-button/modal-button";
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {DelivereryNoteForm} from "../deliverery-note-form/deliverery-note-form";
import {DeliverynotesService, GetDeliveryNoteDto} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {format} from "date-fns";
import {FileService} from "../../services/file.service";
@Component({
selector: 'app-deliverery-note-table',
imports: [
ModalButton,
ModalNav,
NzDividerComponent,
NzIconDirective,
NzTableComponent,
DelivereryNoteForm,
DatePipe,
],
templateUrl: './deliverery-note-table.html',
styleUrl: './deliverery-note-table.css',
})
export class DelivereryNoteTable implements OnInit {
private deliveryNotesService = inject(DeliverynotesService);
private notificationService = inject(NzNotificationService);
private fileService = inject(FileService);
deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
deliveryNotesLoading = signal<boolean>(false);
modal = viewChild.required<ModalNav>('modalNav');
async ngOnInit() {
await this.fetchDeliveryNotes();
}
async fetchDeliveryNotes() {
this.deliveryNotesLoading.set(true)
try {
const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint())
this.deliveryNotes.set(deliveryNotes);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.deliveryNotesLoading.set(false)
}
async delete(deliveryNote:number) {
this.deliveryNotesLoading.set(true)
try {
await firstValueFrom(this.deliveryNotesService.deleteDeliveryNoteEndpoint(deliveryNote));
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
this.deliveryNotesLoading.set(false)
await this.fetchDeliveryNotes();
}
async validate(deliveryNote:number) {
this.deliveryNotesLoading.set(true)
try {
const PatchRealDate = {
realDeliveryDate: format(new Date(), 'yyyy-MM-dd')
};
try {
await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(deliveryNote, PatchRealDate))
this.notificationService.success(
'Success',
'Date actualisée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'La date à déjà été actualisée'
)
}
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur d\'actualisation de la date'
)
}
this.deliveryNotesLoading.set(false)
await this.fetchDeliveryNotes()
}
async export(deliveryNoteId: number) {
this.deliveryNotesLoading.set(true)
try {
const pdf = await firstValueFrom(
this.deliveryNotesService.getDeliveryNotePdfEndpoint(deliveryNoteId, "response")
);
this.fileService.downloadBlob(pdf)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de générer un PDF'
);
}
this.deliveryNotesLoading.set(false)
}
async edit(id: number, updateDelivereryNoteComponent: DelivereryNoteForm) {
if (updateDelivereryNoteComponent.deliveryNoteForm.invalid) {
this.notificationService.error('Erreur', 'Formulaire invalide');
return;
}
try {
const raw = updateDelivereryNoteComponent.deliveryNoteForm.getRawValue();
// convertit proprement les dates (string OU Date)
const toIso = (val: any) => {
if (!val) return null;
// si c’est déjà un string ISO "yyyy-MM-dd", on renvoie tel quel
if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}/.test(val)) {
return val.substring(0, 10);
}
// sinon on reconstruit une Date
const d = new Date(val);
if (isNaN(d.getTime())) return null;
return d.toISOString().substring(0, 10); // yyyy-MM-dd
};
const deliveryNoteDto = {
trackingNumber: raw.trackingNumber,
delivererId: raw.delivererId,
expeditionDate: toIso(raw.expeditionDate),
estimatedDate: toIso(raw.estimatedDate),
realDeliveryDate: toIso(raw.realDeliveryDate)
};
await firstValueFrom(this.deliveryNotesService.updateDeliveryNoteEndpoint(id, deliveryNoteDto));
this.notificationService.success('Success', 'Bon de livraison modifié');
} catch (e) {
console.error(e);
this.notificationService.error('Erreur', 'Erreur lors de la modification');
}
}
selectedDeliveryNote: GetDeliveryNoteDto | null = null;
openEditModal(deliveryNote: GetDeliveryNoteDto) {
this.selectedDeliveryNote = { ...deliveryNote };
this.modal().showModal();
}
async onModalOk(id: number, updateDelivereryNoteComponent: DelivereryNoteForm, modal: ModalNav) {
if (!this.selectedDeliveryNote) return;
await this.edit(id, updateDelivereryNoteComponent);
updateDelivereryNoteComponent.deliveryNoteForm.reset();
modal.isVisible = false;
await this.fetchDeliveryNotes();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
}

114
src/app/components/delivery-validator/delivery-validator.css
View File

@@ -1,114 +0,0 @@
/* Conteneur principal centré */
.livraisons-container {
max-width: 650px;
margin: 40px 0 0 80px;
padding: 25px;
background: #f9fafb;
border-radius: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: flex-start;
/* Box shadow pour effet superposition */
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.06),
0 8px 20px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(0, 0, 0, 0.06);
}
/* Barre de recherche */
.search-input {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid #ddd;
margin-bottom: 20px;
font-size: 16px;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 8px rgba(59,130,246,0.2);
outline: none;
}
/* Liste scrollable */
.livraisons-list {
width: 100%;
max-height: 350px; /* hauteur max de la liste */
overflow-y: auto; /* scroll vertical activé */
padding-right: 10px; /* pour le scrollbar */
}
/* Scrollbar personnalisée (optionnel) */
.livraisons-list::-webkit-scrollbar {
width: 8px;
}
.livraisons-list::-webkit-scrollbar-thumb {
background: #9ca3af;
border-radius: 4px;
}
.livraisons-list::-webkit-scrollbar-track {
background: #f3f4f6;
}
/* Carte de livraison */
.livraison-card {
background: #ffffff;
padding: 20px 22px;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 18px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.livraison-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
/* Infos livraison */
.livraison-info h3 {
font-size: 17px;
margin: 0 0 4px;
color: #111827;
}
.livraison-info p {
margin: 0;
font-size: 14px;
color: #6b7280;
}
/* Bouton valider */
.validate-btn {
padding: 10px 20px;
border-radius: 12px;
border: none;
cursor: pointer;
font-weight: 600;
background: #3b82f6;
color: white;
transition: all 0.3s ease;
}
.validate-btn:hover {
background: #2563eb;
}
.validate-btn.validated {
background: #9ca3af;
cursor: default;
color: #ffffff;
opacity: 0.9;
}

20
src/app/components/delivery-validator/delivery-validator.html
View File

@@ -1,20 +0,0 @@
<div class="livraisons-container">
<input type="text" placeholder="Rechercher une livraison" class="search-input" (input)="search.set($any($event.target).value)"/>
<div class="livraisons-list">
@for (deliveryItem of filteredLivraisons(); track deliveryItem.id) {
<div class="livraison-card">
<div class="livraison-info">
<h3>{{ deliveryItem.client }}</h3>
<p class="mr-5">Date d'expédition: {{ deliveryItem.date }}</p>
<p>Produits : {{ deliveryItem.produits }}</p>
</div>
<button nz-button nzType="primary" [nzSize]="size" nzShape="round" (click)="validate(deliveryItem.id)">
<nz-icon nzType="check" />
Valider
</button>
</div>
}
</div>
</div>

44
src/app/components/delivery-validator/delivery-validator.ts
View File

@@ -1,44 +0,0 @@
import {Component, computed, signal} from '@angular/core';
import {NzButtonComponent, NzButtonSize} from "ng-zorro-antd/button";
import {NzIconDirective} from "ng-zorro-antd/icon";
@Component({
selector: 'app-delivery-validator',
imports: [
NzButtonComponent,
NzIconDirective
],
templateUrl: './delivery-validator.html',
styleUrl: './delivery-validator.css',
})
export class DeliveryValidator {
size: NzButtonSize = 'large';
search = signal('');
livraisons = signal([
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 }
]);
filteredLivraisons = computed(() => {
const query = this.search().toLowerCase();
return this.livraisons().filter(l =>
l.client.toLowerCase().includes(query) ||
l.date.includes(query)
);
});
validate(id: number) {
return
}
}

42
src/app/components/info-card/info-card.css
View File

@@ -1,42 +0,0 @@
.card-content {
background: #ffffff;
padding: 32px 36px;
border-radius: 20px;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
width: 350px;
min-height: 180px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-content:hover {
transform: translateY(-6px);
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}
/* Ligne du haut : icône ET nombre */
.card-top {
display: flex;
align-items: center;
gap: 20px;
}
/* Icône à gauche (plus grande) */
.card-top nz-icon {
font-size: 50px;
}
/* Nombre à droite de l'icône (plus grand) */
.card-number {
font-size: 48px;
font-weight: 700;
margin: 0;
color: #111827;
}
/* Texte en dessous (plus lisible) */
.card-text {
margin-top: 18px;
font-size: 18px;
line-height: 1.4;
color: #4b5563;
}

7
src/app/components/info-card/info-card.html
View File

@@ -1,7 +0,0 @@
<div class="card-content">
<div class="card-top">
<nz-icon [ngStyle]="{ 'color': color() }" [nzType]="icon()" nzTheme="outline"></nz-icon>
<p class="card-number">{{value()}}</p>
</div>
<p class="card-text">{{description()}}</p>
</div>

19
src/app/components/info-card/info-card.ts
View File

@@ -1,19 +0,0 @@
import {Component, input} from '@angular/core';
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NgStyle} from "@angular/common";
@Component({
selector: 'app-info-card',
imports: [
NzIconDirective,
NgStyle
],
templateUrl: './info-card.html',
styleUrl: './info-card.css',
})
export class InfoCard {
icon = input.required<string>()
value = input.required<string>()
description = input.required<string>()
color = input.required<string>()
}

72
src/app/components/info-table/info-table.css
View File

@@ -1,72 +0,0 @@
.documents-section {
display: flex;
flex-direction: column;
align-items: flex-start; /* contenu aligné à gauche */
gap: 16px; /* espace entre le titre et la liste */
margin: 40px 6%;
}
/* Titre */
.documents-section h1 {
font-size: 24px;
font-weight: 700;
color: #111827;
margin: 0; /* on gère l’espace avec le gap */
letter-spacing: 0.5px;
text-transform: capitalize;
border-left: 4px solid #3b82f6;
padding-left: 12px;
}
/* Liste de documents scrollable */
.content {
width: 1000px;
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 30px 15px;
border-radius: 20px;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.06),
0 8px 20px rgba(0, 0, 0, 0.08),
0 16px 40px rgba(0, 0, 0, 0.06);
max-height: 390px;
overflow-y: auto;
}
/* Chaque carte */
.content > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 140px;
padding: 12px;
background: #ffffff;
border-radius: 14px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
transition: all 0.2s ease;
text-align: center;
}
.content > div:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.content img {
width: 48px;
height: 48px;
margin-bottom: 10px;
object-fit: contain;
}
.content p {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #111827;
word-break: break-word;
}

11
src/app/components/info-table/info-table.html
View File

@@ -1,11 +0,0 @@
<div class="documents-section">
<h1>Documents récents</h1>
<div class="content">
@for (doc of purchaseOrder(); track doc.id) {
<div>
<img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" alt="pdf">
<p>{{ doc.name }}</p>
</div>
}
</div>
</div>

44
src/app/components/info-table/info-table.ts
View File

@@ -1,44 +0,0 @@
import { Component } from '@angular/core';
interface PurchaseOrder {
id: number;
name: string;
}
@Component({
selector: 'app-info-table',
templateUrl: './info-table.html',
styleUrls: ['./info-table.css'],
})
export class InfoTable {
docs: PurchaseOrder[] = [
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
{ id: 1, name: 'Bon de commande'},
{ id: 2, name: 'Bon de commande'},
{ id: 3, name: 'Bon de commande'},
];
purchaseOrder(): PurchaseOrder[] {
return this.docs;
}
}

0
src/app/components/modal-button/modal-button.css
View File

17
src/app/components/modal-button/modal-button.html
View File

@@ -1,17 +0,0 @@
<button nz-button [nzType]="type()" (click)="showModal()">{{name()}}</button>
<ng-template #modalContent>
<ng-content></ng-content>
</ng-template>
<nz-modal
[(nzVisible)]="isVisible"
[nzTitle]="name()"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
[nzOkLoading]="isOkLoading"
[nzContent]="modalContent"
[nzWidth]="size()"
>
</nz-modal>

43
src/app/components/modal-button/modal-button.ts
View File

@@ -1,43 +0,0 @@
import {Component, input, Input, output} from '@angular/core';
import {NzModalComponent} from "ng-zorro-antd/modal";
import {NzButtonComponent} from "ng-zorro-antd/button";
@Component({
selector: 'app-modal-button',
imports: [
NzModalComponent,
NzButtonComponent,
],
templateUrl: './modal-button.html',
styleUrl: './modal-button.css',
})
export class ModalButton {
size = input<string>();
name = input.required<string>()
type = input<"primary" | "default" | "dashed" | "link" | "text">()
ok = output<void>();
cancel = output<void>();
isVisible = false;
isOkLoading = false;
showModal(): void {
this.isVisible = true;
}
handleOk(): void {
this.isOkLoading = true;
setTimeout(() => {
this.ok.emit();
this.isVisible = false;
this.isOkLoading = false;
}, 1000);
}
handleCancel(): void {
this.cancel.emit();
this.isVisible = false;
}
}

0
src/app/components/modal-nav/modal-nav.css
View File

18
src/app/components/modal-nav/modal-nav.html
View File

@@ -1,18 +0,0 @@
<div (click)="showModal()">
<nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
</div>
<ng-template #modalContent>
<ng-content></ng-content>
</ng-template>
<nz-modal
[(nzVisible)]="isVisible"
[nzTitle]="name()"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
[nzOkLoading]="isOkLoading"
[nzContent]="modalContent"
>
</nz-modal>

37
src/app/components/modal-nav/modal-nav.ts
View File

@@ -1,37 +0,0 @@
import {Component, Input, input, output} from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal';
import {NzIconDirective} from "ng-zorro-antd/icon";
@Component({
selector: 'app-modal-nav',
imports: [NzButtonModule, NzModalModule, NzIconDirective],
templateUrl: 'modal-nav.html',
styleUrls: ['./modal-nav.css'],
})
export class ModalNav {
nameIcon = input.required<string>()
name = input.required<string>()
ok = output<void>();
cancel = output<void>();
isVisible = false;
isOkLoading = false;
showModal(): void {
this.isVisible = true;
}
handleOk(): void {
this.isOkLoading = true;
setTimeout(() => {
this.ok.emit();
this.isOkLoading = false;
}, 1000);
}
handleCancel(): void {
this.isVisible = false;
this.cancel.emit();
}
}

0
src/app/components/notif-list/notif-list.css
View File

34
src/app/components/notif-list/notif-list.html
View File

@@ -1,34 +0,0 @@
<div class="ml-90">
<p class="cursor-pointer text-red-700" (click)="delete()">
<nz-icon nzType="delete" nzTheme="outline"/> Tout supprimer
</p>
</div>
<nz-list nzItemLayout="vertical" class="max-w-xl mx-auto max-h-[400px] overflow-y-auto border border-gray-200 rounded-lg">
@for (item of notifList; track item) {
<nz-list-item class="flex items-start p-4 border-b border-gray-200">
<nz-list-item-meta class="flex-1">
<nz-list-item-meta-avatar>
<img src="https://cdn-icons-png.flaticon.com/512/1/1176.png" alt="info" class="w-10 h-10 rounded-full mt-10 mr-2 w-10">
</nz-list-item-meta-avatar>
<nz-list-item-meta-title>
<p class="font-semibold mb-1">{{item.title}}</p>
<p class="text-gray-500 mb-1">{{item.author}}</p>
</nz-list-item-meta-title>
<nz-list-item-meta-description>
<p>{{item.content}}</p>
</nz-list-item-meta-description>
</nz-list-item-meta>
<nz-list-item-extra>
<img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
alt="logo"
class="w-35 object-contain mt-4">
</nz-list-item-extra>
</nz-list-item>
}
</nz-list>

92
src/app/components/notif-list/notif-list.ts
View File

@@ -1,92 +0,0 @@
import { Component } from '@angular/core';
import {NotifInfo} from "../../interfaces/notif.interface";
import {
NzListComponent,
NzListItemComponent,
NzListItemExtraComponent, NzListItemMetaAvatarComponent,
NzListItemMetaComponent, NzListItemMetaDescriptionComponent, NzListItemMetaTitleComponent
} from "ng-zorro-antd/list";
import {NzIconDirective} from "ng-zorro-antd/icon";
@Component({
selector: 'app-notif-list',
imports: [
NzListComponent,
NzListItemComponent,
NzListItemMetaComponent,
NzListItemExtraComponent,
NzListItemMetaDescriptionComponent,
NzListItemMetaAvatarComponent,
NzListItemMetaTitleComponent,
NzIconDirective
],
templateUrl: './notif-list.html',
styleUrl: './notif-list.css',
})
export class NotifList {
notifList: NotifInfo[] = [
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
},
{
author: 'Admin',
title: 'Information system',
content: 'L\'utilisateur à bien été crée.'
}
];
delete() {
this.notifList = [];
}
addContent(author: string, title: string, content: string) {
this.notifList.push({ author, title, content });
}
}

0
src/app/components/price-form/price-form.css
View File

13
src/app/components/price-form/price-form.html
View File

@@ -1,13 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="priceForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9">
Prix
</nz-form-label>
<nz-form-control nzSpan="12">
<input nz-input type="number" placeholder="€€€" formControlName="price">
</nz-form-control>
</nz-form-item>
</form>

40
src/app/components/price-form/price-form.ts
View File

@@ -1,40 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {GetPriceDto, GetSupplierDto} from "../../services/api";
@Component({
selector: 'app-price-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './price-form.html',
styleUrl: './price-form.css',
})
export class PriceForm {
priceForm: FormGroup = new FormGroup({
price: new FormControl<string>(null, [Validators.required]),
})
price= input<GetPriceDto>();
constructor() {
effect(() => {
if (this.price()) {
this.priceForm.patchValue({
price: this.price().sellingPrice
});
}
});
}
}

0
src/app/components/product-form/product-form.css
View File

21
src/app/components/product-form/product-form.html
View File

@@ -1,21 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="productForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Prix
</nz-form-label>
<nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Prix" formControlName="price">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Quantité
</nz-form-label>
<nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Quantité" formControlName="quantity">
</nz-form-control>
</nz-form-item>
</form>

29
src/app/components/product-form/product-form.ts
View File

@@ -1,29 +0,0 @@
import { Component } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
@Component({
selector: 'app-product-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './product-form.html',
styleUrl: './product-form.css',
})
export class ProductForm {
productForm: FormGroup = new FormGroup({
price: new FormControl<string>(null, [Validators.required]),
quantity: new FormControl<string>(null, [Validators.required])
})
}

0
src/app/components/product-table/product-table.css
View File

0
src/app/components/product-table/product-table.html
View File

9
src/app/components/product-table/product-table.ts
View File

@@ -1,9 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-product-table',
imports: [],
templateUrl: './product-table.html',
styleUrl: './product-table.css',
})
export class ProductTable {}

0
src/app/components/profil-form/profil-form.css
View File

44
src/app/components/profil-form/profil-form.html
View File

@@ -1,44 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="profilForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Prénom
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Prénom" formControlName="name">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Email
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Email" formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Fonction
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<nz-select formControlName="fonction" [nzPlaceHolder]="'Choisir une fonction'">
<nz-option nzLabel="Admin" nzValue="Admin"></nz-option>
<nz-option nzLabel="Visiteur" nzValue="Visiteur"></nz-option>
<nz-option nzLabel="Partenaire" nzValue="Partenaire"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Mot de passe
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="password">
</nz-form-control>
</nz-form-item>
</form>

49
src/app/components/profil-form/profil-form.ts
View File

@@ -1,49 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {GetUserDto} from "../../services/api";
@Component({
selector: 'app-profil-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule,
NzSelectComponent,
NzOptionComponent
],
templateUrl: './profil-form.html',
styleUrl: './profil-form.css',
})
export class ProfilForm {
profilForm: FormGroup = new FormGroup({
name: new FormControl<string>(null, [Validators.required]),
email: new FormControl<string>(null, [Validators.required]),
fonction: new FormControl<string>(null, [Validators.required]),
password: new FormControl<string>(null, [Validators.required])
})
user = input<GetUserDto>();
constructor() {
effect(() => {
if (this.user()) {
this.profilForm.patchValue({
name: this.user().name,
email: this.user().email,
fonction: this.user().fonction,
password: this.user().password
});
}
});
}
}

12
src/app/components/profil/profil.css
View File

@@ -1,12 +0,0 @@
.fontProfil {
font-family: "Arial", cursive;
text-shadow: 2px 2px #8C731A, -2px -2px #8C731A;
font-weight: bold;
}
.festive2 {
font-family: "Comic Sans MS", cursive;
color: #001529;
font-weight: bold;
}

15
src/app/components/profil/profil.html
View File

@@ -1,15 +0,0 @@
<div class="ml-110 cursor-pointer">
<app-modal-nav nameIcon="edit" name="Modification du profil">
<app-profil-form [user]=""></app-profil-form>
</app-modal-nav>
</div>
<div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl fontProfil">
{{ getInitial(data.name) }}
</div>
<div class="mt-6">
<p class="text-3xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
</div>

27
src/app/components/profil/profil.ts
View File

@@ -1,27 +0,0 @@
import { Component } from '@angular/core';
import {UserInfo} from "../../interfaces/user.interface";
import {ProfilForm} from "../profil-form/profil-form";
import {ModalNav} from "../modal-nav/modal-nav";
@Component({
selector: 'app-profil',
imports: [
ProfilForm,
ModalNav
],
templateUrl: './profil.html',
styleUrl: './profil.css',
})
export class Profil {
data: UserInfo =
{
name: 'Mathys Sanchez Vendé',
email: 'mathys.sanchez@vende.fr',
fonction: 'admin',
};
getInitial(name: string): string {
if (!name || name.trim() === '') return '?';
return name[0].toUpperCase();
}
}

0
src/app/components/purchase-order-form/purchase-order-form.css
View File

11
src/app/components/purchase-order-form/purchase-order-form.html
View File

@@ -1,11 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="purchaseOrderForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="12" nzRequired>
Conditions générales de vente
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
</nz-form-control>
</nz-form-item>
</form>

40
src/app/components/purchase-order-form/purchase-order-form.ts
View File

@@ -1,40 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {GetPurchaseOrderDto} from "../../services/api";
@Component({
selector: 'app-purchase-order-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './purchase-order-form.html',
styleUrl: './purchase-order-form.css',
})
export class PurchaseOrderForm {
purchaseOrderForm: FormGroup = new FormGroup({
purchaseConditions: new FormControl<string>(null,[Validators.required])
})
purchaseOrder= input<GetPurchaseOrderDto>();
constructor() {
effect(() => {
if (this.purchaseOrder()) {
this.purchaseOrderForm.patchValue({
purchaseConditions: this.purchaseOrder().purchaseConditions,
});
}
});
}
}

85
src/app/components/purchase-order-table/purchase-order-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

83
src/app/components/purchase-order-table/purchase-order-table.html
View File

@@ -1,83 +0,0 @@
<nz-table [nzData]="purchaseOrders()"
[nzLoading]="purchaseOrdersLoading()"
[nzFrontPagination]="false"
class="mr-7">
<thead>
<tr class="text-center">
<th>Numéro</th>
<th>Conditions de vente</th>
<th>Fournisseur</th>
<th>Produits</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (purchaseOrder of purchaseOrders(); track purchaseOrder.id) {
<tr>
<td>{{ purchaseOrder.id }}</td>
<td>{{purchaseOrder.purchaseConditions}}</td>
<td>Fournisseur ???</td>
<td>
<app-modal-button type="link" name="Voir les produits" size="45%">
<div style="max-height: 400px; overflow-y: auto;">
<nz-table [nzData]="purchaseOrders()"
[nzFrontPagination]="false">
<thead>
<tr class="text-center">
<th>Nom</th>
<th>Reférence</th>
<th>Prix</th>
<th>Quantité</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of purchaseOrder.products; track product.productId) {
<tr>
<td>{{product.productName}}</td>
<td>{{product.productReferences}}</td>
<td>Prix €€€€</td>
<td>{{product.quantity}}</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, purchaseOrder.id)"/>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
</div>
</app-modal-button>
</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(purchaseOrder)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-red-700"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="interaction" nzTheme="outline" (click)="transfer()" class="cursor-pointer text-blue-700"/>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modification des conditions de vente'" (ok)="onModalOk(selectedPurchaseOrder.id, purchaseOrderForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-purchase-order-form #purchaseOrderForm [purchaseOrder]="selectedPurchaseOrder"></app-purchase-order-form>
</app-modal-nav>
</div>
<div class="hidden">
<app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.purchaseOrderId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
<app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
</app-modal-nav>
</div>

189
src/app/components/purchase-order-table/purchase-order-table.ts
View File

@@ -1,189 +0,0 @@
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {PurchaseOrderForm} from "../purchase-order-form/purchase-order-form";
import {ModalButton} from "../modal-button/modal-button";
import {
GetPurchaseOrderDto,
GetPurchaseProductDto,
PurchaseordersService,
PurchaseproductsService
} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {FileService} from "../../services/file.service";
import {QuantityForm} from "../quantity-form/quantity-form";
@Component({
selector: 'app-purchase-order-table',
imports: [
ModalNav,
NzDividerComponent,
NzIconDirective,
NzTableComponent,
PurchaseOrderForm,
ModalButton,
QuantityForm,
],
templateUrl: './purchase-order-table.html',
styleUrl: './purchase-order-table.css',
})
export class PurchaseOrderTable implements OnInit {
private purchaseOrdersService = inject(PurchaseordersService);
private notificationService = inject(NzNotificationService);
private fileService = inject(FileService);
private purchaseProductService = inject(PurchaseproductsService)
purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
purchaseOrdersLoading = signal<boolean>(false);
modal = viewChild.required<ModalNav>('modalNav');
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
async ngOnInit() {
await this.fetchPurchaseOrder();
}
async fetchPurchaseOrder() {
this.purchaseOrdersLoading.set(true)
try {
const purchaseOrders = await firstValueFrom(this.purchaseOrdersService.getAllPurchaseOrderEndpoint())
this.purchaseOrders.set(purchaseOrders);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.purchaseOrdersLoading.set(false)
}
async delete(purchaseOrderId:number) {
this.purchaseOrdersLoading.set(true)
try {
await firstValueFrom(this.purchaseOrdersService.deletePurchaseOrderEndpoint(purchaseOrderId))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
this.purchaseOrdersLoading.set(false)
await this.fetchPurchaseOrder();
}
async export(purchaseOrderId: number){
this.purchaseOrdersLoading.set(true)
try {
const pdf = await firstValueFrom(
this.purchaseOrdersService.getPurchaseOrderPdfEndpoint(purchaseOrderId, "response")
);
this.fileService.downloadBlob(pdf)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de générer un PDF'
);
}
this.purchaseOrdersLoading.set(false)
}
transfer() {
return
}
async edit(id: number, updatePurchaseOrderComponent: PurchaseOrderForm) {
if (updatePurchaseOrderComponent.purchaseOrderForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const purchaseOrders = updatePurchaseOrderComponent.purchaseOrderForm.getRawValue();
await firstValueFrom(this.purchaseOrdersService.patchPurchaseOrderPurchaseConditionsEndpoint(id, purchaseOrders))
this.notificationService.success('Success', 'Bon de commande modifié')
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la modification')
}
}
async deleteProduct(productId: number, purchaseOrderId: number) {
this.purchaseOrdersLoading.set(true)
try {
await firstValueFrom(this.purchaseProductService.deletePurchaseProductEndpoint(productId, purchaseOrderId))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
this.purchaseOrdersLoading.set(false)
await this.fetchPurchaseOrder();
}
async editQuantity(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm) {
if (updateQuantityComponent.quantityForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const quantity = updateQuantityComponent.quantityForm.getRawValue();
await firstValueFrom(this.purchaseProductService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
this.notificationService.success('Success', 'Quantité modifiée')
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la modification')
}
}
selectedPurchaseOrder: GetPurchaseOrderDto | null = null;
openEditModal(purchaseOrder: GetPurchaseOrderDto) {
this.selectedPurchaseOrder = { ...purchaseOrder };
this.modal().showModal();
}
async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
if (!this.selectedPurchaseOrder) return;
await this.edit(id, updatePurchaseOrderComponent);
updatePurchaseOrderComponent.purchaseOrderForm.reset();
modal.isVisible = false;
await this.fetchPurchaseOrder();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
selectedQuantity: GetPurchaseProductDto | null = null;
openEditQuantityModal(quantity: GetPurchaseProductDto) {
this.selectedQuantity = { ...quantity };
this.modalQuantity().showModal();
}
async onModalQuantityOk(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
if (!this.selectedQuantity) return;
await this.editQuantity(productId, purchaseOrderId, updateQuantityComponent);
updateQuantityComponent.quantityForm.reset();
modal.isVisible = false;
await this.fetchPurchaseOrder();
}
}

0
src/app/components/quantity-form/quantity-form.css
View File

11
src/app/components/quantity-form/quantity-form.html
View File

@@ -1,11 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="quantityForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Quantité
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="0" formControlName="quantity">
</nz-form-control>
</nz-form-item>
</form>

40
src/app/components/quantity-form/quantity-form.ts
View File

@@ -1,40 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {GetDelivererDto, GetPurchaseProductDto} from "../../services/api";
@Component({
selector: 'app-quantity-form',
imports: [
FormsModule,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './quantity-form.html',
styleUrl: './quantity-form.css',
})
export class QuantityForm {
quantityForm: FormGroup = new FormGroup({
quantity: new FormControl<number>(null, [Validators.required])
})
quantity= input<GetPurchaseProductDto>();
constructor() {
effect(() => {
if (this.quantity()) {
this.quantityForm.patchValue({
quantity: this.quantity().quantity
});
}
});
}
}

0
src/app/components/quotation-form/quotation-form.css
View File

22
src/app/components/quotation-form/quotation-form.html
View File

@@ -1,22 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="quotationForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9">
Message du devis
</nz-form-label>
<nz-form-control nzSpan="12">
<input nz-input placeholder="Message du devis" formControlName="message">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Conditions de vente
</nz-form-label>
<nz-form-control nzSpan="12">
<input nz-input placeholder="Conditions de vente" formControlName="conditionsSale">
</nz-form-control>
</nz-form-item>
</form>

41
src/app/components/quotation-form/quotation-form.ts
View File

@@ -1,41 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {GetQuotationDto} from "../../services/api";
@Component({
selector: 'app-quotation-form',
imports: [
NzFormItemComponent,
NzFormLabelComponent,
NzFormControlComponent,
NzInputDirective,
NzColDirective,
NzFlexDirective,
NzFormDirective,
ReactiveFormsModule
],
templateUrl: './quotation-form.html',
styleUrl: './quotation-form.css',
})
export class QuotationForm {
quotationForm: FormGroup = new FormGroup({
message: new FormControl<string>(null, [Validators.required]),
conditionsSale: new FormControl<string>(null, [Validators.required]),
})
quotation= input<GetQuotationDto>();
constructor() {
effect(() => {
if (this.quotation()) {
this.quotationForm.patchValue({
message: this.quotation().message,
conditionsSale: this.quotation().conditionsSale,
});
}
});
}
}

85
src/app/components/quotation-table/quotation-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

81
src/app/components/quotation-table/quotation-table.html
View File

@@ -1,81 +0,0 @@
<nz-table class="mr-7"
[nzData]="quotations()"
[nzLoading]="quotationsLoading()"
[nzFrontPagination]="false"
>
<thead>
<tr class="text-center">
<th>Numéro de Devis</th>
<th>Message</th>
<th>Conditions de vente</th>
<th>Produit</th>
<th>Action</th>
</tr>
</thead >
<tbody class="text-center">
@for (quotation of quotations(); track quotation.id) {
<tr>
<td>{{quotation.id}}</td>
<td>{{quotation.message}}</td>
<td>{{quotation.conditionsSale}}</td>
<td>
<app-modal-button type="link" name="Voir les produits" size="45%">
<div style="max-height: 400px; overflow-y: auto;">
<nz-table>
<thead>
<tr class="text-center">
<th>Réference</th>
<th>Nom</th>
<th>Prix</th>
<th>Quantité</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of quotation.products; track product.productId) {
<tr>
<td>{{ product.productReferences }}</td>
<td>{{ product.productName }}</td>
<td>Price ???</td>
<td>{{ product.quantity }}</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, quotation.id)"/>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
</div>
</app-modal-button>
</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700" />
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(quotation)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(quotation.id)"/>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline" class="cursor-pointer text-green-700"/>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modification du devis'" (ok)="onModalOk(selectedQuotation.id, quotationForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-quotation-form #quotationForm [quotation]="selectedQuotation"></app-quotation-form>
</app-modal-nav>
</div>
<div class="hidden">
<app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.quotationId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
<app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
</app-modal-nav>
</div>

185
src/app/components/quotation-table/quotation-table.ts
View File

@@ -1,185 +0,0 @@
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {NzTableComponent} from "ng-zorro-antd/table";
import {ModalButton} from "../modal-button/modal-button";
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {QuotationForm} from "../quotation-form/quotation-form";
import {
GetQuotationDto,
GetQuotationProductDto,
QuotationproductsService,
QuotationsService
} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {FileService} from "../../services/file.service";
import {QuantityForm} from "../quantity-form/quantity-form";
@Component({
selector: 'app-quotation-table',
imports: [
ModalButton,
ModalNav,
NzDividerComponent,
NzIconDirective,
NzTableComponent,
QuotationForm,
QuantityForm,
],
templateUrl: './quotation-table.html',
styleUrl: './quotation-table.css',
})
export class QuotationTable implements OnInit {
private quotationsService = inject(QuotationsService);
private notificationService = inject(NzNotificationService);
private quotationProductsService = inject(QuotationproductsService)
private fileService = inject(FileService);
quotations = signal<GetQuotationDto[]>([]);
quotationsLoading = signal<boolean>(false);
modal = viewChild.required<ModalNav>('modalNav');
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
async ngOnInit() {
await this.fetchQuotations();
}
async fetchQuotations() {
this.quotationsLoading.set(true)
try {
const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
this.quotations.set(quotations);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.quotationsLoading.set(false)
}
async delete(quotation:number) {
this.quotationsLoading.set(true)
try {
await firstValueFrom(this.quotationsService.deleteQuotationEndpoint(quotation))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
this.quotationsLoading.set(false)
await this.fetchQuotations();
}
async export(quotationId: number){
this.quotationsLoading.set(true)
try {
const pdf = await firstValueFrom(
this.quotationsService.getQuotationPdfEndpoint(quotationId, "response")
);
this.fileService.downloadBlob(pdf)
} catch (e) {
console.error(e);
this.notificationService.error(
'Erreur',
'Impossible de générer un PDF'
);
}
this.quotationsLoading.set(false)
}
async edit(id: number, updateQuotationComponent: QuotationForm) {
if (updateQuotationComponent.quotationForm.invalid) {
this.notificationService.error('Erreur', 'Formulaire invalide');
return;
}
try {
const quotations = updateQuotationComponent.quotationForm.getRawValue();
await firstValueFrom(this.quotationsService.updateQuotationEndpoint(id, quotations));
this.notificationService.success('Success', 'Devis modifié')
} catch (e) {
console.error(e)
this.notificationService.error('Erreur', 'Erreur lors de la modification')
}
}
async deleteProduct(productId: number, quotationId: number) {
this.quotationsLoading.set(true)
try {
await firstValueFrom(this.quotationProductsService.deleteQuotationProductEndpoint(productId, quotationId))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
this.quotationsLoading.set(false)
await this.fetchQuotations();
}
async editQuantity(productId: number, quotationId: number, updateQuantityComponent: QuantityForm) {
if (updateQuantityComponent.quantityForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const quantity = updateQuantityComponent.quantityForm.getRawValue();
await firstValueFrom(this.quotationProductsService.patchQuotationProductQuantityEndpoint(productId, quotationId, quantity))
this.notificationService.success('Success', 'Quantité modifiée')
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la modification')
}
}
selectedQuotation: GetQuotationDto | null = null;
openEditModal(quotation: GetQuotationDto) {
this.selectedQuotation = { ...quotation };
this.modal().showModal();
}
async onModalOk(id: number, updateQuotationComponent: QuotationForm, modal: ModalNav) {
if (!this.selectedQuotation) return;
await this.edit(id, updateQuotationComponent);
updateQuotationComponent.quotationForm.reset();
modal.isVisible = false;
await this.fetchQuotations();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
selectedQuantity: GetQuotationProductDto | null = null;
openEditQuantityModal(quantity: GetQuotationProductDto) {
this.selectedQuantity = { ...quantity };
this.modalQuantity().showModal();
}
async onModalQuantityOk(productId: number, quotationId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
if (!this.selectedQuantity) return;
await this.editQuantity(productId, quotationId, updateQuantityComponent);
updateQuantityComponent.quantityForm.reset();
modal.isVisible = false;
await this.fetchQuotations();
}
}

36
src/app/components/search/search.css
View File

@@ -1,36 +0,0 @@
/* From Uiverse.io by LightAndy1 */
.group {
box-shadow: 0 1px 2px 1px #001529;
border-radius: 15px;
padding: 0.1rem 0.5rem 0.1rem 1rem;
display: flex;
line-height: 28px;
align-items: center;
position: relative;
max-width: 400px;
}
.input {
width: 100%;
height: 32px;
line-height: 28px;
padding: 0 1rem;
border: 2px solid transparent;
border-radius: 8px;
outline: none;
background-color: #f3f3f4;
color: #0d0c22;
transition: 0.3s ease;
}
.input::placeholder {
color: #9e9ea7;
}
.input:focus,
input:hover {
outline: none;
border-color: #40A9FF;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(199, 199, 197, 0.1);
}

10
src/app/components/search/search.html
View File

@@ -1,10 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="searchForm">
<nz-form-item nz-flex>
<nz-form-control nzSpan="12">
<div class="group">
<nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl" (click)="OnSearch()"></nz-icon>
<input class="input" placeholder="Rechercher" formControlName="searchValue" (input)="OnSearch()"/>
</div>
</nz-form-control>
</nz-form-item>
</form>

35
src/app/components/search/search.ts
View File

@@ -1,35 +0,0 @@
import { Component, output } from '@angular/core';
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent} from "ng-zorro-antd/form";
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
@Component({
selector: 'app-search',
imports: [
NzIconDirective,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
ReactiveFormsModule
],
templateUrl: './search.html',
styleUrl: './search.css',
})
export class Search {
searchForm: FormGroup = new FormGroup({
searchValue: new FormControl<string>(null)
})
searchEvent = output<string>();
OnSearch(): void {
const raw = this.searchForm.controls['searchValue'].value ?? '';
const value = String(raw).trim();
this.searchEvent.emit(value);
}
}

36
src/app/components/setting-form/setting-form.css
View File

@@ -1,36 +0,0 @@
/* Container de chaque ligne */
.row {
display: flex;
align-items: center; /* centre verticalement les images et champs */
gap: 24px; /* espace entre preview et champ */
margin-bottom: 20px;
}
/* Colonne gauche : preview */
.row-left {
width: 180px; /* fixe la largeur pour aligner toutes les images */
display: flex;
justify-content: center;
}
/* Image de preview */
.row-left img {
max-width: 100%;
max-height: 80px;
object-fit: contain;
border: 1px solid #e6e6e6;
border-radius: 6px;
background-color: #fafafa;
padding: 4px;
}
/* Colonne droite : input */
.row-right {
flex: 1; /* prend le reste de l'espace */
}
/* Retire la largeur forcée du nz-form-label et nz-form-control */
.row-right nz-form-item nz-form-label,
.row-right nz-form-item nz-form-control {
width: auto !important;
}

35
src/app/components/setting-form/setting-form.html
View File

@@ -1,35 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
<!-- Logo -->
<div class="row">
<div class="row-left">
<img [src]="setting.logo" alt="logo">
</div>
<div class="row-right">
<nz-form-item>
<nz-form-label nzSpan="9">Logo</nz-form-label>
<nz-form-control nzSpan="25">
<input nz-input type="file" formControlName="logo" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<!-- Signature -->
<div class="row">
<div class="row-left">
<img [src]="setting.signature" alt="logo">
</div>
<div class="row-right">
<nz-form-item>
<nz-form-label nzSpan="9">Signature</nz-form-label>
<nz-form-control nzSpan="25">
<input nz-input type="file" formControlName="signature" />
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>

44
src/app/components/setting-form/setting-form.ts
View File

@@ -1,44 +0,0 @@
import { Component } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {SettingInfo} from "../../interfaces/setting.interface";
@Component({
selector: 'app-setting-form',
imports: [
FormsModule,
NzColDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './setting-form.html',
styleUrl: './setting-form.css',
})
export class SettingForm {
settingForm: FormGroup = new FormGroup({
logo: new FormControl<string>(null),
signature: new FormControl<string>(null)
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.settingForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.settingForm.getRawValue())
// Pour vider le formulaire
this.settingForm.reset()
}
setting: SettingInfo = {
logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
}
}

0
src/app/components/stock-form/stock-form.css
View File

12
src/app/components/stock-form/stock-form.html
View File

@@ -1,12 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="stockForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="15" nzRequired>
Quantité minimale du produit
</nz-form-label>
<nz-form-control nzSpan="4" nzErrorTip="Requis">
<input nz-input type="number" placeholder="12345" formControlName="minimalQuantity">
</nz-form-control>
</nz-form-item>
</form>

41
src/app/components/stock-form/stock-form.ts
View File

@@ -1,41 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {GetProductDto} from "../../services/api";
@Component({
selector: 'app-stock-form',
imports: [
NzFormItemComponent,
NzFormLabelComponent,
NzFormControlComponent,
NzInputDirective,
NzColDirective,
NzFormDirective,
ReactiveFormsModule,
NzFlexDirective
],
templateUrl: './stock-form.html',
styleUrl: './stock-form.css',
})
export class StockForm {
stockForm = new FormGroup({
id: new FormControl<number>(null),
minimalQuantity: new FormControl<number>(null, [Validators.required])
})
product= input<GetProductDto>();
constructor() {
effect(() => {
if (this.product()) {
this.stockForm.patchValue({
id: this.product().id,
minimalQuantity: this.product().minimalQuantity,
});
}
});
}
}

85
src/app/components/stock-table/stock-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

64
src/app/components/stock-table/stock-table.html
View File

@@ -1,64 +0,0 @@
<nz-table
[nzData]="filteredProducts()"
[nzFrontPagination]="false"
[nzLoading]="productsLoading()"
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
>
<thead>
<tr class="text-center">
<th nzWidth="40px">
<label
nz-checkbox
[(ngModel)]="checked"
[nzIndeterminate]="indeterminate"
(ngModelChange)="onAllChecked($event)"
></label>
</th>
<th>Nom</th>
<th>Référence</th>
<th>Nec</th>
<th>Calibre</th>
<th>Poids</th>
<th>Durée</th>
<th>Quantité</th>
<th>Limite</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of filteredProducts(); track product.id) {
<tr>
<td nzWidth="40px">
<label
nz-checkbox
[ngModel]="setOfCheckedId.has(product.id)"
(ngModelChange)="onItemChecked(product.id, $event)"
></label>
</td>
<td>{{ product.name }}</td>
<td>{{ product.references }}</td>
<td>{{ product.nec }}</td>
<td>{{ product.caliber }}</td>
<td>{{ product.weight }}</td>
<td>{{ product.duration }}</td>
<td>{{ product.totalQuantity }}</td>
<td>{{ product.minimalQuantity }}</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(product)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedProduct.id, stockForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-stock-form #stockForm [product]="selectedProduct"></app-stock-form>
</app-modal-nav>
</div>

204
src/app/components/stock-table/stock-table.ts
View File

@@ -1,204 +0,0 @@
import {Component, computed, inject, OnInit, output, signal, viewChild} from '@angular/core';
import {NzTableComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
import {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {StockForm} from "../stock-form/stock-form";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {FormsModule} from "@angular/forms";
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
import {GetProductDto, ProductsService, WarehouseproductsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
interface ProductWithQuantity extends GetProductDto {
totalQuantity?: number;
}
@Component({
selector: 'app-stock-table',
imports: [
NzTableComponent,
ModalNav,
NzIconDirective,
StockForm,
NzDividerComponent,
FormsModule,
NzCheckboxComponent,
NzThMeasureDirective,
],
templateUrl: './stock-table.html',
styleUrl: './stock-table.css',
})
export class StockTable implements OnInit {
private productsService = inject(ProductsService);
private wareHousseProductsService = inject(WarehouseproductsService)
private notificationService = inject(NzNotificationService)
products = signal<ProductWithQuantity[]>([]);
productsLoading = signal<boolean>(false);
updateProduct = viewChild.required<StockForm>('stockForm');
modal = viewChild.required<ModalNav>('modalNav');
checked = false;
indeterminate = false;
setOfCheckedId = new Set<number>();
selectionChange = output<boolean>()
currentPageData: GetProductDto[] = [];
private searchQuery = signal<string>('');
filteredProducts = computed(() => {
const q = this.searchQuery().toLowerCase().trim();
if (!q) return this.products();
return this.products().filter(s => {
const name = (s.name ?? '').toLowerCase();
return name.includes(q);
});
});
applySearch(query: string) {
this.searchQuery.set(query);
}
get hasSelection(): boolean {
return this.setOfCheckedId.size > 0;
}
updateCheckedSet(id: number, checked: boolean): void {
if (checked) this.setOfCheckedId.add(id);
else this.setOfCheckedId.delete(id);
}
onItemChecked(id: number, checked: boolean): void {
this.updateCheckedSet(id, checked);
this.refreshCheckedStatus();
}
onAllChecked(checked: boolean): void {
this.currentPageData.forEach(item =>
this.updateCheckedSet(item.id, checked)
);
this.refreshCheckedStatus();
}
onCurrentPageDataChange($event: GetProductDto[]): void {
this.currentPageData = $event;
this.refreshCheckedStatus();
}
refreshCheckedStatus(): void {
const total = this.currentPageData.length;
const checkedCount = this.currentPageData.filter(p => this.setOfCheckedId.has(p.id)).length;
this.checked = checkedCount === total;
this.indeterminate = checkedCount > 0 && checkedCount < total;
setTimeout(() => this.selectionChange.emit(this.hasSelection));
}
get selectedIds() {
return Array.from(this.setOfCheckedId);
}
async ngOnInit() {
await this.fetchProducts();
}
async fetchTotalQuantity(product: ProductWithQuantity) {
try {
const res = await firstValueFrom(
this.wareHousseProductsService.getTotalQuantityEndpoint(product.id)
);
product.totalQuantity = res.totalQuantity;
} catch (e) {
product.totalQuantity = 0;
}
}
async fetchProducts() {
this.productsLoading.set(true);
try {
const products = await firstValueFrom(this.productsService.getAllProductsEndpoint());
// transforme chaque produit en ProductWithQuantity
const productsWithQuantity: ProductWithQuantity[] = products.map(p => ({ ...p }));
this.products.set(productsWithQuantity);
// récupérer la quantité pour chaque produit en parallèle
await Promise.all(productsWithQuantity.map(p => this.fetchTotalQuantity(p)));
// déclencher la mise à jour du signal
this.products.set([...productsWithQuantity]);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
);
}
this.productsLoading.set(false);
}
async delete(productId:number) {
try {
await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
await this.fetchProducts();
}
async edit(id: number, updateProductComponent: StockForm) {
if (updateProductComponent.stockForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const products = updateProductComponent.stockForm.getRawValue();
await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products))
this.notificationService.success(
'Success',
'Limite de stock modifiée'
)
} catch (e) {
console.error(e);
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedProduct: GetProductDto | null = null;
openEditModal(product: GetProductDto) {
this.selectedProduct = { ...product};
this.modal().showModal();
}
async onModalOk(productId: number, updateProductComponent: StockForm, modal: ModalNav) {
if (!this.selectedProduct) return;
await this.edit(productId, updateProductComponent);
updateProductComponent.stockForm.reset();
modal.isVisible = false;
await this.fetchProducts();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
}

0
src/app/components/supplier-form/supplier-form.css
View File

66
src/app/components/supplier-form/supplier-form.html
View File

@@ -1,66 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="supplierForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Fournisseur
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Fournisseur" formControlName="name">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Email
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Email" formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Téléphone
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Téléphone" formControlName="phone">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Adresse
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Adresse" formControlName="address">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Code Postal
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Code Postal" formControlName="zipCode">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Ville
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Ville" formControlName="city">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Délai Moyen
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="Délai Moyen" formControlName="deliveryDelay">
</nz-form-control>
</nz-form-item>
</form>

52
src/app/components/supplier-form/supplier-form.ts
View File

@@ -1,52 +0,0 @@
import {Component, effect, input} from '@angular/core';
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {GetSupplierDto} from "../../services/api";
@Component({
selector: 'app-supplier-form',
imports: [
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
ReactiveFormsModule
],
templateUrl: './supplier-form.html',
styleUrl: './supplier-form.css',
})
export class SupplierForm {
supplierForm: FormGroup = new FormGroup({
name: new FormControl<string>(null, [Validators.required]),
email: new FormControl<string>(null, [Validators.required]),
phone: new FormControl<string>(null, [Validators.required]),
address: new FormControl<string>(null, [Validators.required]),
zipCode: new FormControl<string>(null, [Validators.required]),
city: new FormControl<string>(null, [Validators.required]),
deliveryDelay: new FormControl<string>(null, [Validators.required]),
})
supplier= input<GetSupplierDto>();
constructor() {
effect(() => {
if (this.supplier()) {
this.supplierForm.patchValue({
name: this.supplier().name,
email: this.supplier().email,
phone: this.supplier().phone,
address: this.supplier().address,
zipCode: this.supplier().zipCode,
city: this.supplier().city,
deliveryDelay: this.supplier().deliveryDelay,
});
}
});
}
}

85
src/app/components/supplier-table/supplier-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

88
src/app/components/supplier-table/supplier-table.html
View File

@@ -1,88 +0,0 @@
<nz-table [nzData]="filteredSuppliers()"
[nzLoading]="suppliersLoading()"
[nzFrontPagination]="false">
<thead>
<tr style="text-align: center">
<th>Nom</th>
<th>Téléphone</th>
<th>Email</th>
<th>Adresse</th>
<th>Code Postal</th>
<th>Ville</th>
<th>Délai moyen</th>
<th>Produits</th>
<th style="display: flex; align-items: center;">Action</th>
</tr>
</thead>
<tbody style="text-align: center">
@for (supplier of filteredSuppliers(); track supplier.id) {
<tr>
<td>{{ supplier.name }}</td>
<td>{{ supplier.phone }}</td>
<td>{{ supplier.email }}</td>
<td>{{ supplier.address }}</td>
<td>{{ supplier.zipCode }}</td>
<td>{{ supplier.city }}</td>
<td>{{ supplier.deliveryDelay }} jours</td>
<td>
<app-modal-button type="link" [name]="'Voir les produits'" size="45%">
<nz-table [nzData]="filteredSuppliers()" [nzFrontPagination]="false">
<thead>
<tr class="text-center">
<th>Produit</th>
<th>Référence</th>
<th>Prix</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of supplier.prices; track product.id) {
<tr>
<td>{{ product.productName }}</td>
<td>{{ product.productReferences }}</td>
<td>{{ product.sellingPrice }}€</td>
<td>
<div class="flex items-center justify-center space-x-2">
<nz-icon nzType="edit" nzTheme="outline"
class="cursor-pointer text-gray-600 hover:text-gray-900"
(click)="openEditProductModal(product, supplier.id)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-600 hover:text-red-800"
(click)="deleteProduct(product.productId, product.supplierId)"></nz-icon>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
</app-modal-button>
</td>
<td>
<div style="display: flex; align-items: center;">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
(click)="openEditModal(supplier)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
class="text-red-600 cursor-pointer"></nz-icon>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #supplierModal nameIcon="edit" [name]="'Modifier'"
(ok)="onModalOk(selectedSupplier?.id, supplierForm, supplierModal)"
(cancel)="onModalCancel(supplierModal)">
<app-supplier-form #supplierForm [supplier]="selectedSupplier"></app-supplier-form>
</app-modal-nav>
</div>
<div class="hidden">
<app-modal-nav #productModal nameIcon="edit" [name]="'Modifier les prix des fournisseurs'"
(ok)="onModalProductOk(selectedProduct?.productId, selectedProductSupplierId, priceForm, productModal)"
(cancel)="onModalCancel(productModal)">
<app-price-form #priceForm [price]="selectedProduct"></app-price-form>
</app-modal-nav>
</div>

169
src/app/components/supplier-table/supplier-table.ts
View File

@@ -1,169 +0,0 @@
import {Component, computed, inject, OnInit, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {ModalButton} from "../modal-button/modal-button";
import {SupplierForm} from "../supplier-form/supplier-form";
import {GetPriceDto, GetSupplierDto, PricesService, SuppliersService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {PriceForm} from "../price-form/price-form";
@Component({
selector: 'app-supplier-table',
imports: [
ModalNav,
NzDividerComponent,
NzIconDirective,
NzTableComponent,
ModalButton,
SupplierForm,
PriceForm,
],
templateUrl: './supplier-table.html',
styleUrl: './supplier-table.css',
})
export class SupplierTable implements OnInit {
private suppliersService = inject(SuppliersService);
private pricesService = inject(PricesService);
private notificationService = inject(NzNotificationService);
suppliers = signal<GetSupplierDto[]>([]);
suppliersLoading = signal<boolean>(false);
updateSupplier = viewChild.required<SupplierForm>('supplierForm');
supplierModal = viewChild.required<ModalNav>('supplierModal');
productModal = viewChild.required<ModalNav>('productModal');
selectedSupplier: GetSupplierDto | null = null;
selectedProduct: GetPriceDto | null = null;
selectedProductSupplierId: number | null = null;
async ngOnInit() {
await this.fetchSuppliers();
}
private searchQuery = signal<string>('');
filteredSuppliers = computed(() => {
const q = this.searchQuery().toLowerCase().trim();
if (!q) return this.suppliers();
return this.suppliers().filter(s => {
const name = (s.name ?? '').toLowerCase();
return name.includes(q);
});
});
applySearch(query: string) {
this.searchQuery.set(query);
}
async fetchSuppliers() {
this.suppliersLoading.set(true);
try {
const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
this.suppliers.set(suppliers);
} catch (e) {
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
}
this.suppliersLoading.set(false);
}
async edit(id: number, updateSupplierComponent: SupplierForm) {
if (updateSupplierComponent.supplierForm.invalid) {
this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
return;
}
try {
const suppliers = updateSupplierComponent.supplierForm.getRawValue();
await firstValueFrom(this.suppliersService.updateSupplierEndpoint(id, suppliers));
this.notificationService.success('Success', 'Fournisseur modifié');
} catch (e) {
console.error(e);
this.notificationService.error('Erreur', 'Erreur lors de la modification');
}
}
async delete(supplier: number) {
try {
await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier));
this.notificationService.success('Succès', 'Suppression effectuée');
await this.fetchSuppliers();
} catch (e) {
this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
}
}
openEditModal(supplier: GetSupplierDto) {
this.selectedSupplier = { ...supplier };
this.supplierModal().showModal();
}
openEditProductModal(product: GetPriceDto, supplierId: number) {
this.selectedProduct = { ...product };
this.selectedProductSupplierId = supplierId;
this.productModal().showModal();
}
async onModalOk(supplierId: number | undefined, updateSupplierComponent: SupplierForm, modal: ModalNav) {
if (!supplierId || !this.selectedSupplier) return;
await this.edit(supplierId, updateSupplierComponent);
updateSupplierComponent.supplierForm.reset();
modal.isVisible = false;
await this.fetchSuppliers();
}
async onModalProductOk(
productId: number | undefined,
supplierId: number | null | undefined,
updateProductComponent: PriceForm,
modal: ModalNav
) {
if (productId == null || supplierId == null || !this.selectedProduct) {
this.notificationService.error('Erreur', 'Identifiants produit/fournisseur manquants');
return;
}
await this.editPrice(productId, supplierId, updateProductComponent);
updateProductComponent.priceForm.reset();
modal.isVisible = false;
await this.fetchSuppliers();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
async editPrice(productId: number, supplierId: number, updateProductComponent: PriceForm) {
if (updateProductComponent.priceForm.invalid) {
this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
return;
}
try {
const formValue = updateProductComponent.priceForm.getRawValue();
const body = {
productId,
supplierId,
sellingPrice: Number(formValue.price),
};
await firstValueFrom(this.pricesService.patchPriceEndpoint(productId, supplierId, body));
this.notificationService.success('Success', 'Prix modifié');
} catch (e) {
console.error(e);
this.notificationService.error('Erreur', 'Erreur lors de la modification');
}
}
async deleteProduct(idProduct: number, idSupplier: number) {
try {
await firstValueFrom(this.pricesService.deletePriceEndpoint(idProduct, idSupplier));
this.notificationService.success('Succès', 'Produit supprimé');
await this.fetchSuppliers();
} catch (e) {
this.notificationService.error('Erreur', 'Impossible de supprimer le produit');
}
}
}

85
src/app/components/user-table/user-table.css
View File

@@ -1,85 +0,0 @@
/* Table globale */
nz-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* espace entre les lignes */
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* En-tête */
nz-table thead tr {
background-color: #f5f5f5;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
nz-table thead th {
padding: 12px 16px;
}
/* Lignes du tableau */
nz-table tbody tr {
background-color: #fff;
transition: background 0.2s ease;
}
nz-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
nz-table tbody tr:hover {
background-color: #e6f7ff; /* survol */
}
/* Cellules */
nz-table tbody td {
padding: 12px 16px;
vertical-align: middle;
color: #444;
}
/* Boutons */
nz-table button[nz-button] {
margin-right: 8px;
}
/* Modals dans le tableau */
nz-table app-modal {
margin-right: 8px;
}
/* Dates (pour alignement et style) */
nz-table tbody td p {
margin: 0;
font-size: 14px;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
nz-table thead {
display: none;
}
nz-table tbody tr {
display: block;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 12px;
}
nz-table tbody td {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
nz-table tbody td::before {
content: attr(data-label);
font-weight: 600;
}
}

37
src/app/components/user-table/user-table.html
View File

@@ -1,37 +0,0 @@
<nz-table [nzData]="users()"
[nzLoading]="usersLoading()"
[nzFrontPagination]="false"
class="mr-7">
<thead>
<tr class="text-center">
<th>Prénom</th>
<th>Email</th>
<th>Fonction</th>
<th>Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (user of users(); track user.id) {
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.fonction}}</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<div>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="cursor-pointer text-red-700"/>
</div>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser.id, updateUser, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-profil-form #updateUser [user]="selectedUser"></app-profil-form>
</app-modal-nav>
</div>

111
src/app/components/user-table/user-table.ts
View File

@@ -1,111 +0,0 @@
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {ProfilForm} from "../profil-form/profil-form";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {GetUserDto, UsersService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-user-table',
imports: [
ModalNav,
NzIconDirective,
NzTableComponent,
ProfilForm,
NzDividerComponent
],
templateUrl: './user-table.html',
styleUrl: './user-table.css',
})
export class UserTable implements OnInit {
private usersService = inject(UsersService);
private notificationService = inject(NzNotificationService)
users = signal<GetUserDto[]>([]);
usersLoading = signal<boolean>(false);
updateUser = viewChild.required<ProfilForm>('profilForm');
modal = viewChild.required<ModalNav>('modalNav');
async ngOnInit() {
await this.fetchUsers();
}
async fetchUsers() {
this.usersLoading.set(true)
try {
const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
this.users.set(users);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.usersLoading.set(false)
}
async delete(user:number) {
try {
await firstValueFrom(this.usersService.deleteUserEndpoint(user))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
await this.fetchUsers();
}
async edit(id: number, updateUserComponent: ProfilForm) {
if (updateUserComponent.profilForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const users = updateUserComponent.profilForm.getRawValue();
await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
this.notificationService.success(
'Success',
'Utilisateur modifié'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedUser: GetUserDto | null = null;
openEditModal(user: GetUserDto) {
this.selectedUser = { ...user };
this.modal().showModal();
}
async onModalOk(userId: number, updateUserComponent: ProfilForm, modal: ModalNav) {
if (!this.selectedUser) return;
await this.edit(userId, updateUserComponent);
updateUserComponent.profilForm.reset();
modal.isVisible = false;
await this.fetchUsers();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
filterUser(input: string, option: any) {
return option.nzLabel.toLowerCase().includes(input.toLowerCase());
}
}

5
src/app/interfaces/notif.interface.ts
View File

@@ -1,5 +0,0 @@
export interface NotifInfo {
author: string;
title: string;
content: string;
}

4
src/app/interfaces/setting.interface.ts
View File

@@ -1,4 +0,0 @@
export interface SettingInfo {
logo: string;
signature: string;
}

5
src/app/interfaces/user.interface.ts
View File

@@ -1,5 +0,0 @@
export interface UserInfo {
name: string;
email: string;
fonction: string;
}

20
src/app/pages/deliverer/deliverer.html
View File

@@ -1,19 +1 @@
<div class="flex mt-2"> <p>deliverer works!</p>
<app-modal-button #modalButton
type="primary"
name="Ajouter un transporteur"
(ok)="onModalOk()"
(cancel)="onModalCancel()"
size="35%">
<app-deliverer-form #delivererForm></app-deliverer-form>
</app-modal-button>
<div class="ml-95 w-150">
<app-search class="w-full"></app-search>
</div>
</div>
<div class="mt-1">
<app-deliverer-table #delivererTable></app-deliverer-table>
</div>

55
src/app/pages/deliverer/deliverer.ts
View File

@@ -1,62 +1,11 @@
import {Component, inject, viewChild} from '@angular/core'; import { Component } from '@angular/core';
import {ModalButton} from "../../components/modal-button/modal-button";
import {DelivererTable} from "../../components/deliverer-table/deliverer-table";
import {DelivererForm} from "../../components/deliverer-form/deliverer-form";
import {Search} from "../../components/search/search";
import {DeliverersService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({ @Component({
selector: 'app-deliverer', selector: 'app-deliverer',
imports: [ imports: [],
ModalButton,
DelivererTable,
DelivererForm,
Search
],
templateUrl: './deliverer.html', templateUrl: './deliverer.html',
styleUrl: './deliverer.css', styleUrl: './deliverer.css',
}) })
export class Deliverer { export class Deliverer {
modal = viewChild.required<ModalButton>('modalButton');
createDeliverer = viewChild.required<DelivererForm>('delivererForm');
delivererTable = viewChild.required<DelivererTable>('delivererTable');
private deliverersService = inject(DeliverersService);
private notificationService = inject(NzNotificationService)
async onModalOk() {
await this.addDeliverer()
this.createDeliverer().delivererForm.reset();
this.modal().isVisible = false;
await this.delivererTable().fetchDeliverers()
}
onModalCancel() {
this.modal().isVisible = false;
}
async addDeliverer() {
if (this.createDeliverer().delivererForm.invalid)
{
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
}
try {
const deliverers = this.createDeliverer().delivererForm.getRawValue();
await firstValueFrom(this.deliverersService.createDelivererEndpoint(deliverers))
this.notificationService.success(
'Success',
'Transporteur enregistré'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur d\'enregistrement'
)
}
}
} }

Some files were not shown because too many files have changed in this diff Show More