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

updated book's forms

Browse Source
This commit is contained in:
sanchezvem
2025-11-11 12:48:13 +01:00
parent c381a1c5e5
commit 61e04511cf
12 changed files with 71 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/book-card/book-card.html
View File

@@ -3,8 +3,14 @@
[nzBordered]="false"
nzTitle="{{ bookInfo().title }}"
[nzExtra]="extraTemplate">
<p>{{ bookInfo().isbn }}</p>
<p>{{ bookInfo().author }}</p>
<p>{{ bookInfo().releaseYear }}</p>
<br>
<app-modal [name]="'Modifier'" class="ml-31">
<app-create-book></app-create-book>
</app-modal>
<button nz-button nzType="primary" (click)="delete()" class="ml-28 mt-1">Supprimer</button>
</nz-card>
</div>

14
src/app/components/book-card/book-card.ts
View File

@@ -1,17 +1,27 @@
import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
import {BookInfo} from '../../interfaces/book.interfaces';
import {NzCardComponent} from "ng-zorro-antd/card";
import {NzFlexDirective} from "ng-zorro-antd/flex"; // Interface
import {CreateBook} from "../create-book/create-book";
import {Modal} from "../modal/modal";
import {icons} from "../../icons-provider";
import {NzButtonComponent} from "ng-zorro-antd/button";
@Component({
selector: 'app-book-card',
imports: [
NzCardComponent,
NzFlexDirective
CreateBook,
Modal,
NzButtonComponent,
],
templateUrl: './book-card.html',
styleUrl: './book-card.css',
})
export class BookCard {
bookInfo = input.required<BookInfo>();
delete() {
return
}
}

30
src/app/components/create-book/create-book.html
View File

@@ -1,37 +1,41 @@
<form nz-form nzLayout="horizontal" [formGroup]="createBookForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
<nz-form-label nzSpan="8" nzRequired>
Titre
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Titre du livre" formControlName="title">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
Date de publication
<nz-form-label nzSpan="8" nzRequired>
ISBN
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="2005" formControlName="releaseYear">
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="ISBN" formControlName="title">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
<nz-form-label nzSpan="8" nzRequired>
Auteur
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Auteur" formControlName="author">
</nz-form-control>
</nz-form-item>
<nz-flex nzJustify="end">
<button nz-button nzType="primary" (click)="submitForm()">
Valider
</button>
</nz-flex>
<nz-form-item>
<nz-form-label nzSpan="8" nzRequired>
Date de publication
</nz-form-label>
<nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="2005" formControlName="releaseYear">
</nz-form-control>
</nz-form-item>
</form>

4
src/app/components/create-book/create-book.ts
View File

@@ -1,17 +1,17 @@
import { Component } from '@angular/core';
import {NzFormModule} from "ng-zorro-antd/form";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFlexDirective} from "ng-zorro-antd/flex";
@Component({
selector: 'app-create-book',
imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
imports: [NzFormModule, ReactiveFormsModule],
templateUrl: './create-book.html',
styleUrls: ['./create-book.css'],
})
export class CreateBook {
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])
})

0
src/app/components/create-modal/create-modal.css → src/app/components/modal/modal.css
View File

12
src/app/components/create-modal/create-modal.html → src/app/components/modal/modal.html
View File

@@ -1,13 +1,17 @@
<button nz-button nzType="primary" (click)="showModal()">
<span>Ajouter un livre</span> Ajouter
<span>{{name()}}</span>
</button>
<ng-template #modalContent>
<ng-content></ng-content>
</ng-template>
<nz-modal
[(nzVisible)]="isVisible"
nzTitle="Ajouter"
nzTitle="{{name()}}"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
[nzOkLoading]="isOkLoading"
[nzContent]="modalContent"
>
<ng-container [ngComponentOutlet]="content"></ng-container>
</nz-modal>
</nz-modal>

12
src/app/components/create-modal/create-modal.ts → src/app/components/modal/modal.ts
View File

@@ -1,16 +1,16 @@
import {Component, input, Type} from '@angular/core';
import {Component, input} from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal';
import {NgComponentOutlet} from "@angular/common";
@Component({
selector: 'app-create-modal',
selector: 'app-modal',
imports: [NzButtonModule, NzModalModule, NgComponentOutlet],
templateUrl: 'create-modal.html',
styleUrls: ['./create-modal.css'],
templateUrl: 'modal.html',
styleUrls: ['./modal.css'],
})
export class CreateModal {
content = input.required<Type<any>>();
export class Modal {
name = input.required<string>();
isVisible = false;
isOkLoading = false;

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

@@ -1,37 +0,0 @@
<form nz-form nzLayout="horizontal" [formGroup]="updateBookForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
Titre
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Titre du livre" formControlName="title">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
Date de publication
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<input nz-input type="number" placeholder="2005" formControlName="releaseYear">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired>
Auteur
</nz-form-label>
<nz-form-control nzSpan="20" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Auteur" formControlName="author">
</nz-form-control>
</nz-form-item>
<nz-flex nzJustify="end">
<button nz-button nzType="primary" (click)="submitForm()">
Modifier
</button>
</nz-flex>
</form>

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

@@ -6,24 +6,25 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
@Component({
selector: 'app-update-book',
imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
templateUrl: './update-book.html',
templateUrl: '../create-book/create-book.html',
styleUrl: './update-book.css',
})
export class UpdateBook {
updateBookForm = new FormGroup({
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])
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.updateBookForm.invalid) return;
if (this.createBookForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.updateBookForm.getRawValue())
console.log(this.createBookForm.getRawValue())
// Pour vider le formulaire
this.updateBookForm.reset()
this.createBookForm.reset()
}
}

1
src/app/interfaces/book.interfaces.ts
View File

@@ -1,5 +1,6 @@
export interface BookInfo {
title: string;
isbn: string;
releaseYear: number;
author: string;
}

4
src/app/pages/book/book.html
View File

@@ -1,4 +1,6 @@
<app-create-modal [content]="CreateBookComponent"></app-create-modal>
<app-modal [name]="'Ajouter un livre'">
<app-create-book></app-create-book>
</app-modal>
<section class="book-grid">
@for (book of books; track $index) {

22
src/app/pages/book/book.ts
View File

@@ -1,29 +1,27 @@
import { Component } from '@angular/core';
import {BookInfo} from "../../interfaces/book.interfaces";
import {BookCard} from "../../components/book-card/book-card";
import {NzModalComponent} from "ng-zorro-antd/modal";
import {CreateModal} from "../../components/create-modal/create-modal";
import {Modal} from "../../components/modal/modal";
import {CreateBook} from "../../components/create-book/create-book";
@Component({
selector: 'app-book',
imports: [
BookCard,
NzModalComponent,
CreateModal
Modal,
CreateBook
],
templateUrl: './book.html',
styleUrls: ['./book.css'],
})
export class Book {
CreateBookComponent = CreateBook;
books: BookInfo[] = [
{ title: '1984', author: 'George Orwell', releaseYear: 1949 },
{ title: 'Le Seigneur des Anneaux', author: 'J.R.R. Tolkien', releaseYear: 1954 },
{ title: 'Dune', author: 'Frank Herbert', releaseYear: 1965 },
{ title: 'Fahrenheit 451', author: 'Ray Bradbury', releaseYear: 1953 },
{ title: 'Les Misérables', author: 'Victor Hugo', releaseYear: 1862 },
{ title: 'Harry Potter à l’école des sorciers', author: 'J.K. Rowling', releaseYear: 1997 },
{ title: '1984', isbn: '978-0451524935', author: 'George Orwell', releaseYear: 1949 },
{ title: 'Le Seigneur des Anneaux', isbn: '978-0544003415', author: 'J.R.R. Tolkien', releaseYear: 1954 },
{ title: 'Dune', isbn: '978-0441013593', author: 'Frank Herbert', releaseYear: 1965 },
{ title: 'Fahrenheit 451', isbn: '978-1451673319', author: 'Ray Bradbury', releaseYear: 1953 },
{ title: 'Les Misérables', isbn: '978-2070409185', author: 'Victor Hugo', releaseYear: 1862 },
{ title: 'Harry Potter à l’école des sorciers', isbn: '978-2070643028', author: 'J.K. Rowling', releaseYear: 1997 },
];
}