change dashboard -> recipe

client/src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule, inject } from '@angular/core';
 import {
-  ActivatedRoute,
   ActivatedRouteSnapshot,
   CanActivateFn,
   Router,
@@ -9,7 +8,7 @@ import {
   Routes,
 } from '@angular/router';
 import { UserService } from './core/services/user.service';
-import { lastValueFrom, map } from 'rxjs';
+import { map } from 'rxjs';
 
 const authGuard: CanActivateFn = (
   route: ActivatedRouteSnapshot,
@@ -47,7 +46,7 @@ const loginGuard: CanActivateFn = (
       // redirect to redirectUrl query param
       console.log(route.queryParams['redirectUrl']);
       return router.createUrlTree([
-        router.parseUrl(route.queryParams['redirectUrl'] ?? '/dashboard'),
+        router.parseUrl(route.queryParams['redirectUrl'] ?? '/recipes'),
       ]);
       // return false;
     })
@@ -76,12 +75,12 @@ const routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'dashboard',
+        redirectTo: 'recipes',
       },
       {
-        path: 'dashboard',
+        path: 'recipes',
         loadComponent: () =>
-          import('./features/dashboard/dashboard.component').then(
+          import('./features/recipes/recipes.component').then(
             (m) => m.DashboardComponent
           ),
         canActivate: [authGuard],
@@ -90,7 +89,7 @@ const routes: Routes = [
         path: 'recipe/:productCode',
         loadComponent: () =>
           import(
-            './features/dashboard/recipe-details/recipe-details.component'
+            './features/recipes/recipe-details/recipe-details.component'
           ).then((m) => m.RecipeDetailsComponent),
         canActivate: [authGuard],
       },
@@ -103,7 +102,7 @@ const routes: Routes = [
       },
       {
         path: '**',
-        redirectTo: 'dashboard',
+        redirectTo: 'recipes',
       },
     ],
   },

client/src/app/app.module.ts

@@ -5,10 +5,16 @@ import { AppRoutingModule } from './app-routing.module';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { ErrorInterceptor } from './core/interceptors/error.interceptor';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+  ],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

client/src/app/core/layout/layout.component.html

@@ -23,7 +23,7 @@
             ></path>
           </svg>
         </button>
-        <a routerLink="/dashboard" class="flex ml-14 max-sm:hidden">
+        <a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
           <img
             src="assets/logo.svg"
             class="h-10 md:h-20 px-4"
@@ -82,7 +82,7 @@
                 <ul class="py-1" role="none">
                   <li>
                     <a
-                      routerLink="/dashboard"
+                      routerLink="/recipes"
                       class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                       role="menuitem"
                     >
@@ -136,7 +136,7 @@
             *ngIf="menu.icon_url"
             class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
             src="{{ menu.icon_url }}"
-            alt="dashboard icon"
+            alt="recipes icon"
           />
           <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
         </a>

client/src/app/core/layout/layout.component.ts

@@ -21,9 +21,9 @@ interface MenuItem {
 export class LayoutComponent implements OnInit, OnDestroy {
   menuItems: MenuItem[] = [
     {
-      name: 'Dashboard',
-      icon_url: 'assets/icons/dashboard.svg',
-      link: '/dashboard',
+      name: 'Recipe',
+      icon_url: 'assets/icons/recipes.svg',
+      link: '/recipes',
     },
     {
       name: 'Log',

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;