added profil section and fix error in stock-table.html

src/app/app.html

@@ -79,7 +79,7 @@
     </nz-header>
 
     <nz-content>
-        <div class="inner-content">
+        <div class="inner-content overflow-auto">
             <router-outlet></router-outlet>
         </div>
     </nz-content>

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

@@ -0,0 +1,38 @@
+<form nz-form nzLayout="horizontal" [formGroup]="profilForm" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Prénom
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Alain" formControlName="newName">
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Email
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="alain.terieur@pyrofetes.fr" formControlName="newEmail">
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Fonction
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="visiteur" formControlName="newFonction">
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Mot de passe
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="newPassword">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective} 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";
+
+@Component({
+  selector: 'app-profil-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './profil-form.html',
+  styleUrl: './profil-form.css',
+})
+export class ProfilForm {
+    profilForm: FormGroup = new FormGroup({
+        newName: new FormControl<string>(null, [Validators.required]),
+        newEmail: new FormControl<string>(null, [Validators.required]),
+        newFonction: new FormControl<string>(null, [Validators.required]),
+        newPassword: new FormControl<string>(null, [Validators.required])
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.profilForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.profilForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.profilForm.reset()
+    }
+}

src/app/components/profil/profil.html

@@ -1,3 +1,9 @@
+<div class="ml-110 cursor-pointer">
+    <app-modal-nav nameIcon="edit" name="Modification du profil">
+        <app-profil-form></app-profil-form>
+    </app-modal-nav>
+</div>
+
 <div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl festive">
     {{ getInitial(data.name) }}
 </div>
@@ -6,5 +12,4 @@
     <p class="text-2xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
     <p class="text-l festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
     <p class="text-l festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
-    <button nz-button nzType="primary" class="ml-82">Modifier mon profil</button>
 </div>

src/app/components/profil/profil.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import {UserInfo} from "../../interfaces/user.interface";
-import {NzButtonComponent} from "ng-zorro-antd/button";
+import {ProfilForm} from "../profil-form/profil-form";
+import {ModalNav} from "../modal-nav/modal-nav";
 
 @Component({
   selector: 'app-profil',
     imports: [
-        NzButtonComponent
+        ProfilForm,
+        ModalNav
     ],
   templateUrl: './profil.html',
   styleUrl: './profil.css',

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

@@ -1,13 +1,13 @@
-<nz-table #basicTable [nzData]="listOfData">
+<nz-table #basicTable [nzData]="listOfData" class="mr-7">
     <thead>
     <tr>
         <th>Nom</th>
-        <th>Duration</th>
-        <th>Caliber</th>
-        <th>quantity</th>
-        <th>Weight</th>
         <th>Nec</th>
-        <th>MinimalQuantity</th>
+        <th>Calibre</th>
+        <th>Poid</th>
+        <th>Durée</th>
+        <th>Quantité</th>
+        <th>Limite</th>
         <th>Action</th>
     </tr>
     </thead>
@@ -15,19 +15,19 @@
         @for (data of basicTable.data; track data) {
             <tr>
                 <td>{{data.name}}</td>
-                <td>{{data.duration}}</td>
-                <td>{{data.caliber}}</td>
-                <td>{{data.quantity}}</td>
-                <td>{{data.weight}}</td>
                 <td>{{data.nec}}</td>
+                <td>{{data.caliber}}</td>
+                <td>{{data.weight}}</td>
+                <td>{{data.duration}}</td>
+                <td>{{data.quantity}}</td>
                 <td>{{data.minimalQuantity}}</td>
                 <td>
                     <div style="display: flex; gap: 10px;">
-                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale">
+                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale" class="cursor-pointer">
                             <app-stock-form></app-stock-form>
                         </app-modal-nav>
                         <div>
-                            <nz-icon nzType="delete" nzTheme="outline"/>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
                         </div>
                     </div>
                 </td>

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

@@ -18,25 +18,38 @@ import {StockForm} from "../stock-form/stock-form";
 })
 export class StockTable {
     listOfData: StockInfo[] = [
-        {
+        { name: 'Stock 1', duration: '10 days', caliber: '100g', quantity: 100, weight: 1000, nec: '5kg', minimalQuantity: 5 },
-            name: 'Stock 1',
+        { name: 'Stock 2', duration: '20 days', caliber: '200g', quantity: 200, weight: 2000, nec: '10kg', minimalQuantity: 10 },
-            duration: '10 days',
+        { name: 'Stock 3', duration: '15 days', caliber: '150g', quantity: 150, weight: 1500, nec: '7.5kg', minimalQuantity: 7 },
-            caliber: '100g',
+        { name: 'Stock 4', duration: '12 days', caliber: '120g', quantity: 120, weight: 1200, nec: '6kg', minimalQuantity: 6 },
-            quantity: 100,
+        { name: 'Stock 5', duration: '18 days', caliber: '180g', quantity: 180, weight: 1800, nec: '9kg', minimalQuantity: 9 },
-            weight: 1000,
+        { name: 'Stock 6', duration: '22 days', caliber: '220g', quantity: 220, weight: 2200, nec: '11kg', minimalQuantity: 11 },
-            nec: '5kg',
+        { name: 'Stock 7', duration: '8 days', caliber: '80g', quantity: 80, weight: 800, nec: '4kg', minimalQuantity: 4 },
-            minimalQuantity: 5
+        { name: 'Stock 8', duration: '25 days', caliber: '250g', quantity: 250, weight: 2500, nec: '12.5kg', minimalQuantity: 12 },
-        },
+        { name: 'Stock 9', duration: '14 days', caliber: '140g', quantity: 140, weight: 1400, nec: '7kg', minimalQuantity: 7 },
-        {
+        { name: 'Stock 10', duration: '16 days', caliber: '160g', quantity: 160, weight: 1600, nec: '8kg', minimalQuantity: 8 },
-            name: 'Stock 2',
+        { name: 'Stock 11', duration: '11 days', caliber: '110g', quantity: 110, weight: 1100, nec: '5.5kg', minimalQuantity: 5 },
-            duration: '20 days',
+        { name: 'Stock 12', duration: '19 days', caliber: '190g', quantity: 190, weight: 1900, nec: '9.5kg', minimalQuantity: 9 },
-            caliber: '200g',
+        { name: 'Stock 13', duration: '13 days', caliber: '130g', quantity: 130, weight: 1300, nec: '6.5kg', minimalQuantity: 6 },
-            quantity: 200,
+        { name: 'Stock 14', duration: '17 days', caliber: '170g', quantity: 170, weight: 1700, nec: '8.5kg', minimalQuantity: 8 },
-            weight: 2000,
+        { name: 'Stock 15', duration: '21 days', caliber: '210g', quantity: 210, weight: 2100, nec: '10.5kg', minimalQuantity: 10 },
-            nec: '10kg',
+        { name: 'Stock 16', duration: '9 days', caliber: '90g', quantity: 90, weight: 900, nec: '4.5kg', minimalQuantity: 4 },
-            minimalQuantity: 10
+        { name: 'Stock 17', duration: '23 days', caliber: '230g', quantity: 230, weight: 2300, nec: '11.5kg', minimalQuantity: 11 },
-        }
+        { name: 'Stock 18', duration: '7 days', caliber: '70g', quantity: 70, weight: 700, nec: '3.5kg', minimalQuantity: 3 },
+        { name: 'Stock 19', duration: '24 days', caliber: '240g', quantity: 240, weight: 2400, nec: '12kg', minimalQuantity: 12 },
+        { name: 'Stock 20', duration: '6 days', caliber: '60g', quantity: 60, weight: 600, nec: '3kg', minimalQuantity: 3 },
+        { name: 'Stock 21', duration: '26 days', caliber: '260g', quantity: 260, weight: 2600, nec: '13kg', minimalQuantity: 13 },
+        { name: 'Stock 22', duration: '5 days', caliber: '50g', quantity: 50, weight: 500, nec: '2.5kg', minimalQuantity: 2 },
+        { name: 'Stock 23', duration: '27 days', caliber: '270g', quantity: 270, weight: 2700, nec: '13.5kg', minimalQuantity: 13 },
+        { name: 'Stock 24', duration: '4 days', caliber: '40g', quantity: 40, weight: 400, nec: '2kg', minimalQuantity: 2 },
+        { name: 'Stock 25', duration: '28 days', caliber: '280g', quantity: 280, weight: 2800, nec: '14kg', minimalQuantity: 14 },
+        { name: 'Stock 26', duration: '3 days', caliber: '30g', quantity: 30, weight: 300, nec: '1.5kg', minimalQuantity: 1 },
+        { name: 'Stock 27', duration: '29 days', caliber: '290g', quantity: 290, weight: 2900, nec: '14.5kg', minimalQuantity: 14 },
+        { name: 'Stock 28', duration: '2 days', caliber: '20g', quantity: 20, weight: 200, nec: '1kg', minimalQuantity: 1 },
+        { name: 'Stock 29', duration: '30 days', caliber: '300g', quantity: 300, weight: 3000, nec: '15kg', minimalQuantity: 15 },
+        { name: 'Stock 30', duration: '1 day', caliber: '10g', quantity: 10, weight: 100, nec: '0.5kg', minimalQuantity: 1 },
     ];
+
     delete(){
         return
     }

src/app/interfaces/stock.interface.ts

@@ -1,9 +1,9 @@
 export interface StockInfo {
     name: string;
-    duration: string;
-    caliber: string;
-    quantity: number;
-    weight: number;
     nec: string;
+    caliber: string;
+    weight: number;
+    duration: string;
+    quantity: number;
     minimalQuantity: number;
 }