Merge branch 'develop'
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": {
|
||||
"@tailwindcss/postcss": {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
additionalProperties:
|
||||
fileNaming: kebab-case
|
||||
modelPropertyNaming: camelCase
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
|
||||
"spaces": 2,
|
||||
"generator-cli": {
|
||||
"version": "7.17.0"
|
||||
}
|
||||
}
|
||||
Generated
+1761
-80
File diff suppressed because it is too large
Load Diff
+9
-1
@@ -5,7 +5,8 @@
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development"
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"openapi": "rimraf 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"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 100,
|
||||
@@ -27,8 +28,14 @@
|
||||
"@angular/forms": "^20.3.0",
|
||||
"@angular/platform-browser": "^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",
|
||||
"browser-image-compression": "^2.0.2",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"ng-zorro-antd": "^20.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"rimraf": "^6.1.3",
|
||||
"rxjs": "~7.8.0",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"tslib": "^2.3.0",
|
||||
@@ -38,6 +45,7 @@
|
||||
"@angular/build": "^20.3.9",
|
||||
"@angular/cli": "^20.3.9",
|
||||
"@angular/compiler-cli": "^20.3.0",
|
||||
"baseline-browser-mapping": "^2.10.32",
|
||||
"less": "^4.2.0",
|
||||
"typescript": "~5.9.2"
|
||||
}
|
||||
|
||||
+14
-12
@@ -1,19 +1,21 @@
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import {ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection} from '@angular/core';
|
||||
import {provideRouter} from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { fr_FR, provideNzI18n } from 'ng-zorro-antd/i18n';
|
||||
import { registerLocaleData } from '@angular/common';
|
||||
import {routes} from './app.routes';
|
||||
import {fr_FR, provideNzI18n} from 'ng-zorro-antd/i18n';
|
||||
import {registerLocaleData} from '@angular/common';
|
||||
import fr from '@angular/common/locales/fr';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
|
||||
import {provideHttpClient, withInterceptors} from '@angular/common/http';
|
||||
import {authInterceptor} from "./interceptors/auth-interceptor";
|
||||
|
||||
registerLocaleData(fr);
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient()
|
||||
]
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZoneChangeDetection({eventCoalescing: true}),
|
||||
provideRouter(routes), provideNzI18n(fr_FR), provideAnimationsAsync(), provideHttpClient(),
|
||||
provideHttpClient(withInterceptors([authInterceptor]))
|
||||
]
|
||||
};
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
height: 64px;
|
||||
padding-right: 24px;
|
||||
line-height: 64px;
|
||||
background: #001529;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 15px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nz-content {
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
+1
-70
@@ -1,70 +1 @@
|
||||
<nz-layout class="app-layout">
|
||||
<nz-header>
|
||||
<div class="logo">
|
||||
<a routerLink="/welcome">
|
||||
<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">
|
||||
<h1>PYRO FÊTES</h1>
|
||||
</a>
|
||||
</div>
|
||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/stock">
|
||||
<nz-icon nzType="stock"></nz-icon>
|
||||
<span>Stock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/supplier">
|
||||
<nz-icon nzType="shop"></nz-icon>
|
||||
<span>Fournisseurs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/deliverer">
|
||||
<nz-icon nzType="car"></nz-icon>
|
||||
<span>Livreurs</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/quotation">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Devis</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/purchase-order">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de commande</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/delivery-note">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de livraison</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/user">
|
||||
<nz-icon nzType="user"></nz-icon>
|
||||
<span>Utilisateur</span>
|
||||
</a>
|
||||
</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>
|
||||
</nz-header>
|
||||
<nz-content>
|
||||
<div class="inner-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
<router-outlet></router-outlet>
|
||||
+59
-30
@@ -1,41 +1,70 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import {Routes} from '@angular/router';
|
||||
import {authGuard} from "./guards/auth.guard";
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
redirectTo: '/welcome'
|
||||
redirectTo: '/login'
|
||||
},
|
||||
{
|
||||
path: 'welcome',
|
||||
loadComponent: () => import('./pages/welcome/welcome').then(x => x.Welcome)
|
||||
path: 'login',
|
||||
loadComponent: () => import('./pages/login/login').then(x => x.Login)
|
||||
},
|
||||
{
|
||||
path: 'stock',
|
||||
loadComponent: () => import('./pages/stock/stock').then(x => x.Stock)
|
||||
},
|
||||
{
|
||||
path: 'supplier',
|
||||
loadComponent: () => import('./pages/supplier/supplier').then(x => x.Supplier)
|
||||
},
|
||||
{
|
||||
path: 'deliverer',
|
||||
loadComponent: () => import('./pages/deliverer/deliverer').then(x => x.Deliverer)
|
||||
},
|
||||
{
|
||||
path: 'quotation',
|
||||
loadComponent: () => import('./pages/quotation/quotation').then(x => x.Quotation)
|
||||
},
|
||||
{
|
||||
path: 'purchase-order',
|
||||
loadComponent: () => import('./pages/purchase-order/purchase-order').then(x => x.PurchaseOrder)
|
||||
},
|
||||
{
|
||||
path: 'delivery-note',
|
||||
loadComponent: () => import('./pages/delivery-note/delivery-note').then(x => x.DeliveryNote)
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
loadComponent: () => import('./pages/user/user').then(x => x.User)
|
||||
path: '',
|
||||
loadComponent: () =>
|
||||
import('./components/layout/layout').then(m => m.Layout),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
redirectTo: '/dashboard'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
loadComponent: () => import('./pages/dashboard/dashboard').then(m => m.Dashboard),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'stock',
|
||||
loadComponent: () => import('./pages/stock/stock').then(m => m.Stock),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'supplier',
|
||||
loadComponent: () => import('./pages/supplier/supplier').then(m => m.Supplier),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'deliverer',
|
||||
loadComponent: () => import('./pages/deliverer/deliverer').then(m => m.Deliverer),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'quotation',
|
||||
loadComponent: () => import('./pages/quotation/quotation').then(m => m.Quotation),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'purchase-order',
|
||||
loadComponent: () => import('./pages/purchase-order/purchase-order').then(m => m.PurchaseOrder),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'delivery-note',
|
||||
loadComponent: () => import('./pages/delivery-note/delivery-note').then(m => m.DeliveryNote),
|
||||
canActivate: [authGuard]
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
loadComponent: () => import('./pages/user/user').then(m => m.User),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'dashboard'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
+10
-11
@@ -1,14 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
|
||||
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
||||
import { NzMenuModule } from 'ng-zorro-antd/menu';
|
||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
import {Component} from '@angular/core';
|
||||
import {RouterOutlet} from '@angular/router';
|
||||
import {NzLayoutModule} from 'ng-zorro-antd/layout';
|
||||
import {NzMenuModule} from 'ng-zorro-antd/menu';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet, NzLayoutModule, NzMenuModule],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
})
|
||||
export class App {}
|
||||
export class App {
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<form [formGroup]="addProductForm">
|
||||
<nz-form-item nz-flex>
|
||||
<nz-form-label nzSpan="12" nzRequired>
|
||||
Fournisseur
|
||||
</nz-form-label>
|
||||
|
||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
||||
<nz-select formControlName="supplierId" nzPlaceHolder="Choisir un fournisseur" nzShowSearch>
|
||||
@for (supplier of suppliers(); track supplier.id) {
|
||||
<nz-option [nzLabel]="supplier.name" [nzValue]="supplier.id"></nz-option>
|
||||
}
|
||||
</nz-select>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
|
||||
<div class="overflow-x-auto mt-6">
|
||||
<nz-table [nzBordered]="true" class="mx-auto text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Produit</th>
|
||||
<th class="text-center">Prix</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody formArrayName="lines">
|
||||
@for (line of lines.controls; 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="price"
|
||||
[nzMin]="0"
|
||||
[nzStep]="1">
|
||||
</nz-input-number>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,54 @@
|
||||
import {Component, input} from '@angular/core';
|
||||
import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {GetProductDto, GetSupplierDto} from "../../services/api";
|
||||
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
|
||||
import {NzFormControlComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
||||
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
|
||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-product-supplier-form',
|
||||
imports: [
|
||||
NzRowDirective,
|
||||
NzFormControlComponent,
|
||||
NzFormLabelComponent,
|
||||
ReactiveFormsModule,
|
||||
NzFlexDirective,
|
||||
NzColDirective,
|
||||
NzTableComponent,
|
||||
NzInputNumberComponent,
|
||||
NzOptionComponent,
|
||||
NzSelectComponent
|
||||
],
|
||||
templateUrl: './add-product-supplier-form.html',
|
||||
styleUrl: './add-product-supplier-form.css',
|
||||
})
|
||||
export class AddProductSupplierForm {
|
||||
addProductForm: FormGroup = new FormGroup({
|
||||
supplierId: new FormControl<number>(null, Validators.required),
|
||||
lines: new FormArray([], Validators.required),
|
||||
});
|
||||
|
||||
suppliers = input.required<GetSupplierDto[]>();
|
||||
products = input.required<GetProductDto[]>();
|
||||
|
||||
get lines(): FormArray {
|
||||
return this.addProductForm.get('lines') as FormArray;
|
||||
}
|
||||
|
||||
addProductToForm() {
|
||||
this.lines.clear();
|
||||
|
||||
this.products().forEach(x => {
|
||||
this.lines.push(
|
||||
new FormGroup({
|
||||
productId: new FormControl(x.id),
|
||||
name: new FormControl(x.name),
|
||||
price: new FormControl(0, [Validators.required, Validators.min(0)])
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<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>
|
||||
|
||||
<nz-form-item nz-flex>
|
||||
<nz-form-label nzSpan="12" nzRequired>
|
||||
Fournisseur
|
||||
</nz-form-label>
|
||||
|
||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
||||
<nz-select formControlName="supplierId"
|
||||
(ngModelChange)="refresh()"
|
||||
[nzPlaceHolder]="getBestSupplier().name ?? 'Choisir un fournisseur'"
|
||||
nzShowSearch>
|
||||
@for (supplier of suppliers(); track supplier.id) {
|
||||
<nz-option [nzLabel]="supplier.name" [nzValue]="supplier.id"></nz-option>
|
||||
}
|
||||
</nz-select>
|
||||
</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; 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>
|
||||
@@ -0,0 +1,93 @@
|
||||
import {Component, input, OnInit, signal} from '@angular/core';
|
||||
import {FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormControl} from '@angular/forms';
|
||||
import {GetProductDto, GetSupplierDto} 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";
|
||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
||||
import {min} from "rxjs";
|
||||
|
||||
@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,
|
||||
NzOptionComponent,
|
||||
NzSelectComponent,
|
||||
]
|
||||
})
|
||||
export class CreatePurchaseorderForm {
|
||||
suppliers = input.required<GetSupplierDto[]>();
|
||||
products = input.required<GetProductDto[]>();
|
||||
|
||||
getBestSupplier() {
|
||||
let bestSupplier: GetSupplierDto = this.suppliers()[0];
|
||||
let maxProducts = 0;
|
||||
|
||||
const selectedProducts = this.products().map(x => x.id);
|
||||
|
||||
this.suppliers().forEach(x => {
|
||||
const supplierProductsCount = x.prices.filter(p => selectedProducts.includes(p.productId)).length ?? 0;
|
||||
|
||||
if (supplierProductsCount > maxProducts) {
|
||||
maxProducts = supplierProductsCount;
|
||||
bestSupplier = x;
|
||||
}
|
||||
})
|
||||
return bestSupplier;
|
||||
}
|
||||
|
||||
getProductsOfSupplier() {
|
||||
const supplier = this.suppliers().find(x => x.id === this.createPurchaseOrderForm.value.supplierId);
|
||||
if (!supplier) return [];
|
||||
|
||||
const supplierProductIds = supplier.prices.map(x => x.productId);
|
||||
|
||||
return this.products().filter(product => supplierProductIds.includes(product.id));
|
||||
}
|
||||
|
||||
createPurchaseOrderForm: FormGroup = new FormGroup({
|
||||
purchaseConditions: new FormControl<string | null>(null, Validators.required),
|
||||
lines: new FormArray([], Validators.required),
|
||||
supplierId: new FormControl<number>(null, Validators.required),
|
||||
})
|
||||
|
||||
get lines(): FormArray {
|
||||
return this.createPurchaseOrderForm.get('lines') as FormArray;
|
||||
}
|
||||
|
||||
addProductToForm() {
|
||||
const supplierId = this.createPurchaseOrderForm.value.supplierId ?? this.getBestSupplier().id;
|
||||
this.createPurchaseOrderForm.patchValue({
|
||||
supplierId
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.lines.clear();
|
||||
|
||||
this.getProductsOfSupplier().forEach(x => {
|
||||
this.lines.push(
|
||||
new FormGroup({
|
||||
productId: new FormControl(x.id),
|
||||
name: new FormControl(x.name),
|
||||
quantity: new FormControl(1, [Validators.required, Validators.min(1)])
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<form [formGroup]="createQuotationForm">
|
||||
<nz-form-item nz-flex>
|
||||
<nz-form-label nzSpan="12" nzRequired>
|
||||
Client
|
||||
</nz-form-label>
|
||||
|
||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
||||
<nz-select formControlName="customerId" nzPlaceHolder="Choisir un client"
|
||||
nzShowSearch>
|
||||
@for (customer of customers(); track customer.id) {
|
||||
<nz-option [nzLabel]="customer.note" [nzValue]="customer.id"></nz-option>
|
||||
}
|
||||
</nz-select>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
|
||||
|
||||
<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="conditionsSale">
|
||||
</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; 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>
|
||||
@@ -0,0 +1,105 @@
|
||||
import {Component, inject, input, OnInit, signal} 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 {CustomersService, GetCustomerDto, GetProductDto, GetSupplierDto} from "../../services/api";
|
||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-quotation-form',
|
||||
imports: [
|
||||
FormsModule,
|
||||
NzColDirective,
|
||||
NzFlexDirective,
|
||||
NzFormControlComponent,
|
||||
NzFormItemComponent,
|
||||
NzFormLabelComponent,
|
||||
NzInputDirective,
|
||||
NzInputNumberComponent,
|
||||
NzTableComponent,
|
||||
ReactiveFormsModule,
|
||||
NzOptionComponent,
|
||||
NzSelectComponent
|
||||
],
|
||||
templateUrl: './create-quotation-form.html',
|
||||
styleUrl: './create-quotation-form.css',
|
||||
})
|
||||
export class CreateQuotationForm implements OnInit {
|
||||
private customersService = inject(CustomersService);
|
||||
private notificationService = inject(NzNotificationService);
|
||||
|
||||
suppliers = input.required<GetSupplierDto[]>();
|
||||
products = input.required<GetProductDto[]>();
|
||||
|
||||
customers = signal<GetCustomerDto[]>([]);
|
||||
|
||||
async ngOnInit() {
|
||||
try {
|
||||
const customers = await firstValueFrom(this.customersService.getAllCustomersEndpoint())
|
||||
this.customers.set(customers);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API')
|
||||
}
|
||||
}
|
||||
|
||||
createQuotationForm: FormGroup = new FormGroup({
|
||||
message: new FormControl<string>(null, Validators.required),
|
||||
conditionsSale: new FormControl<string>(null, Validators.required),
|
||||
supplierId: new FormControl<number>(null, Validators.required),
|
||||
customerId: new FormControl<number>(null, Validators.required),
|
||||
lines: new FormArray([], Validators.required),
|
||||
})
|
||||
|
||||
get lines(): FormArray {
|
||||
return this.createQuotationForm.get('lines') as FormArray;
|
||||
}
|
||||
|
||||
getDefaultSupplier() {
|
||||
let defaultSupplier: GetSupplierDto = this.suppliers()[0];
|
||||
let maxProducts = 0;
|
||||
|
||||
const selectedProducts = this.products().map(x => x.id);
|
||||
|
||||
this.suppliers().forEach(x => {
|
||||
const supplierProductsCount = x.prices.filter(p => selectedProducts.includes(p.productId)).length ?? 0;
|
||||
|
||||
if (supplierProductsCount > maxProducts) {
|
||||
maxProducts = supplierProductsCount;
|
||||
defaultSupplier = x;
|
||||
}
|
||||
})
|
||||
|
||||
return defaultSupplier;
|
||||
}
|
||||
|
||||
addProductToForm() {
|
||||
this.lines.clear();
|
||||
this.products().forEach(x => {
|
||||
this.lines.push(
|
||||
new FormGroup({
|
||||
productId: new FormControl(x.id),
|
||||
name: new FormControl(x.name),
|
||||
quantity: new FormControl(1, [Validators.required, Validators.min(1)])
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
this.createQuotationForm.patchValue({
|
||||
supplierId: this.getDefaultSupplier().id,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<form [formGroup]="choiceDelivererForm">
|
||||
<nz-form-item nz-flex>
|
||||
<nz-form-label nzSpan="12" nzRequired>
|
||||
Transporteur
|
||||
</nz-form-label>
|
||||
|
||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
||||
<nz-select formControlName="delivererId" nzPlaceHolder="Choisir un transporteur" nzShowSearch>
|
||||
@for (deliverer of deliverers(); track deliverer.id) {
|
||||
<nz-option [nzLabel]="deliverer.transporter" [nzValue]="deliverer.id"></nz-option>
|
||||
}
|
||||
</nz-select>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
@@ -0,0 +1,45 @@
|
||||
import {Component, inject, OnInit, signal} from '@angular/core';
|
||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
|
||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
||||
import {NzFormControlComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
||||
import {DeliverersService, GetDelivererDto} from "../../services/api";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
|
||||
@Component({
|
||||
selector: 'app-deliverer-choice',
|
||||
imports: [
|
||||
FormsModule,
|
||||
NzColDirective,
|
||||
NzFlexDirective,
|
||||
NzFormControlComponent,
|
||||
NzFormLabelComponent,
|
||||
NzOptionComponent,
|
||||
NzRowDirective,
|
||||
NzSelectComponent,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
templateUrl: './deliverer-choice.html',
|
||||
styleUrl: './deliverer-choice.css',
|
||||
})
|
||||
export class DelivererChoice implements OnInit {
|
||||
private deliverersService = inject(DeliverersService);
|
||||
private notificationService = inject(NzNotificationService);
|
||||
|
||||
choiceDelivererForm: FormGroup = new FormGroup({
|
||||
delivererId: new FormControl<number>(null, Validators.required),
|
||||
});
|
||||
|
||||
deliverers = signal<GetDelivererDto[]>([]);
|
||||
|
||||
async ngOnInit() {
|
||||
try {
|
||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
|
||||
this.deliverers.set(deliverers);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de l\'affichage des livreurs');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<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>
|
||||
@@ -0,0 +1,40 @@
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<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>
|
||||
@if (admin()){
|
||||
<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>
|
||||
@@ -0,0 +1,105 @@
|
||||
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 {AuthService} from "../../services/auth.service";
|
||||
|
||||
@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)
|
||||
private authService = inject(AuthService);
|
||||
|
||||
deliverers = signal<GetDelivererDto[]>([]);
|
||||
deliverersLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
modal = viewChild.required<ModalNav>('modalNav');
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchDeliverers();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchDeliverers() {
|
||||
this.deliverersLoading.set(true)
|
||||
|
||||
try {
|
||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint())
|
||||
this.deliverers.set(deliverers);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des transporteurs');
|
||||
}
|
||||
this.deliverersLoading.set(false)
|
||||
}
|
||||
|
||||
async delete(deliverer: number) {
|
||||
try {
|
||||
await firstValueFrom(this.deliverersService.deleteDelivererEndpoint(deliverer))
|
||||
this.notificationService.success('Success', 'Suppression effectuée');
|
||||
} catch {
|
||||
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', 'Formulaire invalide');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const deliverers = updateDelivererComponent.delivererForm.getRawValue();
|
||||
await firstValueFrom(this.deliverersService.updateDelivererEndpoint(id, deliverers))
|
||||
|
||||
this.notificationService.success('Success', 'Transporteur modifié')
|
||||
} catch {
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchDeliverers();
|
||||
}
|
||||
|
||||
onModalCancel(modal: ModalNav) {
|
||||
modal.isVisible = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<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>
|
||||
@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>
|
||||
@@ -0,0 +1,72 @@
|
||||
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, [Validators.required]),
|
||||
realDeliveryDate: new FormControl(null)
|
||||
})
|
||||
|
||||
private deliverersService = inject(DeliverersService);
|
||||
private notificationService = inject(NzNotificationService);
|
||||
|
||||
deliverers = signal<GetDelivererDto[]>([]);
|
||||
|
||||
deliveryNote = input<GetDeliveryNoteDto>();
|
||||
|
||||
async fetchDeliverers() {
|
||||
try {
|
||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
|
||||
this.deliverers.set(deliverers);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible de récupérer les transporteurs');
|
||||
}
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchDeliverers();
|
||||
}
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
if (this.deliveryNote()) {
|
||||
this.deliveryNoteForm.patchValue({
|
||||
trackingNumber: this.deliveryNote().trackingNumber,
|
||||
expeditionDate: this.deliveryNote().expeditionDate,
|
||||
realDeliveryDate: this.deliveryNote().realDeliveryDate,
|
||||
estimatedDate: this.deliveryNote().estimateDeliveryDate,
|
||||
delivererId: this.deliveryNote().delivererId
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<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>Statut</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>
|
||||
@if (deliveryNote.estimateDeliveryDate >= date && deliveryNote.realDeliveryDate == null) {
|
||||
<p class="text-blue-900 font-semibold">En cours</p>
|
||||
} @else if (deliveryNote.realDeliveryDate == null) {
|
||||
<p class="text-red-600 font-semibold">En retard</p>
|
||||
} @else {
|
||||
<p class="text-green-800 font-semibold">Terminée</p>
|
||||
}
|
||||
</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>
|
||||
@if (admin()){
|
||||
<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>
|
||||
@@ -0,0 +1,147 @@
|
||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
||||
import {DatePipe} from "@angular/common";
|
||||
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, UpdateDeliveryNoteDto} 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";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-deliverery-note-table',
|
||||
imports: [
|
||||
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);
|
||||
private authService = inject(AuthService);
|
||||
|
||||
deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
|
||||
deliveryNotesLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
modal = viewChild.required<ModalNav>('modalNav');
|
||||
|
||||
date = new Date().toISOString().split('T')[0]; // yyyy-mm-dd
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchDeliveryNotes();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchDeliveryNotes() {
|
||||
this.deliveryNotesLoading.set(true)
|
||||
try {
|
||||
const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint());
|
||||
this.deliveryNotes.set(deliveryNotes);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des bons de livraison');
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
this.notificationService.error('Erreur', 'La date à déjà été actualisée');
|
||||
}
|
||||
} catch {
|
||||
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 {
|
||||
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();
|
||||
|
||||
const toIso = (val: any) =>
|
||||
val ? new Date(val).toISOString().substring(0, 10) : null;
|
||||
|
||||
const deliveryNoteDto: UpdateDeliveryNoteDto = {
|
||||
trackingNumber: raw.trackingNumber,
|
||||
delivererId: raw.delivererId,
|
||||
expeditionDate: toIso(raw.expeditionDate),
|
||||
estimateDeliveryDate: toIso(raw.estimatedDate),
|
||||
realDeliveryDate: toIso(raw.realDeliveryDate)
|
||||
};
|
||||
|
||||
await firstValueFrom(this.deliveryNotesService.updateDeliveryNoteEndpoint(id, deliveryNoteDto));
|
||||
this.notificationService.success('Success', 'Bon de livraison modifié');
|
||||
} catch {
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchDeliveryNotes();
|
||||
}
|
||||
|
||||
onModalCancel(modal: ModalNav) {
|
||||
modal.isVisible = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/* 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: 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;
|
||||
}
|
||||
|
||||
.livraisons-list {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.livraisons-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.livraisons-list::-webkit-scrollbar-thumb {
|
||||
background: #9ca3af;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.livraisons-list::-webkit-scrollbar-track {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.livraison-info h3 {
|
||||
font-size: 17px;
|
||||
margin: 0 0 4px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.livraison-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
<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 filteredDeliveries(); track deliveryItem.id) {
|
||||
<div class="livraison-card">
|
||||
<div class="livraison-info">
|
||||
<h3>{{ deliveryItem.delivererTransporter }}</h3>
|
||||
<p class="mr-5">Date d'expédition: {{ deliveryItem.expeditionDate }}</p>
|
||||
<p>Quantité livrée : {{ deliveryItem.products.length }}</p>
|
||||
</div>
|
||||
|
||||
<app-modal-nav #modal name="Valider la livraison" nameIcon="check"
|
||||
(click)="check(deliveryItem.id)"
|
||||
(ok)="validate(deliveryItem.id, selectedWarehouseId!, modal)"
|
||||
(cancel)="reject(modal)">
|
||||
|
||||
<div class="mb-4 flex justify-center">
|
||||
<nz-select
|
||||
[(ngModel)]="selectedWarehouseId"
|
||||
nzPlaceHolder="Sélectionner un entrepôt"
|
||||
required
|
||||
class="w-64">
|
||||
|
||||
@for (wareHouse of wareHouses(); track wareHouse.id) {
|
||||
<nz-option [nzValue]="wareHouse.id" [nzLabel]="wareHouse.name"/>
|
||||
}
|
||||
</nz-select>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="max-height: 400px; overflow-y: auto;">
|
||||
<nz-table [nzData]="filteredDeliveries()"
|
||||
[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 deliveryItem.products; track product.productId) {
|
||||
<tr>
|
||||
<td>{{ product.productReference }}</td>
|
||||
<td>{{ product.productName }}</td>
|
||||
<td>{{ product.quantity }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</div>
|
||||
</app-modal-nav>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,105 @@
|
||||
import {Component, computed, inject, OnInit, signal} from '@angular/core';
|
||||
import {
|
||||
DeliverynotesService,
|
||||
GetDeliveryNoteDto, GetWareHouseDto,
|
||||
WarehouseproductsService,
|
||||
WarehousesService
|
||||
} from "../../services/api";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
||||
import {format} from "date-fns";
|
||||
import {ModalNav} from "../modal-nav/modal-nav";
|
||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: 'app-delivery-validator',
|
||||
imports: [
|
||||
NzTableComponent,
|
||||
ModalNav,
|
||||
NzSelectComponent,
|
||||
NzOptionComponent,
|
||||
FormsModule
|
||||
],
|
||||
templateUrl: './delivery-validator.html',
|
||||
styleUrl: './delivery-validator.css',
|
||||
})
|
||||
export class DeliveryValidator implements OnInit {
|
||||
private deliveryNotesService = inject(DeliverynotesService);
|
||||
private notificationService = inject(NzNotificationService);
|
||||
private warehousesService = inject(WarehousesService);
|
||||
private warehouseProductsService = inject(WarehouseproductsService);
|
||||
|
||||
search = signal<string>('');
|
||||
deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
|
||||
wareHouses = signal<GetWareHouseDto[]>([]);
|
||||
|
||||
selectedWarehouseId: number | null = null;
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchDeliveryNotes();
|
||||
try {
|
||||
const wareHouses = await firstValueFrom(this.warehousesService.getAllWarehouseEndpoint());
|
||||
this.wareHouses.set(wareHouses);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des quantitées')
|
||||
}
|
||||
}
|
||||
|
||||
async fetchDeliveryNotes() {
|
||||
try {
|
||||
const deliveries = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNotesNotArrivedEndpoint());
|
||||
this.deliveryNotes.set(deliveries);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des bon de livraison')
|
||||
}
|
||||
}
|
||||
|
||||
filteredDeliveries = computed(() => {
|
||||
const query = this.search().toLowerCase();
|
||||
return this.deliveryNotes().filter(l =>
|
||||
l.delivererTransporter.toLowerCase().includes(query) ||
|
||||
l.expeditionDate.includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
async check(id: number) {
|
||||
try {
|
||||
const PatchRealDate = {
|
||||
realDeliveryDate: format(new Date(), 'yyyy-MM-dd')
|
||||
};
|
||||
await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(id, PatchRealDate));
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible d\'actualiser la date')
|
||||
}
|
||||
}
|
||||
|
||||
async validate(id: number, warehouseId: number, modal: ModalNav) {
|
||||
try {
|
||||
const deliveryNote = this.deliveryNotes().find(x => x.id === id);
|
||||
|
||||
for (const product of deliveryNote.products) {
|
||||
await firstValueFrom(this.warehouseProductsService.patchWareHouseProductQuantityEndpoint(
|
||||
product.productId,
|
||||
warehouseId,
|
||||
{
|
||||
quantity: product.quantity
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
this.notificationService.success('Succès', 'Les produits sont bien ajoutés au stock')
|
||||
|
||||
modal.isVisible = false;
|
||||
await this.fetchDeliveryNotes();
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Vous devez choisir un entrepôt')
|
||||
}
|
||||
}
|
||||
|
||||
async reject(modal: ModalNav) {
|
||||
modal.isVisible = false;
|
||||
await this.fetchDeliveryNotes();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<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>
|
||||
@@ -0,0 +1,19 @@
|
||||
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<number>()
|
||||
description = input.required<string>()
|
||||
color = input.required<string>()
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
nz-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #001529;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- LOGO + TITRE --- */
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
margin: 0 0 0 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
.disconnect {
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.disconnect:hover {
|
||||
color: #40a9ff;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.right-icons app-modal-nav:hover {
|
||||
color: #40a9ff;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* --- CONTENU --- */
|
||||
nz-content {
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
<nz-layout class="app-layout">
|
||||
<nz-header>
|
||||
<div class="header-container">
|
||||
<!-- LOGO -->
|
||||
<div class="logo">
|
||||
<a routerLink="/dashboard">
|
||||
<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"
|
||||
/>
|
||||
<h1 class="text-amber-300">PYRO FÊTES</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- MENU PRINCIPAL -->
|
||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/stock">
|
||||
<nz-icon nzType="stock"></nz-icon>
|
||||
<span>Stock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/supplier">
|
||||
<nz-icon nzType="shop"></nz-icon>
|
||||
<span>Fournisseurs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/deliverer">
|
||||
<nz-icon nzType="car"></nz-icon>
|
||||
<span>Livreurs</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/quotation">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Devis</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/purchase-order">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de commande</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/delivery-note">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de livraison</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@if (admin()) {
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/user">
|
||||
<nz-icon nzType="user"></nz-icon>
|
||||
<span>Utilisateur</span>
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<!-- ICONES À DROITE -->
|
||||
<div class="right-icons">
|
||||
<nz-icon nzType="logout" nzTheme="outline" class="disconnect" (click)="disconnect()"/>
|
||||
<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-content>
|
||||
<div class="inner-content overflow-auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
@@ -0,0 +1,45 @@
|
||||
import {Component, inject, OnInit, signal} from '@angular/core';
|
||||
import {ModalNav} from "../modal-nav/modal-nav";
|
||||
import {NzContentComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
|
||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
|
||||
import {Profil} from "../profil/profil";
|
||||
import {Router, RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
|
||||
import {SettingForm} from "../setting-form/setting-form";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
imports: [
|
||||
ModalNav,
|
||||
NzContentComponent,
|
||||
NzHeaderComponent,
|
||||
NzIconDirective,
|
||||
NzLayoutComponent,
|
||||
NzMenuDirective,
|
||||
NzMenuItemComponent,
|
||||
NzSubMenuComponent,
|
||||
Profil,
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
RouterOutlet,
|
||||
SettingForm
|
||||
],
|
||||
templateUrl: './layout.html',
|
||||
styleUrl: './layout.css',
|
||||
})
|
||||
export class Layout implements OnInit {
|
||||
private authService = inject(AuthService);
|
||||
private router = inject(Router);
|
||||
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
ngOnInit() {
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async disconnect() {
|
||||
this.authService.logout();
|
||||
await this.router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import {Component, 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,0 +1,18 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import {Component, 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,0 +1,13 @@
|
||||
<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>
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
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} 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,0 +1,43 @@
|
||||
<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="Employé" nzValue="Employe"></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>
|
||||
@@ -0,0 +1,50 @@
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl fontProfil">
|
||||
{{ getInitial(user().name) }}
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-3xl festive2 mx-auto flex items-center justify-center">{{ user().name }}</p>
|
||||
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{ user().email }}</p>
|
||||
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{ user().fonction }}</p>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
import {Component, inject, OnInit, signal} from '@angular/core';
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {GetUserDto, UserService} from "../../services/api";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'app-profil',
|
||||
imports: [],
|
||||
templateUrl: './profil.html',
|
||||
styleUrl: './profil.css',
|
||||
})
|
||||
export class Profil implements OnInit {
|
||||
private notificationService = inject(NzNotificationService);
|
||||
private userService = inject(UserService);
|
||||
|
||||
user = signal<GetUserDto>({});
|
||||
|
||||
async ngOnInit() {
|
||||
try {
|
||||
const user = await firstValueFrom(this.userService.getUserEndpoint());
|
||||
this.user.set(user);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible de charger l\'utilisateur');
|
||||
}
|
||||
}
|
||||
|
||||
getInitial(name: string): string {
|
||||
if (!name || name.trim() === '') return '?';
|
||||
return name[0].toUpperCase();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<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>
|
||||
@@ -0,0 +1,41 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
<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>{{ purchaseOrder.supplierName }}</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.productReference }}</td>
|
||||
<td>{{ product.productPrice }} €</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="edit" nzTheme="outline" class="cursor-pointer"
|
||||
(click)="openEditModal(purchaseOrder)"></nz-icon>
|
||||
<nz-divider nzType="vertical"></nz-divider>
|
||||
@if (admin()) {
|
||||
<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)="openDelivererModal(purchaseOrder)"
|
||||
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>
|
||||
|
||||
<div class="hidden">
|
||||
<app-modal-nav #modalDeliverer nameIcon="edit" name="Choix du transporteur"
|
||||
(ok)="transfer(selectedPurchaseOrder, delivererChoice)"
|
||||
(cancel)="onModalCancel(modalDeliverer)">
|
||||
<app-deliverer-choice #delivererChoice></app-deliverer-choice>
|
||||
</app-modal-nav>
|
||||
</div>
|
||||
@@ -0,0 +1,215 @@
|
||||
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 {
|
||||
CreateDeliveryNoteDto,
|
||||
DeliverynotesService,
|
||||
GetPurchaseOrderDto,
|
||||
GetPurchaseProductDto,
|
||||
PurchaseordersService,
|
||||
} 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";
|
||||
import {DelivererChoice} from "../deliverer-choice/deliverer-choice";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-purchase-order-table',
|
||||
imports: [
|
||||
ModalNav,
|
||||
NzDividerComponent,
|
||||
NzIconDirective,
|
||||
NzTableComponent,
|
||||
PurchaseOrderForm,
|
||||
ModalButton,
|
||||
QuantityForm,
|
||||
DelivererChoice,
|
||||
],
|
||||
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 deliveryNoteService = inject(DeliverynotesService);
|
||||
private authService = inject(AuthService);
|
||||
|
||||
purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
|
||||
purchaseOrdersLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
modal = viewChild.required<ModalNav>('modalNav');
|
||||
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
|
||||
modalDeliverer = viewChild.required<ModalNav>('modalDeliverer');
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchPurchaseOrder();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchPurchaseOrder() {
|
||||
this.purchaseOrdersLoading.set(true)
|
||||
|
||||
try {
|
||||
const purchaseOrders = await firstValueFrom(this.purchaseOrdersService.getAllPurchaseOrderEndpoint())
|
||||
this.purchaseOrders.set(purchaseOrders);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des bons de commande')
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
this.notificationService.error('Erreur', 'Impossible de générer un PDF');
|
||||
}
|
||||
this.purchaseOrdersLoading.set(false)
|
||||
}
|
||||
|
||||
async transfer(purchaseOrder: GetPurchaseOrderDto, delivererForm: DelivererChoice) {
|
||||
this.purchaseOrdersLoading.set(true);
|
||||
try {
|
||||
const deliverer = delivererForm.choiceDelivererForm.getRawValue();
|
||||
|
||||
const date = new Date().toISOString().split('T')[0]; // yyyy-mm-dd
|
||||
|
||||
let trackingValue = 'TRK-';
|
||||
const idStr = purchaseOrder.id?.toString() ?? '';
|
||||
if (idStr.length < 2) trackingValue += '00' + idStr + '-' + date;
|
||||
else if (idStr.length < 3) trackingValue += '0' + idStr + '-' + date;
|
||||
else trackingValue += idStr.substring(0, 3) + date.replace(/-/g, '');
|
||||
|
||||
const productQuantities: Record<number, number> = {};
|
||||
purchaseOrder.products?.forEach(p => {
|
||||
if (p.productId != null && p.quantity != null) {
|
||||
productQuantities[p.productId] = p.quantity;
|
||||
}
|
||||
});
|
||||
|
||||
const deliveryNoteDto: CreateDeliveryNoteDto = {
|
||||
trackingNumber: trackingValue,
|
||||
delivererId: deliverer.delivererId,
|
||||
productQuantities: productQuantities,
|
||||
supplierId: purchaseOrder.supplierId
|
||||
};
|
||||
|
||||
await firstValueFrom(this.deliveryNoteService.createDeliveryNoteEndpoint(deliveryNoteDto));
|
||||
this.notificationService.success('Succès', 'Bon de livraison créé avec succès');
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du transfert');
|
||||
}
|
||||
this.onModalCancel(this.modalDeliverer());
|
||||
this.purchaseOrdersLoading.set(false);
|
||||
}
|
||||
|
||||
|
||||
async edit(id: number, updatePurchaseOrderComponent: PurchaseOrderForm) {
|
||||
if (updatePurchaseOrderComponent.purchaseOrderForm.invalid) {
|
||||
this.notificationService.error('Erreur', 'Formulaire invalide')
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const purchaseOrders = updatePurchaseOrderComponent.purchaseOrderForm.getRawValue();
|
||||
await firstValueFrom(this.purchaseOrdersService.patchPurchaseOrderPurchaseConditionsEndpoint(id, purchaseOrders))
|
||||
|
||||
this.notificationService.success('Success', 'Bon de commande modifié')
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
||||
}
|
||||
}
|
||||
|
||||
async deleteProduct(productId: number, purchaseOrderId: number) {
|
||||
this.purchaseOrdersLoading.set(true)
|
||||
try {
|
||||
await firstValueFrom(this.purchaseOrdersService.deleteProductFromPurchaseOrderEndpoint(productId, purchaseOrderId))
|
||||
this.notificationService.success('Success', 'Suppression effectuée')
|
||||
} catch {
|
||||
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.purchaseOrdersService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
|
||||
|
||||
this.notificationService.success('Success', 'Quantité modifiée');
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
||||
}
|
||||
}
|
||||
|
||||
selectedPurchaseOrder: GetPurchaseOrderDto | null = null;
|
||||
|
||||
openEditModal(purchaseOrder: GetPurchaseOrderDto) {
|
||||
this.selectedPurchaseOrder = {...purchaseOrder};
|
||||
this.modal().showModal();
|
||||
}
|
||||
|
||||
openDelivererModal(purchaseOrder: GetPurchaseOrderDto) {
|
||||
this.selectedPurchaseOrder = {...purchaseOrder};
|
||||
this.modalDeliverer().showModal();
|
||||
}
|
||||
|
||||
async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
|
||||
if (!this.selectedPurchaseOrder) return;
|
||||
|
||||
await this.edit(id, updatePurchaseOrderComponent);
|
||||
updatePurchaseOrderComponent.purchaseOrderForm.reset();
|
||||
this.onModalCancel(modal);
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchPurchaseOrder();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<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>
|
||||
@@ -0,0 +1,41 @@
|
||||
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 {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,0 +1,22 @@
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
<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.productReference }}</td>
|
||||
<td>{{ product.productName }}</td>
|
||||
<td>{{ product.productPrice }} €</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="edit" nzTheme="outline" class="cursor-pointer"
|
||||
(click)="openEditModal(quotation)"></nz-icon>
|
||||
<nz-divider nzType="vertical"></nz-divider>
|
||||
@if (admin()) {
|
||||
<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>
|
||||
@@ -0,0 +1,168 @@
|
||||
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,
|
||||
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";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@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 fileService = inject(FileService);
|
||||
private authService = inject(AuthService);
|
||||
|
||||
quotations = signal<GetQuotationDto[]>([]);
|
||||
quotationsLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
modal = viewChild.required<ModalNav>('modalNav');
|
||||
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchQuotations();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchQuotations() {
|
||||
this.quotationsLoading.set(true)
|
||||
|
||||
try {
|
||||
const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
|
||||
this.quotations.set(quotations);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors du chargement des devis')
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
||||
}
|
||||
}
|
||||
|
||||
async deleteProduct(productId: number, quotationId: number) {
|
||||
this.quotationsLoading.set(true)
|
||||
try {
|
||||
await firstValueFrom(this.quotationsService.deleteProductFromQuotationEndpoint(productId, quotationId))
|
||||
this.notificationService.success('Success', 'Suppression effectuée')
|
||||
} catch {
|
||||
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', 'Formulaire invalide')
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const quantity = updateQuantityComponent.quantityForm.getRawValue();
|
||||
await firstValueFrom(this.quotationsService.patchQuotationProductQuantityEndpoint(productId, quotationId, quantity))
|
||||
|
||||
this.notificationService.success('Success', 'Quantité modifiée')
|
||||
} catch {
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchQuotations();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<form nz-form nzLayout="horizontal" [formGroup]="settingForm">
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="row">
|
||||
<div class="row-left">
|
||||
@if (settings().logo) {
|
||||
<img [src]="'data:image/jpeg;base64,' + settings().logo" alt=""/>
|
||||
} @else {
|
||||
<img [src]="setting.logo" alt="logo">
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (admin()){
|
||||
<div class="row-right">
|
||||
<nz-form-item>
|
||||
<nz-form-label nzSpan="9">Logo</nz-form-label>
|
||||
<nz-form-control nzErrorTip="Ce champ est requis">
|
||||
<input #fileInputLogo nz-input type="file" placeholder="Déposer"
|
||||
(change)="onFileChange('logo', fileInputLogo.files)">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="row-right">
|
||||
<nz-form-item>
|
||||
<p class="text-red-600">Vous ne pouvez pas modifier le logo</p>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Signature -->
|
||||
<div class="row">
|
||||
<div class="row-left">
|
||||
@if (settings().electronicSignature) {
|
||||
<img [src]="'data:image/jpeg;base64,' + settings().electronicSignature" alt=""/>
|
||||
} @else {
|
||||
<img [src]="setting.electronicSignature" alt="logo">
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (admin()) {
|
||||
<div class="row-right">
|
||||
<nz-form-item>
|
||||
<nz-form-label nzSpan="9">Signature</nz-form-label>
|
||||
<nz-form-control nzErrorTip="Ce champ est requis">
|
||||
<input #fileInputSignature nz-input type="file" placeholder="Déposer"
|
||||
(change)="onFileChange('electronicSignature', fileInputSignature.files)">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="row-right">
|
||||
<nz-form-item>
|
||||
<p class="text-red-600">Vous ne pouvez pas modifier la signature</p>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,87 @@
|
||||
import {Component, inject, OnInit, signal} 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";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {GetSettingDto, SettingsService} from "../../services/api";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import imageCompression from "browser-image-compression";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@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 implements OnInit {
|
||||
private settingsService = inject(SettingsService);
|
||||
private notificationService = inject(NzNotificationService);
|
||||
private authService = inject(AuthService);
|
||||
|
||||
settings = signal<GetSettingDto>({});
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
setting: SettingInfo = {
|
||||
logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
|
||||
electronicSignature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
|
||||
}
|
||||
|
||||
settingForm: FormGroup = new FormGroup({
|
||||
logo: new FormControl<string>(null),
|
||||
electronicSignature: new FormControl<string>(null)
|
||||
})
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchSettings();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchSettings() {
|
||||
try {
|
||||
const settingsPicture = await firstValueFrom(this.settingsService.getSettingEndpoint());
|
||||
this.settings.set(settingsPicture);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Aucun paramètre défini')
|
||||
}
|
||||
}
|
||||
|
||||
async onFileChange(control: string, files?: FileList | null) {
|
||||
if (!files?.length) return;
|
||||
|
||||
const file = files[0];
|
||||
|
||||
const options = {
|
||||
maxSizeMB: 1,
|
||||
maxWidthOrHeight: 1080,
|
||||
useWebWorker: true,
|
||||
fileType: 'image/jpeg'
|
||||
}
|
||||
|
||||
const compressed = await imageCompression(file, options);
|
||||
|
||||
try {
|
||||
if (control === 'logo') {
|
||||
await firstValueFrom(this.settingsService.patchSettingLogoEndpoint(compressed));
|
||||
} else {
|
||||
await firstValueFrom(this.settingsService.patchSettingElectronicSignatureEndpoint(compressed));
|
||||
}
|
||||
await this.fetchSettings();
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible de changer les paramètres actuellement');
|
||||
}
|
||||
|
||||
this.settingForm.reset();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<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="0" formControlName="minimalQuantity">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
@@ -0,0 +1,42 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<nz-table
|
||||
[nzData]="products()"
|
||||
[nzFrontPagination]="false"
|
||||
[nzLoading]="productsLoading()"
|
||||
>
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th nzWidth="40px">
|
||||
<label nz-checkbox
|
||||
[(ngModel)]="checked"
|
||||
[nzIndeterminate]="indeterminate"
|
||||
(ngModelChange)="allCheck($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 products(); track product.id) {
|
||||
<tr>
|
||||
<td nzWidth="40px">
|
||||
<label
|
||||
nz-checkbox
|
||||
[ngModel]="selectedIds.includes(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>
|
||||
@if (admin()) {
|
||||
<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>
|
||||
@@ -0,0 +1,159 @@
|
||||
import {Component, 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 {GetProductDto, ProductsService, WarehouseproductsService} from "../../services/api";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
interface ProductWithQuantity extends GetProductDto {
|
||||
totalQuantity?: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-stock-table',
|
||||
imports: [
|
||||
NzTableComponent,
|
||||
ModalNav,
|
||||
NzIconDirective,
|
||||
StockForm,
|
||||
NzDividerComponent,
|
||||
FormsModule,
|
||||
NzThMeasureDirective,
|
||||
NzCheckboxComponent,
|
||||
],
|
||||
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)
|
||||
private authService = inject(AuthService);
|
||||
|
||||
products = signal<ProductWithQuantity[]>([]);
|
||||
productsLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
modal = viewChild.required<ModalNav>('modalNav');
|
||||
|
||||
selectionChange = output<number[]>();
|
||||
productsTables = output<GetProductDto[]>();
|
||||
|
||||
selectedProduct: GetProductDto | null = null;
|
||||
checked: boolean = false;
|
||||
indeterminate: boolean = false;
|
||||
selectedIds: number[] = [];
|
||||
|
||||
async ngOnInit() {
|
||||
await this.fetchProducts();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchProducts() {
|
||||
this.productsLoading.set(true);
|
||||
try {
|
||||
const products = await firstValueFrom(this.productsService.getAllProductsEndpoint());
|
||||
this.productsTables.emit(products);
|
||||
|
||||
const productsWithQuantity = await Promise.all(
|
||||
products.map(async (x) => {
|
||||
try {
|
||||
const quantity = await firstValueFrom(this.wareHousseProductsService.getTotalQuantityEndpoint(x.id));
|
||||
return {
|
||||
...x,
|
||||
totalQuantity: quantity.totalQuantity ?? 0
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
...x,
|
||||
totalQuantity: 0
|
||||
};
|
||||
}
|
||||
})
|
||||
);
|
||||
this.products.set(productsWithQuantity);
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible de charger le catalogue');
|
||||
}
|
||||
this.productsLoading.set(false);
|
||||
}
|
||||
|
||||
async delete(productId: number) {
|
||||
try {
|
||||
await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
|
||||
this.notificationService.success('Success', 'Suppression effectuée');
|
||||
} catch {
|
||||
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', 'Formulaire invalide')
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const products = updateProductComponent.stockForm.getRawValue();
|
||||
await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products));
|
||||
await this.fetchProducts();
|
||||
this.notificationService.success('Success', 'Limite de stock modifiée');
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchProducts();
|
||||
}
|
||||
|
||||
onModalCancel(modal: ModalNav) {
|
||||
modal.isVisible = false;
|
||||
}
|
||||
|
||||
updateCheck(id: number, checked: boolean) {
|
||||
if (checked) {
|
||||
if (!this.selectedIds.includes(id)) {
|
||||
this.selectedIds.push(id);
|
||||
}
|
||||
} else this.selectedIds = this.selectedIds.filter(x => x !== id);
|
||||
}
|
||||
|
||||
refreshCheckStatus() {
|
||||
const total = this.products().length;
|
||||
const checkedCount = this.selectedIds.length;
|
||||
|
||||
this.checked = checkedCount === total;
|
||||
this.indeterminate = checkedCount > 0 && checkedCount < total;
|
||||
|
||||
this.selectionChange.emit(this.selectedIds);
|
||||
}
|
||||
|
||||
allCheck(checked: boolean) {
|
||||
this.products().forEach(x =>
|
||||
this.updateCheck(x.id, checked)
|
||||
);
|
||||
this.refreshCheckStatus();
|
||||
}
|
||||
|
||||
onItemChecked(id: number, checked: boolean): void {
|
||||
this.updateCheck(id, checked);
|
||||
this.refreshCheckStatus();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<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>
|
||||
@@ -0,0 +1,53 @@
|
||||
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 {
|
||||
supplier = input<GetSupplierDto>();
|
||||
|
||||
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]),
|
||||
|
||||
})
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<nz-table [nzData]="suppliers()"
|
||||
[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 suppliers(); 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]="suppliers()" [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.productId) {
|
||||
<tr>
|
||||
<td>{{ product.productName }}</td>
|
||||
<td>{{ product.productReference }}</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>
|
||||
@if (admin()) {
|
||||
<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, supplier.id)"></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>
|
||||
@if (admin()) {
|
||||
<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>
|
||||
@@ -0,0 +1,156 @@
|
||||
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 {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";
|
||||
import {AuthService} from "../../services/auth.service";
|
||||
|
||||
@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);
|
||||
private authService = inject(AuthService);
|
||||
|
||||
suppliers = signal<GetSupplierDto[]>([]);
|
||||
suppliersLoading = signal<boolean>(false);
|
||||
admin = signal<boolean>(false);
|
||||
|
||||
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();
|
||||
this.admin.set(this.authService.isAdmin());
|
||||
}
|
||||
|
||||
async fetchSuppliers() {
|
||||
this.suppliersLoading.set(true);
|
||||
try {
|
||||
const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
|
||||
this.suppliers.set(suppliers);
|
||||
} catch {
|
||||
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 {
|
||||
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 {
|
||||
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 ou fournisseur manquants');
|
||||
return;
|
||||
}
|
||||
|
||||
await this.editPrice(productId, supplierId, updateProductComponent);
|
||||
updateProductComponent.priceForm.reset();
|
||||
this.onModalCancel(modal);
|
||||
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 {
|
||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async deleteProduct(idProduct: number, idSupplier: number) {
|
||||
try {
|
||||
await firstValueFrom(this.suppliersService.deleteProductToSupplierEndpoint(idSupplier, idProduct));
|
||||
this.notificationService.success('Succès', 'Produit supprimé');
|
||||
await this.fetchSuppliers();
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Impossible de supprimer le produit');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<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>
|
||||
@@ -0,0 +1,93 @@
|
||||
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);
|
||||
|
||||
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 {
|
||||
this.notificationService.error('Erreur', 'Impossible de charger les utilisateurs')
|
||||
}
|
||||
this.usersLoading.set(false)
|
||||
}
|
||||
|
||||
async delete(user: number) {
|
||||
try {
|
||||
await firstValueFrom(this.usersService.deleteUserEndpoint(user))
|
||||
this.notificationService.success('Success', 'Suppression effectuée')
|
||||
} catch {
|
||||
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', 'Formulaire invalide')
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const users = updateUserComponent.profilForm.getRawValue();
|
||||
await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
|
||||
|
||||
this.notificationService.success('Success', 'Utilisateur modifié')
|
||||
} catch {
|
||||
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();
|
||||
this.onModalCancel(modal);
|
||||
await this.fetchUsers();
|
||||
}
|
||||
|
||||
onModalCancel(modal: ModalNav) {
|
||||
modal.isVisible = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { AuthService} from "../services/auth.service";
|
||||
|
||||
export const authGuard = async () => {
|
||||
const auth = inject(AuthService);
|
||||
const router = inject(Router);
|
||||
|
||||
if(!auth.userAuthenticated()) {
|
||||
await router.navigateByUrl('/login');
|
||||
return false;
|
||||
}
|
||||
return true
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import {HttpInterceptorFn, HttpErrorResponse, HttpRequest, HttpHandlerFn} from '@angular/common/http';
|
||||
import {inject} from '@angular/core';
|
||||
import {AuthService} from '../services/auth.service';
|
||||
import {RefreshService} from '../services/api';
|
||||
import {NzNotificationService} from 'ng-zorro-antd/notification';
|
||||
import {catchError, switchMap, throwError} from 'rxjs';
|
||||
|
||||
export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<any>, next: HttpHandlerFn) => {
|
||||
const authService = inject(AuthService);
|
||||
const refreshService = inject(RefreshService);
|
||||
const notification = inject(NzNotificationService);
|
||||
const token = authService.getToken();
|
||||
|
||||
let authReq = req;
|
||||
if (token) {
|
||||
authReq = req.clone({
|
||||
setHeaders: {Authorization: `Bearer ${token}`}
|
||||
});
|
||||
}
|
||||
|
||||
return next(authReq).pipe(
|
||||
catchError((error: HttpErrorResponse) => {
|
||||
if (error.status === 401 && token) {
|
||||
return refreshService.refreshTokenEndpoint({token})
|
||||
.pipe(
|
||||
switchMap((res: any) => {
|
||||
authService.setToken(res.token);
|
||||
const newReq = req.clone({
|
||||
setHeaders: {Authorization: `Bearer ${res.token}`}
|
||||
});
|
||||
return next(newReq);
|
||||
}),
|
||||
catchError((refreshErr) => {
|
||||
authService.logout();
|
||||
notification.error('Session expirée', 'Veuillez vous reconnecter.');
|
||||
return throwError(() => refreshErr);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (error.status === 403) {
|
||||
notification.error('Accès refusé', 'Vous n’avez pas les droits pour cette action.');
|
||||
}
|
||||
|
||||
return throwError(() => error);
|
||||
})
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface SettingInfo {
|
||||
logo: string;
|
||||
electronicSignature: string;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export interface UserInfo {
|
||||
name: string;
|
||||
email: string;
|
||||
fonction: string;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="flex w-full px-4 gap-4 items-start mt-6">
|
||||
<div class="w-1/2">
|
||||
<app-delivery-validator></app-delivery-validator>
|
||||
</div>
|
||||
|
||||
<div class="w-1/2 mt-10 flex flex-col gap-4">
|
||||
<p class="text-2xl font-bold">Tableau de bord</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<app-info-card color="#f59e0b" icon="inbox"
|
||||
[value]="productsUnderLimitCount()"
|
||||
description="Produits sous le seuil minimal.">
|
||||
</app-info-card>
|
||||
<app-info-card color="#3b82f6" icon="team"
|
||||
[value]="deliversCount()+suppliersCount()"
|
||||
description="Partenaires actifs.">
|
||||
</app-info-card>
|
||||
<app-info-card color="#10b981" icon="truck"
|
||||
[value]="deliversCount()"
|
||||
description="Livreurs partenaires.">
|
||||
</app-info-card>
|
||||
<app-info-card color="#ef4444" icon="shop"
|
||||
[value]="suppliersCount()"
|
||||
description="Fournisseurs partenaires.">
|
||||
</app-info-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,65 @@
|
||||
import {Component, inject, signal} from '@angular/core';
|
||||
import {InfoCard} from "../../components/info-card/info-card";
|
||||
import {DeliveryValidator} from "../../components/delivery-validator/delivery-validator";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {DeliverersService, GetSupplierDto, ProductsService, SuppliersService} from "../../services/api";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {StockAlert} from "../../services/stock.alert";
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
imports: [
|
||||
InfoCard,
|
||||
DeliveryValidator,
|
||||
],
|
||||
templateUrl: './dashboard.html',
|
||||
styleUrl: './dashboard.css'
|
||||
})
|
||||
|
||||
export class Dashboard {
|
||||
private productsService = inject(ProductsService);
|
||||
private deliverersService = inject(DeliverersService);
|
||||
private suppliersService = inject(SuppliersService);
|
||||
private notificationsService = inject(NzNotificationService);
|
||||
private stockAlertService = inject(StockAlert);
|
||||
|
||||
deliversCount = signal<number>(0);
|
||||
suppliersCount = signal<number>(0);
|
||||
productsUnderLimitCount = signal<number>(0);
|
||||
suppliers = signal<GetSupplierDto[]>([]);
|
||||
|
||||
async getDeliverers() {
|
||||
try {
|
||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
|
||||
this.deliversCount.set(deliverers.length);
|
||||
} catch {
|
||||
this.notificationsService.error('Erreur', 'Impossible de charger les transporteurs');
|
||||
}
|
||||
}
|
||||
|
||||
async getSuppliers() {
|
||||
try {
|
||||
const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
|
||||
this.suppliers.set(suppliers);
|
||||
this.suppliersCount.set(suppliers.length);
|
||||
} catch {
|
||||
this.notificationsService.error('Erreur', 'Impossible de charger les fournisseurs');
|
||||
}
|
||||
}
|
||||
|
||||
async getProductsUnderLimit() {
|
||||
try {
|
||||
const products = await firstValueFrom(this.productsService.getAllProductsUnderLimitEndpoint());
|
||||
this.productsUnderLimitCount.set(products.length);
|
||||
await this.stockAlertService.generatePurchaseOrder(products, this.suppliers());
|
||||
} catch {
|
||||
this.notificationsService.error('Error', 'Impossible de charger les produits.');
|
||||
}
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
await this.getDeliverers();
|
||||
await this.getSuppliers();
|
||||
await this.getProductsUnderLimit();
|
||||
}
|
||||
}
|
||||
@@ -1 +1,15 @@
|
||||
<p>deliverer works!</p>
|
||||
<div class="flex mt-2">
|
||||
<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>
|
||||
|
||||
<div class="mt-4">
|
||||
<app-deliverer-table #delivererTable></app-deliverer-table>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,50 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, inject, viewChild} 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 {DeliverersService} from "../../services/api";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'app-deliverer',
|
||||
imports: [],
|
||||
templateUrl: './deliverer.html',
|
||||
styleUrl: './deliverer.css',
|
||||
selector: 'app-deliverer',
|
||||
imports: [
|
||||
ModalButton,
|
||||
DelivererTable,
|
||||
DelivererForm,
|
||||
],
|
||||
templateUrl: './deliverer.html',
|
||||
styleUrl: './deliverer.css',
|
||||
})
|
||||
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.onModalCancel();
|
||||
await this.delivererTable().fetchDeliverers()
|
||||
}
|
||||
|
||||
onModalCancel() {
|
||||
this.modal().isVisible = false;
|
||||
}
|
||||
|
||||
async addDeliverer() {
|
||||
if (this.createDeliverer().delivererForm.invalid) {
|
||||
this.notificationService.error('Erreur', 'Formulaire invalide')
|
||||
}
|
||||
try {
|
||||
const deliverers = this.createDeliverer().delivererForm.getRawValue();
|
||||
await firstValueFrom(this.deliverersService.createDelivererEndpoint(deliverers))
|
||||
|
||||
this.notificationService.success('Success', 'Transporteur enregistré')
|
||||
} catch {
|
||||
this.notificationService.error('Erreur', 'Erreur d\'enregistrement')
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user