added all edit function

This commit is contained in:
2025-11-23 12:03:14 +01:00
parent 448f43e3eb
commit 0f75d1768b
8 changed files with 205 additions and 61 deletions

View File

@@ -1,12 +1,15 @@
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 {GetBookDto, GetLoanDto} from "../../services/api";
import {BooksService, GetBookDto, GetLoanDto, GetUserDto, UsersService} 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',
selector: 'app-update-loan',
imports: [
FormsModule,
NzColDirective,
@@ -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',
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]),
book: new FormControl<string>(null, [Validators.required]),
plannedDate: new FormControl(null, [Validators.required]),
effectiveDate: new FormControl(null, [Validators.required]),
})
userId: new FormControl<number>(null, Validators.required),
bookId: new FormControl<number>(null, Validators.required),
plannedReturningDate: 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) {
this.updateLoanForm.patchValue({
name: this.loan().userName,
book: this.loan().bookTitle,
plannedDate: new Date(this.loan().plannedReturningDate),
effectiveDate: new Date(this.loan().effectiveReturningDate)
});
if (this.loan().effectiveReturningDate != null) {
this.updateLoanForm.patchValue({
userId: this.loan().userId,
bookId: this.loan().bookId,
plannedReturningDate: new Date(this.loan().plannedReturningDate),
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();
}
}