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

added edit quantity function

Browse Source
This commit is contained in:
sanchezvem
2025-12-13 12:10:51 +01:00
parent 22e50a8dea
commit 8124d83e79
12 changed files with 228 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/purchase-order-table/purchase-order-table.html
+11 -5
View File
@@ -32,7 +32,7 @@
</tr>
</thead>
<tbody class="text-center">
@for (product of purchaseOrder.getPurchaseProductDto; track product.productId) {
@for (product of purchaseOrder.products; track product.productId) {
<tr>
<td>{{product.productName}}</td>
<td>{{product.productReferences}}</td>
@@ -40,9 +40,9 @@
<td>{{product.quantity}}</td>
<td>
<div style="justify-content: center; display: flex">
<div>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
</div>
<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>
@@ -54,7 +54,7 @@
</td>
<td>
<div style="justify-content: center; display: flex">
<nz-icon nzType="plus-circle" nzTheme="outline" (click)="delete(purchaseOrder.id)" class="cursor-pointer text-green-700"/>
<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>
@@ -74,4 +74,10 @@
<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>
src/app/components/purchase-order-table/purchase-order-table.ts
+61 -5
View File
@@ -5,12 +5,16 @@ 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, GetQuotationDto, PurchaseordersService} from "../../services/api";
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 {QuotationForm} from "../quotation-form/quotation-form";
import {DelivererForm} from "../deliverer-form/deliverer-form";
import {QuantityForm} from "../quantity-form/quantity-form";
@Component({
selector: 'app-purchase-order-table',
@@ -21,7 +25,7 @@ import {DelivererForm} from "../deliverer-form/deliverer-form";
NzTableComponent,
PurchaseOrderForm,
ModalButton,
DelivererForm,
QuantityForm,
],
templateUrl: './purchase-order-table.html',
styleUrl: './purchase-order-table.css',
@@ -30,9 +34,11 @@ 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();
@@ -111,6 +117,43 @@ export class PurchaseOrderTable implements OnInit {
}
}
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 };
@@ -130,5 +173,18 @@ export class PurchaseOrderTable implements OnInit {
modal.isVisible = false;
}
protected readonly PurchaseOrderForm = PurchaseOrderForm;
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();
}
}
src/app/components/quantity-form/quantity-form.css
View File
src/app/components/quantity-form/quantity-form.html
+11
View File
@@ -0,0 +1,11 @@
<form nz-form nzLayout="horizontal" [formGroup]="quantityForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Quantité
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="0" formControlName="quantity">
</nz-form-control>
</nz-form-item>
</form>
src/app/components/quantity-form/quantity-form.ts
+40
View File
@@ -0,0 +1,40 @@
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
});
}
});
}
}