last commit

src/app/app.html

@@ -7,6 +7,7 @@
       </a>
     </div>
      <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
+         <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/contact"><nz-icon nzType="user" nzTheme="outline" /> Contact </li>
          <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/customers"><nz-icon nzType="shop" nzTheme="outline" /> Clients</li>
          <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/providers"><nz-icon nzType="solution" nzTheme="outline" /> Prestataires</li>
          <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/staff"><nz-icon nzType="fire" nzTheme="fill" /> Artificiers</li>

src/app/app.routes.ts

@@ -7,8 +7,12 @@ export const routes: Routes = [
       redirectTo: '/customers'
   },
           {
-          path:'customers',
-          loadComponent: () => import('./pages/customers/customers').then(x => x.Customers)
+              path:'contact',
+              loadComponent: () => import('./pages/contact/contact').then(x => x.Contact)
+          },
+          {
+              path:'customers',
+              loadComponent: () => import('./pages/customers/customers').then(x => x.Customers)
           },
 
           {

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

@@ -0,0 +1 @@
+<p>contact-add-form works!</p>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-add-form',
+  imports: [],
+  templateUrl: './contact-add-form.html',
+  styleUrl: './contact-add-form.css',
+})
+export class ContactAddForm {
+
+}

src/app/pages/contact/contact-get-all-form/contact-get-all-form.html

@@ -0,0 +1 @@
+<p>contact-get-all-form works!</p>

src/app/pages/contact/contact-get-all-form/contact-get-all-form.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-get-all-form',
+  imports: [],
+  templateUrl: './contact-get-all-form.html',
+  styleUrl: './contact-get-all-form.css',
+})
+export class ContactGetAllForm {
+
+}

src/app/pages/contact/contact-get-all/contact-get-all.html

@@ -0,0 +1 @@
+<p>contact-get-all works!</p>

src/app/pages/contact/contact-get-all/contact-get-all.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-get-all',
+  imports: [],
+  templateUrl: './contact-get-all.html',
+  styleUrl: './contact-get-all.css',
+})
+export class ContactGetAll {
+
+}

src/app/pages/contact/contact.html

@@ -0,0 +1 @@
+<p>contact works!</p>

src/app/pages/contact/contact.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact',
+  imports: [],
+  templateUrl: './contact.html',
+  styleUrl: './contact.css',
+})
+export class Contact {
+
+}

src/app/pages/customers/create-customers-modal/customers-card-form.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, output} from '@angular/core';
 import {NzMessageService} from "ng-zorro-antd/message";
 import {NzButtonModule} from "ng-zorro-antd/button";
 import {NzModalModule} from "ng-zorro-antd/modal";
@@ -6,7 +6,7 @@ import {ProvidersAddForm} from "../../providers/providers-add-form/providers-add
 import {CustomersAddForm} from "../customers-add-form/customers-add-form";
 
 @Component({
-  selector: 'app-customers-card-form',
+  selector: 'app-create-customers-modal',
     imports: [NzButtonModule, NzModalModule, CustomersAddForm],
     template: `
         <button nz-button nzType="primary" (click)="showModal()">
@@ -44,14 +44,18 @@ export class CustomersCardForm {
 
     handleOk(): void {
         this.isConfirmLoading = true;
-        this.message.success('Prestataire créé !');
+        this.message.success('Client créé !');
         setTimeout(() => {
             this.isVisible = false;
             this.isConfirmLoading = false;
-        }, 1000);
+        }, 300);
+        this.triggerCreated.emit();
     }
 
     handleCancel(): void {
         this.isVisible = false;
+        this.message.info('Création annulée');
     }
+
+    triggerCreated = output<void>()
 }

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

src/app/pages/customers/customers-card/customers-card.html

@@ -1 +0,0 @@
-<p>customers-card works!</p>

src/app/pages/customers/customers-card/customers-card.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-customers-card',
-  imports: [],
-  templateUrl: './customers-card.html',
-  styleUrl: './customers-card.css',
-})
-export class CustomersCard {
-
-}

src/app/pages/customers/customers-card/get-all-customers-card.ts

@@ -9,7 +9,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 
 @Component({
-  selector: 'app-get-all-customers-card',
+  selector: 'app-customers-card',
     imports: [ReactiveFormsModule, NzFormModule, NzCardComponent, NzIconDirective, NzInputDirective],
   templateUrl: './get-all-customers-card.html',
   styleUrl: './get-all-customers-card.css',

src/app/pages/customers/customers-get-all/customers-get-all.html

@@ -1,9 +0,0 @@
-<div class="card">
-    <div nz-row [nzGutter]="10" style="gap: 30px">
-        @for (customer of customers(); track customer.id)
-        {
-            <!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
-            <app-get-all-customers-card [customer]="customer" (triggerEdited)="fetchCustomers()" />
-        }
-    </div>
-</div>

src/app/pages/customers/customers-get-all/customers-get-all.ts

@@ -1,41 +0,0 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
-import { Router } from '@angular/router';
-import {CustomersService, GetCustomerDto} from "../../../services/api";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-import {firstValueFrom} from "rxjs";
-import {ReactiveFormsModule} from "@angular/forms";
-import {NzFormModule} from "ng-zorro-antd/form";
-import {NzSpaceComponent} from "ng-zorro-antd/space";
-import {GetAllCustomersCard} from "../get-all-customers-card/get-all-customers-card";
-
-@Component({
-  selector: 'app-customers-get-all',
-    imports: [ReactiveFormsModule, NzFormModule, GetAllCustomersCard, GetAllCustomersCard],
-  templateUrl: './customers-get-all.html',
-  styleUrl: './customers-get-all.css',
-})
-export class CustomersGetAll {
-    private customersService = inject(CustomersService);
-    private notificationService = inject(NzNotificationService)
-
-    router = inject(Router);
-
-    customers = signal<GetCustomerDto[]>([]);
-    customersLoading = signal<boolean>(false);
-
-    async ngOnInit() {
-        await this.fetchCustomers();
-    }
-
-    async fetchCustomers() {
-        this.customersLoading.set(true);
-        try {
-            const customers = await firstValueFrom(this.customersService.getAllCustomerEndpoint())
-            this.customers.set(customers)
-        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
-        }
-
-        this.customersLoading.set(false);
-    }
-}

src/app/pages/customers/customers.html

@@ -1,3 +1,11 @@
-<app-customers-card-form/>
+<app-create-customers-modal (triggerCreated)="fetchCustomers()" />
 
-<app-customers-get-all/>
+<div class="card">
+    <div nz-row [nzGutter]="10" style="gap: 30px">
+        @for (customer of customers(); track customer.id)
+        {
+            <!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
+            <app-customers-card [customer]="customer" (triggerEdited)="fetchCustomers()" />
+        }
+    </div>
+</div>

src/app/pages/customers/customers.ts

@@ -1,16 +1,44 @@
-import { Component } from '@angular/core';
-import {CustomersCardForm} from "./customers-card-form/customers-card-form";
-import {CustomersGetAll} from "./customers-get-all/customers-get-all";
+import {Component, inject, signal} from '@angular/core';
+import {CustomersCardForm} from "./create-customers-modal/customers-card-form";
+import {GetAllCustomersCard} from "./customers-card/get-all-customers-card";
+import {NzRowDirective} from "ng-zorro-antd/grid";
+import {CustomersService, GetCustomerDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-customers',
     imports: [
         CustomersCardForm,
-        CustomersGetAll
+        GetAllCustomersCard,
+        NzRowDirective
     ],
   templateUrl: './customers.html',
   styleUrl: './customers.css',
 })
 export class Customers {
+    private customersService = inject(CustomersService);
+    private notificationService = inject(NzNotificationService)
 
-}
+    router = inject(Router);
+
+    customers = signal<GetCustomerDto[]>([]);
+    customersLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchCustomers();
+    }
+
+    async fetchCustomers() {
+        this.customersLoading.set(true);
+        try {
+            const customers = await firstValueFrom(this.customersService.getAllCustomerEndpoint())
+            this.customers.set(customers)
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.customersLoading.set(false);
+    }
+}

src/app/pages/providers/providers-card/providers-card.html

@@ -1 +0,0 @@
-<app-providers-card-form/>

src/app/pages/providers/providers-card/providers-card.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import {ProvidersCardForm} from "../providers-card-form/providers-card-form";
-
-@Component({
-  selector: 'app-providers-card',
-  imports: [ProvidersCardForm],
-  templateUrl: './providers-card.html',
-  styleUrl: './providers-card.css',
-})
-export class ProvidersCard {
-
-}

src/app/pages/staff/staff-card/staff-card.html

@@ -1 +0,0 @@
-<p>staff-card works!</p>

src/app/pages/staff/staff-card/staff-card.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-staff-card',
-  imports: [],
-  templateUrl: './staff-card.html',
-  styleUrl: './staff-card.css',
-})
-export class StaffCard {
-
-}

src/theme.less

@@ -7,3 +7,68 @@
 // View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
 
 @primary-color: #1c1c1c;
+
+@modal-content-bg: #1c1c1c;
+@moodal-content-header-bg: #1c1c1c;
+@modal-header-bg: #1c1c1c;
+@modal-header-border-color-split : #1c1c1c;
+@modal-footer-border-color-split : #1c1c1c;
+@modal-content-border-color-split : #1c1c1c;
+@modal-close-color: #ea7e63;
+@modal-heading-color: #AF9252;
+@label-color: #AF9252;
+
+
+.ant-modal-content {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+
+.ant-modal-header {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.ant-modal-footer {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+/* Bouton Cancel/Annuler - Rouge */
+.ant-modal-footer .ant-btn-default {
+  background-color: #1c1c1c;
+  color: #ea7e63;
+  border-color: #ea7e63;
+}
+
+.ant-modal-footer .ant-btn-default:hover,
+.ant-modal-footer .ant-btn-default:focus {
+  background-color: #ea7e63;
+  color: #1c1c1c;
+  border-color: #ea7e63;
+}
+
+/* Bouton Submit/Valider - Vert */
+.ant-modal-footer .ant-btn-primary {
+  background-color: #1c1c1c;
+  color: #5cd073;
+  border-color: #5cd073;
+}
+
+.ant-modal-footer .ant-btn-primary:hover,
+.ant-modal-footer .ant-btn-primary:focus {
+  background-color: #5cd073;
+  color: #1c1c1c;
+  border-color: #5cd073;
+}
+
+/* Désactiver l'ombre par défaut si vous le souhaitez */
+.ant-modal-footer .ant-btn {
+  box-shadow: none;
+}
+
+.ant-modal-footer .ant-btn:hover,
+.ant-modal-footer .ant-btn:focus {
+  box-shadow: none;
+}