added loan's forms

2025-11-11 15:40:33 +01:00
parent 2ca124589a
commit 48b4c778ea
16 changed files with 497 additions and 4 deletions
--- a/src/app/components/create-loan/create-loan.css
+++ b/src/app/components/create-loan/create-loan.css
--- a/src/app/components/create-loan/create-loan.html
+++ b/src/app/components/create-loan/create-loan.html
@@ -0,0 +1,21 @@
+<form nz-form nzLayout="horizontal" [formGroup]="createLoanForm" (ngSubmit)="submitForm()">
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            Nom / Prénom
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Non défini" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="8" nzRequired>
+            Livre
+        </nz-form-label>
+
+        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom de l'auteur" formControlName="book">
+        </nz-form-control>
+    </nz-form-item>
+</form>
--- a/src/app/components/create-loan/create-loan.ts
+++ 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<string>(null, [Validators.required]),
+        book: new FormControl<string>(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()
+    }
+}
--- a/src/app/components/loan-table/loan-table.css
+++ 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;
+    }
+}
--- a/src/app/components/loan-table/loan-table.html
+++ b/src/app/components/loan-table/loan-table.html
@@ -0,0 +1,29 @@
+<nz-table #basicTable [nzData]="listOfData">
+    <thead>
+    <tr>
+        <th>Utilisateur</th>
+        <th>Livre</th>
+        <th>Date d'enregistrement</th>
+        <th>Date de retour estimée</th>
+        <th>Date de retour finale</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{ data.user.name}} {{data.user.firstName }}</td>
+                <td>{{ data.book.title }}</td>
+                <p>{{ data.date | date: 'dd/MM/yyyy' }}</p>
+                <td>{{ data.plannedReturningDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{ data.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
+                <td>
+                    <app-modal [name]="'Modifier'">
+                        <app-update-loan></app-update-loan>
+                    </app-modal>
+                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
--- a/src/app/components/loan-table/loan-table.ts
+++ 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
+    }
+}
--- a/src/app/components/update-loan/update-loan.css
+++ b/src/app/components/update-loan/update-loan.css
--- a/src/app/components/update-loan/update-loan.html
+++ b/src/app/components/update-loan/update-loan.html
@@ -0,0 +1,41 @@
+<form nz-form nzLayout="horizontal" [formGroup]="updateLoanForm" (ngSubmit)="submitForm()">
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>
+            Nom / Prénom
+        </nz-form-label>
+
+        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Non défini" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>
+            Livre
+        </nz-form-label>
+
+        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom de l'auteur" formControlName="book">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>
+            Date de retour estimée
+        </nz-form-label>
+
+        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="JJ/MM/AAAA" formControlName="plannedDate">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>
+            Date de retour finale
+        </nz-form-label>
+
+        <nz-form-control nzSpan="30" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="JJ/MM/AAAA" formControlName="effectiveDate">
+        </nz-form-control>
+    </nz-form-item>
+</form>
--- a/src/app/components/update-loan/update-loan.ts
+++ 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<string>(null, [Validators.required]),
+        book: new FormControl<string>(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()
+    }
+}
--- a/src/app/components/user-table/user-table.css
+++ b/src/app/components/user-table/user-table.css
--- a/src/app/components/user-table/user-table.html
+++ b/src/app/components/user-table/user-table.html
--- a/src/app/components/user-table/user-table.ts
+++ 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 {
+
+}
--- a/src/app/pages/loan/loan.html
+++ b/src/app/pages/loan/loan.html
@@ -1 +1,5 @@
-<p>loan works!</p>
+<app-modal [name]="'Ajouter un emprunt'">
+    <app-create-loan></app-create-loan>
+</app-modal>
+
+<app-loan-table></app-loan-table>
--- 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',
 })
--- a/src/app/pages/user/user.html
+++ b/src/app/pages/user/user.html
@@ -1 +0,0 @@
-<p>user works!</p>
--- 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',
 })