added modal-icon

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

@@ -40,14 +40,16 @@
                 <td>
                     <div style="justify-content: center; display: flex">
                         <td>
-                            <app-modal [name]="'Modifier'">
+                            <app-modal-icon nameIcon="edit" [name]="'Modifier'">
                                 <app-update-author></app-update-author>
-                            </app-modal>
+                            </app-modal-icon>
 
                             <nz-divider nzType="vertical"></nz-divider>
 
                             <div>
-                                <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                                <div>
+                                    <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="text-red-600"></nz-icon>
+                                </div>
                             </div>
                         </td>
                     </div>

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

@@ -1,21 +1,23 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
 import {Modal} from "../modal/modal";
-import {NzButtonComponent} from "ng-zorro-antd/button";
 import {AuthorsService, GetAuthorDto} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {UpdateAuthor} from "../update-author/update-author";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-author-table',
     imports: [
         Modal,
-        NzButtonComponent,
         NzTableComponent,
         NzDividerComponent,
-        UpdateAuthor
+        UpdateAuthor,
+        ModalIcon,
+        NzIconDirective
     ],
   templateUrl: './author-table.html',
   styleUrl: './author-table.css',

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

@@ -19,14 +19,16 @@
                 <td>{{ book.releaseYear}}</td>
                 <div style="justify-content: center; display: flex">
                     <td>
-                        <app-modal [name]="'Modifier'">
+                        <app-modal-icon nameIcon="edit" [name]="'Modifier'">
                             <app-update-book></app-update-book>
-                        </app-modal>
+                        </app-modal-icon>
 
                         <nz-divider nzType="vertical"></nz-divider>
 
                         <div>
-                            <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                            <div>
+                                <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="text-red-600"></nz-icon>
+                            </div>
                         </div>
                     </td>
                 </div>

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

@@ -1,21 +1,21 @@
 import {Component, inject, OnInit, signal} from '@angular/core'; // Importation de la fonction input() et des components
-import {Modal} from "../modal/modal";
-import {NzButtonComponent} from "ng-zorro-antd/button";
 import {BooksService, GetBookDto} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {UpdateBook} from "../update-book/update-book";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-book-table',
     imports: [
-        Modal,
-        NzButtonComponent,
         NzTableComponent,
         NzDividerComponent,
         UpdateBook,
+        ModalIcon,
+        NzIconDirective,
     ],
   templateUrl: './book-table.html',
   styleUrl: './book-table.css',

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

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

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

@@ -1,23 +1,23 @@
 import {Component, inject, OnInit, signal} 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 {GetLoanDto, LoansService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-loan-table',
     imports: [
         DatePipe,
-        Modal,
-        NzButtonComponent,
         NzTableComponent,
         UpdateLoan,
         NzDividerComponent,
+        ModalIcon,
+        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]="nameIcon" 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,36 @@
+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 {
+    @Input() nameIcon: string = '';
+    @Input() name: string = '';
+
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}

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

@@ -45,14 +45,16 @@
                 <td>
                     <div style="justify-content: center; display: flex">
                         <td>
-                            <app-modal [name]="'Modifier'">
+                            <app-modal-icon nameIcon="edit" [name]="'Modifier'">
                                 <app-update-user></app-update-user>
-                            </app-modal>
+                            </app-modal-icon>
 
                             <nz-divider nzType="vertical"></nz-divider>
 
                             <div>
-                                <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                                <div>
+                                    <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="text-red-600"></nz-icon>
+                                </div>
                             </div>
                         </td>
                     </div>

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

@@ -2,22 +2,24 @@ import {Component, inject, OnInit, signal} 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 {UpdateUser} from "../update-user/update-user";
 import {GetUserDto, UsersService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {ModalIcon} from "../modal-icon/modal-icon";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-user-table',
     imports: [
         DatePipe,
         Modal,
-        NzButtonComponent,
         NzTableComponent,
         UpdateUser,
         NzDividerComponent,
+        ModalIcon,
+        NzIconDirective,
     ],
   templateUrl: './user-table.html',
   styleUrl: './user-table.css',