change icon from tables

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

@@ -17,11 +17,18 @@
                 <td>{{ data.date | date: 'dd/MM/yyyy' }}</td>
                 <td>{{ data.plannedReturningDate | date: 'dd/MM/yyyy'}}</td>
                 <td>{{ data.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
-                <td>
-                    <app-modal [name]="'Modifier'">
-                        <app-update-loan></app-update-loan>
-                    </app-modal>
-                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                <td style="justify-content: center; display: flex">
+                    <div class="cursor-pointer">
+                        <app-modal-icon icon="edit" [name]="'Modifier'">
+                            <app-update-loan></app-update-loan>
+                        </app-modal-icon>
+                    </div>
+
+                    <nz-divider nzType="vertical"></nz-divider>
+
+                    <div (click)="delete()" class="text-red-600 cursor-pointer">
+                        <nz-icon nzTheme="outline" nzType="delete"></nz-icon>
+                    </div>
                 </td>
             </tr>
         }

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

@@ -1,19 +1,21 @@
 import { Component } from '@angular/core';
 import {DatePipe} from "@angular/common";
-import {Modal} from "../modal/modal";
-import {NzButtonComponent} from "ng-zorro-antd/button";
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {UpdateLoan} from "../update-loan/update-loan";
 import {LoanInfo} from "../../interfaces/loan.interfaces";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-loan-table',
     imports: [
         DatePipe,
-        Modal,
-        NzButtonComponent,
         NzTableComponent,
-        UpdateLoan
+        UpdateLoan,
+        ModalIcon,
+        NzDividerComponent,
+        NzIconDirective
     ],
   templateUrl: './loan-table.html',
   styleUrl: './loan-table.css',

src/app/components/modal-icon/modal-icon.html

@@ -0,0 +1,18 @@
+<div (click)="showModal()">
+    <nz-icon [nzType]="icon()" nzTheme="outline"></nz-icon>
+</div>
+
+<ng-template #modalContent>
+    <ng-content></ng-content>
+</ng-template>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="name()"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+        [nzContent]="modalContent"
+>
+</nz-modal>
+

src/app/components/modal-icon/modal-icon.ts

@@ -0,0 +1,35 @@
+import {Component, input} from '@angular/core';
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+  selector: 'app-modal-icon',
+    imports: [
+        NzModalComponent,
+        NzIconDirective
+    ],
+  templateUrl: './modal-icon.html',
+  styleUrl: './modal-icon.css',
+})
+export class ModalIcon {
+    icon = input.required<string>()
+    name = input.required<string>();
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000); // 1 secondes
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}

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

@@ -18,7 +18,7 @@
                 <td>{{ data.birthDate | date: 'dd/MM/yyyy'}}</td>
                 <td>
                     <app-modal type="link" [name]="'Voir les emprunts'">
-                        <nz-table #basicTable [nzData]="listOfData">
+                        <nz-table [nzData]="listOfData">
                             <thead>
                             <tr style="text-align: center">
                                 <th>Livre</th>
@@ -38,11 +38,18 @@
                         </nz-table>
                     </app-modal>
                 </td>
-                <td>
-                    <app-modal [name]="'Modifier'">
-                        <app-update-user></app-update-user>
-                    </app-modal>
-                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                <td style="justify-content: center; display: flex">
+                    <div class="cursor-pointer">
+                        <app-modal-icon icon="edit" [name]="'Modifier'">
+                            <app-update-user></app-update-user>
+                        </app-modal-icon>
+                    </div>
+
+                    <nz-divider nzType="vertical"></nz-divider>
+
+                    <div (click)="delete()" class="text-red-600 cursor-pointer">
+                        <nz-icon nzType="delete" nzTheme="outline"></nz-icon>
+                    </div>
                 </td>
             </tr>
         }

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

@@ -2,18 +2,22 @@ import { Component } from '@angular/core';
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {Modal} from "../modal/modal";
 import {DatePipe} from "@angular/common";
-import {NzButtonComponent} from "ng-zorro-antd/button";
 import {UserInfo} from "../../interfaces/user.interfaces";
 import {UpdateUser} from "../update-user/update-user";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
 
 @Component({
   selector: 'app-user-table',
     imports: [
         DatePipe,
         Modal,
-        NzButtonComponent,
         NzTableComponent,
         UpdateUser,
+        ModalIcon,
+        NzIconDirective,
+        NzDividerComponent,
     ],
   templateUrl: './user-table.html',
   styleUrl: './user-table.css',