Compare commits
4 Commits
8b7d48779e
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 39a831b99b | |||
| 0d26ac2457 | |||
| dcaf85a316 | |||
| df651fd052 |
@@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"plugins": {
|
|
||||||
"@tailwindcss/postcss": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
additionalProperties:
|
|
||||||
fileNaming: kebab-case
|
|
||||||
modelPropertyNaming: camelCase
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
|
|
||||||
"spaces": 2,
|
|
||||||
"generator-cli": {
|
|
||||||
"version": "7.17.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1696
package-lock.json
generated
1696
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -5,9 +5,7 @@
|
|||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development"
|
||||||
"openapi": "rm -rf src/app/services/api && openapi-generator-cli generate -i http://localhost:5298/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml",
|
|
||||||
"openapiWin": "set JAVA_TOOL_OPTIONS=-Dcom.sun.net.ssl.checkRevocation=false -Djavax.net.ssl.trustStoreType=WINDOWS-ROOT && openapi-generator-cli generate -i https://localhost:44379/swagger/v1/swagger.json -g typescript-angular -o src/app/services/api -c openapi-generator.yaml\n"
|
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"printWidth": 100,
|
"printWidth": 100,
|
||||||
@@ -29,11 +27,8 @@
|
|||||||
"@angular/forms": "^20.3.0",
|
"@angular/forms": "^20.3.0",
|
||||||
"@angular/platform-browser": "^20.3.0",
|
"@angular/platform-browser": "^20.3.0",
|
||||||
"@angular/router": "^20.3.0",
|
"@angular/router": "^20.3.0",
|
||||||
"@openapitools/openapi-generator-cli": "^2.25.2",
|
|
||||||
"@tailwindcss/postcss": "^4.1.17",
|
|
||||||
"@tailwindcss/vite": "^4.1.17",
|
"@tailwindcss/vite": "^4.1.17",
|
||||||
"ng-zorro-antd": "^20.4.0",
|
"ng-zorro-antd": "^20.4.0",
|
||||||
"postcss": "^8.5.6",
|
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"tailwindcss": "^4.1.17",
|
"tailwindcss": "^4.1.17",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
|
|||||||
@@ -6,102 +6,35 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
nz-header {
|
.top-nav {
|
||||||
display: flex;
|
line-height: 64px;
|
||||||
align-items: center;
|
|
||||||
background: #001529;
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- LOGO + TITRE --- */
|
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
float: left;
|
||||||
align-items: center;
|
height: 64px;
|
||||||
}
|
padding-right: 24px;
|
||||||
|
line-height: 64px;
|
||||||
.logo a {
|
background: #001529;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 40px;
|
display: inline-block;
|
||||||
width: auto;
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo h1 {
|
.logo h1 {
|
||||||
margin: 0 0 0 10px;
|
display: inline-block;
|
||||||
|
margin: 0 0 0 15px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- MENU PRINCIPAL --- */
|
|
||||||
.top-nav {
|
|
||||||
flex: 1;
|
|
||||||
margin: 0 40px;
|
|
||||||
line-height: 64px;
|
|
||||||
background: #001529;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Couleur grise par défaut + effet blanc et zoom au survol */
|
|
||||||
.top-nav li {
|
|
||||||
transition: transform 0.2s ease, color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-nav li a {
|
|
||||||
color: #bfbfbf !important; /* gris clair par défaut */
|
|
||||||
transition: transform 0.2s ease, color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Au survol → zoom + blanc pur */
|
|
||||||
.top-nav li:hover {
|
|
||||||
transform: scale(1.08);
|
|
||||||
background: transparent !important;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-nav li:hover a {
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
|
|
||||||
.top-nav li.ant-menu-item-active,
|
|
||||||
.top-nav li.ant-menu-item-selected {
|
|
||||||
background: transparent !important;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- ICONES DROITES --- */
|
|
||||||
.right-icons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-icons app-modal-nav {
|
|
||||||
transition: transform 0.2s ease, color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-icons app-modal-nav:hover {
|
|
||||||
color: #40a9ff;
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- CONTENU --- */
|
|
||||||
nz-content {
|
nz-content {
|
||||||
padding: 24px 50px;
|
padding: 24px 50px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,11 @@
|
|||||||
<nz-layout class="app-layout">
|
<nz-layout class="app-layout">
|
||||||
<nz-header>
|
<nz-header>
|
||||||
<div class="header-container">
|
|
||||||
<!-- LOGO -->
|
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<a routerLink="/welcome">
|
<a routerLink="/welcome">
|
||||||
<img
|
<img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
|
||||||
src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
|
<h1>PYRO FÊTES</h1>
|
||||||
alt="logo"
|
|
||||||
style="width: 100px; height: auto"
|
|
||||||
/>
|
|
||||||
<h1 class="text-amber-300">PYRO FÊTES</h1>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MENU PRINCIPAL -->
|
|
||||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
<a routerLink="/stock">
|
<a routerLink="/stock">
|
||||||
@@ -65,25 +57,13 @@
|
|||||||
<span>Utilisateur</span>
|
<span>Utilisateur</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li nz-menu-item><nz-icon nzType="bell" nzTheme="outline" /></li>
|
||||||
|
<li nz-menu-item><nz-icon nzType="user" nzTheme="outline" /></li>
|
||||||
|
<li nz-menu-item><nz-icon nzType="setting" nzTheme="outline" /></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- ICONES À DROITE -->
|
|
||||||
<div class="right-icons">
|
|
||||||
<app-modal-nav nameIcon="bell" name="Notification">
|
|
||||||
<app-notif-list></app-notif-list>
|
|
||||||
</app-modal-nav>
|
|
||||||
<app-modal-nav nameIcon="user" name="Profil">
|
|
||||||
<app-profil></app-profil>
|
|
||||||
</app-modal-nav>
|
|
||||||
<app-modal-nav nameIcon="setting" name="Paramètres">
|
|
||||||
<app-setting-form></app-setting-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nz-header>
|
</nz-header>
|
||||||
|
|
||||||
<nz-content>
|
<nz-content>
|
||||||
<div class="inner-content overflow-auto">
|
<div class="inner-content">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</nz-content>
|
</nz-content>
|
||||||
|
|||||||
@@ -2,15 +2,12 @@ import { Component } from '@angular/core';
|
|||||||
import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
|
import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
|
||||||
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
import { NzLayoutModule } from 'ng-zorro-antd/layout';
|
||||||
import { NzMenuModule } from 'ng-zorro-antd/menu';
|
import { NzMenuModule } from 'ng-zorro-antd/menu';
|
||||||
|
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||||
import {ModalNav} from "./components/modal-nav/modal-nav";
|
|
||||||
import {Profil} from "./components/profil/profil";
|
|
||||||
import {NotifList} from "./components/notif-list/notif-list";
|
|
||||||
import {SettingForm} from "./components/setting-form/setting-form";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList, SettingForm],
|
imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink],
|
||||||
templateUrl: './app.html',
|
templateUrl: './app.html',
|
||||||
styleUrl: './app.css'
|
styleUrl: './app.css'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,36 +0,0 @@
|
|||||||
<form [formGroup]="createPurchaseOrderForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="12" nzRequired>
|
|
||||||
Conditions générales de vente
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<nz-table [nzBordered]="true" class="mx-auto text-center">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="text-center">Produit</th>
|
|
||||||
<th class="text-center">Quantité</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody formArrayName="lines">
|
|
||||||
@for (line of lines.controls.slice(); let i = $index; track i) {
|
|
||||||
<tr [formGroupName]="i" class="text-center">
|
|
||||||
<td class="text-center">{{ line.value.name }}</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<nz-input-number
|
|
||||||
formControlName="quantity"
|
|
||||||
[nzMin]="1"
|
|
||||||
[nzStep]="1">
|
|
||||||
</nz-input-number>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormControl} from '@angular/forms';
|
|
||||||
import { GetProductDto } from '../../services/api';
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-create-purchaseorder-form',
|
|
||||||
templateUrl: './create-purchaseorder-form.html',
|
|
||||||
styleUrl: './create-purchaseorder-form.css',
|
|
||||||
imports: [
|
|
||||||
ReactiveFormsModule,
|
|
||||||
NzTableComponent,
|
|
||||||
NzInputNumberComponent,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class CreatePurchaseorderForm {
|
|
||||||
createPurchaseOrderForm: FormGroup
|
|
||||||
|
|
||||||
constructor(private fb: FormBuilder) {
|
|
||||||
this.createPurchaseOrderForm = this.fb.group({
|
|
||||||
purchaseConditions: new FormControl<string | null>(null, Validators.required),
|
|
||||||
lines: this.fb.array([])
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
get lines(): FormArray {
|
|
||||||
return this.createPurchaseOrderForm.get('lines') as FormArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajouter des produits sélectionnés dans le formulaire
|
|
||||||
syncSelectedProducts(selectedProducts: GetProductDto[]) {
|
|
||||||
this.lines.clear();
|
|
||||||
selectedProducts.forEach(p => {
|
|
||||||
this.lines.push(this.fb.group({
|
|
||||||
productId: [p.id],
|
|
||||||
name: [p.name],
|
|
||||||
quantity: [1, [Validators.required, Validators.min(1)]]
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<form [formGroup]="createQuotationForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="12" nzRequired>
|
|
||||||
Message
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Message" formControlName="message">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="12" nzRequired>
|
|
||||||
Conditions générales
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<nz-table [nzBordered]="true" class="mx-auto text-center">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="text-center">Produit</th>
|
|
||||||
<th class="text-center">Quantité</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody formArrayName="lines">
|
|
||||||
@for (line of lines.controls.slice(); let i = $index; track i) {
|
|
||||||
<tr [formGroupName]="i" class="text-center">
|
|
||||||
<td class="text-center">{{ line.value.name }}</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<nz-input-number
|
|
||||||
formControlName="quantity"
|
|
||||||
[nzMin]="1"
|
|
||||||
[nzStep]="1">
|
|
||||||
</nz-input-number>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {
|
|
||||||
FormArray,
|
|
||||||
FormBuilder,
|
|
||||||
FormControl,
|
|
||||||
FormGroup,
|
|
||||||
FormsModule,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
Validators
|
|
||||||
} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {GetProductDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-create-quotation-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
NzInputNumberComponent,
|
|
||||||
NzTableComponent,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './create-quotation-form.html',
|
|
||||||
styleUrl: './create-quotation-form.css',
|
|
||||||
})
|
|
||||||
export class CreateQuotationForm {
|
|
||||||
createQuotationForm: FormGroup
|
|
||||||
|
|
||||||
constructor(private fb: FormBuilder) {
|
|
||||||
this.createQuotationForm = this.fb.group({
|
|
||||||
message: new FormControl<string>(null, Validators.required),
|
|
||||||
purchaseConditions: new FormControl<string>(null, Validators.required),
|
|
||||||
lines: this.fb.array([])
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
get lines(): FormArray {
|
|
||||||
return this.createQuotationForm.get('lines') as FormArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ajouter des produits sélectionnés dans le formulaire
|
|
||||||
syncSelectedProducts(selectedProducts: GetProductDto[]) {
|
|
||||||
this.lines.clear();
|
|
||||||
selectedProducts.forEach(p => {
|
|
||||||
this.lines.push(this.fb.group({
|
|
||||||
productId: [p.id],
|
|
||||||
name: [p.name],
|
|
||||||
quantity: [1, [Validators.required, Validators.min(1)]]
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="delivererForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Transporteur
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Transporteur" formControlName="transporter">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {GetDelivererDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-deliverer-form',
|
|
||||||
imports: [
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './deliverer-form.html',
|
|
||||||
styleUrl: './deliverer-form.css',
|
|
||||||
})
|
|
||||||
export class DelivererForm {
|
|
||||||
delivererForm: FormGroup = new FormGroup({
|
|
||||||
transporter: new FormControl<string>(null, [Validators.required])
|
|
||||||
})
|
|
||||||
|
|
||||||
deliverer= input<GetDelivererDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.deliverer()) {
|
|
||||||
this.delivererForm.patchValue({
|
|
||||||
transporter: this.deliverer().transporter
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
<nz-table [nzData]="deliverers()"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
[nzLoading]="deliverersLoading()">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Transporteur</th>
|
|
||||||
<th>Bon de livraison</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (deliverer of deliverers(); track deliverer.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{deliverer.transporter}}</td>
|
|
||||||
<td>
|
|
||||||
<app-modal-button type="link" name="Voir tout les bons de livraison" size="50%">
|
|
||||||
<div style="max-height: 400px; overflow-y: auto;">
|
|
||||||
<nz-table [nzData]="deliverers()"
|
|
||||||
[nzFrontPagination]="false">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Numéro de livraison</th>
|
|
||||||
<th>Date d'expédition</th>
|
|
||||||
<th>Date de livraison estimée</th>
|
|
||||||
<th>Date de livraison réelle</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (deliveryInfo of deliverer.deliveryNotes; track deliveryInfo.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{deliveryInfo.trackingNumber}}</td>
|
|
||||||
<td>{{deliveryInfo.expeditionDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
<td>{{deliveryInfo.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
<td>{{deliveryInfo.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</app-modal-button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliverer)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)" class="text-red-600 cursor-pointer"></nz-icon>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedDeliverer.id, delivererForm, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-deliverer-form #delivererForm [deliverer]="selectedDeliverer"></app-deliverer-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {ModalButton} from "../modal-button/modal-button";
|
|
||||||
import {DatePipe} from "@angular/common";
|
|
||||||
import {DelivererForm} from "../deliverer-form/deliverer-form";
|
|
||||||
import {DeliverersService, GetDelivererDto, GetSupplierDto} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
import {SupplierForm} from "../supplier-form/supplier-form";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-deliverer-table',
|
|
||||||
imports: [
|
|
||||||
ModalNav,
|
|
||||||
NzDividerComponent,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
ModalButton,
|
|
||||||
DatePipe,
|
|
||||||
DelivererForm,
|
|
||||||
],
|
|
||||||
templateUrl: './deliverer-table.html',
|
|
||||||
styleUrl: './deliverer-table.css',
|
|
||||||
})
|
|
||||||
|
|
||||||
export class DelivererTable implements OnInit {
|
|
||||||
private deliverersService = inject(DeliverersService);
|
|
||||||
private notificationService = inject(NzNotificationService)
|
|
||||||
deliverers = signal<GetDelivererDto[]>([]);
|
|
||||||
deliverersLoading = signal<boolean>(false);
|
|
||||||
updateDeliverer = viewChild.required<DelivererForm>('delivererForm');
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchDeliverers();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchDeliverers() {
|
|
||||||
this.deliverersLoading.set(true)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint())
|
|
||||||
this.deliverers.set(deliverers);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.deliverersLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(deliverer:number) {
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.deliverersService.deleteDelivererEndpoint(deliverer))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
await this.fetchDeliverers();
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateDelivererComponent: DelivererForm) {
|
|
||||||
if (updateDelivererComponent.delivererForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const deliverers = updateDelivererComponent.delivererForm.getRawValue();
|
|
||||||
await firstValueFrom(this.deliverersService.updateDelivererEndpoint(id, deliverers))
|
|
||||||
|
|
||||||
this.notificationService.success('Success', 'Transporteur modifié')
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedDeliverer: GetDelivererDto | null = null;
|
|
||||||
openEditModal(supplier: GetSupplierDto) {
|
|
||||||
this.selectedDeliverer = { ...supplier };
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(supplierId: number, updateDelivererComponent: DelivererForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedDeliverer) return;
|
|
||||||
|
|
||||||
await this.edit(supplierId, updateDelivererComponent);
|
|
||||||
updateDelivererComponent.delivererForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchDeliverers();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="deliveryNoteForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Transporteur
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="9" nzErrorTip="Ce champ est requis">
|
|
||||||
<nz-select formControlName="delivererId" [nzPlaceHolder]="'Choisir un transporteur'" nzShowSearch [nzFilterOption]="filter">
|
|
||||||
@for (deliverer of deliverers(); track deliverer.id) {
|
|
||||||
<nz-option [nzValue]="deliverer.id" [nzLabel]="deliverer.transporter"></nz-option>
|
|
||||||
}
|
|
||||||
</nz-select>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Date d'expédition
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<nz-date-picker formControlName="expeditionDate"></nz-date-picker>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9">
|
|
||||||
Date de livraison estimée
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<nz-date-picker formControlName="estimatedDate"></nz-date-picker>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9">
|
|
||||||
Date de livraison réelle
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<nz-date-picker formControlName="realDeliveryDate"></nz-date-picker>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
import {Component, effect, inject, input, OnInit, signal} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
|
|
||||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
|
||||||
import {DeliverersService, GetDelivererDto, GetDeliveryNoteDto} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-deliverery-note-form',
|
|
||||||
imports: [
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormDirective,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
NzDatePickerComponent,
|
|
||||||
NzSelectComponent,
|
|
||||||
NzOptionComponent,
|
|
||||||
],
|
|
||||||
templateUrl: './deliverery-note-form.html',
|
|
||||||
styleUrl: './deliverery-note-form.css',
|
|
||||||
})
|
|
||||||
export class DelivereryNoteForm implements OnInit {
|
|
||||||
deliveryNoteForm: FormGroup = new FormGroup({
|
|
||||||
trackingNumber: new FormControl<string>(null),
|
|
||||||
delivererId: new FormControl<number>(null,[Validators.required]),
|
|
||||||
expeditionDate: new FormControl(null,[Validators.required]),
|
|
||||||
estimatedDate: new FormControl(null),
|
|
||||||
realDeliveryDate: new FormControl(null)
|
|
||||||
})
|
|
||||||
|
|
||||||
private deliverersService = inject(DeliverersService);
|
|
||||||
private notificationService = inject(NzNotificationService);
|
|
||||||
deliverers = signal<GetDelivererDto[]>([]);
|
|
||||||
|
|
||||||
async fetchDeliverers() {
|
|
||||||
try {
|
|
||||||
const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
|
|
||||||
this.deliverers.set(deliverers);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Impossible de récupérer les transporteurs');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchDeliverers();
|
|
||||||
}
|
|
||||||
|
|
||||||
filter(input: string, option: any) {
|
|
||||||
return option.nzLabel.toLowerCase().includes(input.toLowerCase());
|
|
||||||
}
|
|
||||||
|
|
||||||
deliveryNote= input<GetDeliveryNoteDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.deliveryNote()) {
|
|
||||||
this.deliveryNoteForm.patchValue({
|
|
||||||
trackingNumber: this.deliveryNote().trackingNumber,
|
|
||||||
expeditionDate: this.deliveryNote().expeditionDate,
|
|
||||||
realDeliveryDate: this.deliveryNote().expeditionDate,
|
|
||||||
estimatedDate: this.deliveryNote().expeditionDate,
|
|
||||||
delivererId: this.deliveryNote().delivererId
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
<nz-table [nzData]="deliveryNotes()"
|
|
||||||
class="mr-7"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
[nzLoading]="deliveryNotesLoading()">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Numéro de livraison</th>
|
|
||||||
<th>Transporteur</th>
|
|
||||||
<th>Date d'expédition</th>
|
|
||||||
<th>Date de livraison estimée</th>
|
|
||||||
<th>Date de livraison réelle</th>
|
|
||||||
<th>Produits</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead >
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (deliveryNote of deliveryNotes(); track deliveryNote.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{deliveryNote.trackingNumber}}</td>
|
|
||||||
<td>{{deliveryNote.delivererTransporter}}</td>
|
|
||||||
<td>{{deliveryNote.expeditionDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
<td>{{deliveryNote.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
<td>{{deliveryNote.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
|
|
||||||
<td>
|
|
||||||
<app-modal-button type="link" name="Voir les produits" size="40%">
|
|
||||||
<div style="max-height: 400px; overflow-y: auto;">
|
|
||||||
<nz-table [nzData]="deliveryNotes()"
|
|
||||||
[nzFrontPagination]="false">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Réference</th>
|
|
||||||
<th>Nom</th>
|
|
||||||
<th>Quantité</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (product of deliveryNote.products; track product.productId) {
|
|
||||||
<tr>
|
|
||||||
<td>{{product.productReference}}</td>
|
|
||||||
<td>{{product.productName}}</td>
|
|
||||||
<td>{{product.quantity}}</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</app-modal-button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="check" nzTheme="outline" (click)="validate(deliveryNote.id)" class="cursor-pointer text-green-700"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliveryNote)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)" class="cursor-pointer text-red-700"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)" class="cursor-pointer text-green-700"/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier un bon de livraison'" (ok)="onModalOk(selectedDeliveryNote.id, deliveryNoteForm, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-deliverery-note-form #deliveryNoteForm [deliveryNote]="selectedDeliveryNote"></app-deliverery-note-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {DatePipe} from "@angular/common";
|
|
||||||
import {ModalButton} from "../modal-button/modal-button";
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {DelivereryNoteForm} from "../deliverery-note-form/deliverery-note-form";
|
|
||||||
import {DeliverynotesService, GetDeliveryNoteDto} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
import {format} from "date-fns";
|
|
||||||
import {FileService} from "../../services/file.service";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-deliverery-note-table',
|
|
||||||
imports: [
|
|
||||||
ModalButton,
|
|
||||||
ModalNav,
|
|
||||||
NzDividerComponent,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
DelivereryNoteForm,
|
|
||||||
DatePipe,
|
|
||||||
],
|
|
||||||
templateUrl: './deliverery-note-table.html',
|
|
||||||
styleUrl: './deliverery-note-table.css',
|
|
||||||
})
|
|
||||||
export class DelivereryNoteTable implements OnInit {
|
|
||||||
private deliveryNotesService = inject(DeliverynotesService);
|
|
||||||
private notificationService = inject(NzNotificationService);
|
|
||||||
private fileService = inject(FileService);
|
|
||||||
deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
|
|
||||||
deliveryNotesLoading = signal<boolean>(false);
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchDeliveryNotes();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchDeliveryNotes() {
|
|
||||||
this.deliveryNotesLoading.set(true)
|
|
||||||
try {
|
|
||||||
const deliveryNotes = await firstValueFrom(this.deliveryNotesService.getAllDeliveryNoteEndpoint())
|
|
||||||
this.deliveryNotes.set(deliveryNotes);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.deliveryNotesLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(deliveryNote:number) {
|
|
||||||
this.deliveryNotesLoading.set(true)
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.deliveryNotesService.deleteDeliveryNoteEndpoint(deliveryNote));
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.deliveryNotesLoading.set(false)
|
|
||||||
await this.fetchDeliveryNotes();
|
|
||||||
}
|
|
||||||
|
|
||||||
async validate(deliveryNote:number) {
|
|
||||||
this.deliveryNotesLoading.set(true)
|
|
||||||
try {
|
|
||||||
const PatchRealDate = {
|
|
||||||
realDeliveryDate: format(new Date(), 'yyyy-MM-dd')
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.deliveryNotesService.patchRealDeliveryDateEndpoint(deliveryNote, PatchRealDate))
|
|
||||||
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Date actualisée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'La date à déjà été actualisée'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'actualisation de la date'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.deliveryNotesLoading.set(false)
|
|
||||||
await this.fetchDeliveryNotes()
|
|
||||||
}
|
|
||||||
|
|
||||||
async export(deliveryNoteId: number) {
|
|
||||||
this.deliveryNotesLoading.set(true)
|
|
||||||
try {
|
|
||||||
const pdf = await firstValueFrom(
|
|
||||||
this.deliveryNotesService.getDeliveryNotePdfEndpoint(deliveryNoteId, "response")
|
|
||||||
);
|
|
||||||
this.fileService.downloadBlob(pdf)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de générer un PDF'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.deliveryNotesLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateDelivereryNoteComponent: DelivereryNoteForm) {
|
|
||||||
if (updateDelivereryNoteComponent.deliveryNoteForm.invalid) {
|
|
||||||
this.notificationService.error('Erreur', 'Formulaire invalide');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const raw = updateDelivereryNoteComponent.deliveryNoteForm.getRawValue();
|
|
||||||
|
|
||||||
// convertit proprement les dates (string OU Date)
|
|
||||||
const toIso = (val: any) => {
|
|
||||||
if (!val) return null;
|
|
||||||
|
|
||||||
// si c’est déjà un string ISO "yyyy-MM-dd", on renvoie tel quel
|
|
||||||
if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}/.test(val)) {
|
|
||||||
return val.substring(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
// sinon on reconstruit une Date
|
|
||||||
const d = new Date(val);
|
|
||||||
if (isNaN(d.getTime())) return null;
|
|
||||||
|
|
||||||
return d.toISOString().substring(0, 10); // yyyy-MM-dd
|
|
||||||
};
|
|
||||||
|
|
||||||
const deliveryNoteDto = {
|
|
||||||
trackingNumber: raw.trackingNumber,
|
|
||||||
delivererId: raw.delivererId,
|
|
||||||
expeditionDate: toIso(raw.expeditionDate),
|
|
||||||
estimatedDate: toIso(raw.estimatedDate),
|
|
||||||
realDeliveryDate: toIso(raw.realDeliveryDate)
|
|
||||||
};
|
|
||||||
|
|
||||||
await firstValueFrom(this.deliveryNotesService.updateDeliveryNoteEndpoint(id, deliveryNoteDto));
|
|
||||||
this.notificationService.success('Success', 'Bon de livraison modifié');
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedDeliveryNote: GetDeliveryNoteDto | null = null;
|
|
||||||
openEditModal(deliveryNote: GetDeliveryNoteDto) {
|
|
||||||
this.selectedDeliveryNote = { ...deliveryNote };
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(id: number, updateDelivereryNoteComponent: DelivereryNoteForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedDeliveryNote) return;
|
|
||||||
|
|
||||||
await this.edit(id, updateDelivereryNoteComponent);
|
|
||||||
updateDelivereryNoteComponent.deliveryNoteForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchDeliveryNotes();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,114 +0,0 @@
|
|||||||
/* Conteneur principal centré */
|
|
||||||
.livraisons-container {
|
|
||||||
max-width: 650px;
|
|
||||||
margin: 40px 0 0 80px;
|
|
||||||
padding: 25px;
|
|
||||||
background: #f9fafb;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
/* Box shadow pour effet superposition */
|
|
||||||
box-shadow:
|
|
||||||
0 4px 8px rgba(0, 0, 0, 0.06),
|
|
||||||
0 8px 20px rgba(0, 0, 0, 0.08),
|
|
||||||
0 16px 40px rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Barre de recherche */
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px 18px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
border-color: #3b82f6;
|
|
||||||
box-shadow: 0 0 8px rgba(59,130,246,0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Liste scrollable */
|
|
||||||
.livraisons-list {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 350px; /* hauteur max de la liste */
|
|
||||||
overflow-y: auto; /* scroll vertical activé */
|
|
||||||
padding-right: 10px; /* pour le scrollbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar personnalisée (optionnel) */
|
|
||||||
.livraisons-list::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.livraisons-list::-webkit-scrollbar-thumb {
|
|
||||||
background: #9ca3af;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.livraisons-list::-webkit-scrollbar-track {
|
|
||||||
background: #f3f4f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Carte de livraison */
|
|
||||||
.livraison-card {
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 20px 22px;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.livraison-card:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 10px 22px rgba(0,0,0,0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Infos livraison */
|
|
||||||
.livraison-info h3 {
|
|
||||||
font-size: 17px;
|
|
||||||
margin: 0 0 4px;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.livraison-info p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bouton valider */
|
|
||||||
.validate-btn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.validate-btn:hover {
|
|
||||||
background: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.validate-btn.validated {
|
|
||||||
background: #9ca3af;
|
|
||||||
cursor: default;
|
|
||||||
color: #ffffff;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
<div class="livraisons-container">
|
|
||||||
<input type="text" placeholder="Rechercher une livraison" class="search-input" (input)="search.set($any($event.target).value)"/>
|
|
||||||
|
|
||||||
<div class="livraisons-list">
|
|
||||||
@for (deliveryItem of filteredLivraisons(); track deliveryItem.id) {
|
|
||||||
<div class="livraison-card">
|
|
||||||
<div class="livraison-info">
|
|
||||||
<h3>{{ deliveryItem.client }}</h3>
|
|
||||||
<p class="mr-5">Date d'expédition: {{ deliveryItem.date }}</p>
|
|
||||||
<p>Produits : {{ deliveryItem.produits }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button nz-button nzType="primary" [nzSize]="size" nzShape="round" (click)="validate(deliveryItem.id)">
|
|
||||||
<nz-icon nzType="check" />
|
|
||||||
Valider
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import {Component, computed, signal} from '@angular/core';
|
|
||||||
import {NzButtonComponent, NzButtonSize} from "ng-zorro-antd/button";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-delivery-validator',
|
|
||||||
imports: [
|
|
||||||
NzButtonComponent,
|
|
||||||
NzIconDirective
|
|
||||||
],
|
|
||||||
templateUrl: './delivery-validator.html',
|
|
||||||
styleUrl: './delivery-validator.css',
|
|
||||||
})
|
|
||||||
export class DeliveryValidator {
|
|
||||||
size: NzButtonSize = 'large';
|
|
||||||
search = signal('');
|
|
||||||
|
|
||||||
livraisons = signal([
|
|
||||||
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
|
|
||||||
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
|
|
||||||
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
|
|
||||||
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
|
|
||||||
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
|
|
||||||
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
|
|
||||||
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
|
|
||||||
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
|
|
||||||
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 },
|
|
||||||
{ id: 1, client: 'Carrefour', date: '2025-02-03', produits: 12 },
|
|
||||||
{ id: 2, client: 'Intermarché', date: '2025-02-04', produits: 8 },
|
|
||||||
{ id: 3, client: 'Auchan', date: '2025-02-05', produits: 23 }
|
|
||||||
]);
|
|
||||||
|
|
||||||
filteredLivraisons = computed(() => {
|
|
||||||
const query = this.search().toLowerCase();
|
|
||||||
return this.livraisons().filter(l =>
|
|
||||||
l.client.toLowerCase().includes(query) ||
|
|
||||||
l.date.includes(query)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
validate(id: number) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
.card-content {
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 32px 36px;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
|
|
||||||
width: 350px;
|
|
||||||
min-height: 180px;
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content:hover {
|
|
||||||
transform: translateY(-6px);
|
|
||||||
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ligne du haut : icône ET nombre */
|
|
||||||
.card-top {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icône à gauche (plus grande) */
|
|
||||||
.card-top nz-icon {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nombre à droite de l'icône (plus grand) */
|
|
||||||
.card-number {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Texte en dessous (plus lisible) */
|
|
||||||
.card-text {
|
|
||||||
margin-top: 18px;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.4;
|
|
||||||
color: #4b5563;
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<div class="card-content">
|
|
||||||
<div class="card-top">
|
|
||||||
<nz-icon [ngStyle]="{ 'color': color() }" [nzType]="icon()" nzTheme="outline"></nz-icon>
|
|
||||||
<p class="card-number">{{value()}}</p>
|
|
||||||
</div>
|
|
||||||
<p class="card-text">{{description()}}</p>
|
|
||||||
</div>
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import {Component, input} from '@angular/core';
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NgStyle} from "@angular/common";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-info-card',
|
|
||||||
imports: [
|
|
||||||
NzIconDirective,
|
|
||||||
NgStyle
|
|
||||||
],
|
|
||||||
templateUrl: './info-card.html',
|
|
||||||
styleUrl: './info-card.css',
|
|
||||||
})
|
|
||||||
export class InfoCard {
|
|
||||||
icon = input.required<string>()
|
|
||||||
value = input.required<string>()
|
|
||||||
description = input.required<string>()
|
|
||||||
color = input.required<string>()
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
.documents-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start; /* contenu aligné à gauche */
|
|
||||||
gap: 16px; /* espace entre le titre et la liste */
|
|
||||||
margin: 40px 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Titre */
|
|
||||||
.documents-section h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #111827;
|
|
||||||
margin: 0; /* on gère l’espace avec le gap */
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
border-left: 4px solid #3b82f6;
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Liste de documents scrollable */
|
|
||||||
.content {
|
|
||||||
width: 1000px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 30px 15px;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow:
|
|
||||||
0 4px 8px rgba(0, 0, 0, 0.06),
|
|
||||||
0 8px 20px rgba(0, 0, 0, 0.08),
|
|
||||||
0 16px 40px rgba(0, 0, 0, 0.06);
|
|
||||||
max-height: 390px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chaque carte */
|
|
||||||
.content > div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 120px;
|
|
||||||
height: 140px;
|
|
||||||
padding: 12px;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content > div:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 10px 22px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<div class="documents-section">
|
|
||||||
<h1>Documents récents</h1>
|
|
||||||
<div class="content">
|
|
||||||
@for (doc of purchaseOrder(); track doc.id) {
|
|
||||||
<div>
|
|
||||||
<img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" alt="pdf">
|
|
||||||
<p>{{ doc.name }}</p>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
interface PurchaseOrder {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-info-table',
|
|
||||||
templateUrl: './info-table.html',
|
|
||||||
styleUrls: ['./info-table.css'],
|
|
||||||
})
|
|
||||||
export class InfoTable {
|
|
||||||
docs: PurchaseOrder[] = [
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
{ id: 1, name: 'Bon de commande'},
|
|
||||||
{ id: 2, name: 'Bon de commande'},
|
|
||||||
{ id: 3, name: 'Bon de commande'},
|
|
||||||
];
|
|
||||||
|
|
||||||
purchaseOrder(): PurchaseOrder[] {
|
|
||||||
return this.docs;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
<button nz-button [nzType]="type()" (click)="showModal()">{{name()}}</button>
|
|
||||||
|
|
||||||
<ng-template #modalContent>
|
|
||||||
<ng-content></ng-content>
|
|
||||||
</ng-template>
|
|
||||||
|
|
||||||
<nz-modal
|
|
||||||
[(nzVisible)]="isVisible"
|
|
||||||
[nzTitle]="name()"
|
|
||||||
(nzOnCancel)="handleCancel()"
|
|
||||||
(nzOnOk)="handleOk()"
|
|
||||||
[nzOkLoading]="isOkLoading"
|
|
||||||
[nzContent]="modalContent"
|
|
||||||
[nzWidth]="size()"
|
|
||||||
>
|
|
||||||
</nz-modal>
|
|
||||||
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import {Component, input, Input, output} from '@angular/core';
|
|
||||||
import {NzModalComponent} from "ng-zorro-antd/modal";
|
|
||||||
import {NzButtonComponent} from "ng-zorro-antd/button";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-modal-button',
|
|
||||||
imports: [
|
|
||||||
NzModalComponent,
|
|
||||||
NzButtonComponent,
|
|
||||||
],
|
|
||||||
templateUrl: './modal-button.html',
|
|
||||||
styleUrl: './modal-button.css',
|
|
||||||
})
|
|
||||||
|
|
||||||
export class ModalButton {
|
|
||||||
size = input<string>();
|
|
||||||
name = input.required<string>()
|
|
||||||
type = input<"primary" | "default" | "dashed" | "link" | "text">()
|
|
||||||
|
|
||||||
ok = output<void>();
|
|
||||||
cancel = output<void>();
|
|
||||||
|
|
||||||
isVisible = false;
|
|
||||||
isOkLoading = false;
|
|
||||||
|
|
||||||
showModal(): void {
|
|
||||||
this.isVisible = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOk(): void {
|
|
||||||
this.isOkLoading = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ok.emit();
|
|
||||||
this.isVisible = false;
|
|
||||||
this.isOkLoading = false;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCancel(): void {
|
|
||||||
this.cancel.emit();
|
|
||||||
this.isVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<div (click)="showModal()">
|
|
||||||
<nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ng-template #modalContent>
|
|
||||||
<ng-content></ng-content>
|
|
||||||
</ng-template>
|
|
||||||
|
|
||||||
<nz-modal
|
|
||||||
[(nzVisible)]="isVisible"
|
|
||||||
[nzTitle]="name()"
|
|
||||||
(nzOnCancel)="handleCancel()"
|
|
||||||
(nzOnOk)="handleOk()"
|
|
||||||
[nzOkLoading]="isOkLoading"
|
|
||||||
[nzContent]="modalContent"
|
|
||||||
>
|
|
||||||
</nz-modal>
|
|
||||||
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import {Component, Input, input, output} from '@angular/core';
|
|
||||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
|
||||||
import { NzModalModule } from 'ng-zorro-antd/modal';
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-modal-nav',
|
|
||||||
imports: [NzButtonModule, NzModalModule, NzIconDirective],
|
|
||||||
templateUrl: 'modal-nav.html',
|
|
||||||
styleUrls: ['./modal-nav.css'],
|
|
||||||
})
|
|
||||||
export class ModalNav {
|
|
||||||
nameIcon = input.required<string>()
|
|
||||||
name = input.required<string>()
|
|
||||||
ok = output<void>();
|
|
||||||
cancel = output<void>();
|
|
||||||
isVisible = false;
|
|
||||||
isOkLoading = false;
|
|
||||||
|
|
||||||
showModal(): void {
|
|
||||||
this.isVisible = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOk(): void {
|
|
||||||
this.isOkLoading = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
this.ok.emit();
|
|
||||||
this.isOkLoading = false;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCancel(): void {
|
|
||||||
this.isVisible = false;
|
|
||||||
this.cancel.emit();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
<div class="ml-90">
|
|
||||||
<p class="cursor-pointer text-red-700" (click)="delete()">
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline"/> Tout supprimer
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nz-list nzItemLayout="vertical" class="max-w-xl mx-auto max-h-[400px] overflow-y-auto border border-gray-200 rounded-lg">
|
|
||||||
@for (item of notifList; track item) {
|
|
||||||
<nz-list-item class="flex items-start p-4 border-b border-gray-200">
|
|
||||||
|
|
||||||
<nz-list-item-meta class="flex-1">
|
|
||||||
<nz-list-item-meta-avatar>
|
|
||||||
<img src="https://cdn-icons-png.flaticon.com/512/1/1176.png" alt="info" class="w-10 h-10 rounded-full mt-10 mr-2 w-10">
|
|
||||||
</nz-list-item-meta-avatar>
|
|
||||||
|
|
||||||
<nz-list-item-meta-title>
|
|
||||||
<p class="font-semibold mb-1">{{item.title}}</p>
|
|
||||||
<p class="text-gray-500 mb-1">{{item.author}}</p>
|
|
||||||
</nz-list-item-meta-title>
|
|
||||||
|
|
||||||
<nz-list-item-meta-description>
|
|
||||||
<p>{{item.content}}</p>
|
|
||||||
</nz-list-item-meta-description>
|
|
||||||
</nz-list-item-meta>
|
|
||||||
|
|
||||||
<nz-list-item-extra>
|
|
||||||
<img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
|
|
||||||
alt="logo"
|
|
||||||
class="w-35 object-contain mt-4">
|
|
||||||
</nz-list-item-extra>
|
|
||||||
|
|
||||||
</nz-list-item>
|
|
||||||
}
|
|
||||||
</nz-list>
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {NotifInfo} from "../../interfaces/notif.interface";
|
|
||||||
import {
|
|
||||||
NzListComponent,
|
|
||||||
NzListItemComponent,
|
|
||||||
NzListItemExtraComponent, NzListItemMetaAvatarComponent,
|
|
||||||
NzListItemMetaComponent, NzListItemMetaDescriptionComponent, NzListItemMetaTitleComponent
|
|
||||||
} from "ng-zorro-antd/list";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-notif-list',
|
|
||||||
imports: [
|
|
||||||
NzListComponent,
|
|
||||||
NzListItemComponent,
|
|
||||||
NzListItemMetaComponent,
|
|
||||||
NzListItemExtraComponent,
|
|
||||||
NzListItemMetaDescriptionComponent,
|
|
||||||
NzListItemMetaAvatarComponent,
|
|
||||||
NzListItemMetaTitleComponent,
|
|
||||||
NzIconDirective
|
|
||||||
],
|
|
||||||
templateUrl: './notif-list.html',
|
|
||||||
styleUrl: './notif-list.css',
|
|
||||||
})
|
|
||||||
export class NotifList {
|
|
||||||
notifList: NotifInfo[] = [
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
author: 'Admin',
|
|
||||||
title: 'Information system',
|
|
||||||
content: 'L\'utilisateur à bien été crée.'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
delete() {
|
|
||||||
this.notifList = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
addContent(author: string, title: string, content: string) {
|
|
||||||
this.notifList.push({ author, title, content });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="priceForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9">
|
|
||||||
Prix
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<input nz-input type="number" placeholder="€€€" formControlName="price">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {GetPriceDto, GetSupplierDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-price-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './price-form.html',
|
|
||||||
styleUrl: './price-form.css',
|
|
||||||
})
|
|
||||||
export class PriceForm {
|
|
||||||
priceForm: FormGroup = new FormGroup({
|
|
||||||
price: new FormControl<string>(null, [Validators.required]),
|
|
||||||
})
|
|
||||||
|
|
||||||
price= input<GetPriceDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.price()) {
|
|
||||||
this.priceForm.patchValue({
|
|
||||||
price: this.price().sellingPrice
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="productForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Prix
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Prix" formControlName="price">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Quantité
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="8" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Quantité" formControlName="quantity">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-product-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './product-form.html',
|
|
||||||
styleUrl: './product-form.css',
|
|
||||||
})
|
|
||||||
export class ProductForm {
|
|
||||||
productForm: FormGroup = new FormGroup({
|
|
||||||
price: new FormControl<string>(null, [Validators.required]),
|
|
||||||
quantity: new FormControl<string>(null, [Validators.required])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-product-table',
|
|
||||||
imports: [],
|
|
||||||
templateUrl: './product-table.html',
|
|
||||||
styleUrl: './product-table.css',
|
|
||||||
})
|
|
||||||
export class ProductTable {}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="profilForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Prénom
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Prénom" formControlName="name">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Email
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Email" formControlName="email">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Fonction
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<nz-select formControlName="fonction" [nzPlaceHolder]="'Choisir une fonction'">
|
|
||||||
<nz-option nzLabel="Admin" nzValue="Admin"></nz-option>
|
|
||||||
<nz-option nzLabel="Visiteur" nzValue="Visiteur"></nz-option>
|
|
||||||
<nz-option nzLabel="Partenaire" nzValue="Partenaire"></nz-option>
|
|
||||||
</nz-select>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Mot de passe
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="password">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
|
|
||||||
import {GetUserDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-profil-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
NzSelectComponent,
|
|
||||||
NzOptionComponent
|
|
||||||
],
|
|
||||||
templateUrl: './profil-form.html',
|
|
||||||
styleUrl: './profil-form.css',
|
|
||||||
})
|
|
||||||
export class ProfilForm {
|
|
||||||
profilForm: FormGroup = new FormGroup({
|
|
||||||
name: new FormControl<string>(null, [Validators.required]),
|
|
||||||
email: new FormControl<string>(null, [Validators.required]),
|
|
||||||
fonction: new FormControl<string>(null, [Validators.required]),
|
|
||||||
password: new FormControl<string>(null, [Validators.required])
|
|
||||||
})
|
|
||||||
|
|
||||||
user = input<GetUserDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.user()) {
|
|
||||||
this.profilForm.patchValue({
|
|
||||||
name: this.user().name,
|
|
||||||
email: this.user().email,
|
|
||||||
fonction: this.user().fonction,
|
|
||||||
password: this.user().password
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
.fontProfil {
|
|
||||||
font-family: "Arial", cursive;
|
|
||||||
text-shadow: 2px 2px #8C731A, -2px -2px #8C731A;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.festive2 {
|
|
||||||
font-family: "Comic Sans MS", cursive;
|
|
||||||
color: #001529;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<div class="ml-110 cursor-pointer">
|
|
||||||
<app-modal-nav nameIcon="edit" name="Modification du profil">
|
|
||||||
<app-profil-form [user]=""></app-profil-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl fontProfil">
|
|
||||||
{{ getInitial(data.name) }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<p class="text-3xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
|
|
||||||
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
|
|
||||||
<p class="text-xl festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
|
|
||||||
</div>
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {UserInfo} from "../../interfaces/user.interface";
|
|
||||||
import {ProfilForm} from "../profil-form/profil-form";
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-profil',
|
|
||||||
imports: [
|
|
||||||
ProfilForm,
|
|
||||||
ModalNav
|
|
||||||
],
|
|
||||||
templateUrl: './profil.html',
|
|
||||||
styleUrl: './profil.css',
|
|
||||||
})
|
|
||||||
export class Profil {
|
|
||||||
data: UserInfo =
|
|
||||||
{
|
|
||||||
name: 'Mathys Sanchez Vendé',
|
|
||||||
email: 'mathys.sanchez@vende.fr',
|
|
||||||
fonction: 'admin',
|
|
||||||
};
|
|
||||||
|
|
||||||
getInitial(name: string): string {
|
|
||||||
if (!name || name.trim() === '') return '?';
|
|
||||||
return name[0].toUpperCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="purchaseOrderForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="12" nzRequired>
|
|
||||||
Conditions générales de vente
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Conditions générales de vente" formControlName="purchaseConditions">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {GetPurchaseOrderDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-purchase-order-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './purchase-order-form.html',
|
|
||||||
styleUrl: './purchase-order-form.css',
|
|
||||||
})
|
|
||||||
export class PurchaseOrderForm {
|
|
||||||
purchaseOrderForm: FormGroup = new FormGroup({
|
|
||||||
purchaseConditions: new FormControl<string>(null,[Validators.required])
|
|
||||||
})
|
|
||||||
|
|
||||||
purchaseOrder= input<GetPurchaseOrderDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.purchaseOrder()) {
|
|
||||||
this.purchaseOrderForm.patchValue({
|
|
||||||
purchaseConditions: this.purchaseOrder().purchaseConditions,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<nz-table [nzData]="purchaseOrders()"
|
|
||||||
[nzLoading]="purchaseOrdersLoading()"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
class="mr-7">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Numéro</th>
|
|
||||||
<th>Conditions de vente</th>
|
|
||||||
<th>Fournisseur</th>
|
|
||||||
<th>Produits</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (purchaseOrder of purchaseOrders(); track purchaseOrder.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{ purchaseOrder.id }}</td>
|
|
||||||
<td>{{purchaseOrder.purchaseConditions}}</td>
|
|
||||||
<td>Fournisseur ???</td>
|
|
||||||
<td>
|
|
||||||
<app-modal-button type="link" name="Voir les produits" size="45%">
|
|
||||||
<div style="max-height: 400px; overflow-y: auto;">
|
|
||||||
<nz-table [nzData]="purchaseOrders()"
|
|
||||||
[nzFrontPagination]="false">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Nom</th>
|
|
||||||
<th>Reférence</th>
|
|
||||||
<th>Prix</th>
|
|
||||||
<th>Quantité</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (product of purchaseOrder.products; track product.productId) {
|
|
||||||
<tr>
|
|
||||||
<td>{{product.productName}}</td>
|
|
||||||
<td>{{product.productReferences}}</td>
|
|
||||||
<td>Prix €€€€</td>
|
|
||||||
<td>{{product.quantity}}</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, purchaseOrder.id)"/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</app-modal-button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(purchaseOrder)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-red-700"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="interaction" nzTheme="outline" (click)="transfer()" class="cursor-pointer text-blue-700"/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modification des conditions de vente'" (ok)="onModalOk(selectedPurchaseOrder.id, purchaseOrderForm, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-purchase-order-form #purchaseOrderForm [purchaseOrder]="selectedPurchaseOrder"></app-purchase-order-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.purchaseOrderId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
|
|
||||||
<app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {PurchaseOrderForm} from "../purchase-order-form/purchase-order-form";
|
|
||||||
import {ModalButton} from "../modal-button/modal-button";
|
|
||||||
import {
|
|
||||||
GetPurchaseOrderDto,
|
|
||||||
GetPurchaseProductDto,
|
|
||||||
PurchaseordersService,
|
|
||||||
PurchaseproductsService
|
|
||||||
} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
import {FileService} from "../../services/file.service";
|
|
||||||
import {QuantityForm} from "../quantity-form/quantity-form";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-purchase-order-table',
|
|
||||||
imports: [
|
|
||||||
ModalNav,
|
|
||||||
NzDividerComponent,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
PurchaseOrderForm,
|
|
||||||
ModalButton,
|
|
||||||
QuantityForm,
|
|
||||||
],
|
|
||||||
templateUrl: './purchase-order-table.html',
|
|
||||||
styleUrl: './purchase-order-table.css',
|
|
||||||
})
|
|
||||||
export class PurchaseOrderTable implements OnInit {
|
|
||||||
private purchaseOrdersService = inject(PurchaseordersService);
|
|
||||||
private notificationService = inject(NzNotificationService);
|
|
||||||
private fileService = inject(FileService);
|
|
||||||
private purchaseProductService = inject(PurchaseproductsService)
|
|
||||||
purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
|
|
||||||
purchaseOrdersLoading = signal<boolean>(false);
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchPurchaseOrder();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchPurchaseOrder() {
|
|
||||||
this.purchaseOrdersLoading.set(true)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const purchaseOrders = await firstValueFrom(this.purchaseOrdersService.getAllPurchaseOrderEndpoint())
|
|
||||||
this.purchaseOrders.set(purchaseOrders);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.purchaseOrdersLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(purchaseOrderId:number) {
|
|
||||||
this.purchaseOrdersLoading.set(true)
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.purchaseOrdersService.deletePurchaseOrderEndpoint(purchaseOrderId))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.purchaseOrdersLoading.set(false)
|
|
||||||
await this.fetchPurchaseOrder();
|
|
||||||
}
|
|
||||||
|
|
||||||
async export(purchaseOrderId: number){
|
|
||||||
this.purchaseOrdersLoading.set(true)
|
|
||||||
try {
|
|
||||||
const pdf = await firstValueFrom(
|
|
||||||
this.purchaseOrdersService.getPurchaseOrderPdfEndpoint(purchaseOrderId, "response")
|
|
||||||
);
|
|
||||||
this.fileService.downloadBlob(pdf)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de générer un PDF'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.purchaseOrdersLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
transfer() {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updatePurchaseOrderComponent: PurchaseOrderForm) {
|
|
||||||
if (updatePurchaseOrderComponent.purchaseOrderForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const purchaseOrders = updatePurchaseOrderComponent.purchaseOrderForm.getRawValue();
|
|
||||||
await firstValueFrom(this.purchaseOrdersService.patchPurchaseOrderPurchaseConditionsEndpoint(id, purchaseOrders))
|
|
||||||
|
|
||||||
this.notificationService.success('Success', 'Bon de commande modifié')
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async deleteProduct(productId: number, purchaseOrderId: number) {
|
|
||||||
this.purchaseOrdersLoading.set(true)
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.purchaseProductService.deletePurchaseProductEndpoint(productId, purchaseOrderId))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.purchaseOrdersLoading.set(false)
|
|
||||||
await this.fetchPurchaseOrder();
|
|
||||||
}
|
|
||||||
|
|
||||||
async editQuantity(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm) {
|
|
||||||
if (updateQuantityComponent.quantityForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const quantity = updateQuantityComponent.quantityForm.getRawValue();
|
|
||||||
await firstValueFrom(this.purchaseProductService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
|
|
||||||
|
|
||||||
this.notificationService.success('Success', 'Quantité modifiée')
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedPurchaseOrder: GetPurchaseOrderDto | null = null;
|
|
||||||
openEditModal(purchaseOrder: GetPurchaseOrderDto) {
|
|
||||||
this.selectedPurchaseOrder = { ...purchaseOrder };
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedPurchaseOrder) return;
|
|
||||||
|
|
||||||
await this.edit(id, updatePurchaseOrderComponent);
|
|
||||||
updatePurchaseOrderComponent.purchaseOrderForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchPurchaseOrder();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedQuantity: GetPurchaseProductDto | null = null;
|
|
||||||
openEditQuantityModal(quantity: GetPurchaseProductDto) {
|
|
||||||
this.selectedQuantity = { ...quantity };
|
|
||||||
this.modalQuantity().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalQuantityOk(productId: number, purchaseOrderId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedQuantity) return;
|
|
||||||
|
|
||||||
await this.editQuantity(productId, purchaseOrderId, updateQuantityComponent);
|
|
||||||
updateQuantityComponent.quantityForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchPurchaseOrder();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="quantityForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Quantité
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input type="number" placeholder="0" formControlName="quantity">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {GetDelivererDto, GetPurchaseProductDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-quantity-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './quantity-form.html',
|
|
||||||
styleUrl: './quantity-form.css',
|
|
||||||
})
|
|
||||||
export class QuantityForm {
|
|
||||||
quantityForm: FormGroup = new FormGroup({
|
|
||||||
quantity: new FormControl<number>(null, [Validators.required])
|
|
||||||
})
|
|
||||||
|
|
||||||
quantity= input<GetPurchaseProductDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.quantity()) {
|
|
||||||
this.quantityForm.patchValue({
|
|
||||||
quantity: this.quantity().quantity
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="quotationForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9">
|
|
||||||
Message du devis
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<input nz-input placeholder="Message du devis" formControlName="message">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Conditions de vente
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<input nz-input placeholder="Conditions de vente" formControlName="conditionsSale">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {GetQuotationDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-quotation-form',
|
|
||||||
imports: [
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './quotation-form.html',
|
|
||||||
styleUrl: './quotation-form.css',
|
|
||||||
})
|
|
||||||
export class QuotationForm {
|
|
||||||
quotationForm: FormGroup = new FormGroup({
|
|
||||||
message: new FormControl<string>(null, [Validators.required]),
|
|
||||||
conditionsSale: new FormControl<string>(null, [Validators.required]),
|
|
||||||
})
|
|
||||||
|
|
||||||
quotation= input<GetQuotationDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.quotation()) {
|
|
||||||
this.quotationForm.patchValue({
|
|
||||||
message: this.quotation().message,
|
|
||||||
conditionsSale: this.quotation().conditionsSale,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<nz-table class="mr-7"
|
|
||||||
[nzData]="quotations()"
|
|
||||||
[nzLoading]="quotationsLoading()"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Numéro de Devis</th>
|
|
||||||
<th>Message</th>
|
|
||||||
<th>Conditions de vente</th>
|
|
||||||
<th>Produit</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead >
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (quotation of quotations(); track quotation.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{quotation.id}}</td>
|
|
||||||
<td>{{quotation.message}}</td>
|
|
||||||
<td>{{quotation.conditionsSale}}</td>
|
|
||||||
<td>
|
|
||||||
<app-modal-button type="link" name="Voir les produits" size="45%">
|
|
||||||
<div style="max-height: 400px; overflow-y: auto;">
|
|
||||||
<nz-table>
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Réference</th>
|
|
||||||
<th>Nom</th>
|
|
||||||
<th>Prix</th>
|
|
||||||
<th>Quantité</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (product of quotation.products; track product.productId) {
|
|
||||||
<tr>
|
|
||||||
<td>{{ product.productReferences }}</td>
|
|
||||||
<td>{{ product.productName }}</td>
|
|
||||||
<td>Price ???</td>
|
|
||||||
<td>{{ product.quantity }}</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditQuantityModal(product)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="deleteProduct(product.productId, quotation.id)"/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</div>
|
|
||||||
</app-modal-button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700" />
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(quotation)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(quotation.id)"/>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline" class="cursor-pointer text-green-700"/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modification du devis'" (ok)="onModalOk(selectedQuotation.id, quotationForm, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-quotation-form #quotationForm [quotation]="selectedQuotation"></app-quotation-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'" (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.quotationId, quantityForm, modalQuantity)" (cancel)="onModalCancel(modalQuantity)">
|
|
||||||
<app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {ModalButton} from "../modal-button/modal-button";
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {QuotationForm} from "../quotation-form/quotation-form";
|
|
||||||
import {
|
|
||||||
GetQuotationDto,
|
|
||||||
GetQuotationProductDto,
|
|
||||||
QuotationproductsService,
|
|
||||||
QuotationsService
|
|
||||||
} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
import {FileService} from "../../services/file.service";
|
|
||||||
import {QuantityForm} from "../quantity-form/quantity-form";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-quotation-table',
|
|
||||||
imports: [
|
|
||||||
ModalButton,
|
|
||||||
ModalNav,
|
|
||||||
NzDividerComponent,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
QuotationForm,
|
|
||||||
QuantityForm,
|
|
||||||
],
|
|
||||||
templateUrl: './quotation-table.html',
|
|
||||||
styleUrl: './quotation-table.css',
|
|
||||||
})
|
|
||||||
|
|
||||||
export class QuotationTable implements OnInit {
|
|
||||||
private quotationsService = inject(QuotationsService);
|
|
||||||
private notificationService = inject(NzNotificationService);
|
|
||||||
private quotationProductsService = inject(QuotationproductsService)
|
|
||||||
private fileService = inject(FileService);
|
|
||||||
quotations = signal<GetQuotationDto[]>([]);
|
|
||||||
quotationsLoading = signal<boolean>(false);
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
modalQuantity = viewChild.required<ModalNav>('modalQuantity');
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchQuotations();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchQuotations() {
|
|
||||||
this.quotationsLoading.set(true)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
|
|
||||||
this.quotations.set(quotations);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.quotationsLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(quotation:number) {
|
|
||||||
this.quotationsLoading.set(true)
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.quotationsService.deleteQuotationEndpoint(quotation))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.quotationsLoading.set(false)
|
|
||||||
await this.fetchQuotations();
|
|
||||||
}
|
|
||||||
|
|
||||||
async export(quotationId: number){
|
|
||||||
this.quotationsLoading.set(true)
|
|
||||||
try {
|
|
||||||
const pdf = await firstValueFrom(
|
|
||||||
this.quotationsService.getQuotationPdfEndpoint(quotationId, "response")
|
|
||||||
);
|
|
||||||
this.fileService.downloadBlob(pdf)
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de générer un PDF'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.quotationsLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateQuotationComponent: QuotationForm) {
|
|
||||||
if (updateQuotationComponent.quotationForm.invalid) {
|
|
||||||
this.notificationService.error('Erreur', 'Formulaire invalide');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const quotations = updateQuotationComponent.quotationForm.getRawValue();
|
|
||||||
await firstValueFrom(this.quotationsService.updateQuotationEndpoint(id, quotations));
|
|
||||||
this.notificationService.success('Success', 'Devis modifié')
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async deleteProduct(productId: number, quotationId: number) {
|
|
||||||
this.quotationsLoading.set(true)
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.quotationProductsService.deleteQuotationProductEndpoint(productId, quotationId))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.quotationsLoading.set(false)
|
|
||||||
await this.fetchQuotations();
|
|
||||||
}
|
|
||||||
|
|
||||||
async editQuantity(productId: number, quotationId: number, updateQuantityComponent: QuantityForm) {
|
|
||||||
if (updateQuantityComponent.quantityForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const quantity = updateQuantityComponent.quantityForm.getRawValue();
|
|
||||||
await firstValueFrom(this.quotationProductsService.patchQuotationProductQuantityEndpoint(productId, quotationId, quantity))
|
|
||||||
|
|
||||||
this.notificationService.success('Success', 'Quantité modifiée')
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedQuotation: GetQuotationDto | null = null;
|
|
||||||
openEditModal(quotation: GetQuotationDto) {
|
|
||||||
this.selectedQuotation = { ...quotation };
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(id: number, updateQuotationComponent: QuotationForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedQuotation) return;
|
|
||||||
|
|
||||||
await this.edit(id, updateQuotationComponent);
|
|
||||||
updateQuotationComponent.quotationForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchQuotations();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedQuantity: GetQuotationProductDto | null = null;
|
|
||||||
openEditQuantityModal(quantity: GetQuotationProductDto) {
|
|
||||||
this.selectedQuantity = { ...quantity };
|
|
||||||
this.modalQuantity().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalQuantityOk(productId: number, quotationId: number, updateQuantityComponent: QuantityForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedQuantity) return;
|
|
||||||
|
|
||||||
await this.editQuantity(productId, quotationId, updateQuantityComponent);
|
|
||||||
updateQuantityComponent.quantityForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchQuotations();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
/* From Uiverse.io by LightAndy1 */
|
|
||||||
.group {
|
|
||||||
box-shadow: 0 1px 2px 1px #001529;
|
|
||||||
border-radius: 15px;
|
|
||||||
padding: 0.1rem 0.5rem 0.1rem 1rem;
|
|
||||||
display: flex;
|
|
||||||
line-height: 28px;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
width: 100%;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 28px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 8px;
|
|
||||||
outline: none;
|
|
||||||
background-color: #f3f3f4;
|
|
||||||
color: #0d0c22;
|
|
||||||
transition: 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input::placeholder {
|
|
||||||
color: #9e9ea7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus,
|
|
||||||
input:hover {
|
|
||||||
outline: none;
|
|
||||||
border-color: #40A9FF;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 0 0 4px rgba(199, 199, 197, 0.1);
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="searchForm">
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-control nzSpan="12">
|
|
||||||
<div class="group">
|
|
||||||
<nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl" (click)="OnSearch()"></nz-icon>
|
|
||||||
<input class="input" placeholder="Rechercher" formControlName="searchValue" (input)="OnSearch()"/>
|
|
||||||
</div>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { Component, output } from '@angular/core';
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent} from "ng-zorro-antd/form";
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-search',
|
|
||||||
imports: [
|
|
||||||
NzIconDirective,
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './search.html',
|
|
||||||
styleUrl: './search.css',
|
|
||||||
})
|
|
||||||
export class Search {
|
|
||||||
searchForm: FormGroup = new FormGroup({
|
|
||||||
searchValue: new FormControl<string>(null)
|
|
||||||
})
|
|
||||||
|
|
||||||
searchEvent = output<string>();
|
|
||||||
|
|
||||||
OnSearch(): void {
|
|
||||||
const raw = this.searchForm.controls['searchValue'].value ?? '';
|
|
||||||
const value = String(raw).trim();
|
|
||||||
this.searchEvent.emit(value);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
/* Container de chaque ligne */
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center; /* centre verticalement les images et champs */
|
|
||||||
gap: 24px; /* espace entre preview et champ */
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Colonne gauche : preview */
|
|
||||||
.row-left {
|
|
||||||
width: 180px; /* fixe la largeur pour aligner toutes les images */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image de preview */
|
|
||||||
.row-left img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 80px;
|
|
||||||
object-fit: contain;
|
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #fafafa;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Colonne droite : input */
|
|
||||||
.row-right {
|
|
||||||
flex: 1; /* prend le reste de l'espace */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Retire la largeur forcée du nz-form-label et nz-form-control */
|
|
||||||
.row-right nz-form-item nz-form-label,
|
|
||||||
.row-right nz-form-item nz-form-control {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
|
|
||||||
|
|
||||||
<!-- Logo -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="row-left">
|
|
||||||
<img [src]="setting.logo" alt="logo">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-right">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzSpan="9">Logo</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="25">
|
|
||||||
<input nz-input type="file" formControlName="logo" />
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Signature -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="row-left">
|
|
||||||
<img [src]="setting.signature" alt="logo">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-right">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzSpan="9">Signature</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="25">
|
|
||||||
<input nz-input type="file" formControlName="signature" />
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {SettingInfo} from "../../interfaces/setting.interface";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-setting-form',
|
|
||||||
imports: [
|
|
||||||
FormsModule,
|
|
||||||
NzColDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './setting-form.html',
|
|
||||||
styleUrl: './setting-form.css',
|
|
||||||
})
|
|
||||||
export class SettingForm {
|
|
||||||
settingForm: FormGroup = new FormGroup({
|
|
||||||
logo: new FormControl<string>(null),
|
|
||||||
signature: new FormControl<string>(null)
|
|
||||||
})
|
|
||||||
|
|
||||||
submitForm() {
|
|
||||||
// Pour annuler si le formulaire est invalide
|
|
||||||
if (this.settingForm.invalid) return;
|
|
||||||
|
|
||||||
// Pour obtenir la valeur du formulaire
|
|
||||||
console.log(this.settingForm.getRawValue())
|
|
||||||
|
|
||||||
// Pour vider le formulaire
|
|
||||||
this.settingForm.reset()
|
|
||||||
}
|
|
||||||
|
|
||||||
setting: SettingInfo = {
|
|
||||||
logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
|
|
||||||
signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="stockForm">
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="15" nzRequired>
|
|
||||||
Quantité minimale du produit
|
|
||||||
</nz-form-label>
|
|
||||||
|
|
||||||
<nz-form-control nzSpan="4" nzErrorTip="Requis">
|
|
||||||
<input nz-input type="number" placeholder="12345" formControlName="minimalQuantity">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</form>
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {GetProductDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-stock-form',
|
|
||||||
imports: [
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
NzColDirective,
|
|
||||||
NzFormDirective,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
NzFlexDirective
|
|
||||||
],
|
|
||||||
templateUrl: './stock-form.html',
|
|
||||||
styleUrl: './stock-form.css',
|
|
||||||
})
|
|
||||||
export class StockForm {
|
|
||||||
stockForm = new FormGroup({
|
|
||||||
id: new FormControl<number>(null),
|
|
||||||
minimalQuantity: new FormControl<number>(null, [Validators.required])
|
|
||||||
})
|
|
||||||
|
|
||||||
product= input<GetProductDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.product()) {
|
|
||||||
this.stockForm.patchValue({
|
|
||||||
id: this.product().id,
|
|
||||||
minimalQuantity: this.product().minimalQuantity,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
<nz-table
|
|
||||||
[nzData]="filteredProducts()"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
[nzLoading]="productsLoading()"
|
|
||||||
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th nzWidth="40px">
|
|
||||||
<label
|
|
||||||
nz-checkbox
|
|
||||||
[(ngModel)]="checked"
|
|
||||||
[nzIndeterminate]="indeterminate"
|
|
||||||
(ngModelChange)="onAllChecked($event)"
|
|
||||||
></label>
|
|
||||||
</th>
|
|
||||||
<th>Nom</th>
|
|
||||||
<th>Référence</th>
|
|
||||||
<th>Nec</th>
|
|
||||||
<th>Calibre</th>
|
|
||||||
<th>Poids</th>
|
|
||||||
<th>Durée</th>
|
|
||||||
<th>Quantité</th>
|
|
||||||
<th>Limite</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (product of filteredProducts(); track product.id) {
|
|
||||||
<tr>
|
|
||||||
<td nzWidth="40px">
|
|
||||||
<label
|
|
||||||
nz-checkbox
|
|
||||||
[ngModel]="setOfCheckedId.has(product.id)"
|
|
||||||
(ngModelChange)="onItemChecked(product.id, $event)"
|
|
||||||
></label>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>{{ product.name }}</td>
|
|
||||||
<td>{{ product.references }}</td>
|
|
||||||
<td>{{ product.nec }}</td>
|
|
||||||
<td>{{ product.caliber }}</td>
|
|
||||||
<td>{{ product.weight }}</td>
|
|
||||||
<td>{{ product.duration }}</td>
|
|
||||||
<td>{{ product.totalQuantity }}</td>
|
|
||||||
<td>{{ product.minimalQuantity }}</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(product)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)" class="text-red-600 cursor-pointer"></nz-icon>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedProduct.id, stockForm, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-stock-form #stockForm [product]="selectedProduct"></app-stock-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,204 +0,0 @@
|
|||||||
import {Component, computed, inject, OnInit, output, signal, viewChild} from '@angular/core';
|
|
||||||
import {NzTableComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {StockForm} from "../stock-form/stock-form";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {FormsModule} from "@angular/forms";
|
|
||||||
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
|
|
||||||
import {GetProductDto, ProductsService, WarehouseproductsService} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
|
|
||||||
interface ProductWithQuantity extends GetProductDto {
|
|
||||||
totalQuantity?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-stock-table',
|
|
||||||
imports: [
|
|
||||||
NzTableComponent,
|
|
||||||
ModalNav,
|
|
||||||
NzIconDirective,
|
|
||||||
StockForm,
|
|
||||||
NzDividerComponent,
|
|
||||||
FormsModule,
|
|
||||||
NzCheckboxComponent,
|
|
||||||
NzThMeasureDirective,
|
|
||||||
],
|
|
||||||
templateUrl: './stock-table.html',
|
|
||||||
styleUrl: './stock-table.css',
|
|
||||||
})
|
|
||||||
|
|
||||||
export class StockTable implements OnInit {
|
|
||||||
private productsService = inject(ProductsService);
|
|
||||||
private wareHousseProductsService = inject(WarehouseproductsService)
|
|
||||||
private notificationService = inject(NzNotificationService)
|
|
||||||
products = signal<ProductWithQuantity[]>([]);
|
|
||||||
productsLoading = signal<boolean>(false);
|
|
||||||
updateProduct = viewChild.required<StockForm>('stockForm');
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
|
|
||||||
checked = false;
|
|
||||||
indeterminate = false;
|
|
||||||
setOfCheckedId = new Set<number>();
|
|
||||||
selectionChange = output<boolean>()
|
|
||||||
currentPageData: GetProductDto[] = [];
|
|
||||||
|
|
||||||
private searchQuery = signal<string>('');
|
|
||||||
|
|
||||||
filteredProducts = computed(() => {
|
|
||||||
const q = this.searchQuery().toLowerCase().trim();
|
|
||||||
|
|
||||||
if (!q) return this.products();
|
|
||||||
|
|
||||||
return this.products().filter(s => {
|
|
||||||
const name = (s.name ?? '').toLowerCase();
|
|
||||||
return name.includes(q);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
applySearch(query: string) {
|
|
||||||
this.searchQuery.set(query);
|
|
||||||
}
|
|
||||||
get hasSelection(): boolean {
|
|
||||||
return this.setOfCheckedId.size > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateCheckedSet(id: number, checked: boolean): void {
|
|
||||||
if (checked) this.setOfCheckedId.add(id);
|
|
||||||
else this.setOfCheckedId.delete(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
onItemChecked(id: number, checked: boolean): void {
|
|
||||||
this.updateCheckedSet(id, checked);
|
|
||||||
this.refreshCheckedStatus();
|
|
||||||
}
|
|
||||||
|
|
||||||
onAllChecked(checked: boolean): void {
|
|
||||||
this.currentPageData.forEach(item =>
|
|
||||||
this.updateCheckedSet(item.id, checked)
|
|
||||||
);
|
|
||||||
this.refreshCheckedStatus();
|
|
||||||
}
|
|
||||||
|
|
||||||
onCurrentPageDataChange($event: GetProductDto[]): void {
|
|
||||||
this.currentPageData = $event;
|
|
||||||
this.refreshCheckedStatus();
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshCheckedStatus(): void {
|
|
||||||
const total = this.currentPageData.length;
|
|
||||||
const checkedCount = this.currentPageData.filter(p => this.setOfCheckedId.has(p.id)).length;
|
|
||||||
|
|
||||||
this.checked = checkedCount === total;
|
|
||||||
this.indeterminate = checkedCount > 0 && checkedCount < total;
|
|
||||||
|
|
||||||
setTimeout(() => this.selectionChange.emit(this.hasSelection));
|
|
||||||
}
|
|
||||||
|
|
||||||
get selectedIds() {
|
|
||||||
return Array.from(this.setOfCheckedId);
|
|
||||||
}
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchProducts();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchTotalQuantity(product: ProductWithQuantity) {
|
|
||||||
try {
|
|
||||||
const res = await firstValueFrom(
|
|
||||||
this.wareHousseProductsService.getTotalQuantityEndpoint(product.id)
|
|
||||||
);
|
|
||||||
product.totalQuantity = res.totalQuantity;
|
|
||||||
} catch (e) {
|
|
||||||
product.totalQuantity = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchProducts() {
|
|
||||||
this.productsLoading.set(true);
|
|
||||||
try {
|
|
||||||
const products = await firstValueFrom(this.productsService.getAllProductsEndpoint());
|
|
||||||
|
|
||||||
// transforme chaque produit en ProductWithQuantity
|
|
||||||
const productsWithQuantity: ProductWithQuantity[] = products.map(p => ({ ...p }));
|
|
||||||
|
|
||||||
this.products.set(productsWithQuantity);
|
|
||||||
|
|
||||||
// récupérer la quantité pour chaque produit en parallèle
|
|
||||||
await Promise.all(productsWithQuantity.map(p => this.fetchTotalQuantity(p)));
|
|
||||||
|
|
||||||
// déclencher la mise à jour du signal
|
|
||||||
this.products.set([...productsWithQuantity]);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.productsLoading.set(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(productId:number) {
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
await this.fetchProducts();
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateProductComponent: StockForm) {
|
|
||||||
if (updateProductComponent.stockForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const products = updateProductComponent.stockForm.getRawValue();
|
|
||||||
await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products))
|
|
||||||
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Limite de stock modifiée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur lors de la modification'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedProduct: GetProductDto | null = null;
|
|
||||||
openEditModal(product: GetProductDto) {
|
|
||||||
this.selectedProduct = { ...product};
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(productId: number, updateProductComponent: StockForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedProduct) return;
|
|
||||||
|
|
||||||
await this.edit(productId, updateProductComponent);
|
|
||||||
updateProductComponent.stockForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchProducts();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
<form nz-form nzLayout="horizontal" [formGroup]="supplierForm">
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Fournisseur
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Fournisseur" formControlName="name">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Email
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Email" formControlName="email">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Téléphone
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Téléphone" formControlName="phone">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Adresse
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Adresse" formControlName="address">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Code Postal
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Code Postal" formControlName="zipCode">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Ville
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input placeholder="Ville" formControlName="city">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
<nz-form-item nz-flex>
|
|
||||||
<nz-form-label nzSpan="9" nzRequired>
|
|
||||||
Délai Moyen
|
|
||||||
</nz-form-label>
|
|
||||||
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
|
|
||||||
<input nz-input type="number" placeholder="Délai Moyen" formControlName="deliveryDelay">
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import {Component, effect, input} from '@angular/core';
|
|
||||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
|
||||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
|
||||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
|
||||||
import {NzInputDirective} from "ng-zorro-antd/input";
|
|
||||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
|
||||||
import {GetSupplierDto} from "../../services/api";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-supplier-form',
|
|
||||||
imports: [
|
|
||||||
NzColDirective,
|
|
||||||
NzFlexDirective,
|
|
||||||
NzFormControlComponent,
|
|
||||||
NzFormDirective,
|
|
||||||
NzFormItemComponent,
|
|
||||||
NzFormLabelComponent,
|
|
||||||
NzInputDirective,
|
|
||||||
ReactiveFormsModule
|
|
||||||
],
|
|
||||||
templateUrl: './supplier-form.html',
|
|
||||||
styleUrl: './supplier-form.css',
|
|
||||||
})
|
|
||||||
export class SupplierForm {
|
|
||||||
supplierForm: FormGroup = new FormGroup({
|
|
||||||
name: new FormControl<string>(null, [Validators.required]),
|
|
||||||
email: new FormControl<string>(null, [Validators.required]),
|
|
||||||
phone: new FormControl<string>(null, [Validators.required]),
|
|
||||||
address: new FormControl<string>(null, [Validators.required]),
|
|
||||||
zipCode: new FormControl<string>(null, [Validators.required]),
|
|
||||||
city: new FormControl<string>(null, [Validators.required]),
|
|
||||||
deliveryDelay: new FormControl<string>(null, [Validators.required]),
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
supplier= input<GetSupplierDto>();
|
|
||||||
constructor() {
|
|
||||||
effect(() => {
|
|
||||||
if (this.supplier()) {
|
|
||||||
this.supplierForm.patchValue({
|
|
||||||
name: this.supplier().name,
|
|
||||||
email: this.supplier().email,
|
|
||||||
phone: this.supplier().phone,
|
|
||||||
address: this.supplier().address,
|
|
||||||
zipCode: this.supplier().zipCode,
|
|
||||||
city: this.supplier().city,
|
|
||||||
deliveryDelay: this.supplier().deliveryDelay,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
<nz-table [nzData]="filteredSuppliers()"
|
|
||||||
[nzLoading]="suppliersLoading()"
|
|
||||||
[nzFrontPagination]="false">
|
|
||||||
<thead>
|
|
||||||
<tr style="text-align: center">
|
|
||||||
<th>Nom</th>
|
|
||||||
<th>Téléphone</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Adresse</th>
|
|
||||||
<th>Code Postal</th>
|
|
||||||
<th>Ville</th>
|
|
||||||
<th>Délai moyen</th>
|
|
||||||
<th>Produits</th>
|
|
||||||
<th style="display: flex; align-items: center;">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody style="text-align: center">
|
|
||||||
@for (supplier of filteredSuppliers(); track supplier.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{ supplier.name }}</td>
|
|
||||||
<td>{{ supplier.phone }}</td>
|
|
||||||
<td>{{ supplier.email }}</td>
|
|
||||||
<td>{{ supplier.address }}</td>
|
|
||||||
<td>{{ supplier.zipCode }}</td>
|
|
||||||
<td>{{ supplier.city }}</td>
|
|
||||||
<td>{{ supplier.deliveryDelay }} jours</td>
|
|
||||||
<td>
|
|
||||||
<app-modal-button type="link" [name]="'Voir les produits'" size="45%">
|
|
||||||
<nz-table [nzData]="filteredSuppliers()" [nzFrontPagination]="false">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Produit</th>
|
|
||||||
<th>Référence</th>
|
|
||||||
<th>Prix</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (product of supplier.prices; track product.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{ product.productName }}</td>
|
|
||||||
<td>{{ product.productReferences }}</td>
|
|
||||||
<td>{{ product.sellingPrice }}€</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center justify-center space-x-2">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline"
|
|
||||||
class="cursor-pointer text-gray-600 hover:text-gray-900"
|
|
||||||
(click)="openEditProductModal(product, supplier.id)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-600 hover:text-red-800"
|
|
||||||
(click)="deleteProduct(product.productId, product.supplierId)"></nz-icon>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
</app-modal-button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div style="display: flex; align-items: center;">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
|
|
||||||
(click)="openEditModal(supplier)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
|
|
||||||
class="text-red-600 cursor-pointer"></nz-icon>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #supplierModal nameIcon="edit" [name]="'Modifier'"
|
|
||||||
(ok)="onModalOk(selectedSupplier?.id, supplierForm, supplierModal)"
|
|
||||||
(cancel)="onModalCancel(supplierModal)">
|
|
||||||
<app-supplier-form #supplierForm [supplier]="selectedSupplier"></app-supplier-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #productModal nameIcon="edit" [name]="'Modifier les prix des fournisseurs'"
|
|
||||||
(ok)="onModalProductOk(selectedProduct?.productId, selectedProductSupplierId, priceForm, productModal)"
|
|
||||||
(cancel)="onModalCancel(productModal)">
|
|
||||||
<app-price-form #priceForm [price]="selectedProduct"></app-price-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,169 +0,0 @@
|
|||||||
import {Component, computed, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {ModalButton} from "../modal-button/modal-button";
|
|
||||||
import {SupplierForm} from "../supplier-form/supplier-form";
|
|
||||||
import {GetPriceDto, GetSupplierDto, PricesService, SuppliersService} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
import {PriceForm} from "../price-form/price-form";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-supplier-table',
|
|
||||||
imports: [
|
|
||||||
ModalNav,
|
|
||||||
NzDividerComponent,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
ModalButton,
|
|
||||||
SupplierForm,
|
|
||||||
PriceForm,
|
|
||||||
],
|
|
||||||
templateUrl: './supplier-table.html',
|
|
||||||
styleUrl: './supplier-table.css',
|
|
||||||
})
|
|
||||||
|
|
||||||
export class SupplierTable implements OnInit {
|
|
||||||
private suppliersService = inject(SuppliersService);
|
|
||||||
private pricesService = inject(PricesService);
|
|
||||||
private notificationService = inject(NzNotificationService);
|
|
||||||
suppliers = signal<GetSupplierDto[]>([]);
|
|
||||||
suppliersLoading = signal<boolean>(false);
|
|
||||||
updateSupplier = viewChild.required<SupplierForm>('supplierForm');
|
|
||||||
supplierModal = viewChild.required<ModalNav>('supplierModal');
|
|
||||||
productModal = viewChild.required<ModalNav>('productModal');
|
|
||||||
selectedSupplier: GetSupplierDto | null = null;
|
|
||||||
selectedProduct: GetPriceDto | null = null;
|
|
||||||
selectedProductSupplierId: number | null = null;
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchSuppliers();
|
|
||||||
}
|
|
||||||
|
|
||||||
private searchQuery = signal<string>('');
|
|
||||||
|
|
||||||
filteredSuppliers = computed(() => {
|
|
||||||
const q = this.searchQuery().toLowerCase().trim();
|
|
||||||
|
|
||||||
if (!q) return this.suppliers();
|
|
||||||
|
|
||||||
return this.suppliers().filter(s => {
|
|
||||||
const name = (s.name ?? '').toLowerCase();
|
|
||||||
return name.includes(q);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
applySearch(query: string) {
|
|
||||||
this.searchQuery.set(query);
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchSuppliers() {
|
|
||||||
this.suppliersLoading.set(true);
|
|
||||||
try {
|
|
||||||
const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint());
|
|
||||||
this.suppliers.set(suppliers);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
|
|
||||||
}
|
|
||||||
this.suppliersLoading.set(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateSupplierComponent: SupplierForm) {
|
|
||||||
if (updateSupplierComponent.supplierForm.invalid) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const suppliers = updateSupplierComponent.supplierForm.getRawValue();
|
|
||||||
await firstValueFrom(this.suppliersService.updateSupplierEndpoint(id, suppliers));
|
|
||||||
this.notificationService.success('Success', 'Fournisseur modifié');
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(supplier: number) {
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier));
|
|
||||||
this.notificationService.success('Succès', 'Suppression effectuée');
|
|
||||||
await this.fetchSuppliers();
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Impossible de supprimer la ligne');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
openEditModal(supplier: GetSupplierDto) {
|
|
||||||
this.selectedSupplier = { ...supplier };
|
|
||||||
this.supplierModal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
openEditProductModal(product: GetPriceDto, supplierId: number) {
|
|
||||||
this.selectedProduct = { ...product };
|
|
||||||
this.selectedProductSupplierId = supplierId;
|
|
||||||
this.productModal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(supplierId: number | undefined, updateSupplierComponent: SupplierForm, modal: ModalNav) {
|
|
||||||
if (!supplierId || !this.selectedSupplier) return;
|
|
||||||
|
|
||||||
await this.edit(supplierId, updateSupplierComponent);
|
|
||||||
updateSupplierComponent.supplierForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchSuppliers();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalProductOk(
|
|
||||||
productId: number | undefined,
|
|
||||||
supplierId: number | null | undefined,
|
|
||||||
updateProductComponent: PriceForm,
|
|
||||||
modal: ModalNav
|
|
||||||
) {
|
|
||||||
if (productId == null || supplierId == null || !this.selectedProduct) {
|
|
||||||
this.notificationService.error('Erreur', 'Identifiants produit/fournisseur manquants');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.editPrice(productId, supplierId, updateProductComponent);
|
|
||||||
updateProductComponent.priceForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchSuppliers();
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async editPrice(productId: number, supplierId: number, updateProductComponent: PriceForm) {
|
|
||||||
if (updateProductComponent.priceForm.invalid) {
|
|
||||||
this.notificationService.error('Erreur', 'Erreur d\'écriture dans le formulaire');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const formValue = updateProductComponent.priceForm.getRawValue();
|
|
||||||
const body = {
|
|
||||||
productId,
|
|
||||||
supplierId,
|
|
||||||
sellingPrice: Number(formValue.price),
|
|
||||||
};
|
|
||||||
await firstValueFrom(this.pricesService.patchPriceEndpoint(productId, supplierId, body));
|
|
||||||
this.notificationService.success('Success', 'Prix modifié');
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
this.notificationService.error('Erreur', 'Erreur lors de la modification');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async deleteProduct(idProduct: number, idSupplier: number) {
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.pricesService.deletePriceEndpoint(idProduct, idSupplier));
|
|
||||||
this.notificationService.success('Succès', 'Produit supprimé');
|
|
||||||
await this.fetchSuppliers();
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error('Erreur', 'Impossible de supprimer le produit');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
/* Table globale */
|
|
||||||
nz-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px; /* espace entre les lignes */
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* En-tête */
|
|
||||||
nz-table thead tr {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 2px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table thead th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lignes du tableau */
|
|
||||||
nz-table tbody tr {
|
|
||||||
background-color: #fff;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-table tbody tr:hover {
|
|
||||||
background-color: #e6f7ff; /* survol */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules */
|
|
||||||
nz-table tbody td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons */
|
|
||||||
nz-table button[nz-button] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals dans le tableau */
|
|
||||||
nz-table app-modal {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dates (pour alignement et style) */
|
|
||||||
nz-table tbody td p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
nz-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nz-table tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
nz-table tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<nz-table [nzData]="users()"
|
|
||||||
[nzLoading]="usersLoading()"
|
|
||||||
[nzFrontPagination]="false"
|
|
||||||
class="mr-7">
|
|
||||||
<thead>
|
|
||||||
<tr class="text-center">
|
|
||||||
<th>Prénom</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Fonction</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="text-center">
|
|
||||||
@for (user of users(); track user.id) {
|
|
||||||
<tr>
|
|
||||||
<td>{{user.name}}</td>
|
|
||||||
<td>{{user.email}}</td>
|
|
||||||
<td>{{user.fonction}}</td>
|
|
||||||
<td>
|
|
||||||
<div style="justify-content: center; display: flex">
|
|
||||||
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
|
|
||||||
<nz-divider nzType="vertical"></nz-divider>
|
|
||||||
<div>
|
|
||||||
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="cursor-pointer text-red-700"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</nz-table>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser.id, updateUser, modalNav)" (cancel)="onModalCancel(modalNav)">
|
|
||||||
<app-profil-form #updateUser [user]="selectedUser"></app-profil-form>
|
|
||||||
</app-modal-nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
|
||||||
import {ModalNav} from "../modal-nav/modal-nav";
|
|
||||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
|
||||||
import {NzTableComponent} from "ng-zorro-antd/table";
|
|
||||||
import {ProfilForm} from "../profil-form/profil-form";
|
|
||||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
|
||||||
import {GetUserDto, UsersService} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-user-table',
|
|
||||||
imports: [
|
|
||||||
ModalNav,
|
|
||||||
NzIconDirective,
|
|
||||||
NzTableComponent,
|
|
||||||
ProfilForm,
|
|
||||||
NzDividerComponent
|
|
||||||
],
|
|
||||||
templateUrl: './user-table.html',
|
|
||||||
styleUrl: './user-table.css',
|
|
||||||
})
|
|
||||||
export class UserTable implements OnInit {
|
|
||||||
private usersService = inject(UsersService);
|
|
||||||
private notificationService = inject(NzNotificationService)
|
|
||||||
users = signal<GetUserDto[]>([]);
|
|
||||||
usersLoading = signal<boolean>(false);
|
|
||||||
updateUser = viewChild.required<ProfilForm>('profilForm');
|
|
||||||
modal = viewChild.required<ModalNav>('modalNav');
|
|
||||||
|
|
||||||
async ngOnInit() {
|
|
||||||
await this.fetchUsers();
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchUsers() {
|
|
||||||
this.usersLoading.set(true)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
|
|
||||||
this.users.set(users);
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur de communication avec l\'API'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
this.usersLoading.set(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(user:number) {
|
|
||||||
try {
|
|
||||||
await firstValueFrom(this.usersService.deleteUserEndpoint(user))
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Suppression effectuée'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Impossible de supprimer la ligne'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
await this.fetchUsers();
|
|
||||||
}
|
|
||||||
|
|
||||||
async edit(id: number, updateUserComponent: ProfilForm) {
|
|
||||||
if (updateUserComponent.profilForm.invalid) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const users = updateUserComponent.profilForm.getRawValue();
|
|
||||||
await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
|
|
||||||
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Utilisateur modifié'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur lors de la modification'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedUser: GetUserDto | null = null;
|
|
||||||
openEditModal(user: GetUserDto) {
|
|
||||||
this.selectedUser = { ...user };
|
|
||||||
this.modal().showModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
async onModalOk(userId: number, updateUserComponent: ProfilForm, modal: ModalNav) {
|
|
||||||
if (!this.selectedUser) return;
|
|
||||||
|
|
||||||
await this.edit(userId, updateUserComponent);
|
|
||||||
updateUserComponent.profilForm.reset();
|
|
||||||
modal.isVisible = false;
|
|
||||||
await this.fetchUsers();
|
|
||||||
}
|
|
||||||
onModalCancel(modal: ModalNav) {
|
|
||||||
modal.isVisible = false;
|
|
||||||
}
|
|
||||||
filterUser(input: string, option: any) {
|
|
||||||
return option.nzLabel.toLowerCase().includes(input.toLowerCase());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export interface NotifInfo {
|
|
||||||
author: string;
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
export interface SettingInfo {
|
|
||||||
logo: string;
|
|
||||||
signature: string;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export interface UserInfo {
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
fonction: string;
|
|
||||||
}
|
|
||||||
@@ -1,19 +1 @@
|
|||||||
<div class="flex mt-2">
|
<p>deliverer works!</p>
|
||||||
<app-modal-button #modalButton
|
|
||||||
type="primary"
|
|
||||||
name="Ajouter un transporteur"
|
|
||||||
(ok)="onModalOk()"
|
|
||||||
(cancel)="onModalCancel()"
|
|
||||||
size="35%">
|
|
||||||
|
|
||||||
<app-deliverer-form #delivererForm></app-deliverer-form>
|
|
||||||
</app-modal-button>
|
|
||||||
|
|
||||||
<div class="ml-95 w-150">
|
|
||||||
<app-search class="w-full"></app-search>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-1">
|
|
||||||
<app-deliverer-table #delivererTable></app-deliverer-table>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,62 +1,11 @@
|
|||||||
import {Component, inject, viewChild} from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import {ModalButton} from "../../components/modal-button/modal-button";
|
|
||||||
import {DelivererTable} from "../../components/deliverer-table/deliverer-table";
|
|
||||||
import {DelivererForm} from "../../components/deliverer-form/deliverer-form";
|
|
||||||
import {Search} from "../../components/search/search";
|
|
||||||
import {DeliverersService} from "../../services/api";
|
|
||||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
|
||||||
import {firstValueFrom} from "rxjs";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-deliverer',
|
selector: 'app-deliverer',
|
||||||
imports: [
|
imports: [],
|
||||||
ModalButton,
|
|
||||||
DelivererTable,
|
|
||||||
DelivererForm,
|
|
||||||
Search
|
|
||||||
],
|
|
||||||
templateUrl: './deliverer.html',
|
templateUrl: './deliverer.html',
|
||||||
styleUrl: './deliverer.css',
|
styleUrl: './deliverer.css',
|
||||||
})
|
})
|
||||||
export class Deliverer {
|
export class Deliverer {
|
||||||
modal = viewChild.required<ModalButton>('modalButton');
|
|
||||||
createDeliverer = viewChild.required<DelivererForm>('delivererForm');
|
|
||||||
delivererTable = viewChild.required<DelivererTable>('delivererTable');
|
|
||||||
private deliverersService = inject(DeliverersService);
|
|
||||||
private notificationService = inject(NzNotificationService)
|
|
||||||
|
|
||||||
async onModalOk() {
|
|
||||||
await this.addDeliverer()
|
|
||||||
this.createDeliverer().delivererForm.reset();
|
|
||||||
this.modal().isVisible = false;
|
|
||||||
await this.delivererTable().fetchDeliverers()
|
|
||||||
}
|
|
||||||
|
|
||||||
onModalCancel() {
|
|
||||||
this.modal().isVisible = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async addDeliverer() {
|
|
||||||
if (this.createDeliverer().delivererForm.invalid)
|
|
||||||
{
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'écriture dans le formulaire'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const deliverers = this.createDeliverer().delivererForm.getRawValue();
|
|
||||||
await firstValueFrom(this.deliverersService.createDelivererEndpoint(deliverers))
|
|
||||||
|
|
||||||
this.notificationService.success(
|
|
||||||
'Success',
|
|
||||||
'Transporteur enregistré'
|
|
||||||
)
|
|
||||||
} catch (e) {
|
|
||||||
this.notificationService.error(
|
|
||||||
'Erreur',
|
|
||||||
'Erreur d\'enregistrement'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user