updated create-form of loan and book

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

@@ -1,4 +1,4 @@
-<form nz-form nzLayout="horizontal" [formGroup]="createBookForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="createBookForm">
     <nz-form-item>
         <nz-form-label nzSpan="8" nzRequired>
             Titre
@@ -25,7 +25,11 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Auteur" formControlName="author">
+            <nz-select formControlName="authorId" [nzPlaceHolder]="'Choisir un auteur'">
+                @for (author of authors(); track author.id) {
+                    <nz-option [nzValue]="author.id" [nzLabel]="author.firstName + ' ' + author.name"></nz-option>
+                }
+            </nz-select>
         </nz-form-control>
     </nz-form-item>
 

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

@@ -1,30 +1,40 @@
-import { Component } from '@angular/core';
+import {Component, inject, input, OnInit, signal} from '@angular/core';
 import {NzFormModule} from "ng-zorro-antd/form";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {AuthorsService, GetAuthorDto, GetBookDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-create-book',
-    imports: [NzFormModule, ReactiveFormsModule, NzInputDirective],
+    imports: [NzFormModule, ReactiveFormsModule, NzInputDirective, NzOptionComponent, NzSelectComponent],
   templateUrl: './create-book.html',
   styleUrls: ['./create-book.css'],
 })
-export class CreateBook {
+export class CreateBook implements OnInit {
     createBookForm = new FormGroup({
         title: new FormControl<string>(null, [Validators.required]),
         isbn: new FormControl<string>(null, [Validators.required]),
-        releaseYear: new FormControl<string>(null, [Validators.required]),
-        author: new FormControl<string>(null, [Validators.required])
+        releaseYear: new FormControl<number>(null, [Validators.required]),
+        authorId: new FormControl<number>(null, Validators.required)
     })
 
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.createBookForm.invalid) return;
+    private authorsService = inject(AuthorsService);
+    private notificationService = inject(NzNotificationService);
+    authors = signal<GetAuthorDto[]>([]);
 
-        // Pour obtenir la valeur du formulaire
-        console.log(this.createBookForm.getRawValue())
+    async fetchAuthors() {
+        try {
+            const authors = await firstValueFrom(this.authorsService.getAllAuthorsEndpoint());
+            this.authors.set(authors);
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de récupérer les auteurs');
+        }
+    }
 
-        // Pour vider le formulaire
-        this.createBookForm.reset()
+    async ngOnInit() {
+        await this.fetchAuthors();
     }
 }

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

@@ -1,21 +1,29 @@
-<form nz-form nzLayout="horizontal" [formGroup]="createLoanForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="createLoanForm">
     <nz-form-item>
-        <nz-form-label nzSpan="8" nzRequired>
-            Nom / Prénom
+        <nz-form-label nzSpan="10" nzRequired>
+            Utilisateur
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Non défini" formControlName="name">
+            <nz-select formControlName="userId" [nzPlaceHolder]="'Choisir un utilisateur'">
+                @for (user of users(); track user.id) {
+                    <nz-option [nzValue]="user.id" [nzLabel]="user.firstName + ' ' + user.name"></nz-option>
+                }
+            </nz-select>
         </nz-form-control>
     </nz-form-item>
 
     <nz-form-item>
-        <nz-form-label nzSpan="8" nzRequired>
+        <nz-form-label nzSpan="10" nzRequired>
             Livre
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prénom de l'auteur" formControlName="book">
+            <nz-select formControlName="bookId" [nzPlaceHolder]="'Choisir un livre'">
+                @for (book of books(); track book.id) {
+                    <nz-option [nzValue]="book.id" [nzLabel]="book.title"></nz-option>
+                }
+            </nz-select>
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
 import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
-import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {BooksService, GetBookDto, GetUserDto, UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-create-loan',
@@ -15,25 +18,44 @@ import {NzInputDirective} from "ng-zorro-antd/input";
         NzFormLabelComponent,
         NzRowDirective,
         ReactiveFormsModule,
-        NzInputDirective
+        NzOptionComponent,
+        NzSelectComponent
     ],
   templateUrl: './create-loan.html',
   styleUrl: './create-loan.css',
 })
-export class CreateLoan {
+export class CreateLoan implements OnInit {
     createLoanForm = new FormGroup({
-        name: new FormControl<string>(null, [Validators.required]),
-        book: new FormControl<string>(null, [Validators.required])
+        userId: new FormControl<number>(null, Validators.required),
+        bookId: new FormControl<number>(null, Validators.required)
     })
 
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.createLoanForm.invalid) return;
+    private userService = inject(UsersService);
+    private bookService = inject(BooksService);
+    private notificationService = inject(NzNotificationService);
+    users = signal<GetUserDto[]>([]);
+    books = signal<GetBookDto[]>([]);
 
-        // Pour obtenir la valeur du formulaire
-        console.log(this.createLoanForm.getRawValue())
+    async fetchUsers() {
+        try {
+            const users = await firstValueFrom(this.userService.getAllUsersEndpoint());
+            this.users.set(users);
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de récupérer les utilisateurs');
+        }
+    }
 
-        // Pour vider le formulaire
-        this.createLoanForm.reset()
+    async fetchBooks() {
+        try {
+            const books = await firstValueFrom(this.bookService.getAllBooksEndpoint());
+            this.books.set(books);
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Impossible de récupérer les livres');
+        }
+    }
+
+    async ngOnInit() {
+        await this.fetchUsers();
+        await this.fetchBooks();
     }
 }