diff --git a/src/app/components/modal-button/modal-button.ts b/src/app/components/modal-button/modal-button.ts index 386caf6..49d0fee 100644 --- a/src/app/components/modal-button/modal-button.ts +++ b/src/app/components/modal-button/modal-button.ts @@ -3,13 +3,13 @@ import {NzModalComponent} from "ng-zorro-antd/modal"; import {NzButtonComponent} from "ng-zorro-antd/button"; @Component({ - selector: 'app-modal-button', + selector: 'app-modal-button', imports: [ NzModalComponent, NzButtonComponent, ], - templateUrl: './modal-button.html', - styleUrl: './modal-button.css', + templateUrl: './modal-button.html', + styleUrl: './modal-button.css', }) export class ModalButton { diff --git a/src/app/components/supplier-form/supplier-form.html b/src/app/components/supplier-form/supplier-form.html index 1b7e80d..ed44a1a 100644 --- a/src/app/components/supplier-form/supplier-form.html +++ b/src/app/components/supplier-form/supplier-form.html @@ -1,4 +1,4 @@ -
+ @@ -36,6 +36,15 @@ + + + Code Postal + + + + + + Ville @@ -50,16 +59,7 @@ Délai Moyen - - - - - - - Produits - - - + diff --git a/src/app/components/supplier-form/supplier-form.ts b/src/app/components/supplier-form/supplier-form.ts index 87895f2..c3cc539 100644 --- a/src/app/components/supplier-form/supplier-form.ts +++ b/src/app/components/supplier-form/supplier-form.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +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', @@ -26,20 +27,26 @@ export class SupplierForm { email: new FormControl(null, [Validators.required]), phone: new FormControl(null, [Validators.required]), address: new FormControl(null, [Validators.required]), + zipCode: new FormControl(null, [Validators.required]), city: new FormControl(null, [Validators.required]), deliveryDelay: new FormControl(null, [Validators.required]), - product: new FormControl(null, [Validators.required]), }) - submitForm() { - // Pour annuler si le formulaire est invalide - if (this.supplierForm.invalid) return; - - // Pour obtenir la valeur du formulaire - console.log(this.supplierForm.getRawValue()) - - // Pour vider le formulaire - this.supplierForm.reset() + supplier= input(); + 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, + }); + } + }); } } diff --git a/src/app/components/supplier-table/supplier-table.html b/src/app/components/supplier-table/supplier-table.html index b26448e..b1a665d 100644 --- a/src/app/components/supplier-table/supplier-table.html +++ b/src/app/components/supplier-table/supplier-table.html @@ -1,61 +1,66 @@ - + - + Nom - email Téléphone + Email Adresse + Code Postal Ville - Délai Moyen + Délai moyen Produits - Action + Action - - @for (data of basicTable.data; track data) { + + @for (supplier of suppliers(); track supplier.id) { - {{data.name}} - {{data.email}} - {{data.phone}} - {{data.address}}, {{data.zipCode}} - {{data.city}} - {{data.deliveryDelay}} + {{ supplier.name }} + {{ supplier.phone }} + {{ supplier.email }} + {{ supplier.address}} + {{ supplier.zipCode}} + {{ supplier.city}} + {{ supplier.deliveryDelay}} jours - -
- - - - Nom - Référence - Prix - - - - @for (product of data.products; track product) { - - {{product.name}} - {{product.reference}} - xx.x€ - - } - - -
+ + + + + Produits + Nom + Référence + Prix + + + + @for (product of supplier.products; track product.id) { + + {{ product.name }} + {{ product.references }} + Price ??? + + } + + -
- - - +
+ -
- -
+
} + + diff --git a/src/app/components/supplier-table/supplier-table.ts b/src/app/components/supplier-table/supplier-table.ts index e6f9d25..87ea541 100644 --- a/src/app/components/supplier-table/supplier-table.ts +++ b/src/app/components/supplier-table/supplier-table.ts @@ -1,13 +1,13 @@ -import { Component } from '@angular/core'; +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 {SupplierForm} from "../supplier-form/supplier-form"; -import {SupplierInfo} from "../../interfaces/supplier.interface"; -import {DelivererForm} from "../deliverer-form/deliverer-form"; +import {GetSupplierDto, SuppliersService} from "../../services/api"; +import {NzNotificationService} from "ng-zorro-antd/notification"; +import {firstValueFrom} from "rxjs"; @Component({ selector: 'app-supplier-table', @@ -23,112 +23,92 @@ import {DelivererForm} from "../deliverer-form/deliverer-form"; styleUrl: './supplier-table.css', }) -export class SupplierTable { - listOfSupplier: SupplierInfo[] = [ - { - name: "PyroNova", - email: "contact@pyronova.com", - phone: "+33 1 45 23 67 89", - address: "12 Rue des Artisans", - zipCode: "69003", - city: "Lyon", - deliveryDelay: 4, - products: [] - }, - { - name: "FX Industries", - email: "sales@fxindus.com", - phone: "+33 2 41 22 90 10", - address: "118 Avenue Lumière", - zipCode: "49000", - city: "Angers", - deliveryDelay: 6, - products: [] - }, - { - name: "EuroFire", - email: "info@eurofire.eu", - phone: "+33 1 80 22 11 77", - address: "2 Avenue de l’Europe", - zipCode: "75012", - city: "Paris", - deliveryDelay: 3, - products: [] - }, - { - name: "FlashEffect", - email: "contact@flasheffect.fr", - phone: "+33 4 72 81 91 22", - address: "44 Rue Centrale", - zipCode: "69007", - city: "Lyon", - deliveryDelay: 5, - products: [] - }, - { - name: "StageLight FX", - email: "support@stagelightfx.com", - phone: "+33 5 55 74 99 31", - address: "99 Boulevard du Progrès", - zipCode: "31000", - city: "Toulouse", - deliveryDelay: 7, - products: [] - }, - { - name: "NovaSpark", - email: "hello@novaspark.fr", - phone: "+33 3 29 55 11 88", - address: "7 Rue de la Source", - zipCode: "54000", - city: "Nancy", - deliveryDelay: 4, - products: [] - }, - { - name: "FXWare", - email: "contact@fxware.eu", - phone: "+33 4 75 55 66 44", - address: "123 Route du Nord", - zipCode: "38000", - city: "Grenoble", - deliveryDelay: 6, - products: [] - }, - { - name: "PyroSet", - email: "info@pyroset.com", - phone: "+33 1 61 73 55 00", - address: "5 Chemin des Prés", - zipCode: "95000", - city: "Cergy", - deliveryDelay: 2, - products: [] - }, - { - name: "SkyFX", - email: "support@skyfx.fr", - phone: "+33 6 55 88 22 11", - address: "1 Rue du Ciel", - zipCode: "33000", - city: "Bordeaux", - deliveryDelay: 5, - products: [] - }, - { - name: "SparkLab", - email: "sales@sparklab.eu", - phone: "+33 2 33 55 77 12", - address: "33 Rue du Port", - zipCode: "14000", - city: "Caen", - deliveryDelay: 4, - products: [] - } - ]; +export class SupplierTable implements OnInit { + private suppliersService = inject(SuppliersService); + private notificationService = inject(NzNotificationService) + suppliers = signal([]); + suppliersLoading = signal(false); + updateSupplier = viewChild.required('supplierForm'); + modal = viewChild.required('modalNav'); - delete() { - return + async ngOnInit() { + await this.fetchSuppliers(); } -} + 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 delete(supplier:number) { + try { + await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier)) + this.notificationService.success( + 'Success', + 'Suppression effectuée' + ) + } catch (e) { + this.notificationService.error( + 'Erreur', + 'Impossible de supprimer la ligne' + ) + } + await this.fetchSuppliers(); + } + + 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' + ) + } + } + + selectedSupplier: GetSupplierDto | null = null; + openEditModal(supplier: GetSupplierDto) { + this.selectedSupplier = { ...supplier }; + this.modal().showModal(); + } + + async onModalOk(supplierId: number, updateSupplierComponent: SupplierForm, modal: ModalNav) { + if (!this.selectedSupplier) return; + + await this.edit(supplierId, updateSupplierComponent); + updateSupplierComponent.supplierForm.reset(); + modal.isVisible = false; + await this.fetchSuppliers(); + } + + onModalCancel(modal: ModalNav) { + modal.isVisible = false; + } +} \ No newline at end of file diff --git a/src/app/pages/supplier/supplier.html b/src/app/pages/supplier/supplier.html index 08f4baa..5593490 100644 --- a/src/app/pages/supplier/supplier.html +++ b/src/app/pages/supplier/supplier.html @@ -1,13 +1,18 @@
- - + + +
- +
- +
diff --git a/src/app/pages/supplier/supplier.ts b/src/app/pages/supplier/supplier.ts index 7f5c1ee..0a5051f 100644 --- a/src/app/pages/supplier/supplier.ts +++ b/src/app/pages/supplier/supplier.ts @@ -1,8 +1,11 @@ -import { Component } from '@angular/core'; +import {Component, inject, viewChild} from '@angular/core'; import {Search} from "../../components/search/search"; import {ModalButton} from "../../components/modal-button/modal-button"; import {SupplierTable} from "../../components/supplier-table/supplier-table"; import {SupplierForm} from "../../components/supplier-form/supplier-form"; +import {SuppliersService} from "../../services/api"; +import {NzNotificationService} from "ng-zorro-antd/notification"; +import {firstValueFrom} from "rxjs"; @Component({ selector: 'app-supplier', @@ -16,5 +19,44 @@ import {SupplierForm} from "../../components/supplier-form/supplier-form"; styleUrl: './supplier.css', }) export class Supplier { + modal = viewChild.required('modalButton'); + createSupplier = viewChild.required('supplierForm'); + supplierTable = viewChild.required('supplierTable'); + private usersService = inject(SuppliersService); + private notificationService = inject(NzNotificationService) + async onModalOk() { + await this.addSupplier() + this.createSupplier().supplierForm.reset(); + this.modal().isVisible = false; + await this.supplierTable().fetchSuppliers() + } + + onModalCancel() { + this.modal().isVisible = false; + } + + async addSupplier() { + if (this.createSupplier().supplierForm.invalid) + { + this.notificationService.error( + 'Erreur', + 'Erreur d\'écriture dans le formulaire' + ) + } + try { + const suppliers = this.createSupplier().supplierForm.getRawValue(); + await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers)) + + this.notificationService.success( + 'Success', + 'Fournisseur enregistré' + ) + } catch (e) { + this.notificationService.error( + 'Erreur', + 'Erreur d\'enregistrement' + ) + } + } } diff --git a/src/app/services/api/model/get-supplier-dto.ts b/src/app/services/api/model/get-supplier-dto.ts index 35345b0..378eb06 100644 --- a/src/app/services/api/model/get-supplier-dto.ts +++ b/src/app/services/api/model/get-supplier-dto.ts @@ -7,6 +7,7 @@ * https://openapi-generator.tech * Do not edit the class manually. */ +import { GetProductDto } from './get-product-dto'; export interface GetSupplierDto { @@ -18,5 +19,6 @@ export interface GetSupplierDto { zipCode?: string | null; city?: string | null; deliveryDelay?: number; + products?: Array | null; }