update recipe model

client/src/app/features/dashboard/dashboard.component.html

@@ -5,7 +5,22 @@
   >
     <caption
       class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
-    ></caption>
+    >
+      <div class="flex flex-row">
+        <div class="flex flex-col">
+          <span
+            >Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
+            {{"{{File name}}"}}</span
+          >
+        </div>
+        <div class="flex flex-col ml-auto">
+          <span class=""
+            >Last Updated:
+            {{ recipes?.Timestamp | date : "dd-MMM-yyyy hh:mm:ss" }}</span
+          >
+        </div>
+      </div>
+    </caption>
     <thead class="text-xs sticky top-0 text-gray-700 uppercase bg-secondary">
       <tr>
         <th scope="col" class="px-6 py-3" *ngFor="let head of tableHeads">
@@ -48,19 +63,31 @@
     </thead>
     <tbody>
       <tr
-        *ngFor="let recipe of recipes"
+        *ngFor="let recipe of recipes!.Recipe01"
         class="bg-white la border-b hover:bg-secondary"
       >
         <th
           scope="row"
-          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
         >
           {{ recipe.name }}
         </th>
         <td class="px-6 py-4">{{ recipe.otherName }}</td>
-        <td class="px-6 py-4">{{ recipe.Description }}</td>
-        <td class="px-6 py-4">{{ recipe.LastChange }}</td>
+        <td class="px-6 py-4 flex-wrap max-w-xs">{{ recipe.Description }}</td>
         <td class="px-6 py-4">
+          {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
+        </td>
+        <td class="px-6 py-4 flex gap-2">
+          <a
+            href="#"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            >Edit</a
+          >
+          <a
+            href="#"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            >Edit</a
+          >
           <a
             href="#"
             class="font-medium text-blue-600 dark:text-blue-500 hover:underline"

client/src/app/features/dashboard/dashboard.component.ts

@@ -2,27 +2,28 @@ import { Component, OnInit } from '@angular/core';
 import { UserService } from 'src/app/core/services/user.service';
 import { HttpClient } from '@angular/common/http';
 import { User } from 'src/app/core/models/user.model';
-import { NgFor, NgIf } from '@angular/common';
+import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { initFlowbite } from 'flowbite';
 import { environment } from 'src/environments/environment';
 import { delay } from 'rxjs';
 import { Recipe } from 'src/app/core/models/recipe.model';
+import { RecipeService } from 'src/app/core/services/recipe.service';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [NgIf, NgFor],
+  imports: [NgIf, NgFor, DatePipe],
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent implements OnInit {
   userInfo: User | null = null;
-  recipes: Recipe[] | null = null;
+  recipes: Recipe | null = null;
   tableHeads: string[] = ['Name', 'Other Name', 'Description', 'Last Updated'];
   isLoaded: boolean = false;
 
   constructor(
     private _userService: UserService,
-    private _httpClient: HttpClient
+    private _recipeService: RecipeService
   ) {}
 
   ngOnInit(): void {
@@ -32,14 +33,10 @@ export class DashboardComponent implements OnInit {
       this.userInfo = user;
     });
 
-    this._httpClient
-      .get<{ Recipe01: Recipe[] }>(environment.api + '/recipes', {
-        withCredentials: true,
-      })
-      .subscribe(({ Recipe01 }) => {
-        this.recipes = Recipe01.slice(0, 10);
-        console.log(this.recipes);
-        this.isLoaded = true;
-      });
+    this._recipeService.getRecipes().subscribe((recipes) => {
+      this.recipes = recipes;
+      this.isLoaded = true;
+      console.log(this.recipes);
+    });
   }
 }