change dashboard -> recipe

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

@@ -3,32 +3,43 @@
     <div
       class="block col-span-1 p-6 bg-white border border-gray-200 rounded-lg shadow"
     >
-      <h5 class="mb-2 text-2xl font-bold text-gray-900">
-        กาแฟดำ(อเมริกาโน) | 12-03-0003
-      </h5>
-      <div class="flex items-center mb-2">
-        <div class="flex items-center mr-4">
-          <p class="text-sm text-gray-500">สูตร</p>
-          <p class="ml-2 text-sm text-gray-900">กาแฟดำ(อเมริกาโน)</p>
+      <div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
+        <h5 class="mb-2 text-xl font-bold text-gray-900">
+          {{ originalRecipeDetail?.name }} |
+          {{ originalRecipeDetail?.productCode }}
+        </h5>
+        <div class="flex items-center mb-2">
+          <div class="flex items-center mr-4">
+            <p class="text-sm text-gray-500">สูตร</p>
+            <p class="ml-2 text-sm text-gray-900">
+              {{ originalRecipeDetail?.name }}
+            </p>
+          </div>
+          <div class="flex items-center">
+            <p class="text-sm text-gray-500">ประเภท</p>
+            <p class="ml-2 text-sm text-gray-900">เครื่องดื่ม</p>
+          </div>
         </div>
-        <div class="flex items-center">
-          <p class="text-sm text-gray-500">ประเภท</p>
-          <p class="ml-2 text-sm text-gray-900">เครื่องดื่ม</p>
+        <div class="flex p-3 items-center justify-center w-full">
+          <img
+            class="rounded-lg shadow"
+            src="/assets/{{ 'bn_hot_america_no' }}.png"
+          />
         </div>
       </div>
-      <div class="flex p-3 items-center justify-center w-full">
-        <img
-          class="rounded-lg shadow"
-          src="/assets/{{ 'bn_hot_america_no' }}.png"
-        />
-      </div>
+      <ng-template #indicator>
+        <div class="flex w-full h-full justify-center items-center">
+          <span class="loading loading-spinner w-20"></span>
+        </div>
+      </ng-template>
     </div>
 
     <div
-      class="block col-span-2 p-6 bg-white border border-gray-200 rounded-lg shadow"
+      class="block col-span-2 p-6 bg-white border border-gray-200 rounded-lg shadow min-h-[300px]"
     >
       <div
         *ngIf="isLoaded; else indicator"
+        [@inOutAnimation]
         class="grid grid-cols-2 gap-4 w-full"
       >
         <div class="flex items-center">
@@ -318,6 +329,7 @@
       <button
         (click)="onPressConfirmSave()"
         class="btn btn-success w-36 text-white"
+        [disabled]="!isValueChanged"
       >
         Save
       </button>

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

@@ -6,6 +6,8 @@ import { isEqual } from 'lodash';
 import { delay } from 'rxjs';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 interface RecipeDetail {
   productCode: string;
@@ -33,6 +35,14 @@ interface RecipeMetaData {
   templateUrl: './recipe-details.component.html',
   standalone: true,
   imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal],
+  animations: [
+    trigger('inOutAnimation', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('1s ease-out', style({ opacity: 1 })),
+      ]),
+    ]),
+  ],
 })
 export class RecipeDetailsComponent implements OnInit {
   title: string = 'Recipe Detail';
@@ -100,7 +110,7 @@ export class RecipeDetailsComponent implements OnInit {
     message: 'Do you want to save changes?',
     confirmCallBack: () => {
       console.log('confirm save');
-      this._router.navigate(['..']);
+      this._router.navigate(['/recipes']);
     },
   };
 
@@ -109,23 +119,27 @@ export class RecipeDetailsComponent implements OnInit {
     message: 'Do you want to close without saving?',
     confirmCallBack: () => {
       console.log('confirm close');
-      this._router.navigate(['..']);
+      this._router.navigate(['/recipes']);
     },
   };
 
   onPressConfirmSave() {
-    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+    if (this.isValueChanged) {
       this.showConfirmSaveModal.emit(true);
     } else {
-      this._router.navigate(['..']);
+      this._router.navigate(['/recipes']);
     }
   }
 
   onPressConfirmClose() {
-    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+    if (this.isValueChanged) {
       this.showConfirmCloseModal.emit(true);
     } else {
-      this._router.navigate(['..']);
+      this._router.navigate(['/recipes']);
     }
   }
+
+  get isValueChanged() {
+    return !isEqual(this.recipeDetail.value, this.originalRecipeDetail);
+  }
 }

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

@@ -11,10 +11,10 @@ import * as lodash from 'lodash';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-dashboard',
+  selector: 'app-recipes',
   standalone: true,
   imports: [RouterLink, NgIf, NgFor, DatePipe, RecipeModalComponent],
-  templateUrl: './dashboard.component.html',
+  templateUrl: './recipes.component.html',
 })
 export class DashboardComponent implements OnInit {
   recipes: Recipe | null = null;