add getall and delete function from quotation page

src/app/components/quotation-form/quotation-form.html

@@ -1,4 +1,4 @@
-<form nz-form nzLayout="horizontal" [formGroup]="QuotationForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="QuotationForm">
     <nz-form-item nz-flex>
         <nz-form-label nzSpan="9">
             Message du devis
@@ -18,15 +18,5 @@
             <input nz-input placeholder="Conditions de vente" formControlName="quotationConditionsSale">
         </nz-form-control>
     </nz-form-item>
-
-    <nz-form-item nz-flex>
-        <nz-form-label nzSpan="9" nzRequired>
-            Fournisseur
-        </nz-form-label>
-
-        <nz-form-control nzSpan="12">
-            <input nz-input placeholder="Fournisseur" formControlName="quotationProvider">
-        </nz-form-control>
-    </nz-form-item>
 </form>
 

src/app/components/quotation-form/quotation-form.ts

@@ -26,15 +26,4 @@ export class QuotationForm {
         quotationMessage: new FormControl<string>(null),
         quotationConditionsSale: new FormControl<string>(null),
     })
-
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.QuotationForm.invalid) return;
-
-        // Pour obtenir la valeur du formulaire
-        console.log(this.QuotationForm.getRawValue())
-
-        // Pour vider le formulaire
-        this.QuotationForm.reset()
-    }
 }

src/app/components/quotation-table/quotation-table.html

@@ -1,22 +1,23 @@
-<nz-table #basicTable [nzData]="quotations" class="mr-7">
+<nz-table class="mr-7"
+          [nzData]="quotations()"
+          [nzLoading]="quotationsLoading()"
+          [nzFrontPagination]="false"
+>
     <thead>
     <tr class="text-center">
         <th>Numéro de Devis</th>
         <th>Message</th>
         <th>Conditions de vente</th>
-        <th>Fournisseur</th>
         <th>Produit</th>
         <th>Action</th>
     </tr>
     </thead >
     <tbody class="text-center">
-        @for (data of basicTable.data; track data) {
+        @for (quotation of quotations(); track quotation.id) {
             <tr>
-                <td>{{data.quotationId}}</td>
-                <td>{{data.quotationMessage}}</td>
-                <td>{{data.quotationConditionsSale}}</td>
-                <td>{{data.Supplier}}</td>
-
+                <td>{{quotation.id}}</td>
+                <td>{{quotation.message}}</td>
+                <td>{{quotation.conditionsSale}}</td>
                 <td>
                     <app-modal-button type="link" name="Voir les produits">
                         <div style="max-height: 400px; overflow-y: auto;">
@@ -31,25 +32,19 @@
                                 </tr>
                                 </thead>
                                 <tbody class="text-center">
-
+                                    @for (product of quotation.getQuotationProductDto; track product.productId) {
                                         <tr>
-                                            <td>{{data.quotationProductReference}}</td>
-                                            <td>{{data.quotationProductName}}</td>
-                                            <td>XX.XX€</td>
-                                            <td>{{data.quotationProductQuantity}}</td>
+                                            <td>{{ product.productReferences }}</td>
+                                            <td>{{ product.productName }}</td>
+                                            <td>Price ???</td>
+                                            <td>Quantité ???</td>
                                             <td>
                                                 <div style="justify-content: center; display: flex">
-                                                    <app-modal-nav nameIcon="edit" name="Modification du produit" class="cursor-pointer">
-                                                        <app-product-form></app-product-form>
-                                                    </app-modal-nav>
-                                                    <nz-divider nzType="vertical"></nz-divider>
-                                                    <div>
-                                                        <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
-                                                    </div>
+                                                    <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
                                                 </div>
                                             </td>
                                         </tr>
-
+                                    }
                                 </tbody>
                             </nz-table>
                         </div>
@@ -57,12 +52,16 @@
                 </td>
                 <td>
                     <div style="justify-content: center; display: flex">
+                        <div>
+                            <nz-icon nzType="plus-circle" nzTheme="outline" class="cursor-pointer text-green-700" />
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
                         <app-modal-nav nameIcon="edit" name="Modification du devis" class="cursor-pointer">
                             <app-quotation-form></app-quotation-form>
                         </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(quotation.id)"/>
                         </div>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>

src/app/components/quotation-table/quotation-table.ts

@@ -1,27 +1,13 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {ModalButton} from "../modal-button/modal-button";
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {QuotationForm} from "../quotation-form/quotation-form";
-import {ProductTable} from "../product-table/product-table";
-import {ProductForm} from "../product-form/product-form";
-
-interface QuotationInfo {
-    quotationId: number;
-    quotationMessage?: string;
-    quotationConditionsSale?: string;
-    quotationProduct: [
-        { quotationProductReference: string; },
-        { quotationProductName: string; },
-        { quotationProductQuantity?: number; },
-    ],
-    quotationProductReference: string;
-    quotationProductName: string;
-    quotationProductQuantity?: number;
-    Supplier?: string;
-}
+import {GetQuotationDto, QuotationsService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
     selector: 'app-quotation-table',
@@ -32,56 +18,50 @@ interface QuotationInfo {
         NzIconDirective,
         NzTableComponent,
         QuotationForm,
-        ProductForm
     ],
     templateUrl: './quotation-table.html',
     styleUrl: './quotation-table.css',
 })
 
-export class QuotationTable {
-    quotations: QuotationInfo[] = [
-        {
-            quotationId: 101,
-            quotationMessage: 'Livraison urgente demandée',
-            quotationConditionsSale: 'Paiement à 30 jours',
-            quotationProduct: [
-                { quotationProductReference: 'DLV-1000' },
-                { quotationProductName: 'Produit1'},
-                { quotationProductQuantity: 5 },
-            ],
-            quotationProductReference: 'DLV-1000',
-            quotationProductName: 'Produit1',
-            quotationProductQuantity: 5,
-            Supplier: 'Fireworkssupplier&Co'
-        },
-        {
-            quotationId: 102,
-            quotationMessage: 'Livraison standard',
-            quotationConditionsSale: 'Payé d\'avance',
-            quotationProduct: [
-                { quotationProductReference: 'DLV-1001' },
-                { quotationProductName: 'Produit2'},
-                { quotationProductQuantity: 6 },
-            ],
-            quotationProductReference: 'DLV-1001',
-            quotationProductName: 'Produit2',
-            quotationProductQuantity: 6,
-            Supplier: 'Fireworkssupplier&Co'
-        },
-        {
-            quotationId: 103,
-            quotationMessage: 'Livraison rapide',
-            quotationConditionsSale: 'Paiement à 15 jours',
-            quotationProduct: [
-                { quotationProductReference: 'DLV-1003' },
-                { quotationProductName: 'Produit3'},
-                { quotationProductQuantity: 7 },
-            ],
-            quotationProductReference: 'DLV-1002',
-            quotationProductName: 'Produit3',
-            quotationProductQuantity: 7,
-            Supplier: 'Fireworkssupplier&Co'
+export class QuotationTable implements OnInit {
+    private quotationsService = inject(QuotationsService);
+    private notificationService = inject(NzNotificationService)
+    quotations = signal<GetQuotationDto[]>([]);
+    quotationsLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchQuotations();
+    }
+
+    async fetchQuotations() {
+        this.quotationsLoading.set(true)
+
+        try {
+            const quotations = await firstValueFrom(this.quotationsService.getAllQuotationEndpoint())
+            this.quotations.set(quotations);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
         }
-    ];
+        this.quotationsLoading.set(false)
+    }
+
+    async delete(quotation:number) {
+        try {
+            await firstValueFrom(this.quotationsService.deleteQuotationEndpoint(quotation))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        await this.fetchQuotations();
+    }
 }
 

src/app/pages/quotation/quotation.html

@@ -1,8 +1,4 @@
 <div class="flex mt-2">
-    <app-modal-button type="primary" name="Créer un devis">
-        <app-quotation-form></app-quotation-form>
-    </app-modal-button>
-
     <div class="ml-95 w-150">
         <app-search></app-search>
     </div>