Add a table interface (#2)

Co-authored-by: bastien ollier <bastien.ollier@etu.uca.fr>
Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/clement.freville2/tiramisu/pulls/2
Co-authored-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Co-committed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { RecipeService } from './recipe.service';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +8,11 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
   imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
+  providers: [RecipeService],
 })
 export class AppComponent {
   title = 'tiramisu';
+
+  constructor(protected recipes: RecipeService) {
+  }
 }

src/app/app.config.ts

@@ -1,8 +1,10 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
+import { withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
+  providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync()],
 };

src/app/recipe.service.ts

@@ -5,12 +5,25 @@ import { Recipe } from '../cookbook/type';
   providedIn: 'root',
 })
 export class RecipeService {
-  #recipes: Recipe[] = [];
+  #recipes: Recipe[] = [
+    { id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 4, name: 'crepe5', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 5, name: 'crepe6', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 6, name: 'crepe7', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 7, name: 'crepe8', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 8, name: 'crepe9', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 9, name: 'crepe10', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 10, name: 'crepe11', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 11, name: 'crepe12', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 12, name: 'crepe13', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+  ];
 
-  constructor() {}
-
-  getAll(): Promise<Recipe[]> {
-    return Promise.resolve(this.#recipes);
+  getAll(): Recipe[] {
+    return this.#recipes;
   }
 
   get(id: number): Recipe | null {

src/app/recipe/recipe.component.html

@@ -1 +1,4 @@
-<p>recipe works!</p>
+<p>{{recipe.id}}</p>
+<p>{{recipe.name}}</p>
+<p>{{recipe.description}}</p>
+

src/app/recipe/recipe.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input } from '@angular/core';
+import { Recipe } from '../../cookbook/type';
+import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipe',
@@ -7,7 +9,13 @@ import { Component, Input } from '@angular/core';
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {
+  recipe: Recipe = { id: -1, name: '', description: '', image: '', ingredients: [] };
+
   @Input()
   set id(id: string) {
+    this.recipe = this.recipes.get(parseInt(id))!;
+  }
+
+  constructor(protected recipes: RecipeService) {
   }
 }

src/app/recipes/recipes.component.html

@@ -1 +1,44 @@
-<p>recipes works!</p>
+<div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource">
+  
+      <!-- Position Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> id </th>
+        <td mat-cell *matCellDef="let element"> 
+                {{element.id}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> name </th>
+        <td mat-cell *matCellDef="let element">
+                {{element.name}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef> description </th>
+        <td mat-cell *matCellDef="let element">
+                {{element.description}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="image">
+        <th mat-header-cell *matHeaderCellDef> image </th>
+        <td mat-cell *matCellDef="let element">
+          <img src="https://placehold.co/200x200">
+        </td>
+      </ng-container>
+
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let element; columns: displayedColumns" [routerLink]="['/recipe/', element.id]"></tr>
+
+
+    </table>
+  
+    <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+                   showFirstLastButtons
+                   aria-label="Select page of recipes">
+    </mat-paginator>
+  </div>

src/app/recipes/recipes.component.ts

@@ -1,10 +1,28 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { RouterLink } from '@angular/router';
+import { Recipe } from '../../cookbook/type';
+import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipes',
   standalone: true,
-  imports: [],
+  imports: [MatTableModule, MatPaginatorModule, RouterLink],
   templateUrl: './recipes.component.html',
 })
-export class RecipesComponent {
+export class RecipesComponent implements AfterViewInit {
+  displayedColumns: string[] = ['id', 'name', 'description', 'image'];
+  dataSource = new MatTableDataSource<Recipe>();
+
+  constructor(protected recipes: RecipeService) {
+    this.dataSource = new MatTableDataSource<Recipe>(recipes.getAll());
+  }
+
+  @ViewChild(MatPaginator)
+  paginator!: MatPaginator;
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
 }

src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }