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
src/app/components/create-quotation-form/create-quotation-form.css
View File
src/app/components/create-quotation-form/create-quotation-form.html
+46
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>
src/app/components/create-quotation-form/create-quotation-form.ts
+62
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)]]
}));
});
}
}
src/app/components/purchase-order-table/purchase-order-table.ts
-1
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'
src/app/components/quotation-table/quotation-table.html
+11 -3
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>
src/app/components/quotation-table/quotation-table.ts
+62 -1
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();
}
}