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

added edit function for author and book pages

Browse Source
This commit is contained in:
sanchezvem
2025-11-22 12:21:24 +01:00
parent ebea9f1a6b
commit 448f43e3eb
12 changed files with 192 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@
<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="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(author)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(author.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
@@ -54,7 +54,7 @@
</nz-table>
<div class="hidden">
<app-modal-icon nameIcon="edit" [name]="'Modifier'">
<app-update-author></app-update-author>
<app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedAuthor.id, updateAuthor, modalIcon)" (cancel)="onModalCancel(modalIcon)">
<app-update-author #updateAuthor [author]="selectedAuthor"></app-update-author>
</app-modal-icon>
</div>

55
src/app/components/author-table/author-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 {Modal} from "../modal/modal";
import {AuthorsService, GetAuthorDto} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
@@ -25,16 +25,16 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
export class AuthorTable implements OnInit {
private authorsService = inject(AuthorsService);
private notificationService = inject(NzNotificationService)
authors = signal<GetAuthorDto[]>([]);
authorsLoading = signal<boolean>(false);
updateAuthor = viewChild.required<UpdateAuthor>('updateAuthor');
modal = viewChild.required<ModalIcon>('modalIcon');
async ngOnInit() {
await this.fetchauthors();
await this.fetchAuthors();
}
async fetchauthors() {
async fetchAuthors() {
this.authorsLoading.set(true)
try {
@@ -64,6 +64,49 @@ export class AuthorTable implements OnInit {
'Impossible de supprimer la ligne'
)
}
await this.fetchauthors();
await this.fetchAuthors();
}
async edit(id: number, updateAuthorComponent: UpdateAuthor) {
if (updateAuthorComponent.updateAuthorForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const authors = updateAuthorComponent.updateAuthorForm.getRawValue();
await firstValueFrom(this.authorsService.updateAuthorEndpoint(id, authors))
this.notificationService.success(
'Success',
'Auteur modifié'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedAuthor: GetAuthorDto | null = null;
openEditModal(author: GetAuthorDto) {
this.selectedAuthor = { ...author };
this.modal().showModal();
}
async onModalOk(authorId: number, updateAuthorComponent: UpdateAuthor, modal: ModalIcon) {
await this.edit(authorId, updateAuthorComponent);
updateAuthorComponent.updateAuthorForm.reset();
modal.isVisible = false;
await this.fetchAuthors();
}
onModalCancel(modal: ModalIcon) {
modal.isVisible = false;
}
}

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

@@ -15,12 +15,12 @@
<tr>
<td>{{ book.title}}</td>
<td>{{ book.isbn }}</td>
<td>{{ book.bookAuthorName }} {{ book.bookAuthorFirstName }}</td>
<td>{{ book.bookAuthorFirstName }} {{ book.bookAuthorName }}</td>
<td>{{ book.releaseYear}}</td>
<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="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(book)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(book.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
@@ -32,7 +32,7 @@
</nz-table>
<div class="hidden">
<app-modal-icon nameIcon="edit" [name]="'Modifier'">
<app-update-book></app-update-book>
<app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedBook.id, updateBook, modalIcon)" (cancel)="onModalCancel(modalIcon)">
<app-update-book #updateBook [book]="selectedBook"></app-update-book>
</app-modal-icon>
</div>

58
src/app/components/book-table/book-table.ts
View File

@@ -1,4 +1,4 @@
import {Component, inject, OnInit, signal} from '@angular/core'; // Importation de la fonction input() et des components
import {Component, inject, OnInit, signal, viewChild} from '@angular/core'; // Importation de la fonction input() et des components
import {BooksService, GetBookDto} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@@ -20,19 +20,20 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
templateUrl: './book-table.html',
styleUrl: './book-table.css',
})
export class BookTable implements OnInit {
private booksService = inject(BooksService);
private notificationService = inject(NzNotificationService)
books = signal<GetBookDto[]>([]);
booksLoading = signal<boolean>(false);
updateBook = viewChild.required<UpdateBook>('updateBook');
modal = viewChild.required<ModalIcon>('modalIcon');
async ngOnInit() {
await this.fetchbooks();
await this.fetchBooks();
}
async fetchbooks() {
async fetchBooks() {
this.booksLoading.set(true)
try {
@@ -63,6 +64,51 @@ export class BookTable implements OnInit {
'Impossible de supprimer la ligne'
)
}
await this.fetchbooks();
await this.fetchBooks();
}
async edit(id: number, updateBookComponent: UpdateBook) {
if (updateBookComponent.updateBookForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const books = updateBookComponent.updateBookForm.getRawValue();
await firstValueFrom(this.booksService.updateBookEndpoint(id, books))
console.log("Payload envoyé :", books);
this.notificationService.success(
'Success',
'Livre modifié'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedBook: GetBookDto | null = null;
openEditModal(book: GetBookDto) {
this.selectedBook = { ...book };
this.modal().showModal();
}
async onModalOk(bookId: number, updateBookComponent: UpdateBook, modal: ModalIcon) {
await this.edit(bookId, updateBookComponent);
updateBookComponent.updateBookForm.reset();
modal.isVisible = false;
await this.fetchBooks();
}
onModalCancel(modal: ModalIcon) {
modal.isVisible = false;
}
}

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

@@ -1,4 +1,4 @@
<form nz-form nzLayout="horizontal" [formGroup]="updateAuthorForm" (ngSubmit)="submitForm()">
<form nz-form nzLayout="horizontal" [formGroup]="updateAuthorForm">
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Nom

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

@@ -1,7 +1,8 @@
import { Component } from '@angular/core';
import {Component, input} 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 {GetAuthorDto, GetLoanDto} from "../../services/api";
@Component({
selector: 'app-update-author',
@@ -24,14 +25,13 @@ export class UpdateAuthor {
firstName: new FormControl<string>(null, [Validators.required])
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.updateAuthorForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.updateAuthorForm.getRawValue())
// Pour vider le formulaire
this.updateAuthorForm.reset()
author = input.required<GetAuthorDto>()
ngOnChanges() {
if (this.author) {
this.updateAuthorForm.patchValue({
name: this.author().name,
firstName: this.author().firstName,
});
}
}
}

10
src/app/components/update-book/update-book.html
View File

@@ -1,4 +1,4 @@
<form nz-form nzLayout="horizontal" [formGroup]="updateBookForm" (ngSubmit)="submitForm()">
<form nz-form nzLayout="horizontal" [formGroup]="updateBookForm">
<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>
@@ -35,7 +39,7 @@
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<nz-date-picker nzPlaceHolder="2025-11-14" formControlName="releaseYear"></nz-date-picker>
<input nz-input type="number" placeholder="YYYY" formControlName="releaseYear">
</nz-form-control>
</nz-form-item>
</form>

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

@@ -1,31 +1,52 @@
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 {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
import {GetBookDto, GetAuthorDto, AuthorsService} from "../../services/api";
import {firstValueFrom} from "rxjs";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
@Component({
selector: 'app-update-book',
imports: [NzFormModule, ReactiveFormsModule, NzInputDirective, NzDatePickerComponent],
imports: [NzFormModule, ReactiveFormsModule, NzInputDirective, NzSelectComponent, NzOptionComponent],
templateUrl: './update-book.html',
styleUrl: './update-book.css',
})
export class UpdateBook {
export class UpdateBook implements OnInit {
updateBookForm = 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.updateBookForm.invalid) return;
private authorsService = inject(AuthorsService);
private notificationService = inject(NzNotificationService);
authors = signal<GetAuthorDto[]>([]);
book = input.required<GetBookDto>()
// Pour obtenir la valeur du formulaire
console.log(this.updateBookForm.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.updateBookForm.reset()
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
});
}
}
}

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

@@ -1,4 +1,4 @@
<form nz-form nzLayout="horizontal" [formGroup]="updateLoanForm" (ngSubmit)="submitForm()">
<form nz-form nzLayout="horizontal" [formGroup]="updateLoanForm">
<nz-form-item>
<nz-form-label nzSpan="10" nzRequired>
Nom / Prénom

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

@@ -1,8 +1,9 @@
import { Component } from '@angular/core';
import {Component, input} 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";
@Component({
selector: 'app-update-loan',
@@ -28,14 +29,15 @@ export class UpdateLoan {
effectiveDate: new FormControl(null, [Validators.required]),
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.updateLoanForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.updateLoanForm.getRawValue())
// Pour vider le formulaire
this.updateLoanForm.reset()
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)
});
}
}
}

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

@@ -42,9 +42,7 @@
</td>
<td>
<div style="display: flex; align-items: center;">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
(click)="openEditModal(user)">
</nz-icon>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
@@ -55,7 +53,7 @@
</nz-table>
<div class="hidden">
<app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser?.id, updateUser, modalIcon)" (cancel)="onModalCancel(modalIcon)">
<app-modal-icon #modalIcon nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser.id, updateUser, modalIcon)" (cancel)="onModalCancel(modalIcon)">
<app-update-user #updateUser [user]="selectedUser"></app-update-user>
</app-modal-icon>
</div>

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

@@ -10,7 +10,6 @@ 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";
import {CreateUser} from "../create-user/create-user";
@Component({
selector: 'app-user-table',
@@ -69,23 +68,6 @@ export class UserTable implements OnInit {
await this.fetchUsers();
}
selectedUser: GetUserDto | null = null;
openEditModal(user: GetUserDto) {
this.selectedUser = { ...user };
this.modal().showModal();
}
async onModalOk(userId: number, updateUserComponent: UpdateUser, modal: ModalIcon) {
await this.edit(userId, updateUserComponent);
updateUserComponent.updateUserForm.reset();
modal.isVisible = false;
await this.fetchUsers();
}
onModalCancel(modal: ModalIcon) {
modal.isVisible = false;
}
async edit(id: number, updateUserComponent: UpdateUser) {
if (updateUserComponent.updateUserForm.invalid) {
this.notificationService.error(
@@ -115,4 +97,21 @@ export class UserTable implements OnInit {
)
}
}
selectedUser: GetUserDto | null = null;
openEditModal(user: GetUserDto) {
this.selectedUser = { ...user };
this.modal().showModal();
}
async onModalOk(userId: number, updateUserComponent: UpdateUser, modal: ModalIcon) {
await this.edit(userId, updateUserComponent);
updateUserComponent.updateUserForm.reset();
modal.isVisible = false;
await this.fetchUsers();
}
onModalCancel(modal: ModalIcon) {
modal.isVisible = false;
}
}