update new form recipe detail

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

@@ -87,7 +87,7 @@ const routes: Routes = [
         canActivate: [authGuard],
       },
       {
-        path: 'recipe',
+        path: 'recipe/:productCode',
         loadComponent: () =>
           import(
             './features/dashboard/recipe-details/recipe-details.component'

client/src/app/core/interceptors/error.interceptor.ts

@@ -5,12 +5,14 @@ import {
   HttpEvent,
   HttpInterceptor,
   HttpErrorResponse,
+  HttpStatusCode,
 } from '@angular/common/http';
-import { Observable, catchError, retry, throwError } from 'rxjs';
+import { Observable, catchError, throwError } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
 export class ErrorInterceptor implements HttpInterceptor {
-  constructor() {}
+  constructor(private router: Router) {}
 
   intercept(
     request: HttpRequest<unknown>,
@@ -19,6 +21,13 @@ export class ErrorInterceptor implements HttpInterceptor {
     return next.handle(request).pipe(
       catchError((error) => {
         if (error instanceof HttpErrorResponse) {
+          if (error.status == HttpStatusCode.Unauthorized) {
+            this.router.navigate(['/login'], {
+              queryParams: {
+                redirectUrl: request.url,
+              },
+            });
+          }
         }
         return throwError(() => error);
       })

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

@@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import {
   BehaviorSubject,
   Observable,
-  concat,
   distinctUntilChanged,
   map,
   tap,

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

@@ -142,7 +142,27 @@
           {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
         </td>
         <td class="px-4 py-4 flex">
-          <recipe-modal productCode="{{ recipe.productCode }}"></recipe-modal>
+          <!-- <recipe-modal productCode="{{ recipe.productCode }}"></recipe-modal> -->
+          <a
+            routerLink="/recipe/{{ recipe.productCode }}"
+            class="btn btn-ghost"
+          >
+            <svg
+              class="w-6 h-6 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 20 20"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1"
+                d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
+              />
+            </svg>
+          </a>
         </td>
       </tr>
     </tbody>

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

@@ -8,11 +8,12 @@ import { environment } from 'src/environments/environment';
 import { RecipeModalComponent } from 'src/app/shared/modal/recipe-details/recipe-modal.component';
 import { BehaviorSubject } from 'rxjs';
 import * as lodash from 'lodash';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [NgIf, NgFor, DatePipe, RecipeModalComponent],
+  imports: [RouterLink, NgIf, NgFor, DatePipe, RecipeModalComponent],
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent implements OnInit {
@@ -84,6 +85,8 @@ export class DashboardComponent implements OnInit {
   }
 
   constructor(
+    private _route: ActivatedRoute,
+    private _router: Router,
     private _userService: UserService,
     private _recipeService: RecipeService
   ) {}

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

@@ -1,3 +1,339 @@
-<div>
-  <h1>recipe-details works!</h1>
+<div class="p-4">
+  <form class="grid grid-cols-3 gap-4 mb-4" [formGroup]="recipeDetail">
+    <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>
+        <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 p-3 items-center justify-center w-full">
+        <img
+          class="rounded-lg shadow"
+          src="/assets/{{ 'bn_hot_america_no' }}.png"
+        />
+      </div>
+    </div>
+
+    <div
+      class="block col-span-2 p-6 bg-white border border-gray-200 rounded-lg shadow"
+    >
+      <div
+        *ngIf="isLoaded; else indicator"
+        class="grid grid-cols-2 gap-4 w-full"
+      >
+        <div class="flex items-center">
+          <label class="label"
+            ><span class="label-text text-base mr-3 w-max">Name:</span></label
+          >
+          <input
+            type="text"
+            class="input input-sm input-bordered input-ghost w-full"
+            formControlName="name"
+          />
+        </div>
+        <div class="flex items-center">
+          <label class="text-base mr-3 w-max">Other Name:</label>
+          <input
+            type="text"
+            class="input input-sm input-bordered input-ghost w-full"
+            formControlName="otherName"
+          />
+        </div>
+        <div class="flex items-center">
+          <label class="text-base mr-3 w-max">Description:</label>
+          <input
+            type="text"
+            class="input input-sm input-bordered input-ghost w-full"
+            formControlName="description"
+          />
+        </div>
+        <div class="flex items-center">
+          <label class="text-base mr-3 w-max">Other Description:</label>
+          <input
+            type="text"
+            class="input input-sm input-bordered input-ghost w-full"
+            formControlName="otherDescription"
+          />
+        </div>
+        <div class="flex flex-row col-span-2 gap-5">
+          <div class="form-control">
+            <label class="cursor-pointer label">
+              <span class="label-text">Is Use?</span>
+              <input type="checkbox" class="toggle" formControlName="isUse" />
+            </label>
+          </div>
+          <div class="form-control">
+            <label class="cursor-pointer label">
+              <span class="label-text">Is Show?</span>
+              <input type="checkbox" class="toggle" formControlName="isShow" />
+            </label>
+          </div>
+          <div class="form-control">
+            <label class="cursor-pointer label">
+              <span class="label-text">Is Disable?</span>
+              <input type="checkbox" class="toggle" formControlName="disable" />
+            </label>
+          </div>
+        </div>
+      </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="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
+    >
+      <p class="text-2xl text-gray-400 dark:text-gray-500">
+        <svg
+          class="w-3.5 h-3.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 18"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 1v16M1 9h16"
+          />
+        </svg>
+      </p>
+    </div>
+    <div class="grid grid-cols-2 gap-4 mb-4">
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+    </div>
+    <div
+      class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
+    >
+      <p class="text-2xl text-gray-400 dark:text-gray-500">
+        <svg
+          class="w-3.5 h-3.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 18"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 1v16M1 9h16"
+          />
+        </svg>
+      </p>
+    </div>
+    <div class="grid grid-cols-2 gap-4">
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+      <div
+        class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
+      >
+        <p class="text-2xl text-gray-400 dark:text-gray-500">
+          <svg
+            class="w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </p>
+      </div>
+    </div>
+    <div
+      class="sticky bottom-0 col-span-3 flex justify-end bg-white rounded-full shadow-xl p-3"
+    >
+      <button
+        (click)="onPressConfirmClose()"
+        class="btn btn-error w-36 text-white mr-2"
+      >
+        Cancel
+      </button>
+      <button
+        (click)="onPressConfirmSave()"
+        class="btn btn-success w-36 text-white"
+      >
+        Save
+      </button>
+    </div>
+  </form>
+  <confirm-modal
+    [title]="confirmSave.title"
+    [message]="confirmSave.message"
+    [confirmCallBack]="confirmSave.confirmCallBack"
+    [show]="showConfirmSaveModal"
+  ></confirm-modal>
+
+  <confirm-modal
+    [title]="confirmClose.title"
+    [message]="confirmClose.message"
+    [confirmCallBack]="confirmClose.confirmCallBack"
+    [show]="showConfirmCloseModal"
+  ></confirm-modal>
 </div>

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

@@ -1,8 +1,131 @@
-import { Component } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+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';
+
+interface RecipeDetail {
+  productCode: string;
+  name: string;
+  otherName: string;
+  description: string;
+  otherDescription: string;
+  price: number;
+  isUse: boolean;
+  isShow: boolean;
+  disable: boolean;
+}
+
+interface RecipeMetaData {
+  productCode: string;
+  name: string;
+  otherName: string;
+  description: string;
+  otherDescription: string;
+  picture: string;
+}
 
 @Component({
   selector: 'app-recipe-details',
   templateUrl: './recipe-details.component.html',
   standalone: true,
+  imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal],
 })
-export class RecipeDetailsComponent {}
+export class RecipeDetailsComponent implements OnInit {
+  title: string = 'Recipe Detail';
+  recipeMetaData: RecipeMetaData | null = null;
+
+  originalRecipeDetail: RecipeDetail | null = null;
+
+  isLoaded: boolean = false;
+
+  constructor(
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _recipeService: RecipeService
+  ) {}
+
+  recipeDetail = new FormGroup({
+    productCode: new FormControl<string>(''),
+    name: new FormControl<string>(''),
+    otherName: new FormControl<string>(''),
+    description: new FormControl<string>(''),
+    otherDescription: new FormControl<string>(''),
+    price: new FormControl<number>(0),
+    isUse: new FormControl<boolean>(false),
+    isShow: new FormControl<boolean>(false),
+    disable: new FormControl<boolean>(false),
+  });
+
+  ngOnInit() {
+    this._recipeService
+      .getRecipesById(this._route.snapshot.params['productCode'])
+      .subscribe(({ recipe, recipeMetaData }) => {
+        this.title = recipe.name + ' | ' + recipe.productCode;
+        this.recipeDetail.patchValue({
+          productCode: recipe.productCode,
+          name: recipe.name,
+          otherName: recipe.otherName,
+          description: recipe.Description,
+          otherDescription: recipe.otherDescription,
+          price: recipe.cashPrice,
+          isUse: recipe.isUse,
+          isShow: recipe.isShow,
+          disable: recipe.disable,
+        });
+        this.originalRecipeDetail = {
+          productCode: recipe.productCode,
+          name: recipe.name,
+          otherName: recipe.otherName,
+          description: recipe.Description,
+          otherDescription: recipe.otherDescription,
+          price: recipe.cashPrice,
+          isUse: recipe.isUse,
+          isShow: recipe.isShow,
+          disable: recipe.disable,
+        };
+        this.recipeMetaData = recipeMetaData;
+        this.isLoaded = true;
+      });
+  }
+
+  showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+  showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  confirmSave = {
+    title: 'The changes detected!',
+    message: 'Do you want to save changes?',
+    confirmCallBack: () => {
+      console.log('confirm save');
+      this._router.navigate(['..']);
+    },
+  };
+
+  confirmClose = {
+    title: 'The changes will be lost!',
+    message: 'Do you want to close without saving?',
+    confirmCallBack: () => {
+      console.log('confirm close');
+      this._router.navigate(['..']);
+    },
+  };
+
+  onPressConfirmSave() {
+    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+      this.showConfirmSaveModal.emit(true);
+    } else {
+      this._router.navigate(['..']);
+    }
+  }
+
+  onPressConfirmClose() {
+    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+      this.showConfirmCloseModal.emit(true);
+    } else {
+      this._router.navigate(['..']);
+    }
+  }
+}