providers create form added

src/app/app.css

@@ -3,7 +3,7 @@
 }
 
 .app-layout {
-  height: 150vh;
+    height: 150vh;
     width: 100%;
 }
 
@@ -36,8 +36,8 @@
 
 .logo img {
   display: inline-block;
-  height: 70px;
-  width: 130px;
+    height: 70px;
+    width: 130px;
 }
 
 .logo h1 {

src/app/app.html

@@ -2,16 +2,16 @@
   <nz-header>
     <div class="logo">
       <a>
-        <img src="../logo-navbar.svg" alt="logo">
-        <h1>Gestion des relations</h1>
+         <img src="../logo-navbar.svg" alt="logo">
+         <h1>Gestion des relations</h1>
       </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="/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>
-      <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/opportunities"><nz-icon nzType="stock" nzTheme="outline" /> Opportunités</li>
-    </ul>
+     <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
+         <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>
+         <li nz-menu-item class="nav-item" routerLinkActive="ant-menu-item-selected" routerLink="/opportunities"><nz-icon nzType="stock" nzTheme="outline" /> Opportunités</li>
+     </ul>
   </nz-header>
   <nz-content>
     <div class="inner-content">

src/app/pages/customers/customers.html

@@ -1 +1 @@
-<p>customers works!</p>
+<app-customers-card-form/>

src/app/pages/customers/customers.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import {CustomersCardForm} from "./customers-card-form/customers-card-form";
 
 @Component({
   selector: 'app-customers',
-  imports: [],
+    imports: [
+        CustomersCardForm
+    ],
   templateUrl: './customers.html',
   styleUrl: './customers.css',
 })

src/app/pages/providers/providers-card-form/providers-card-form.css

@@ -0,0 +1,3 @@
+.ant-modal-content {
+    background: #272727;
+}

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

@@ -1,11 +1,56 @@
 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: [],
-  templateUrl: './providers-card-form.html',
+    imports: [NzButtonModule, NzModalModule, ProvidersAddForm],
+    template: `
+        <button nz-button nzType="primary" (click)="showModal()">
+            <span style="font-weight: bold">+</span>
+        </button>
+        <nz-modal
+                [(nzVisible)]="isVisible"
+                [nzTitle]="modalTitle"
+                [nzContent]="modalContent"
+                [nzFooter]="modalFooter"
+                (nzOnCancel)="handleCancel()"
+        >
+            <ng-template #modalTitle>Création de prestataires</ng-template>
+
+            <ng-template #modalContent>
+                <app-providers-add-form/>
+            </ng-template>
+
+            <ng-template #modalFooter>
+                <button nz-button nzType="default" (click)="handleCancel()">Annuler</button>
+                <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Confirmer</button>
+            </ng-template>
+        </nz-modal>
+    `,
   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;
+    }
 }

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

@@ -1 +1 @@
-<p>providers-card works!</p>
+<app-providers-card-form/>

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

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

src/app/pages/providers/providers.html

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

src/app/pages/staff/staff.html

@@ -1 +1 @@
-<p>staff works!</p>
+<app-staff-card-form/>

src/app/pages/staff/staff.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import {StaffCardForm} from "./staff-card-form/staff-card-form";
 
 @Component({
   selector: 'app-staff',
-  imports: [],
+    imports: [
+        StaffCardForm
+    ],
   templateUrl: './staff.html',
   styleUrl: './staff.css',
 })