updated author's forms

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

@@ -0,0 +1,14 @@
+<div class="book-card-container">
+    <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
+        <nz-card-meta nzTitle="{{ authorInfo().name + authorInfo().firstName }}"></nz-card-meta>
+    </nz-card>
+    <ng-template #coverTemplate>
+        <img alt="example" src="https://www.w3schools.com/howto/img_avatar.png" />
+    </ng-template>
+    <div class="mt-2">
+        <app-modal [name]="'Modifier'" class="ml-6">
+            <app-update-author></app-update-author>
+        </app-modal>
+        <button nz-button nzType="primary" (click)="delete()" class="ml-2">Supprimer</button>
+    </div>
+</div>

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

@@ -0,0 +1,26 @@
+import {Component, input} from '@angular/core';
+import {AuthorInfo} from "../../interfaces/author.interfaces";
+import {Modal} from "../modal/modal";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzCardComponent, NzCardMetaComponent} from "ng-zorro-antd/card";
+import {UpdateAuthor} from "../update-author/update-author";
+
+@Component({
+  selector: 'app-author-card',
+    imports: [
+        Modal,
+        NzButtonComponent,
+        NzCardComponent,
+        UpdateAuthor,
+        NzCardMetaComponent
+    ],
+  templateUrl: './author-card.html',
+  styleUrl: '../book-card/book-card.css',
+})
+export class AuthorCard {
+    authorInfo = input.required<AuthorInfo>();
+
+    delete() {
+        return
+    }
+}

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

@@ -0,0 +1,21 @@
+<form nz-form nzLayout="horizontal" [formGroup]="createAuthorForm" (ngSubmit)="submitForm()">
+    <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
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom de l'auteur" formControlName="firstName">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,38 @@
+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 {AuthorInfo} from "../../interfaces/author.interfaces";
+
+@Component({
+  selector: 'app-create-author',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzRowDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './create-author.html',
+  styleUrl: './create-author.css',
+})
+export class CreateAuthor {
+    createAuthorForm = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        firstName: new FormControl<string>(null, [Validators.required])
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.createAuthorForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.createAuthorForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.createAuthorForm.reset()
+    }
+}

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

@@ -15,7 +15,7 @@
         </nz-form-label>
 
         <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="ISBN" formControlName="title">
+            <input nz-input placeholder="ISBN" formControlName="isbn">
         </nz-form-control>
     </nz-form-item>
 

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

@@ -0,0 +1 @@
+<p>create-user works!</p>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-user',
+  imports: [],
+  templateUrl: './create-user.html',
+  styleUrl: './create-user.css',
+})
+export class CreateUser {
+
+}

src/app/components/modal/modal.ts

@@ -1,11 +1,10 @@
 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-modal',
-    imports: [NzButtonModule, NzModalModule, NgComponentOutlet],
+    imports: [NzButtonModule, NzModalModule],
     templateUrl: 'modal.html',
     styleUrls: ['./modal.css'],
 })

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

@@ -0,0 +1,21 @@
+<form nz-form nzLayout="horizontal" [formGroup]="updateAuthorForm" (ngSubmit)="submitForm()">
+    <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
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom de l'auteur" formControlName="firstName">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,37 @@
+import { Component } 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";
+
+@Component({
+  selector: 'app-update-author',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzRowDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './update-author.html',
+  styleUrl: './update-author.css',
+})
+export class UpdateAuthor {
+    updateAuthorForm = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        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()
+    }
+}

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

@@ -0,0 +1,41 @@
+<form nz-form nzLayout="horizontal" [formGroup]="updateBookForm" (ngSubmit)="submitForm()">
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            Titre
+        </nz-form-label>
+
+        <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="8" nzRequired>
+            ISBN
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="ISBN" formControlName="isbn">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            Auteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Auteur" formControlName="author">
+        </nz-form-control>
+    </nz-form-item>
+
+    <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>

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

@@ -1,16 +1,15 @@
 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-update-book',
-  imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
-  templateUrl: '../create-book/create-book.html',
+  imports: [NzFormModule, ReactiveFormsModule],
+  templateUrl: './update-book.html',
   styleUrl: './update-book.css',
 })
 export class UpdateBook {
-    createBookForm = new FormGroup({
+    updateBookForm = new FormGroup({
         title: new FormControl<string>(null, [Validators.required]),
         isbn: new FormControl<string>(null, [Validators.required]),
         releaseYear: new FormControl<string>(null, [Validators.required]),
@@ -19,12 +18,12 @@ export class UpdateBook {
 
     submitForm() {
         // Pour annuler si le formulaire est invalide
-        if (this.createBookForm.invalid) return;
+        if (this.updateBookForm.invalid) return;
 
         // Pour obtenir la valeur du formulaire
-        console.log(this.createBookForm.getRawValue())
+        console.log(this.updateBookForm.getRawValue())
 
         // Pour vider le formulaire
-        this.createBookForm.reset()
+        this.updateBookForm.reset()
     }
 }

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

@@ -0,0 +1 @@
+<p>update-user works!</p>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-update-user',
+  imports: [],
+  templateUrl: './update-user.html',
+  styleUrl: './update-user.css',
+})
+export class UpdateUser {
+
+}

src/app/interfaces/author.interfaces.ts

@@ -0,0 +1,4 @@
+export interface AuthorInfo {
+    name: string;
+    firstName: string;
+}

src/app/pages/author/author.css

@@ -0,0 +1,7 @@
+.author-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    justify-items: center;
+    padding: 20px;
+}

src/app/pages/author/author.html

@@ -1 +1,10 @@
-<p>author works!</p>
+<app-modal [name]="'Ajouter un auteur'">
+    <app-create-author></app-create-author>
+</app-modal>
+
+<section class="author-grid">
+    @for (author of authors; track $index) {
+        <app-author-card [authorInfo]="author"></app-author-card>
+    }
+</section>
+

src/app/pages/author/author.ts

@@ -1,11 +1,29 @@
-import {Component} from '@angular/core';
+import {Component, input} from '@angular/core';
+import {CreateAuthor} from "../../components/create-author/create-author";
+import {Modal} from "../../components/modal/modal";
+import {AuthorInfo} from "../../interfaces/author.interfaces";
+import {AuthorCard} from "../../components/author-card/author-card";
 
 @Component({
     selector: 'app-author',
-    imports: [],
+    imports: [
+        CreateAuthor,
+        Modal,
+        AuthorCard
+    ],
     templateUrl: './author.html',
     styleUrl: './author.css',
 })
 export class Author {
+    authorInfo = input.required<AuthorInfo>();
+
+    authors: AuthorInfo[] = [
+        { name: 'Victor', firstName: 'Hugo' },
+        { name: 'J.K.', firstName: 'Rowling' },
+        { name: 'J.R.R.', firstName: 'Tolkien' },
+        { name: 'Frank', firstName: 'Herbert' },
+        { name: 'Ray', firstName: 'Bradbury' },
+        { name: 'George ', firstName: 'Orwell' }
+    ];
 
 }