added all edit function

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

@@ -12,9 +12,9 @@
     <tbody style="text-align: center">
         @for (author of authors(); track author.id) {
             <tr>
-                <td>{{ author.name}}</td>
                 <td>{{ author.firstName}}</td>
-                <td>
+                <td>{{ author.name }}</td>
+                <td style="text-align: center;">
                     <app-modal type="link" [name]="'Voir les livres'">
                         <nz-table [nzData]="authors()"
                                   [nzFrontPagination]="false">

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

@@ -21,7 +21,9 @@
                 <div style="justify-content: center; display: flex">
                     <td>
                         <div style="display: flex; align-items: center;">
-                            <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"></nz-icon>
+                            <nz-icon nzType="check" nzTheme="outline" class="cursor-pointer" (click)="validationDate(loan.id)"></nz-icon>
+                            <nz-divider nzType="vertical"></nz-divider>
+                            <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(loan)"></nz-icon>
                             <nz-divider nzType="vertical"></nz-divider>
                             <nz-icon nzType="delete" nzTheme="outline" (click)="delete(loan.id)" class="text-red-600 cursor-pointer"></nz-icon>
                         </div>
@@ -33,7 +35,7 @@
 </nz-table>
 
 <div class="hidden">
-    <app-modal-icon nameIcon="edit" [name]="'Modifier'">
+    <app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedLoan.id, updateLoan, modalIcon)" (cancel)="onModalCancel(modalIcon)">
-        <app-update-loan></app-update-loan>
+        <app-update-loan #updateLoan [loan]="selectedLoan"></app-update-loan>
     </app-modal-icon>
 </div>

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
 import {DatePipe} from "@angular/common";
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {UpdateLoan} from "../update-loan/update-loan";
@@ -8,6 +8,7 @@ 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";
+import {format} from "date-fns";
 
 @Component({
   selector: 'app-loan-table',
@@ -25,16 +26,16 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
 export class LoanTable implements OnInit {
     private loansService = inject(LoansService);
     private notificationService = inject(NzNotificationService)
-
     loans = signal<GetLoanDto[]>([]);
-
     loansLoading = signal<boolean>(false);
+    updateLoan = viewChild.required<UpdateLoan>('updateLoan');
+    modal = viewChild.required<ModalIcon>('modalIcon');
 
     async ngOnInit() {
-        await this.fetchloans();
+        await this.fetchLoans();
     }
 
-    async fetchloans() {
+    async fetchLoans() {
         this.loansLoading.set(true)
 
         try {
@@ -64,6 +65,95 @@ export class LoanTable implements OnInit {
                 'Impossible de supprimer la ligne'
             )
         }
-        await this.fetchloans();
+        await this.fetchLoans();
+    }
+
+    async edit(id: number, updateLoanComponent: UpdateLoan) {
+        if (updateLoanComponent.updateLoanForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const plannedDate = updateLoanComponent.updateLoanForm.get('plannedReturningDate').value;
+            const plannedDateResult = format(plannedDate, 'yyyy-MM-dd');
+
+            const effectiveDate = updateLoanComponent.updateLoanForm.get('effectiveReturningDate').value;
+            const effectiveDateResult = format(effectiveDate, 'yyyy-MM-dd');
+
+            const loans = updateLoanComponent.updateLoanForm.getRawValue();
+            loans.plannedReturningDate = plannedDateResult;
+            loans.effectiveReturningDate = effectiveDateResult;
+
+            const updatedLoanDto = {
+                id: this.selectedLoan.id,
+                bookId: updateLoanComponent.updateLoanForm.get('bookId').value,
+                userId: updateLoanComponent.updateLoanForm.get('userId').value,
+                date: this.selectedLoan.date,
+                plannedReturningDate: loans.plannedReturningDate,
+                effectiveReturningDate: loans.effectiveReturningDate
+            };
+
+            await firstValueFrom(this.loansService.updateLoanEndpoint(id, updatedLoanDto))
+
+            this.notificationService.success(
+                'Success',
+                'Emprunt modifié'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
+        }
+    }
+
+    async validationDate(loanId: number) {
+        try {
+            const PatchLoanValue = {
+                effectiveReturningDate: format(new Date(), 'yyyy-MM-dd')
+            };
+
+            try {
+                await firstValueFrom(this.loansService.patchLoanEndpoint(loanId, PatchLoanValue))
+
+                this.notificationService.success(
+                    'Success',
+                    'Date de retour actualisée'
+                )
+            } catch (e) {
+                this.notificationService.error(
+                    'Erreur',
+                    'La date à déjà été actualisée'
+                )
+            }
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'actualisation de la date de retour'
+            )
+        }
+
+        await this.fetchLoans()
+    }
+
+    selectedLoan: GetLoanDto | null = null;
+    openEditModal(loan: GetLoanDto) {
+        this.selectedLoan = { ...loan };
+        this.modal().showModal();
+    }
+
+    async onModalOk(loanId: number, updateLoanComponent: UpdateLoan, modal: ModalIcon) {
+        await this.edit(loanId, updateLoanComponent);
+        updateLoanComponent.updateLoanForm.reset();
+        modal.isVisible = false;
+        await this.fetchLoans();
+    }
+
+    onModalCancel(modal: ModalIcon) {
+        modal.isVisible = false;
     }
 }

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

@@ -1,14 +1,4 @@
 <form nz-form nzLayout="horizontal" [formGroup]="updateAuthorForm">
-    <nz-form-item>
-        <nz-form-label nzSpan="8" nzRequired>
-            Nom
-        </nz-form-label>
-
-        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Nom de l'auteur" formControlName="name">
-        </nz-form-control>
-    </nz-form-item>
-
     <nz-form-item>
         <nz-form-label nzSpan="8" nzRequired>
             Prénom
@@ -18,4 +8,14 @@
             <input nz-input placeholder="Prénom de l'auteur" formControlName="firstName">
         </nz-form-control>
     </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            Nom
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Nom de l'auteur" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
 </form>

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

@@ -26,6 +26,17 @@ export class UpdateBook implements OnInit {
     authors = signal<GetAuthorDto[]>([]);
     book = input.required<GetBookDto>()
 
+    ngOnChanges() {
+        if (this.book) {
+            this.updateBookForm.patchValue({
+                title: this.book().title,
+                isbn: this.book().isbn,
+                releaseYear: this.book().releaseYear,
+                authorId: this.book().bookAuthorId
+            });
+        }
+    }
+
     async fetchAuthors() {
         try {
             const authors = await firstValueFrom(this.authorsService.getAllAuthorsEndpoint());
@@ -38,15 +49,4 @@ export class UpdateBook implements OnInit {
     async ngOnInit() {
         await this.fetchAuthors();
     }
-
-    ngOnChanges() {
-        if (this.book) {
-            this.updateBookForm.patchValue({
-                title: this.book().title,
-                isbn: this.book().isbn,
-                releaseYear: this.book().releaseYear,
-                authorId: this.book().authorId
-            });
-        }
-    }
 }

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

@@ -1,11 +1,15 @@
 <form nz-form nzLayout="horizontal" [formGroup]="updateLoanForm">
     <nz-form-item>
         <nz-form-label nzSpan="10" nzRequired>
-            Nom / Prénom
+            Utilisateur
         </nz-form-label>
 
-        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+        <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>
 
@@ -14,8 +18,12 @@
             Livre
         </nz-form-label>
 
-        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+        <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>
 
@@ -25,7 +33,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="JJ/MM/AAAA" formControlName="plannedDate">
+            <nz-date-picker formControlName="plannedReturningDate"></nz-date-picker>
         </nz-form-control>
     </nz-form-item>
 
@@ -35,7 +43,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="JJ/MM/AAAA" formControlName="effectiveDate">
+            <nz-date-picker formControlName="effectiveReturningDate"></nz-date-picker>
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -1,9 +1,12 @@
-import {Component, input} from '@angular/core';
+import {Component, inject, input, 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 {BooksService, GetBookDto, GetLoanDto, GetUserDto, UsersService} from "../../services/api";
-import {GetBookDto, GetLoanDto} from "../../services/api";
+import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
     selector: 'app-update-loan',
@@ -14,30 +17,71 @@ import {GetBookDto, GetLoanDto} from "../../services/api";
         NzFormDirective,
         NzFormItemComponent,
         NzFormLabelComponent,
-        NzInputDirective,
         NzRowDirective,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NzDatePickerComponent,
+        NzOptionComponent,
+        NzSelectComponent
     ],
     templateUrl: './update-loan.html',
     styleUrl: './update-loan.css',
 })
-export class UpdateLoan {
+export class UpdateLoan implements OnInit {
     updateLoanForm = new FormGroup({
-        name: new FormControl<string>(null, [Validators.required]),
+        userId: new FormControl<number>(null, Validators.required),
-        book: new FormControl<string>(null, [Validators.required]),
+        bookId: new FormControl<number>(null, Validators.required),
-        plannedDate: new FormControl(null, [Validators.required]),
+        plannedReturningDate: new FormControl(null, Validators.required),
-        effectiveDate: new FormControl(null, [Validators.required]),
+        effectiveReturningDate: new FormControl(null),
-    })
+    });
 
+    private userService = inject(UsersService);
+    private bookService = inject(BooksService);
+    private notificationService = inject(NzNotificationService);
+    users = signal<GetUserDto[]>([]);
+    books = signal<GetBookDto[]>([]);
     loan = input.required<GetLoanDto>()
+
     ngOnChanges() {
         if (this.loan) {
+            if (this.loan().effectiveReturningDate != null) {
                 this.updateLoanForm.patchValue({
-                name: this.loan().userName,
+                    userId: this.loan().userId,
-                book: this.loan().bookTitle,
+                    bookId: this.loan().bookId,
-                plannedDate: new Date(this.loan().plannedReturningDate),
+                    plannedReturningDate: new Date(this.loan().plannedReturningDate),
-                effectiveDate: new Date(this.loan().effectiveReturningDate)
+                    effectiveReturningDate: new Date(this.loan().effectiveReturningDate)
+                });
+
+            } else {
+                this.updateLoanForm.patchValue({
+                    userId: this.loan().userId,
+                    bookId: this.loan().bookId,
+                    plannedReturningDate: new Date(this.loan().plannedReturningDate),
+                    effectiveReturningDate: null
                 });
             }
         }
     }
+
+    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');
+        }
+    }
+
+    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();
+    }
+}

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

@@ -78,7 +78,7 @@ export class UserTable implements OnInit {
         }
 
         try {
-            const rawDate = updateUserComponent.updateUserForm.get('birthDate')?.value;
+            const rawDate = updateUserComponent.updateUserForm.get('birthDate').value;
             const birthDate = format(rawDate, 'yyyy-MM-dd');
 
             const users = updateUserComponent.updateUserForm.getRawValue();