updated book's forms

src/app/components/book-card/book-card.html

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

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

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

src/app/components/create-book/create-book.html

@@ -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>
+        <nz-form-label nzSpan="8" nzRequired>
-            Date de publication
+            ISBN
         </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 type="number" placeholder="2005" formControlName="releaseYear">
+            <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">
+    <nz-form-item>
-        <button nz-button nzType="primary" (click)="submitForm()">
+        <nz-form-label nzSpan="8" nzRequired>
-            Valider
+            Date de publication
-        </button>
+        </nz-form-label>
-    </nz-flex>
+
+        <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>

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

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

src/app/components/modal/modal.html

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

src/app/components/modal/modal.ts

@@ -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',
+    templateUrl: 'modal.html',
-    styleUrls: ['./create-modal.css'],
+    styleUrls: ['./modal.css'],
 })
-export class CreateModal {
+export class Modal {
-    content = input.required<Type<any>>();
+    name = input.required<string>();
     isVisible = false;
     isOkLoading = false;
 

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

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

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

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

src/app/interfaces/book.interfaces.ts

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

src/app/pages/book/book.html

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

src/app/pages/book/book.ts

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