henriquegc/library-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added all edit function

Browse Source
This commit is contained in:
sanchezvem
2025-11-23 12:03:14 +01:00
parent 448f43e3eb
commit 0f75d1768b
8 changed files with 205 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/author-table/author-table.html
View File

@@ -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.firstName}}</td>
<td>{{ author.name }}</td>
<td style="text-align: center;">
<app-modal type="link" [name]="'Voir les livres'">
<nz-table [nzData]="authors()"
[nzFrontPagination]="false">

8
src/app/components/loan-table/loan-table.html
View File

@@ -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-update-loan></app-update-loan>
<app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedLoan.id, updateLoan, modalIcon)" (cancel)="onModalCancel(modalIcon)">
<app-update-loan #updateLoan [loan]="selectedLoan"></app-update-loan>
</app-modal-icon>
</div>

102
src/app/components/loan-table/loan-table.ts
View File

@@ -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;
}
}

20
src/app/components/update-author/update-author.html
View File

@@ -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>

22
src/app/components/update-book/update-book.ts
View File

@@ -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
});
}
}
}

22
src/app/components/update-loan/update-loan.html
View File

@@ -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">
<input nz-input placeholder="Non défini" formControlName="name">
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<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">
<input nz-input placeholder="Prénom de l'auteur" formControlName="book">
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<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>

84
src/app/components/update-loan/update-loan.ts
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();
}
}

2
src/app/components/user-table/user-table.ts
View File

@@ -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();