From 8d220d60f8865b6d2d22638e49c884c152da0b49 Mon Sep 17 00:00:00 2001 From: ikuzenkuna Date: Thu, 13 Nov 2025 18:36:34 +0100 Subject: [PATCH] created stock page and stock-table component --- .../compontents/stock-table/stock-table.css | 85 +++++++++++++++++++ .../compontents/stock-table/stock-table.html | 30 +++++++ .../compontents/stock-table/stock-table.ts | 39 +++++++++ src/app/interfaces/stock.interface.ts | 9 ++ src/app/pages/stock/stock.html | 26 +----- src/app/pages/stock/stock.ts | 42 +-------- 6 files changed, 168 insertions(+), 63 deletions(-) create mode 100644 src/app/compontents/stock-table/stock-table.css create mode 100644 src/app/compontents/stock-table/stock-table.html create mode 100644 src/app/compontents/stock-table/stock-table.ts create mode 100644 src/app/interfaces/stock.interface.ts diff --git a/src/app/compontents/stock-table/stock-table.css b/src/app/compontents/stock-table/stock-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ b/src/app/compontents/stock-table/stock-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/compontents/stock-table/stock-table.html b/src/app/compontents/stock-table/stock-table.html new file mode 100644 index 0000000..60fd018 --- /dev/null +++ b/src/app/compontents/stock-table/stock-table.html @@ -0,0 +1,30 @@ + + + + Nom + Duration + Caliber + quantity + Weight + Nec + MinimalQuantity + + + + @for (data of basicTable.data; track data) { + + {{data.name}} + {{data.duration}} + {{data.caliber}} + {{data.quantity}} + {{data.weight}} + {{data.nec}} + {{data.minimalQuantity}} + + modifier + + + + } + + diff --git a/src/app/compontents/stock-table/stock-table.ts b/src/app/compontents/stock-table/stock-table.ts new file mode 100644 index 0000000..1cbfd60 --- /dev/null +++ b/src/app/compontents/stock-table/stock-table.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; +import {StockInfo} from "../../interfaces/stock.interface"; +import {NzTableComponent} from "ng-zorro-antd/table"; +import {NzButtonComponent} from "ng-zorro-antd/button"; + +@Component({ + selector: 'app-stock-table', + imports: [ + NzTableComponent, + NzButtonComponent + ], + templateUrl: './stock-table.html', + styleUrl: './stock-table.css', +}) +export class StockTable { + listOfData: StockInfo[] = [ + { + name: 'Stock 1', + duration: '10 days', + caliber: '100g', + quantity: 100, + weight: 1000, + nec: '5kg', + minimalQuantity: 5 + }, + { + name: 'Stock 2', + duration: '20 days', + caliber: '200g', + quantity: 200, + weight: 2000, + nec: '10kg', + minimalQuantity: 10 + } + ]; + delete(){ + return + } +} diff --git a/src/app/interfaces/stock.interface.ts b/src/app/interfaces/stock.interface.ts new file mode 100644 index 0000000..0a187e6 --- /dev/null +++ b/src/app/interfaces/stock.interface.ts @@ -0,0 +1,9 @@ +export interface StockInfo { + name: string; + duration: string; + caliber: string; + quantity: number; + weight: number; + nec: string; + minimalQuantity: number; +} \ No newline at end of file diff --git a/src/app/pages/stock/stock.html b/src/app/pages/stock/stock.html index 3c3eb7b..54ac09a 100644 --- a/src/app/pages/stock/stock.html +++ b/src/app/pages/stock/stock.html @@ -1,25 +1 @@ - - - - Nom - Duration - Caliber - quantity - Weight - Nec - MinimalQuantity - - - - @for (data of basicTable.data; track data) { - - {{data.name}} - {{data.duration}} - {{data.caliber}} - {{data.quantity}} - {{data.weight}} - {{data.nec}} - {{data.minimalQuantity}} - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/stock/stock.ts b/src/app/pages/stock/stock.ts index 0b463bb..bf301b7 100644 --- a/src/app/pages/stock/stock.ts +++ b/src/app/pages/stock/stock.ts @@ -1,51 +1,17 @@ import { Component } from '@angular/core'; import {NzTableComponent} from "ng-zorro-antd/table"; +import {StockTable} from "../../compontents/stock-table/stock-table"; @Component({ selector: 'app-stock', imports: [ - NzTableComponent + NzTableComponent, + StockTable ], templateUrl: './stock.html', styleUrl: './stock.css', }) -class StockInfo { - id: number; - name: string; - Duration: string; - Caliber: string; - Quantity: number; - Weight: number; - Nec: string; - MinimalQuantity: number; -} - - export class Stock { - listOfData: StockInfo[] = [ - { - id: 1, - name: 'Stock 1', - Duration: '10 days', - Caliber: '100g', - Quantity: 100, - Weight: 1000, - Nec: '5kg', - MinimalQuantity: 5 - }, - { - id: 2, - name: 'Stock 2', - Duration: '20 days', - Caliber: '200g', - Quantity: 200, - Weight: 2000, - Nec: '10kg', - MinimalQuantity: 10 - } - ]; - delete(){ - return - } + }