diff --git a/src/app/components/create-user/create-user.html b/src/app/components/create-user/create-user.html index cec559f..c85e91d 100644 --- a/src/app/components/create-user/create-user.html +++ b/src/app/components/create-user/create-user.html @@ -1 +1,41 @@ -

create-user works!

+
+ + + Nom + + + + + + + + + + Prénom + + + + + + + + + + Email + + + + + + + + + + Anniversaire + + + + + + +
\ No newline at end of file diff --git a/src/app/components/create-user/create-user.ts b/src/app/components/create-user/create-user.ts index 981ad26..6775c22 100644 --- a/src/app/components/create-user/create-user.ts +++ b/src/app/components/create-user/create-user.ts @@ -1,11 +1,41 @@ 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"; +import {NzInputDirective} from "ng-zorro-antd/input"; @Component({ selector: 'app-create-user', - imports: [], + imports: [ + FormsModule, + NzColDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzInputDirective, + NzRowDirective, + ReactiveFormsModule + ], templateUrl: './create-user.html', styleUrl: './create-user.css', }) export class CreateUser { + createUserForm = new FormGroup({ + name: new FormControl(null, [Validators.required]), + firstName: new FormControl(null, [Validators.required]), + email: new FormControl(null, [Validators.required]), + birthDate: new FormControl(null, [Validators.required]), + }) + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.createUserForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.createUserForm.getRawValue()) + + // Pour vider le formulaire + this.createUserForm.reset() + } } diff --git a/src/app/components/update-user/update-user.html b/src/app/components/update-user/update-user.html index a74337a..1de870f 100644 --- a/src/app/components/update-user/update-user.html +++ b/src/app/components/update-user/update-user.html @@ -1 +1,41 @@ -

update-user works!

+
+ + + Nom + + + + + + + + + + Prénom + + + + + + + + + + Email + + + + + + + + + + Anniversaire + + + + + + +
\ No newline at end of file diff --git a/src/app/components/update-user/update-user.ts b/src/app/components/update-user/update-user.ts index 81eea8c..b839445 100644 --- a/src/app/components/update-user/update-user.ts +++ b/src/app/components/update-user/update-user.ts @@ -1,11 +1,41 @@ 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"; +import {NzInputDirective} from "ng-zorro-antd/input"; @Component({ selector: 'app-update-user', - imports: [], + imports: [ + FormsModule, + NzColDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzInputDirective, + NzRowDirective, + ReactiveFormsModule + ], templateUrl: './update-user.html', styleUrl: './update-user.css', }) export class UpdateUser { + updateUserForm = new FormGroup({ + name: new FormControl(null, [Validators.required]), + firstName: new FormControl(null, [Validators.required]), + email: new FormControl(null, [Validators.required]), + birthDate: new FormControl(null, [Validators.required]), + }) + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.updateUserForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.updateUserForm.getRawValue()) + + // Pour vider le formulaire + this.updateUserForm.reset() + } } diff --git a/src/app/components/user-table/user-table.css b/src/app/components/user-table/user-table.css index e69de29..7ae664f 100644 --- a/src/app/components/user-table/user-table.css +++ b/src/app/components/user-table/user-table.css @@ -0,0 +1,85 @@ +/* Table globale */ +nz-table { + width: 100%; + border-collapse: separate; + border-spacing: 0 8px; /* espace entre les lignes */ + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 6px rgba(0,0,0,0.1); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* En-tête */ +nz-table thead tr { + background-color: #f5f5f5; + text-align: left; + font-weight: 600; + color: #333; + border-bottom: 2px solid #e0e0e0; +} + +nz-table thead th { + padding: 12px 16px; +} + +/* Lignes du tableau */ +nz-table tbody tr { + background-color: #fff; + transition: background 0.2s ease; +} + +nz-table tbody tr:nth-child(even) { + background-color: #f9f9f9; +} + +nz-table tbody tr:hover { + background-color: #e6f7ff; /* survol */ +} + +/* Cellules */ +nz-table tbody td { + padding: 12px 16px; + vertical-align: middle; + color: #444; +} + +/* Boutons */ +nz-table button[nz-button] { + margin-right: 8px; +} + +/* Modals dans le tableau */ +nz-table app-modal { + margin-right: 8px; +} + +/* Dates (pour alignement et style) */ +nz-table tbody td p { + margin: 0; + font-size: 14px; + color: #555; +} + +/* Responsive */ +@media (max-width: 768px) { + nz-table thead { + display: none; + } + nz-table tbody tr { + display: block; + margin-bottom: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + border-radius: 8px; + padding: 12px; + } + nz-table tbody td { + display: flex; + justify-content: space-between; + padding: 6px 12px; + } + nz-table tbody td::before { + content: attr(data-label); + font-weight: 600; + } +} diff --git a/src/app/components/user-table/user-table.html b/src/app/components/user-table/user-table.html index e69de29..3e3fd83 100644 --- a/src/app/components/user-table/user-table.html +++ b/src/app/components/user-table/user-table.html @@ -0,0 +1,33 @@ + + + + Nom + Prénom + Email + Anniversaire + Emprunt + Action + + + + @for (data of basicTable.data; track data) { + + {{ data.name}} + {{ data.firstName }} +

{{ data.email }}

+ {{ data.birthDate | date: 'dd/MM/yyyy'}} + + + + + + + + + + + + + } + + \ No newline at end of file diff --git a/src/app/components/user-table/user-table.ts b/src/app/components/user-table/user-table.ts index 146deda..5fbdae1 100644 --- a/src/app/components/user-table/user-table.ts +++ b/src/app/components/user-table/user-table.ts @@ -5,13 +5,230 @@ import {Modal} from "../modal/modal"; import {UpdateAuthor} from "../update-author/update-author"; import {DatePipe} from "@angular/common"; import {NzButtonComponent} from "ng-zorro-antd/button"; +import {UpdateLoan} from "../update-loan/update-loan"; +import {UserInfo} from "../../interfaces/user.interfaces"; +import {LoanTable} from "../loan-table/loan-table"; +import {UpdateUser} from "../update-user/update-user"; @Component({ selector: 'app-user-table', - imports: [], + imports: [ + DatePipe, + Modal, + NzButtonComponent, + NzTableComponent, + UpdateLoan, + LoanTable, + UpdateUser + ], templateUrl: './user-table.html', styleUrl: './user-table.css', }) export class UserTable { + listOfData: UserInfo[] = [ + { + name: 'Dupont', + firstName: 'Mathys', + email: 'mathys@biblio.fr', + birthDate: new Date('2004-05-21'), + loan: [ + { + book: { + title: 'Dune', + isbn: '9780441013593', + author: 'Frank Herbert', + releaseYear: 1965 + }, + user: null, + date: new Date('2025-11-01'), + plannedReturningDate: new Date('2025-12-01'), + effectiveReturningDate: null + } + ] + }, + { + name: 'Durand', + firstName: 'Lucie', + email: 'lucie@biblio.fr', + birthDate: new Date('1998-03-12'), + loan: [ + { + book: { + title: '1984', + isbn: '9780451524935', + author: 'George Orwell', + releaseYear: 1949 + }, + user: null, + date: new Date('2025-10-20'), + plannedReturningDate: new Date('2025-11-20'), + effectiveReturningDate: new Date('2025-11-05') + } + ] + }, + { + name: 'Bernard', + firstName: 'Thomas', + email: 'thomas@biblio.fr', + birthDate: new Date('1990-07-04'), + loan: [ + { + book: { + title: 'Le Seigneur des Anneaux', + isbn: '9780261102385', + author: 'J.R.R. Tolkien', + releaseYear: 1954 + }, + user: null, + date: new Date('2025-09-10'), + plannedReturningDate: new Date('2025-10-10'), + effectiveReturningDate: new Date('2025-10-02') + } + ] + }, + { + name: 'Moreau', + firstName: 'Sophie', + email: 'sophie@biblio.fr', + birthDate: new Date('1987-02-25'), + loan: [ + { + book: { + title: 'Les Misérables', + isbn: '9780140444308', + author: 'Victor Hugo', + releaseYear: 1862 + }, + user: null, + date: new Date('2025-11-03'), + plannedReturningDate: new Date('2025-12-03'), + effectiveReturningDate: null + } + ] + }, + { + name: 'Leroy', + firstName: 'Julien', + email: 'julien@biblio.fr', + birthDate: new Date('2001-09-18'), + loan: [ + { + book: { + title: 'Fahrenheit 451', + isbn: '9781451673319', + author: 'Ray Bradbury', + releaseYear: 1953 + }, + user: null, + date: new Date('2025-10-15'), + plannedReturningDate: new Date('2025-11-15'), + effectiveReturningDate: new Date('2025-11-13') + } + ] + }, + { + name: 'Petit', + firstName: 'Emma', + email: 'emma@biblio.fr', + birthDate: new Date('2006-11-30'), + loan: [ + { + book: { + title: 'Harry Potter à l’école des sorciers', + isbn: '9780747532743', + author: 'J.K. Rowling', + releaseYear: 1997 + }, + user: null, + date: new Date('2025-11-08'), + plannedReturningDate: new Date('2025-12-08'), + effectiveReturningDate: null + } + ] + }, + { + name: 'Roux', + firstName: 'Nicolas', + email: 'nicolas@biblio.fr', + birthDate: new Date('1995-08-14'), + loan: [ + { + book: { + title: 'Le Petit Prince', + isbn: '9780156012195', + author: 'Antoine de Saint-Exupéry', + releaseYear: 1943 + }, + user: null, + date: new Date('2025-09-25'), + plannedReturningDate: new Date('2025-10-25'), + effectiveReturningDate: new Date('2025-10-20') + } + ] + }, + { + name: 'Fontaine', + firstName: 'Claire', + email: 'claire@biblio.fr', + birthDate: new Date('1992-04-17'), + loan: [ + { + book: { + title: 'L’Étranger', + isbn: '9782070360024', + author: 'Albert Camus', + releaseYear: 1942 + }, + user: null, + date: new Date('2025-10-05'), + plannedReturningDate: new Date('2025-11-05'), + effectiveReturningDate: new Date('2025-11-01') + } + ] + }, + { + name: 'Blanc', + firstName: 'Hugo', + email: 'hugo@biblio.fr', + birthDate: new Date('2000-01-09'), + loan: [ + { + book: { + title: 'Le Hobbit', + isbn: '9780261102217', + author: 'J.R.R. Tolkien', + releaseYear: 1937 + }, + user: null, + date: new Date('2025-11-02'), + plannedReturningDate: new Date('2025-12-02'), + effectiveReturningDate: null + } + ] + }, + { + name: 'Garnier', + firstName: 'Léa', + email: 'lea@biblio.fr', + birthDate: new Date('1999-06-11'), + loan: [ + { + book: { + title: 'La Peste', + isbn: '9780141185064', + author: 'Albert Camus', + releaseYear: 1947 + }, + user: null, + date: new Date('2025-09-01'), + plannedReturningDate: new Date('2025-10-01'), + effectiveReturningDate: new Date('2025-09-27') + } + ] + } + ]; + delete() { + return + } } diff --git a/src/app/pages/loan/loan.ts b/src/app/pages/loan/loan.ts index f0c313f..bfeb6f4 100644 --- a/src/app/pages/loan/loan.ts +++ b/src/app/pages/loan/loan.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; import {LoanTable} from "../../components/loan-table/loan-table"; -import {CreateBook} from "../../components/create-book/create-book"; import {Modal} from "../../components/modal/modal"; import {CreateLoan} from "../../components/create-loan/create-loan"; @@ -8,7 +7,6 @@ import {CreateLoan} from "../../components/create-loan/create-loan"; selector: 'app-loan', imports: [ LoanTable, - CreateBook, Modal, CreateLoan ], diff --git a/src/app/pages/user/user.html b/src/app/pages/user/user.html index e69de29..a06d128 100644 --- a/src/app/pages/user/user.html +++ b/src/app/pages/user/user.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/pages/user/user.ts b/src/app/pages/user/user.ts index c816416..035f50b 100644 --- a/src/app/pages/user/user.ts +++ b/src/app/pages/user/user.ts @@ -1,8 +1,15 @@ import { Component } from '@angular/core'; +import {Modal} from "../../components/modal/modal"; +import {CreateUser} from "../../components/create-user/create-user"; +import {UserTable} from "../../components/user-table/user-table"; @Component({ selector: 'app-user', - imports: [], + imports: [ + Modal, + CreateUser, + UserTable + ], templateUrl: './user.html', styleUrl: './user.css', })