update image path & add user

client/src/app/core/services/material.service.ts

@@ -42,6 +42,7 @@ export class MaterialService {
   ): Promise<Observable<{
     "materialId": number,
     "name": string,
+    "nameEN": string,
     "type": string
   }[] | null>>{
     console.log("getFullMaterialDetail", country, "where filename = ",filename, "department.short = ", this.department!);
@@ -59,6 +60,7 @@ export class MaterialService {
     return this._httpClient.get<{
       "materialId": number,
       "name": string,
+      "nameEN": string,
       "type": string
     }[]>(`${environment.api}/materials/full/${country}/${filename}`, {
       withCredentials: true,

client/src/app/features/recipes/recipe-details/recipe-details.component.html

@@ -42,7 +42,9 @@
             <div class="flex p-3 items-center justify-center w-full">
               <img
                 class="rounded-lg shadow"
-                src="/assets/{{ 'bn_hot_america_no' }}.png"
+                src="{{imagePath(this.productCode)}}"
+                alt="/assets/{{ 'bn_hot_america_no' }}.png"
+                onerror="this.onerror=null;this.src='/assets/bn_hot_america_no.png'"
               />
             </div>
           </div>
@@ -110,10 +112,12 @@
               <input class="input input-sm input-bordered input-ghost w-full text-center" type="text" name="price" value="{{recipePrice()}}">
             </div>
 
-            <div *ngIf="hasSubmenu()">
+            <div class="flex flex-col p-4 items-center m-4 bg-stone-200 rounded-md w-1/2 space-y-2 tooltip" *ngIf="hasSubmenu()" data-tip="Menus related to this recipe">
+
+              <p class="text-md font-semibold">Related Menu</p>
               <div *ngFor="let sub of listSubMenuProductcodes()">
                 <a
-                  class="btn btn-sm btn-primary m-2"
+                  class="bg-slate-300 p-2 rounded-md text-md font-medium"
                   href="/{{department}}/recipe/{{ sub }}"
                 >
                   {{ sub }}

client/src/app/features/recipes/recipe-details/recipe-details.component.ts

@@ -21,6 +21,7 @@ import { ToppingService } from 'src/app/core/services/topping.service';
 
 import { copy, transformToTSV } from 'src/app/shared/helpers/copy';
 import { isEqual } from 'lodash';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-recipe-details',
@@ -346,4 +347,18 @@ export class RecipeDetailsComponent implements OnInit {
     Object.keys(this.rawRecipe as any).includes('cashPrice')
       ? (this.rawRecipe as any).cashPrice
       : 0;
+
+  // image path
+  imagePath = (productCode: string) => {
+    const filename = this._recipeService.getCurrentFile();
+
+    return environment.api +
+      '/recipes/' +
+      this.department +
+      '/' +
+      filename +
+      '/' +
+      productCode +
+      '/image';
+  };
 }