added search into all selects on all forms

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

@@ -25,7 +25,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="authorId" [nzPlaceHolder]="'Choisir un auteur'">
+            <nz-select formControlName="authorId" [nzPlaceHolder]="'Choisir un auteur'" nzShowSearch [nzFilterOption]="filterAuthor">
                 @for (author of authors(); track author.id) {
                     <nz-option [nzValue]="author.id" [nzLabel]="author.firstName + ' ' + author.name"></nz-option>
                 }

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

@@ -37,4 +37,8 @@ export class CreateBook implements OnInit {
     async ngOnInit() {
         await this.fetchAuthors();
     }
+
+    filterAuthor(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
 }

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

@@ -5,7 +5,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="userId" [nzPlaceHolder]="'Choisir un utilisateur'">
+            <nz-select formControlName="userId" [nzPlaceHolder]="'Choisir un utilisateur'" nzShowSearch [nzFilterOption]="filter">
                 @for (user of users(); track user.id) {
                     <nz-option [nzValue]="user.id" [nzLabel]="user.firstName + ' ' + user.name"></nz-option>
                 }
@@ -19,7 +19,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="bookId" [nzPlaceHolder]="'Choisir un livre'">
+            <nz-select formControlName="bookId" [nzPlaceHolder]="'Choisir un livre'" nzShowSearch [nzFilterOption]="filter">
                 @for (book of books(); track book.id) {
                     <nz-option [nzValue]="book.id" [nzLabel]="book.title"></nz-option>
                 }

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

@@ -60,4 +60,8 @@ export class CreateLoan implements OnInit {
         await this.fetchUsers();
         await this.fetchBooks();
     }
+
+    filter(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
 }

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

@@ -1,5 +1,6 @@
 <nz-table  [nzData]="loans()"
-           [nzLoading]="loansLoading()">
+           [nzLoading]="loansLoading()"
+           [nzFrontPagination]="false">
     <thead>
     <tr style="text-align: center">
         <th>Utilisateur</th>

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

@@ -25,7 +25,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="authorId" [nzPlaceHolder]="'Choisir un auteur'">
+            <nz-select formControlName="authorId" [nzPlaceHolder]="'Choisir un auteur'" nzShowSearch [nzFilterOption]="filterAuthor">
                 @for (author of authors(); track author.id) {
                     <nz-option [nzValue]="author.id" [nzLabel]="author.firstName + ' ' + author.name"></nz-option>
                 }

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

@@ -49,4 +49,8 @@ export class UpdateBook implements OnInit {
     async ngOnInit() {
         await this.fetchAuthors();
     }
+
+    filterAuthor(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
 }

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

@@ -5,7 +5,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="userId" [nzPlaceHolder]="'Choisir un utilisateur'">
+            <nz-select formControlName="userId" [nzPlaceHolder]="'Choisir un utilisateur'" nzShowSearch [nzFilterOption]="filter">
                 @for (user of users(); track user.id) {
                     <nz-option [nzValue]="user.id" [nzLabel]="user.firstName + ' ' + user.name"></nz-option>
                 }
@@ -19,7 +19,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <nz-select formControlName="bookId" [nzPlaceHolder]="'Choisir un livre'">
+            <nz-select formControlName="bookId" [nzPlaceHolder]="'Choisir un livre'" nzShowSearch [nzFilterOption]="filter">
                 @for (book of books(); track book.id) {
                     <nz-option [nzValue]="book.id" [nzLabel]="book.title"></nz-option>
                 }

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

@@ -84,4 +84,8 @@ export class UpdateLoan implements OnInit {
         await this.fetchUsers();
         await this.fetchBooks();
     }
+
+    filter(input: string, option: any) {
+        return option.nzLabel.toLowerCase().includes(input.toLowerCase());
+    }
 }