From 48b4c778ea464e14a632987ec50192e68d9299ee Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Tue, 11 Nov 2025 15:40:33 +0100 Subject: [PATCH] added loan's forms --- .../components/create-loan/create-loan.css | 0 .../components/create-loan/create-loan.html | 21 ++ src/app/components/create-loan/create-loan.ts | 39 ++++ src/app/components/loan-table/loan-table.css | 85 +++++++ src/app/components/loan-table/loan-table.html | 29 +++ src/app/components/loan-table/loan-table.ts | 208 ++++++++++++++++++ .../components/update-loan/update-loan.css | 0 .../components/update-loan/update-loan.html | 41 ++++ src/app/components/update-loan/update-loan.ts | 41 ++++ src/app/components/user-table/user-table.css | 0 src/app/components/user-table/user-table.html | 0 src/app/components/user-table/user-table.ts | 17 ++ src/app/pages/loan/loan.html | 6 +- src/app/pages/loan/loan.ts | 11 +- src/app/pages/user/user.html | 1 - src/app/pages/user/user.ts | 2 +- 16 files changed, 497 insertions(+), 4 deletions(-) create mode 100644 src/app/components/create-loan/create-loan.css create mode 100644 src/app/components/create-loan/create-loan.html create mode 100644 src/app/components/create-loan/create-loan.ts create mode 100644 src/app/components/loan-table/loan-table.css create mode 100644 src/app/components/loan-table/loan-table.html create mode 100644 src/app/components/loan-table/loan-table.ts create mode 100644 src/app/components/update-loan/update-loan.css create mode 100644 src/app/components/update-loan/update-loan.html create mode 100644 src/app/components/update-loan/update-loan.ts create mode 100644 src/app/components/user-table/user-table.css create mode 100644 src/app/components/user-table/user-table.html create mode 100644 src/app/components/user-table/user-table.ts diff --git a/src/app/components/create-loan/create-loan.css b/src/app/components/create-loan/create-loan.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/create-loan/create-loan.html b/src/app/components/create-loan/create-loan.html new file mode 100644 index 0000000..3e47157 --- /dev/null +++ b/src/app/components/create-loan/create-loan.html @@ -0,0 +1,21 @@ +
+ + + Nom / Prénom + + + + + + + + + + Livre + + + + + + +
\ No newline at end of file diff --git a/src/app/components/create-loan/create-loan.ts b/src/app/components/create-loan/create-loan.ts new file mode 100644 index 0000000..f3205ec --- /dev/null +++ b/src/app/components/create-loan/create-loan.ts @@ -0,0 +1,39 @@ +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-loan', + imports: [ + FormsModule, + NzColDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzRowDirective, + ReactiveFormsModule, + NzInputDirective + ], + templateUrl: './create-loan.html', + styleUrl: './create-loan.css', +}) +export class CreateLoan { + createLoanForm = new FormGroup({ + name: new FormControl(null, [Validators.required]), + book: new FormControl(null, [Validators.required]) + }) + + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.createLoanForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.createLoanForm.getRawValue()) + + // Pour vider le formulaire + this.createLoanForm.reset() + } +} diff --git a/src/app/components/loan-table/loan-table.css b/src/app/components/loan-table/loan-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ b/src/app/components/loan-table/loan-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/loan-table/loan-table.html b/src/app/components/loan-table/loan-table.html new file mode 100644 index 0000000..3f7882d --- /dev/null +++ b/src/app/components/loan-table/loan-table.html @@ -0,0 +1,29 @@ + + + + Utilisateur + Livre + Date d'enregistrement + Date de retour estimée + Date de retour finale + Action + + + + @for (data of basicTable.data; track data) { + + {{ data.user.name}} {{data.user.firstName }} + {{ data.book.title }} +

{{ data.date | date: 'dd/MM/yyyy' }}

+ {{ data.plannedReturningDate | date: 'dd/MM/yyyy'}} + {{ data.effectiveReturningDate | date: 'dd/MM/yyyy'}} + + + + + + + + } + + \ No newline at end of file diff --git a/src/app/components/loan-table/loan-table.ts b/src/app/components/loan-table/loan-table.ts new file mode 100644 index 0000000..f900874 --- /dev/null +++ b/src/app/components/loan-table/loan-table.ts @@ -0,0 +1,208 @@ +import { Component } from '@angular/core'; +import {DatePipe} from "@angular/common"; +import {Modal} from "../modal/modal"; +import {NzButtonComponent} from "ng-zorro-antd/button"; +import {NzTableComponent} from "ng-zorro-antd/table"; +import {UpdateLoan} from "../update-loan/update-loan"; +import {LoanInfo} from "../../interfaces/loan.interfaces"; + +@Component({ + selector: 'app-loan-table', + imports: [ + DatePipe, + Modal, + NzButtonComponent, + NzTableComponent, + UpdateLoan + ], + templateUrl: './loan-table.html', + styleUrl: './loan-table.css', +}) +export class LoanTable { + listOfData: LoanInfo[] = [ + { + book: { + title: 'Dune', + isbn: '9780441013593', + author: 'Frank Herbert', + releaseYear: 1965 + }, + user: { + name: 'Dupont', + firstName: 'Mathys', + email: 'mathys@biblio.fr', + birthDate: new Date('2004-05-21'), + loan: [] + }, + date: new Date('2025-11-01'), + plannedReturningDate: new Date('2025-12-01'), + effectiveReturningDate: null + }, + { + book: { + title: '1984', + isbn: '9780451524935', + author: 'George Orwell', + releaseYear: 1949 + }, + user: { + name: 'Durand', + firstName: 'Lucie', + email: 'lucie@biblio.fr', + birthDate: new Date('1998-03-12'), + loan: [] + }, + date: new Date('2025-10-20'), + plannedReturningDate: new Date('2025-11-20'), + effectiveReturningDate: new Date('2025-11-05') + }, + { + book: { + title: 'Le Seigneur des Anneaux', + isbn: '9780261102385', + author: 'J.R.R. Tolkien', + releaseYear: 1954 + }, + user: { + name: 'Bernard', + firstName: 'Thomas', + email: 'thomas@biblio.fr', + birthDate: new Date('1990-07-04'), + loan: [] + }, + date: new Date('2025-09-10'), + plannedReturningDate: new Date('2025-10-10'), + effectiveReturningDate: new Date('2025-10-02') + }, + { + book: { + title: 'Les Misérables', + isbn: '9780140444308', + author: 'Victor Hugo', + releaseYear: 1862 + }, + user: { + name: 'Moreau', + firstName: 'Sophie', + email: 'sophie@biblio.fr', + birthDate: new Date('1987-02-25'), + loan: [] + }, + date: new Date('2025-11-03'), + plannedReturningDate: new Date('2025-12-03'), + effectiveReturningDate: null + }, + { + book: { + title: 'Fahrenheit 451', + isbn: '9781451673319', + author: 'Ray Bradbury', + releaseYear: 1953 + }, + user: { + name: 'Leroy', + firstName: 'Julien', + email: 'julien@biblio.fr', + birthDate: new Date('2001-09-18'), + loan: [] + }, + date: new Date('2025-10-15'), + plannedReturningDate: new Date('2025-11-15'), + effectiveReturningDate: new Date('2025-11-13') + }, + { + book: { + title: 'Harry Potter à l’école des sorciers', + isbn: '9780747532743', + author: 'J.K. Rowling', + releaseYear: 1997 + }, + user: { + name: 'Petit', + firstName: 'Emma', + email: 'emma@biblio.fr', + birthDate: new Date('2006-11-30'), + loan: [] + }, + date: new Date('2025-11-08'), + plannedReturningDate: new Date('2025-12-08'), + effectiveReturningDate: null + }, + { + book: { + title: 'Le Petit Prince', + isbn: '9780156012195', + author: 'Antoine de Saint-Exupéry', + releaseYear: 1943 + }, + user: { + name: 'Roux', + firstName: 'Nicolas', + email: 'nicolas@biblio.fr', + birthDate: new Date('1995-08-14'), + loan: [] + }, + date: new Date('2025-09-25'), + plannedReturningDate: new Date('2025-10-25'), + effectiveReturningDate: new Date('2025-10-20') + }, + { + book: { + title: 'L’Étranger', + isbn: '9782070360024', + author: 'Albert Camus', + releaseYear: 1942 + }, + user: { + name: 'Fontaine', + firstName: 'Claire', + email: 'claire@biblio.fr', + birthDate: new Date('1992-04-17'), + loan: [] + }, + date: new Date('2025-10-05'), + plannedReturningDate: new Date('2025-11-05'), + effectiveReturningDate: new Date('2025-11-01') + }, + { + book: { + title: 'Le Hobbit', + isbn: '9780261102217', + author: 'J.R.R. Tolkien', + releaseYear: 1937 + }, + user: { + name: 'Blanc', + firstName: 'Hugo', + email: 'hugo@biblio.fr', + birthDate: new Date('2000-01-09'), + loan: [] + }, + date: new Date('2025-11-02'), + plannedReturningDate: new Date('2025-12-02'), + effectiveReturningDate: null + }, + { + book: { + title: 'La Peste', + isbn: '9780141185064', + author: 'Albert Camus', + releaseYear: 1947 + }, + user: { + name: 'Garnier', + firstName: 'Léa', + email: 'lea@biblio.fr', + birthDate: new Date('1999-06-11'), + loan: [] + }, + 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/components/update-loan/update-loan.css b/src/app/components/update-loan/update-loan.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/update-loan/update-loan.html b/src/app/components/update-loan/update-loan.html new file mode 100644 index 0000000..975fb53 --- /dev/null +++ b/src/app/components/update-loan/update-loan.html @@ -0,0 +1,41 @@ +
+ + + Nom / Prénom + + + + + + + + + + Livre + + + + + + + + + + Date de retour estimée + + + + + + + + + + Date de retour finale + + + + + + +
\ No newline at end of file diff --git a/src/app/components/update-loan/update-loan.ts b/src/app/components/update-loan/update-loan.ts new file mode 100644 index 0000000..179cfa8 --- /dev/null +++ b/src/app/components/update-loan/update-loan.ts @@ -0,0 +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-loan', + imports: [ + FormsModule, + NzColDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzInputDirective, + NzRowDirective, + ReactiveFormsModule + ], + templateUrl: './update-loan.html', + styleUrl: './update-loan.css', +}) +export class UpdateLoan { + updateLoanForm = new FormGroup({ + name: new FormControl(null, [Validators.required]), + book: new FormControl(null, [Validators.required]), + plannedDate: new FormControl(null, [Validators.required]), + effectiveDate: new FormControl(null, [Validators.required]), + }) + + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.updateLoanForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.updateLoanForm.getRawValue()) + + // Pour vider le formulaire + this.updateLoanForm.reset() + } +} diff --git a/src/app/components/user-table/user-table.css b/src/app/components/user-table/user-table.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/user-table/user-table.html b/src/app/components/user-table/user-table.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/user-table/user-table.ts b/src/app/components/user-table/user-table.ts new file mode 100644 index 0000000..146deda --- /dev/null +++ b/src/app/components/user-table/user-table.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import {NzTableComponent} from "ng-zorro-antd/table"; +import {NzDividerComponent} from "ng-zorro-antd/divider"; +import {Modal} from "../modal/modal"; +import {UpdateAuthor} from "../update-author/update-author"; +import {DatePipe} from "@angular/common"; +import {NzButtonComponent} from "ng-zorro-antd/button"; + +@Component({ + selector: 'app-user-table', + imports: [], + templateUrl: './user-table.html', + styleUrl: './user-table.css', +}) +export class UserTable { + +} diff --git a/src/app/pages/loan/loan.html b/src/app/pages/loan/loan.html index 53cb557..96ea6b1 100644 --- a/src/app/pages/loan/loan.html +++ b/src/app/pages/loan/loan.html @@ -1 +1,5 @@ -

loan works!

+ + + + + diff --git a/src/app/pages/loan/loan.ts b/src/app/pages/loan/loan.ts index 6bba6f5..f0c313f 100644 --- a/src/app/pages/loan/loan.ts +++ b/src/app/pages/loan/loan.ts @@ -1,8 +1,17 @@ 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"; @Component({ selector: 'app-loan', - imports: [], + imports: [ + LoanTable, + CreateBook, + Modal, + CreateLoan + ], templateUrl: './loan.html', styleUrl: './loan.css', }) diff --git a/src/app/pages/user/user.html b/src/app/pages/user/user.html index d039bb7..e69de29 100644 --- a/src/app/pages/user/user.html +++ b/src/app/pages/user/user.html @@ -1 +0,0 @@ -

user works!

diff --git a/src/app/pages/user/user.ts b/src/app/pages/user/user.ts index ad839b1..c816416 100644 --- a/src/app/pages/user/user.ts +++ b/src/app/pages/user/user.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-user', - imports: [], + imports: [], templateUrl: './user.html', styleUrl: './user.css', })