From ea65e6a3dc54a629cb06b01cf28eb33c26a54833 Mon Sep 17 00:00:00 2001 From: MathieuCarteron Date: Tue, 2 Jun 2026 18:12:49 +0200 Subject: [PATCH] Providers Pt1 --- .../create-providers-modal.css} | 0 .../create-providers-modal.html | 1 + .../create-providers-modal.ts | 59 +++++++++ .../providers-add-form.html | 50 ++------ .../providers-add-form/providers-add-form.ts | 115 ++++++++++++++---- .../providers-card-form.css | 3 - .../providers-card-form.html | 1 - .../providers-card-form.ts | 56 --------- .../providers-card/providers-card.css | 0 .../providers-card/providers-card.html | 1 + .../providers-card/providers-card.ts | 11 ++ .../providers-get-all/providers-get-all.html | 1 - .../providers-get-all/providers-get-all.ts | 13 -- src/app/pages/providers/providers.html | 12 +- src/app/pages/providers/providers.ts | 38 ++++-- 15 files changed, 217 insertions(+), 144 deletions(-) rename src/app/pages/providers/{providers-get-all/providers-get-all.css => create-providers-modal/create-providers-modal.css} (100%) create mode 100644 src/app/pages/providers/create-providers-modal/create-providers-modal.html create mode 100644 src/app/pages/providers/create-providers-modal/create-providers-modal.ts delete mode 100644 src/app/pages/providers/providers-card-form/providers-card-form.css delete mode 100644 src/app/pages/providers/providers-card-form/providers-card-form.html delete mode 100644 src/app/pages/providers/providers-card-form/providers-card-form.ts create mode 100644 src/app/pages/providers/providers-card/providers-card.css create mode 100644 src/app/pages/providers/providers-card/providers-card.html create mode 100644 src/app/pages/providers/providers-card/providers-card.ts delete mode 100644 src/app/pages/providers/providers-get-all/providers-get-all.html delete mode 100644 src/app/pages/providers/providers-get-all/providers-get-all.ts diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.css b/src/app/pages/providers/create-providers-modal/create-providers-modal.css similarity index 100% rename from src/app/pages/providers/providers-get-all/providers-get-all.css rename to src/app/pages/providers/create-providers-modal/create-providers-modal.css diff --git a/src/app/pages/providers/create-providers-modal/create-providers-modal.html b/src/app/pages/providers/create-providers-modal/create-providers-modal.html new file mode 100644 index 0000000..1c34d8b --- /dev/null +++ b/src/app/pages/providers/create-providers-modal/create-providers-modal.html @@ -0,0 +1 @@ +

create-providers-modal works!

diff --git a/src/app/pages/providers/create-providers-modal/create-providers-modal.ts b/src/app/pages/providers/create-providers-modal/create-providers-modal.ts new file mode 100644 index 0000000..9f431de --- /dev/null +++ b/src/app/pages/providers/create-providers-modal/create-providers-modal.ts @@ -0,0 +1,59 @@ +import {Component, output} from '@angular/core'; +import {NzMessageService} from "ng-zorro-antd/message"; +import {NzButtonComponent} from "ng-zorro-antd/button"; +import {NzModalComponent} from "ng-zorro-antd/modal"; +import {ProvidersAddForm} from "../providers-add-form/providers-add-form"; + +@Component({ + selector: 'app-create-providers-modal', + imports: [NzButtonComponent, NzModalComponent, ProvidersAddForm], + template: ` + + + Création de clients + + + + + + + + + + + `, + styleUrl: './create-providers-modal.css', +}) +export class CreateProvidersModal { + constructor(private message: NzMessageService) {} + isVisible = false; + isConfirmLoading = false; + + showModal(): void { + this.isVisible = true; + } + + handleOk(): void { + this.isConfirmLoading = true; + this.message.success('Prestataire créé !'); + setTimeout(() => { + this.isVisible = false; + this.isConfirmLoading = false; + }, 300); + this.triggerCreated.emit(); + } + + handleCancel(): void { + this.isVisible = false; + this.message.info('Création annulée'); + } + + triggerCreated = output() +} diff --git a/src/app/pages/providers/providers-add-form/providers-add-form.html b/src/app/pages/providers/providers-add-form/providers-add-form.html index c204c6e..3a69e44 100644 --- a/src/app/pages/providers/providers-add-form/providers-add-form.html +++ b/src/app/pages/providers/providers-add-form/providers-add-form.html @@ -1,51 +1,23 @@
- Nom - - - - - - - Prénom + Note - + - Téléphone - - - - - - - Email - - - - - - - Adresse - - - - - - - Rôle + Type - - - - - - Prix - - + + @for (providertype of providerTypes(); track providertype.id) { + + } + + + +
diff --git a/src/app/pages/providers/providers-add-form/providers-add-form.ts b/src/app/pages/providers/providers-add-form/providers-add-form.ts index a6989ae..c8e7cbf 100644 --- a/src/app/pages/providers/providers-add-form/providers-add-form.ts +++ b/src/app/pages/providers/providers-add-form/providers-add-form.ts @@ -1,34 +1,105 @@ -import { Component } from '@angular/core'; -import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; -import {NzFormModule} from "ng-zorro-antd/form"; -import {NzInputDirective} from "ng-zorro-antd/input"; -import {NzFlexDirective} from "ng-zorro-antd/flex"; +import {Component, inject, signal} from '@angular/core'; +import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms"; import {NzButtonComponent} from "ng-zorro-antd/button"; +import {NzColDirective, NzRowDirective} 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 { + CreateCustomerDto, + CustomersService, + CustomertypesService, + GetCustomerTypeDto, + ProvidersService, ProvidertypesService +} from "../../../services/api"; +import {NzNotificationService} from "ng-zorro-antd/notification"; +import {firstValueFrom} from "rxjs"; @Component({ selector: 'app-providers-add-form', - imports: [ReactiveFormsModule, NzFormModule, NzInputDirective,], + imports: [ + FormsModule, + NzButtonComponent, + NzColDirective, + NzFlexDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzInputDirective, + NzOptionComponent, + NzRowDirective, + NzSelectComponent, + ReactiveFormsModule + ], templateUrl: './providers-add-form.html', styleUrl: './providers-add-form.css', }) export class ProvidersAddForm { - providerForm = new FormGroup({ - lastName: new FormControl(null, [Validators.required]), - firstName: new FormControl(null, [Validators.required]), - phoneNumber: new FormControl(null, [Validators.required]), - email: new FormControl(null, [Validators.required]), - address: new FormControl(null, [Validators.required]), - role: new FormControl(null, [Validators.required]), - price: new FormControl(null, [Validators.required]), - }) - submitForm() { - // Pour annuler si le formulaire est invalide - if (this.providerForm.invalid) return; + private providersService = inject(ProvidersService); + private providertypesService = inject(ProvidertypesService); + private notificationService = inject(NzNotificationService) - // Pour obtenir la valeur du formulaire - console.log(this.providerForm.getRawValue()) - // Pour vider le formulaire - this.providerForm.reset() + providerForm = new FormGroup({ + Price: new FormControl(null, [Validators.required]), + providerTypeId: new FormControl(null, [Validators.required]), + }) + + providerPost = signal(this.providerForm.value); + providersLoading = signal(false); + + async submitForm() { + // Pour annuler si le formulaire est invalide + if (this.providerForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.providerForm.getRawValue()) + this.providerPost.set(this.providerForm.getRawValue()) + + await this.createCustomers(this.providerPost().note, this.providerPost().customerTypeId) + // Pour vider le formulaire + this.providerForm.reset() + } + + async createCustomers(note: string, customerTypeId: number) { + this.providersLoading.set(true); + + const providerValue = { + note: note, + customerTypeId: customerTypeId } + + try { + const provider = await firstValueFrom(this.providersService.createProviderEndpoint(providerValue)); + this.providerPost.set(provider); + console.log(provider); + } catch (e) + { + this.notificationService.error('Erreur de recherche', "L\'auteur n\'existe pas !"); + + this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)'); + } + + this.providersLoading.set(false); + } + + customerTypes = signal([]) + + async ngOnInit() { + await this.fetchCustomerTypes() + } + + async fetchCustomerTypes() { + this.customersLoading.set(true); + try { + const customerType = await firstValueFrom(this.customertypesService.getAllCustomerTypeEndpoint()) + this.customerTypes.set(customerType) + } catch (e) { + this.notificationService.error('Erreur', 'Erreur de communication avec l\'API'); + } + + this.customersLoading.set(false); + } } diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.css b/src/app/pages/providers/providers-card-form/providers-card-form.css deleted file mode 100644 index 8ae4ce1..0000000 --- a/src/app/pages/providers/providers-card-form/providers-card-form.css +++ /dev/null @@ -1,3 +0,0 @@ -.ant-modal-content { - background: #272727; -} \ No newline at end of file diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.html b/src/app/pages/providers/providers-card-form/providers-card-form.html deleted file mode 100644 index 81b94e8..0000000 --- a/src/app/pages/providers/providers-card-form/providers-card-form.html +++ /dev/null @@ -1 +0,0 @@ -

providers-card-form works!

diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.ts b/src/app/pages/providers/providers-card-form/providers-card-form.ts deleted file mode 100644 index 85dd200..0000000 --- a/src/app/pages/providers/providers-card-form/providers-card-form.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Component } from '@angular/core'; -import {NzModalComponent, NzModalModule} from "ng-zorro-antd/modal"; -import {NzButtonComponent, NzButtonModule} from "ng-zorro-antd/button"; -import {NzMessageService} from "ng-zorro-antd/message"; -import {ProvidersAddForm} from "../providers-add-form/providers-add-form"; - -@Component({ - selector: 'app-providers-card-form', - imports: [NzButtonModule, NzModalModule, ProvidersAddForm], - template: ` - - - Création de prestataires - - - - - - - - - - - `, - styleUrl: './providers-card-form.css', -}) -export class ProvidersCardForm { - constructor(private message: NzMessageService) {} - isVisible = false; - isConfirmLoading = false; - - showModal(): void { - this.isVisible = true; - } - - handleOk(): void { - this.isConfirmLoading = true; - this.message.success('Prestataire créé !'); - setTimeout(() => { - this.isVisible = false; - this.isConfirmLoading = false; - }, 1000); - } - - handleCancel(): void { - this.isVisible = false; - } -} diff --git a/src/app/pages/providers/providers-card/providers-card.css b/src/app/pages/providers/providers-card/providers-card.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/providers/providers-card/providers-card.html b/src/app/pages/providers/providers-card/providers-card.html new file mode 100644 index 0000000..2a291ad --- /dev/null +++ b/src/app/pages/providers/providers-card/providers-card.html @@ -0,0 +1 @@ +

providers-card works!

diff --git a/src/app/pages/providers/providers-card/providers-card.ts b/src/app/pages/providers/providers-card/providers-card.ts new file mode 100644 index 0000000..596c6fd --- /dev/null +++ b/src/app/pages/providers/providers-card/providers-card.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-providers-card', + imports: [], + templateUrl: './providers-card.html', + styleUrl: './providers-card.css', +}) +export class ProvidersCard { + +} diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.html b/src/app/pages/providers/providers-get-all/providers-get-all.html deleted file mode 100644 index 7e60329..0000000 --- a/src/app/pages/providers/providers-get-all/providers-get-all.html +++ /dev/null @@ -1 +0,0 @@ -

providers-get-all works!

diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.ts b/src/app/pages/providers/providers-get-all/providers-get-all.ts deleted file mode 100644 index 7db4414..0000000 --- a/src/app/pages/providers/providers-get-all/providers-get-all.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component, inject, signal} from '@angular/core'; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {Router} from "@angular/router"; -import {firstValueFrom} from "rxjs"; - -@Component({ - selector: 'app-providers-get-all', - imports: [], - templateUrl: './providers-get-all.html', - styleUrl: './providers-get-all.css', -}) -export class ProvidersGetAll { -} diff --git a/src/app/pages/providers/providers.html b/src/app/pages/providers/providers.html index 1cae579..6e1fd60 100644 --- a/src/app/pages/providers/providers.html +++ b/src/app/pages/providers/providers.html @@ -1,3 +1,11 @@ - + - \ No newline at end of file +
+
+ @for (provider of providers(); track provider.id) + { + + + } +
+
\ No newline at end of file diff --git a/src/app/pages/providers/providers.ts b/src/app/pages/providers/providers.ts index df16827..1511818 100644 --- a/src/app/pages/providers/providers.ts +++ b/src/app/pages/providers/providers.ts @@ -1,16 +1,40 @@ -import { Component } from '@angular/core'; -import {ProvidersCardForm} from "./providers-card-form/providers-card-form"; -import {ProvidersGetAll} from "./providers-get-all/providers-get-all"; +import {Component, inject, signal} from '@angular/core'; +import {NzRowDirective} from "ng-zorro-antd/grid"; +import {GetProviderDto, ProvidersService} from "../../services/api"; +import {NzNotificationService} from "ng-zorro-antd/notification"; +import {Router} from "@angular/router"; +import {firstValueFrom} from "rxjs"; +import {ProvidersCard} from "./providers-card/providers-card"; +import {CreateProvidersModal} from "./create-providers-modal/create-providers-modal"; @Component({ selector: 'app-providers', - imports: [ - ProvidersCardForm, - ProvidersGetAll - ], + imports: [NzRowDirective, ProvidersCard, CreateProvidersModal], templateUrl: './providers.html', styleUrl: './providers.css', }) export class Providers { + private providersService = inject(ProvidersService); + private notificationService = inject(NzNotificationService) + router = inject(Router); + + providers = signal([]); + providersLoading = signal(false); + + async ngOnInit() { + await this.fetchProviders(); + } + + async fetchProviders() { + this.providersLoading.set(true); + try { + const providers = await firstValueFrom(this.providersService.getAllProvidersEndpoint()) + this.providers.set(providers) + } catch (e) { + this.notificationService.error('Erreur', 'Erreur de communication avec l\'API'); + } + + this.providersLoading.set(false); + } }