last commit

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

@@ -0,0 +1,19 @@
+nz-form-container {
+    background-color: #0000;
+}
+
+nz-form-item {
+    background-color: #1c1c1c;
+
+
+}
+
+nz-form-label {
+    font-style: italic;
+    color: #fff;
+}
+
+
+nz-modal-footer {
+
+}

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

@@ -1,46 +1,4 @@
 <form nz-form nzLayout="horizontal" [formGroup]="customerForm">
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
-        <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Nom" formControlName="lastName">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Prénom</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prénom" formControlName="firstName">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Téléphone</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Numéro de téléphone" formControlName="phoneNumber">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Email</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Email" formControlName="email">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Adresse</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Adresse" formControlName="address">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Rôle</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Rôle" formControlName="role">
-        </nz-form-control>
-    </nz-form-item>
-
     <nz-form-item>
         <nz-form-label nzSpan="5" nzRequired>Note</nz-form-label>
         <nz-form-control nzErrorTip="Ce champ est requis">
@@ -48,4 +6,18 @@
         </nz-form-control>
     </nz-form-item>
 
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired> Type </nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <nz-select placeholder="Type de client" formControlName="customerTypeId">
+                @for (customertype of customerTypes(); track customertype.id) {
+                    <nz-option nzValue="{{customertype.id}}" nzLabel="{{ customertype.label }}"></nz-option>
+                }
+            </nz-select>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-flex nzJustify="end">
+        <button nz-button nzType="primary" (click)="submitForm()">Valider</button>
+    </nz-flex>
 </form>

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);
+    }
 }