Providers Pt1

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

@@ -0,0 +1,29 @@
+@if (edit() == false) {
+    <nz-card style="width:400px;" [nzActions]="[edit, delete]">
+        <h2 style="text-align: center; font-weight: bold">Contact n°{{ contact().id }}</h2>
+        <p>Nom : {{ contact().lastName + " " + contact().firstName }}</p>
+    </nz-card>
+    <ng-template #edit>
+        <nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
+    </ng-template>
+    <ng-template #delete>
+        <nz-icon (click)="Delete()" nzType="delete" nzTheme="fill" />
+    </ng-template>
+} @else {
+    <nz-card style="width:400px;" [nzActions]="[back, check]">
+        <form nz-form nzLayout="horizontal" [formGroup]="contactForm">
+            <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="note">
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </nz-card>
+    <ng-template #back>
+        <nz-icon (click)="Back()" nzType="backward" nzTheme="fill" />
+    </ng-template>
+    <ng-template #check>
+        <nz-icon (click)="submitForm()" nzType="check" nzTheme="outline" />
+    </ng-template>
+}

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

@@ -0,0 +1,108 @@
+import {Component, inject, input, output, signal} from '@angular/core';
+import {
+  ContactsService,
+  CustomersService, GetContactDto,
+  GetCustomerDto,
+  UpdateContactDto,
+  UpdateCustomerDto
+} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {firstValueFrom} from "rxjs";
+import {NzCardComponent} from "ng-zorro-antd/card";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+  selector: 'app-contact-card',
+  imports: [NzCardComponent, NzColDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzIconDirective, NzInputDirective, NzRowDirective, ReactiveFormsModule],
+  templateUrl: './contact-card.html',
+  styleUrl: './contact-card.css',
+})
+export class ContactCard {
+  private contactsService = inject(ContactsService);
+  private notificationService = inject(NzNotificationService)
+
+  contactEdit = signal<UpdateContactDto>(null);
+  contactsLoading = signal<boolean>(false);
+
+  contactForm = new FormGroup({
+    id: new FormControl(null, [Validators.required]),
+    lastname: new FormControl<string>(null, [Validators.required]),
+    firstname: new FormControl(null, [Validators.required]),
+    phone: new FormControl(null, [Validators.required]),
+    email: new FormControl(null, [Validators.required]),
+    address: new FormControl(null, [Validators.required]),
+    city: new FormControl(null, [Validators.required]),
+    role: new FormControl(null, [Validators.required])
+  })
+
+  async submitForm() {
+    this.contactsLoading.set(true);
+
+    const contactValue = {
+      lastname: this.contactForm.value.lastname,
+      firstname: this.contactForm.value.firstname,
+      phone: this.contactForm.value.phone,
+      email: this.contactForm.value.email,
+      address: this.contactForm.value.address,
+      city: this.contactForm.value.city,
+      role: this.contactForm.value.role,
+    }
+
+    try {
+      const contact = await firstValueFrom(this.contactsService.updateContactRequest(this.contact().id,contactValue));
+      this.contactEdit.set(contact);
+      console.log(contact);
+      this.contactForm.reset();
+      this.edit.set(false);
+
+      this.triggerEdited.emit();
+
+    } catch (e)
+    {
+      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
+    }
+
+    this.contactsLoading.set(false);
+
+  }
+
+
+  contact = input<GetContactDto>(null);
+
+  edit = signal(false)
+
+  triggerEdited = output<void>();
+
+  protected Edit() {
+    this.edit.set(true)
+  }
+
+  protected Back() {
+    this.edit.set(false)
+    this.contactForm.reset();
+  }
+
+  async Delete() {
+    this.contactsLoading.set(true);
+
+    try {
+      const contact = await firstValueFrom(this.contactsService.deleteContactEndpoint(this.contact().id));
+      this.contactEdit.set(contact);
+
+      this.contactForm.reset();
+      this.triggerEdited.emit();
+
+    } catch (e)
+    {
+      this.notificationService.error('Erreur de recherche', "Le contact n\'existe pas !");
+
+      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
+    }
+
+    this.contactsLoading.set(false);
+  }
+}

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

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

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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

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

src/app/pages/contact/contact.ts

@@ -1,11 +1,46 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
+import {ContactsService, GetContactDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
+import {CustomersCardForm} from "../customers/create-customers-modal/customers-card-form";
+import {GetAllCustomersCard} from "../customers/customers-card/get-all-customers-card";
+import {NzRowDirective} from "ng-zorro-antd/grid";
+import {CreateContactModal} from "./create-contact-modal/create-contact-modal";
+import {ContactCard} from "./contact-card/contact-card";
 
 @Component({
   selector: 'app-contact',
-  imports: [],
+  imports: [
+    NzRowDirective,
+    CreateContactModal,
+    ContactCard
+  ],
   templateUrl: './contact.html',
   styleUrl: './contact.css',
 })
 export class Contact {
+  private contactsService = inject(ContactsService);
+  private notificationService = inject(NzNotificationService)
 
+  router = inject(Router);
+
+  contacts = signal<GetContactDto[]>([]);
+  contactsLoading = signal<boolean>(false);
+
+  async ngOnInit() {
+    await this.fetchCustomers();
+  }
+
+  async fetchCustomers() {
+    this.contactsLoading.set(true);
+    try {
+      const contacts = await firstValueFrom(this.contactsService.getAllContactxuest())
+      this.contacts.set(contacts)
+    } catch (e) {
+      this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+    }
+
+    this.contactsLoading.set(false);
+  }
 }

src/app/pages/contact/create-contact-modal/create-contact-modal.html

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

src/app/pages/contact/create-contact-modal/create-contact-modal.ts

@@ -0,0 +1,63 @@
+import {Component, output} from '@angular/core';
+import {ContactAddForm} from "../contact-add-form/contact-add-form";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+
+@Component({
+  selector: 'app-create-contact-modal',
+  imports: [
+    ContactAddForm,
+    NzButtonComponent,
+    NzModalComponent
+  ],
+  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 style="text-align: center">Création de contacts</ng-template>
+
+      <ng-template #modalContent>
+        <app-contact-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: './create-contact-modal.css',
+})
+export class CreateContactModal {
+  constructor(private message: NzMessageService) {}
+  isVisible = false;
+  isConfirmLoading = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk(): void {
+    this.isConfirmLoading = true;
+    this.message.success('Client 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<void>()
+}

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

@@ -17,8 +17,7 @@ import {CustomersAddForm} from "../customers-add-form/customers-add-form";
                 [nzTitle]="modalTitle"
                 [nzContent]="modalContent"
                 [nzFooter]="modalFooter"
-                (nzOnCancel)="handleCancel()"
-        >
+                (nzOnCancel)="handleCancel()">
             <ng-template #modalTitle style="text-align: center">Création de clients</ng-template>
 
             <ng-template #modalContent>

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

@@ -1,7 +1,7 @@
 @if (edit() == false) {
     <nz-card style="width:400px;" [nzActions]="[edit, delete]">
         <h2 style="text-align: center; font-weight: bold">Client n°{{ customer().id }}</h2>
-        <p>Nom : {{ customer().note }}</p>
+        <p>Note : {{ customer().note }}</p>
     </nz-card>
     <ng-template #edit>
         <nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
@@ -13,7 +13,7 @@
     <nz-card style="width:400px;" [nzActions]="[back, check]">
         <form nz-form nzLayout="horizontal" [formGroup]="customerForm">
             <nz-form-item>
-                <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
+                <nz-form-label nzSpan="5" nzRequired> Note </nz-form-label>
                 <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                     <input nz-input placeholder="Nom" formControlName="note">
                 </nz-form-control>

src/app/pages/providers/create-providers-modal/create-providers-modal.html

@@ -0,0 +1 @@
+<p>create-providers-modal works!</p>

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: `
+    <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 style="text-align: center">Création de clients</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: './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<void>()
+}

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

@@ -1,51 +1,23 @@
 <form nz-form nzLayout="horizontal" [formGroup]="providerForm">
     <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-label nzSpan="5" nzRequired>Note</nz-form-label>
         <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prénom" formControlName="firstName">
+            <input nz-input placeholder="Note" formControlName="note">
         </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-label nzSpan="5" nzRequired> Type </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>Prix</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prix" formControlName="price">
+            <nz-select placeholder="Type de client" formControlName="providerTypeId">
+                @for (providertype of providerTypes(); track providertype.id) {
+                    <nz-option nzValue="{{providertype.id}}" nzLabel="{{ providertype.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/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<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]),
-        price: new FormControl<string>(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<string>(null, [Validators.required]),
+    providerTypeId: new FormControl<number>(null, [Validators.required]),
+  })
+
+  providerPost = signal<CreateCustomerDto>(this.providerForm.value);
+  providersLoading = signal<boolean>(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<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/providers/providers-card-form/providers-card-form.css

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

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

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

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

@@ -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: `
-        <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

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

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 {
+
+}

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

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

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

@@ -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 {
-}

src/app/pages/providers/providers.html

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

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<GetProviderDto[]>([]);
+    providersLoading = signal<boolean>(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);
+    }
 }