ajout truncate + page liste ingredients

package-lock.json

@@ -6939,9 +6939,9 @@
       }
     },
     "node_modules/engine.io": {
-      "version": "6.5.4",
+      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.5.tgz",
-      "integrity": "sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==",
+      "integrity": "sha512-C5Pn8Wk+1vKBoHghJODM63yk8MvrO9EWZUfkAt5HAqIgPE4/8FF0PEGHXtEd40l223+cE5ABWuPzm38PHFXfMA==",
       "dev": true,
       "dependencies": {
         "@types/cookie": "^0.4.1",
@@ -6953,7 +6953,7 @@
         "cors": "~2.8.5",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
-        "ws": "~8.11.0"
+        "ws": "~8.17.1"
       },
       "engines": {
         "node": ">=10.2.0"
@@ -11944,13 +11944,13 @@
       }
     },
     "node_modules/socket.io-adapter": {
-      "version": "2.5.4",
+      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
-      "integrity": "sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
       "dev": true,
       "dependencies": {
         "debug": "~4.3.4",
-        "ws": "~8.11.0"
+        "ws": "~8.17.1"
       }
     },
     "node_modules/socket.io-parser": {
@@ -13627,27 +13627,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
@@ -13893,16 +13872,16 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.11.0",
+      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {

src/app/app.component.ts

@@ -7,6 +7,7 @@ import { RecipeAddComponent } from './recipe-add/recipe-add.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { IngredientListComponent } from './ingredient-list/ingredient-list.component';
 
 @Component({
   selector: 'app-root',
@@ -17,6 +18,7 @@ import { CommonModule } from '@angular/common';
     RecipeComponent,
     RecipeAddComponent,
     RecipeListComponent,
+    IngredientListComponent,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

src/app/app.routes.ts

@@ -3,11 +3,13 @@ import { RecipeComponent } from './recipe/recipe.component';
 import { RecipeListComponent } from './recipe-list/recipe-list.component';
 import { HomeComponent } from './home/home.component';
 import { RecipeAddComponent } from './recipe-add/recipe-add.component';
+import { IngredientListComponent } from './ingredient-list/ingredient-list.component';
 
 export const routes: Routes = [
   { path: 'add', component: RecipeAddComponent },
   { path: 'recipe/:id', component: RecipeComponent },
   { path: 'list', component: RecipeListComponent },
+  { path: 'ingredients', component: IngredientListComponent },
   { path: '', component: HomeComponent },
   { path: '**', redirectTo: '' },
 ];

src/app/ingredient-list/ingredient-list.component.html

@@ -0,0 +1,25 @@
+<div *ngIf="ingredients.length > 0">
+  <h2>List of Ingredients</h2>
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!-- ID Column -->
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <td mat-cell *matCellDef="let ingredient">{{ ingredient.id }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let ingredient">{{ ingredient.name }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <mat-paginator
+    [length]="ingredients.length"
+    [pageSize]="5"
+    [pageSizeOptions]="[5, 10, 20]"
+  >
+  </mat-paginator>
+</div>

src/app/ingredient-list/ingredient-list.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Ingredient } from '../models/ingredient';
+import { IngredientService } from '../services/ingredient.service';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-ingredient-list',
+  standalone: true,
+  templateUrl: './ingredient-list.component.html',
+  styleUrls: ['./ingredient-list.component.scss'],
+  imports: [CommonModule, MatTableModule, MatPaginatorModule],
+})
+export class IngredientListComponent implements OnInit {
+  ingredients: Ingredient[] = [];
+  dataSource: MatTableDataSource<Ingredient> =
+    new MatTableDataSource<Ingredient>();
+  displayedColumns: string[] = ['id', 'name'];
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+  constructor(private ingredientService: IngredientService) {}
+
+  ngOnInit(): void {
+    this.ingredients = this.ingredientService.getIngredients();
+    this.dataSource.data = this.ingredients;
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+}

src/app/pipes/truncate.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  standalone: true,
+})
+export class TruncatePipe implements PipeTransform {
+  transform(
+    value: string,
+    limit: number = 50,
+    completeWords: boolean = false,
+    ellipsis: string = '...'
+  ): string {
+    if (!value) return '';
+    if (value.length <= limit) return value;
+
+    if (completeWords) {
+      limit = value.substring(0, limit).lastIndexOf(' ');
+    }
+    return `${value.substring(0, limit)}${ellipsis}`;
+  }
+}

src/app/recipe-list/recipe-list.component.html

@@ -13,7 +13,9 @@
     <!-- Description Column -->
     <ng-container matColumnDef="description">
       <th mat-header-cell *matHeaderCellDef>Description</th>
-      <td mat-cell *matCellDef="let recipe">{{ recipe.description }}</td>
+      <td mat-cell *matCellDef="let recipe">
+        {{ recipe.description | truncate : 50 }}
+      </td>
     </ng-container>
 
     <!-- Image Column -->

src/app/recipe-list/recipe-list.component.ts

@@ -5,13 +5,20 @@ import { CommonModule } from '@angular/common';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatButtonModule } from '@angular/material/button';
+import { TruncatePipe } from '../pipes/truncate.pipe';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.scss'],
-  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatButtonModule],
+  imports: [
+    CommonModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    TruncatePipe,
+  ],
 })
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[] = [];
@@ -31,21 +38,6 @@ export class RecipeListComponent implements OnInit {
     this.dataSource.paginator = this.paginator;
   }
 
-  getQuantity(recipeId: number, ingredientId: number): number {
-    const recipe = this.recipes.find((r) => r.id === recipeId);
-    const ingredientRecipe = recipe?.ingredients.find(
-      (i) => i.id === ingredientId
-    );
-    return ingredientRecipe
-      ? this.getIngredientQuantity(recipeId, ingredientId)
-      : 0;
-  }
-
-  getIngredientQuantity(recipeId: number, ingredientId: number): number {
-    // Implémenter la logique pour retourner la quantité d'ingrédient
-    return 0;
-  }
-
   navToAddRecipe(): void {
     this.router.navigate(['/add']);
   }

src/app/services/menu.service.ts

@@ -13,6 +13,7 @@ export class MenuService {
     { label: 'Home', link: '/home' },
     { label: 'List recipes', link: '/list' },
     { label: 'Add new recipe', link: '/add' },
+    { label: 'List ingredients', link: '/ingredients' },
   ];
 
   getMenuItems(): MenuItem[] {