last commit

src/app/pages/customers/customers-add-form/customers-add-form.ts

@@ -1,42 +1,86 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
-import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzFormModule} from "ng-zorro-antd/form";
 import {NzInputDirective} from "ng-zorro-antd/input";
+import {CreateCustomerDto, CustomersService, CustomertypesService, GetCustomerTypeDto} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
 
 @Component({
   selector: 'app-customers-add-form',
-    imports: [
-        FormsModule,
-        NzColDirective,
-        NzFormControlComponent,
-        NzFormDirective,
-        NzFormItemComponent,
-        NzFormLabelComponent,
-        NzInputDirective,
-        NzRowDirective,
-        ReactiveFormsModule
-    ],
+    imports: [ReactiveFormsModule, NzFormModule, NzInputDirective, NzFlexDirective, NzButtonComponent, NzColDirective, NzFlexDirective, NzButtonComponent, NzSelectComponent, NzOptionComponent],
   templateUrl: './customers-add-form.html',
   styleUrl: './customers-add-form.css',
 })
 export class CustomersAddForm {
+
+    private customersService = inject(CustomersService);
+    private customertypesService = inject(CustomertypesService);
+    private notificationService = inject(NzNotificationService)
+
+
     customerForm = new FormGroup({
-        lastName: new FormControl<string>(null, [Validators.required]),
-        firstName: new FormControl<string>(null, [Validators.required]),
-        phoneNumber: new FormControl<string>(null, [Validators.required]),
-        email: new FormControl<string>(null, [Validators.required]),
-        address: new FormControl<string>(null, [Validators.required]),
-        role: new FormControl<string>(null, [Validators.required]),
+        note: new FormControl<string>(null, [Validators.required]),
+        customerTypeId: new FormControl<number>(null, [Validators.required]),
     })
-    submitForm() {
+
+    customerPost = signal<CreateCustomerDto>(this.customerForm.value);
+    customersLoading = signal<boolean>(false);
+
+    async submitForm() {
         // Pour annuler si le formulaire est invalide
         if (this.customerForm.invalid) return;
 
         // Pour obtenir la valeur du formulaire
         console.log(this.customerForm.getRawValue())
+        this.customerPost.set(this.customerForm.getRawValue())
 
+        await this.createCustomers(this.customerPost().note, this.customerPost().customerTypeId)
         // Pour vider le formulaire
         this.customerForm.reset()
     }
+
+    async createCustomers(note: string, customerTypeId: number) {
+        this.customersLoading.set(true);
+
+        const customerValue = {
+            note: note,
+            customerTypeId: customerTypeId
+        }
+
+        try {
+            const customer = await firstValueFrom(this.customersService.createCustomerEndpoint(customerValue));
+            this.customerPost.set(customer);
+            console.log(customer);
+        } 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.customersLoading.set(false);
+    }
+
+    customerTypes = signal<GetCustomerTypeDto[]>([])
+
+    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);
+    }
 }