sanchezvem/pyrofetes-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added user page and create a new modal from use with button and text

Browse Source
This commit is contained in:
sanchezvem
2025-11-14 00:14:28 +01:00
parent 43a9bcf1cc
commit b5fa0d0d4b
10 changed files with 247 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/components/modal-button/modal-button.css Normal file
View File

16
src/app/components/modal-button/modal-button.html Normal file
View File

@@ -0,0 +1,16 @@
<button nz-button nzType="primary" (click)="showModal()">{{name()}}</button>
<ng-template #modalContent>
<ng-content></ng-content>
</ng-template>
<nz-modal
[(nzVisible)]="isVisible"
[nzTitle]="name()"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
[nzOkLoading]="isOkLoading"
[nzContent]="modalContent"
>
</nz-modal>

37
src/app/components/modal-button/modal-button.ts Normal file
View File

@@ -0,0 +1,37 @@
import {Component, input, Input} from '@angular/core';
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzModalComponent} from "ng-zorro-antd/modal";
import {NzButtonComponent} from "ng-zorro-antd/button";
@Component({
selector: 'app-modal-button',
imports: [
NzModalComponent,
NzButtonComponent,
],
templateUrl: './modal-button.html',
styleUrl: './modal-button.css',
})
export class ModalButton {
name = input.required<string>()
isVisible = false;
isOkLoading = false;
showModal(): void {
this.isVisible = true;
}
handleOk(): void {
this.isOkLoading = true;
setTimeout(() => {
this.isVisible = false;
this.isOkLoading = false;
}, 1000);
}
handleCancel(): void {
this.isVisible = false;
}
}

8
src/app/components/profil-form/profil-form.html
View File

@@ -5,7 +5,7 @@
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Alain" formControlName="newName">
<input nz-input placeholder="Alain" formControlName="name">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
@@ -14,7 +14,7 @@
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="alain.terieur@pyrofetes.fr" formControlName="newEmail">
<input nz-input placeholder="alain.terieur@pyrofetes.fr" formControlName="email">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
@@ -23,7 +23,7 @@
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="visiteur" formControlName="newFonction">
<input nz-input placeholder="visiteur" formControlName="fonction">
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
@@ -32,7 +32,7 @@
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="newPassword">
<input nz-input type="password" placeholder="Nouveau mot de passe" formControlName="password">
</nz-form-control>
</nz-form-item>
</form>

8
src/app/components/profil-form/profil-form.ts
View File

@@ -23,10 +23,10 @@ import {NzInputDirective} from "ng-zorro-antd/input";
})
export class ProfilForm {
profilForm: FormGroup = new FormGroup({
newName: new FormControl<string>(null, [Validators.required]),
newEmail: new FormControl<string>(null, [Validators.required]),
newFonction: new FormControl<string>(null, [Validators.required]),
newPassword: new FormControl<string>(null, [Validators.required])
name: new FormControl<string>(null, [Validators.required]),
email: new FormControl<string>(null, [Validators.required]),
fonction: new FormControl<string>(null, [Validators.required]),
password: new FormControl<string>(null, [Validators.required])
})
submitForm() {

85
src/app/components/user-table/user-table.css Normal file
View File

@@ -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;
}
}

29
src/app/components/user-table/user-table.html Normal file
View File

@@ -0,0 +1,29 @@
<nz-table #basicTable [nzData]="listOfData" class="mr-7">
<thead>
<tr>
<th>Nom</th>
<th>Email</th>
<th>Fonction</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@for (data of basicTable.data; track data) {
<tr>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
<td>{{data.fonction}}</td>
<td>
<div style="display: flex; gap: 10px;">
<app-modal-nav nameIcon="edit" name="Modification de l'utilisateur" class="cursor-pointer">
<app-profil-form></app-profil-form>
</app-modal-nav>
<div>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
</div>
</div>
</td>
</tr>
}
</tbody>
</nz-table>

57
src/app/components/user-table/user-table.ts Normal file
View File

@@ -0,0 +1,57 @@
import { Component } from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {StockForm} from "../stock-form/stock-form";
import {UserInfo} from "../../interfaces/user.interface";
import {ProfilForm} from "../profil-form/profil-form";
@Component({
selector: 'app-user-table',
imports: [
ModalNav,
NzIconDirective,
NzTableComponent,
ProfilForm
],
templateUrl: './user-table.html',
styleUrl: './user-table.css',
})
export class UserTable {
listOfData: UserInfo[] = [
{ name: 'Alice Martin', email: 'alice.martin@example.com', fonction: 'Responsable Stock' },
{ name: 'Bruno Lefevre', email: 'bruno.lefevre@example.com', fonction: 'Technicien' },
{ name: 'Claire Dupont', email: 'claire.dupont@example.com', fonction: 'Chef d’équipe' },
{ name: 'David Roux', email: 'david.roux@example.com', fonction: 'Opérateur' },
{ name: 'Emma Girard', email: 'emma.girard@example.com', fonction: 'Manager' },
{ name: 'Florian Petit', email: 'florian.petit@example.com', fonction: 'Contrôleur' },
{ name: 'Gabriel Fabre', email: 'gabriel.fabre@example.com', fonction: 'Technicien' },
{ name: 'Hélène Blanchard', email: 'helene.blanchard@example.com', fonction: 'Responsable Qualité' },
{ name: 'Idris Caron', email: 'idris.caron@example.com', fonction: 'Opérateur' },
{ name: 'Julie Laurent', email: 'julie.laurent@example.com', fonction: 'RH' },
{ name: 'Kevin Becker', email: 'kevin.becker@example.com', fonction: 'Chef d’équipe' },
{ name: 'Laura Denis', email: 'laura.denis@example.com', fonction: 'Responsable Stock' },
{ name: 'Maxime Robert', email: 'maxime.robert@example.com', fonction: 'Technicien' },
{ name: 'Nina Lambert', email: 'nina.lambert@example.com', fonction: 'Opérateur' },
{ name: 'Olivier Garnier', email: 'olivier.garnier@example.com', fonction: 'Manager' },
{ name: 'Pauline Henry', email: 'pauline.henry@example.com', fonction: 'Chef de Projet' },
{ name: 'Quentin Millet', email: 'quentin.millet@example.com', fonction: 'Technicien' },
{ name: 'Raphaël Julien', email: 'raphael.julien@example.com', fonction: 'Opérateur' },
{ name: 'Sophie Moreau', email: 'sophie.moreau@example.com', fonction: 'Responsable Qualité' },
{ name: 'Théo Renaud', email: 'theo.renaud@example.com', fonction: 'Technicien' },
{ name: 'Ulysse Berger', email: 'ulysse.berger@example.com', fonction: 'Opérateur' },
{ name: 'Valentine Roche', email: 'valentine.roche@example.com', fonction: 'RH' },
{ name: 'William Arnaud', email: 'william.arnaud@example.com', fonction: 'Chef d’équipe' },
{ name: 'Xavier Colin', email: 'xavier.colin@example.com', fonction: 'Technicien' },
{ name: 'Yasmine Perrot', email: 'yasmine.perrot@example.com', fonction: 'Manager' },
{ name: 'Zack Morel', email: 'zack.morel@example.com', fonction: 'Opérateur' },
{ name: 'Adèle Simon', email: 'adele.simon@example.com', fonction: 'Responsable Stock' },
{ name: 'Bastien Renault', email: 'bastien.renault@example.com', fonction: 'Technicien' },
{ name: 'Cindy Barret', email: 'cindy.barret@example.com', fonction: 'Assistante' },
{ name: 'Dorian Lefort', email: 'dorian.lefort@example.com', fonction: 'Contrôleur' },
];
delete(){
return
}
}