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

added create quotation function and edit end delete product in quotation table

Browse Source
This commit is contained in:
sanchezvem
2025-12-13 15:50:59 +01:00
parent 9ebe8ab37e
commit 8b7d48779e
16 changed files with 392 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

@@ -0,0 +1,62 @@
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
src/app/components/purchase-order-table/purchase-order-table.ts
View File

@@ -85,7 +85,6 @@ export class PurchaseOrderTable implements OnInit {
);
this.fileService.downloadBlob(pdf)
} catch (e) {
console.error(e);
this.notificationService.error(
'Erreur',
'Impossible de générer un PDF'

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

@@ -32,15 +32,17 @@
</tr>
</thead>
<tbody class="text-center">
@for (product of quotation.getQuotationProductDto; track product.productId) {
@for (product of quotation.products; track product.productId) {
<tr>
<td>{{ product.productReferences }}</td>
<td>{{ product.productName }}</td>
<td>Price ???</td>
<td>Quantité ???</td>
<td>{{ product.quantity }}</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
<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>
@@ -70,4 +72,10 @@
<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>

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

@@ -5,10 +5,16 @@ 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, QuotationsService} from "../../services/api";
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',
@@ -19,6 +25,7 @@ import {FileService} from "../../services/file.service";
NzIconDirective,
NzTableComponent,
QuotationForm,
QuantityForm,
],
templateUrl: './quotation-table.html',
styleUrl: './quotation-table.css',
@@ -27,10 +34,12 @@ import {FileService} from "../../services/file.service";
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();
@@ -102,6 +111,43 @@ export class QuotationTable implements OnInit {
}
}
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 };
@@ -120,5 +166,20 @@ export class QuotationTable implements OnInit {
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();
}
}

11
src/app/pages/stock/stock.html
View File

@@ -11,8 +11,15 @@
<app-create-purchaseorder-form #purchaseOrderForm></app-create-purchaseorder-form>
</app-modal-button>
<app-modal-button #modalButtonQuotation type="default" name="Créer un devis" size="35%" class="ml-4" (click)="test()">
<app-quotation-form #quotationForm></app-quotation-form>
<app-modal-button #modalButtonQuotation
type="default"
name="Créer un devis"
size="35%"
class="ml-4"
(click)="openQuotationForm()"
(ok)="onModalQuotationOk()"
(cancel)="onModalQuotationCancel()">
<app-create-quotation-form #quotationForm></app-create-quotation-form>
</app-modal-button>
}

166
src/app/pages/stock/stock.ts
View File

@@ -2,12 +2,12 @@ import {Component, inject, viewChild} from '@angular/core';
import {StockTable} from "../../components/stock-table/stock-table";
import {Search} from "../../components/search/search";
import {ModalButton} from "../../components/modal-button/modal-button";
import {PurchaseOrderForm} from "../../components/purchase-order-form/purchase-order-form";
import {QuotationForm} from "../../components/quotation-form/quotation-form";
import {ProductsService, PurchaseordersService} from "../../services/api";
import {PurchaseordersService, QuotationsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {CreatePurchaseorderForm} from "../../components/create-purchaseorder-form/create-purchaseorder-form";
import {CreateQuotationForm} from "../../components/create-quotation-form/create-quotation-form";
@Component({
selector: 'app-stock',
@@ -15,85 +15,22 @@ import {CreatePurchaseorderForm} from "../../components/create-purchaseorder-for
StockTable,
Search,
ModalButton,
QuotationForm,
CreatePurchaseorderForm,
CreateQuotationForm,
],
templateUrl: './stock.html',
styleUrl: './stock.css',
})
export class Stock {
createQuotation = viewChild.required<QuotationForm>('quotationForm');
createPurchaseOrder = viewChild.required<CreatePurchaseorderForm>('purchaseOrderForm');
createQuotation = viewChild.required<CreateQuotationForm>('quotationForm');
productTable = viewChild.required<StockTable>('stockTable');
private productsService = inject(ProductsService);
private purchaseordersService = inject(PurchaseordersService)
private quotationsService = inject(QuotationsService)
private notificationService = inject(NzNotificationService)
modalButtonPurchaseOrder = viewChild.required<ModalButton>('modalButtonPurchaseOrder');
onProductSearch(query: string) {
this.productTable().applySearch(query);
}
async addPurchaseOrder() {
if (this.createPurchaseOrder().createPurchaseOrderForm.invalid) return;
const orderLines = this.createPurchaseOrder().lines.value.map(line => ({
productId: line.productId,
quantity: line.quantity
}));
try {
const purchaseOrder = this.createPurchaseOrder().createPurchaseOrderForm.getRawValue();
await firstValueFrom(this.purchaseordersService.createPurchaseOrder(purchaseOrder));
this.notificationService.success('Succès', 'Bon de commande crée')
}catch (e) {
console.error(e);
this.notificationService.error('Erreur', 'Erreur lors de la création du bon de commande.')
}
}
async onModalOk() {
const form = this.createPurchaseOrder().createPurchaseOrderForm;
if (form.invalid) {
this.notificationService.error('Erreur', 'Formulaire invalide');
return;
}
const orderLines = this.createPurchaseOrder().lines.value.map(line => ({
productId: line.productId,
quantity: line.quantity
}));
if (orderLines.length === 0) {
this.notificationService.error('Erreur', 'Aucun produit sélectionné');
return;
}
const purchaseOrder = {
purchaseConditions: form.get('purchaseConditions')!.value,
products: orderLines
};
console.log('DTO envoyé :', purchaseOrder);
try {
await firstValueFrom(
this.purchaseordersService.createPurchaseOrder(purchaseOrder)
);
this.notificationService.success('Succès', 'Bon de commande créé');
form.reset();
this.modalButtonPurchaseOrder().isVisible = false;
await this.productTable().fetchProducts();
} catch (e) {
console.error(e);
this.notificationService.error('Erreur', 'Erreur lors de la création du bon de commande.');
}
}
onModalCancel() {
this.modalButtonPurchaseOrder().isVisible = false;
}
modalButtonQuotation = viewChild.required<ModalButton>('modalButtonQuotation');
hasSelection = false;
@@ -101,8 +38,48 @@ export class Stock {
this.hasSelection = value;
}
test(){
console.log(this.productTable().selectedIds);
onProductSearch(query: string) {
this.productTable().applySearch(query);
}
async addPurchaseOrder() {
const form = this.createPurchaseOrder().createPurchaseOrderForm;
if (form.invalid) {
this.notificationService.error('Erreur', 'Formulaire invalide');
return;
}
const orderLines = this.createPurchaseOrder().lines.value.map(line => ({
productId: line.productId,
quantity: line.quantity
}));
if (orderLines.length === 0) {
this.notificationService.error('Erreur', 'Aucun produit sélectionné');
return;
}
const purchaseOrder = {
purchaseConditions: form.get('purchaseConditions')!.value,
products: orderLines
};
try {
await firstValueFrom(
this.purchaseordersService.createPurchaseOrder(purchaseOrder)
);
this.notificationService.success('Succès', 'Bon de commande créé');
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la création du bon de commande.');
}
}
async onModalOk() {
await this.addPurchaseOrder();
this.createPurchaseOrder().createPurchaseOrderForm.reset();
this.modalButtonPurchaseOrder().isVisible = false;
await this.productTable().fetchProducts();
}
onModalCancel() {
this.modalButtonPurchaseOrder().isVisible = false;
}
openPurchaseOrderForm() {
@@ -111,4 +88,51 @@ export class Stock {
);
this.createPurchaseOrder().syncSelectedProducts(selectedProducts);
}
async addQuotation() {
if (this.createQuotation().createQuotationForm.invalid) {
this.notificationService.error('Erreur', 'Formulaire invalide');
return;
}
const orderLines = this.createQuotation().lines.value.map(line => ({
productId: line.productId,
quantity: line.quantity
}));
if (orderLines.length === 0) {
this.notificationService.error('Erreur', 'Aucun produit sélectionné');
return;
}
const quotation = {
message: this.createQuotation().createQuotationForm.get('message')!.value,
purchaseConditions: this.createQuotation().createQuotationForm.get('purchaseConditions')!.value,
products: orderLines
};
try {
await firstValueFrom(
this.quotationsService.createQuotationEndpoint(quotation)
);
this.notificationService.success('Succès', 'Devis créé');
} catch (e) {
this.notificationService.error('Erreur', 'Erreur lors de la création du devis.');
}
}
async onModalQuotationOk() {
await this.addQuotation();
this.createQuotation().createQuotationForm.reset();
this.modalButtonQuotation().isVisible = false;
await this.productTable().fetchProducts();
}
onModalQuotationCancel() {
this.modalButtonQuotation().isVisible = false;
}
openQuotationForm() {
const selectedProducts = this.productTable().products().filter(p =>
this.productTable().selectedIds.includes(p.id)
);
this.createQuotation().syncSelectedProducts(selectedProducts);
}
}

2
src/app/services/api/.openapi-generator/FILES
View File

@@ -23,9 +23,11 @@ model/connect-user-dto.ts
model/create-deliverer-dto.ts
model/create-delivery-note-dto.ts
model/create-price-dto.ts
model/create-product-quotation-dto.ts
model/create-purchase-order-dto.ts
model/create-purchase-order-product-dto.ts
model/create-purchase-product-dto.ts
model/create-quotation-dto.ts
model/create-quotation-product-dto.ts
model/create-setting-dto.ts
model/create-supplier-dto.ts

66
src/app/services/api/api/quotations.service.ts
View File

@@ -16,6 +16,8 @@ import { HttpClient, HttpHeaders, HttpParams,
import { CustomHttpParameterCodec } from '../encoder';
import { Observable } from 'rxjs';
// @ts-ignore
import { CreateQuotationDto } from '../model/create-quotation-dto';
// @ts-ignore
import { GetQuotationDto } from '../model/get-quotation-dto';
// @ts-ignore
@@ -39,6 +41,70 @@ export class QuotationsService extends BaseService {
super(basePath, configuration);
}
/**
* @endpoint post /API/quotations
* @param createQuotationDto
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public createQuotationEndpoint(createQuotationDto: CreateQuotationDto, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<GetQuotationDto>;
public createQuotationEndpoint(createQuotationDto: CreateQuotationDto, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<GetQuotationDto>>;
public createQuotationEndpoint(createQuotationDto: CreateQuotationDto, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<GetQuotationDto>>;
public createQuotationEndpoint(createQuotationDto: CreateQuotationDto, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
if (createQuotationDto === null || createQuotationDto === undefined) {
throw new Error('Required parameter createQuotationDto was null or undefined when calling createQuotationEndpoint.');
}
let localVarHeaders = this.defaultHeaders;
const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
'application/json'
]);
if (localVarHttpHeaderAcceptSelected !== undefined) {
localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
}
const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
const localVarTransferCache: boolean = options?.transferCache ?? true;
// to determine the Content-Type header
const consumes: string[] = [
'application/json'
];
const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
if (httpContentTypeSelected !== undefined) {
localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
}
let responseType_: 'text' | 'json' | 'blob' = 'json';
if (localVarHttpHeaderAcceptSelected) {
if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
responseType_ = 'text';
} else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
responseType_ = 'json';
} else {
responseType_ = 'blob';
}
}
let localVarPath = `/API/quotations`;
const { basePath, withCredentials } = this.configuration;
return this.httpClient.request<GetQuotationDto>('post', `${basePath}${localVarPath}`,
{
context: localVarHttpContext,
body: createQuotationDto,
responseType: <any>responseType_,
...(withCredentials ? { withCredentials } : {}),
headers: localVarHeaders,
observe: observe,
...(localVarTransferCache !== undefined ? { transferCache: localVarTransferCache } : {}),
reportProgress: reportProgress
}
);
}
/**
* @endpoint delete /API/quotations/{id}
* @param id

16
src/app/services/api/model/create-product-quotation-dto.ts Normal file
View File

@@ -0,0 +1,16 @@
/**
* PyroFetes
*
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
export interface CreateProductQuotationDto {
productId?: number;
quantity?: number;
}

18
src/app/services/api/model/create-quotation-dto.ts Normal file
View File

@@ -0,0 +1,18 @@
/**
* PyroFetes
*
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { CreateProductQuotationDto } from './create-product-quotation-dto';
export interface CreateQuotationDto {
message?: string | null;
conditionsSale?: string | null;
products?: Array<CreateProductQuotationDto> | null;
}

2
src/app/services/api/model/create-quotation-product-dto.ts
View File

@@ -19,7 +19,7 @@ export interface CreateQuotationProductDto {
productName?: string | null;
productDuration?: number;
productCaliber?: number;
productApprovalNumber?: number;
productApprovalNumber?: string | null;
productWeight?: number;
productNec?: number;
productImage?: string | null;

2
src/app/services/api/model/get-quotation-dto.ts
View File

@@ -14,6 +14,6 @@ export interface GetQuotationDto {
id?: number;
message?: string | null;
conditionsSale?: string | null;
getQuotationProductDto?: Array<GetQuotationProductDto> | null;
products?: Array<GetQuotationProductDto> | null;
}

2
src/app/services/api/model/get-quotation-product-dto.ts
View File

@@ -19,7 +19,7 @@ export interface GetQuotationProductDto {
productName?: string | null;
productDuration?: number;
productCaliber?: number;
productApprovalNumber?: number;
productApprovalNumber?: string | null;
productWeight?: number;
productNec?: number;
productImage?: string | null;

2
src/app/services/api/model/models.ts
View File

@@ -2,9 +2,11 @@ export * from './connect-user-dto';
export * from './create-deliverer-dto';
export * from './create-delivery-note-dto';
export * from './create-price-dto';
export * from './create-product-quotation-dto';
export * from './create-purchase-order-dto';
export * from './create-purchase-order-product-dto';
export * from './create-purchase-product-dto';
export * from './create-quotation-dto';
export * from './create-quotation-product-dto';
export * from './create-setting-dto';
export * from './create-supplier-dto';