diff --git a/src/app/components/author-card/author-card.css b/src/app/components/author-card/author-card.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/author-card/author-card.html b/src/app/components/author-card/author-card.html new file mode 100644 index 0000000..2becc23 --- /dev/null +++ b/src/app/components/author-card/author-card.html @@ -0,0 +1,14 @@ +
+ + + + + example + +
+ + + + +
+
diff --git a/src/app/components/author-card/author-card.ts b/src/app/components/author-card/author-card.ts new file mode 100644 index 0000000..d314e9f --- /dev/null +++ b/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(); + + delete() { + return + } +} diff --git a/src/app/components/create-author/create-author.css b/src/app/components/create-author/create-author.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/create-author/create-author.html b/src/app/components/create-author/create-author.html new file mode 100644 index 0000000..acb00ec --- /dev/null +++ b/src/app/components/create-author/create-author.html @@ -0,0 +1,21 @@ +
+ + + Nom + + + + + + + + + + Prénom + + + + + + +
\ No newline at end of file diff --git a/src/app/components/create-author/create-author.ts b/src/app/components/create-author/create-author.ts new file mode 100644 index 0000000..e8e899c --- /dev/null +++ b/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(null, [Validators.required]), + firstName: new FormControl(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() + } +} diff --git a/src/app/components/create-book/create-book.html b/src/app/components/create-book/create-book.html index 5768039..c916429 100644 --- a/src/app/components/create-book/create-book.html +++ b/src/app/components/create-book/create-book.html @@ -15,7 +15,7 @@ - + diff --git a/src/app/components/create-user/create-user.css b/src/app/components/create-user/create-user.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/create-user/create-user.html b/src/app/components/create-user/create-user.html new file mode 100644 index 0000000..cec559f --- /dev/null +++ b/src/app/components/create-user/create-user.html @@ -0,0 +1 @@ +

create-user works!

diff --git a/src/app/components/create-user/create-user.ts b/src/app/components/create-user/create-user.ts new file mode 100644 index 0000000..981ad26 --- /dev/null +++ b/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 { + +} diff --git a/src/app/components/modal/modal.ts b/src/app/components/modal/modal.ts index 592ac8d..99e9f8f 100644 --- a/src/app/components/modal/modal.ts +++ b/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'], }) diff --git a/src/app/components/update-author/update-author.css b/src/app/components/update-author/update-author.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/update-author/update-author.html b/src/app/components/update-author/update-author.html new file mode 100644 index 0000000..00188de --- /dev/null +++ b/src/app/components/update-author/update-author.html @@ -0,0 +1,21 @@ +
+ + + Nom + + + + + + + + + + Prénom + + + + + + +
\ No newline at end of file diff --git a/src/app/components/update-author/update-author.ts b/src/app/components/update-author/update-author.ts new file mode 100644 index 0000000..8c6e414 --- /dev/null +++ b/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(null, [Validators.required]), + firstName: new FormControl(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() + } +} diff --git a/src/app/components/update-book/update-book.html b/src/app/components/update-book/update-book.html index e69de29..edfbeb4 100644 --- a/src/app/components/update-book/update-book.html +++ b/src/app/components/update-book/update-book.html @@ -0,0 +1,41 @@ +
+ + + Titre + + + + + + + + + + ISBN + + + + + + + + + + Auteur + + + + + + + + + + Date de publication + + + + + + +
\ No newline at end of file diff --git a/src/app/components/update-book/update-book.ts b/src/app/components/update-book/update-book.ts index 4712991..b8fddef 100644 --- a/src/app/components/update-book/update-book.ts +++ b/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(null, [Validators.required]), isbn: new FormControl(null, [Validators.required]), releaseYear: new FormControl(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() } } diff --git a/src/app/components/update-user/update-user.css b/src/app/components/update-user/update-user.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/update-user/update-user.html b/src/app/components/update-user/update-user.html new file mode 100644 index 0000000..a74337a --- /dev/null +++ b/src/app/components/update-user/update-user.html @@ -0,0 +1 @@ +

update-user works!

diff --git a/src/app/components/update-user/update-user.ts b/src/app/components/update-user/update-user.ts new file mode 100644 index 0000000..81eea8c --- /dev/null +++ b/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 { + +} diff --git a/src/app/interfaces/author.interfaces.ts b/src/app/interfaces/author.interfaces.ts new file mode 100644 index 0000000..55b2781 --- /dev/null +++ b/src/app/interfaces/author.interfaces.ts @@ -0,0 +1,4 @@ +export interface AuthorInfo { + name: string; + firstName: string; +} \ No newline at end of file diff --git a/src/app/pages/author/author.css b/src/app/pages/author/author.css index e69de29..da43dac 100644 --- a/src/app/pages/author/author.css +++ b/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; +} diff --git a/src/app/pages/author/author.html b/src/app/pages/author/author.html index e847908..0bf2ee1 100644 --- a/src/app/pages/author/author.html +++ b/src/app/pages/author/author.html @@ -1 +1,10 @@ -

author works!

+ + + + +
+ @for (author of authors; track $index) { + + } +
+ diff --git a/src/app/pages/author/author.ts b/src/app/pages/author/author.ts index 662e7a3..db317c6 100644 --- a/src/app/pages/author/author.ts +++ b/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(); + + 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' } + ]; }