diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 995efb2..deb2834 100644 --- a/client/src/app/app-routing.module.ts +++ b/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' diff --git a/client/src/app/core/interceptors/error.interceptor.ts b/client/src/app/core/interceptors/error.interceptor.ts index 028541d..a7debf1 100644 --- a/client/src/app/core/interceptors/error.interceptor.ts +++ b/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, @@ -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); }) diff --git a/client/src/app/core/services/user.service.ts b/client/src/app/core/services/user.service.ts index 3060e86..7479c32 100644 --- a/client/src/app/core/services/user.service.ts +++ b/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, diff --git a/client/src/app/features/dashboard/dashboard.component.html b/client/src/app/features/dashboard/dashboard.component.html index 5b7e24c..5318882 100644 --- a/client/src/app/features/dashboard/dashboard.component.html +++ b/client/src/app/features/dashboard/dashboard.component.html @@ -142,7 +142,27 @@ {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }} - + + + + diff --git a/client/src/app/features/dashboard/dashboard.component.ts b/client/src/app/features/dashboard/dashboard.component.ts index 59ff68c..11d9345 100644 --- a/client/src/app/features/dashboard/dashboard.component.ts +++ b/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 ) {} diff --git a/client/src/app/features/dashboard/recipe-details/recipe-details.component.html b/client/src/app/features/dashboard/recipe-details/recipe-details.component.html index 86baea8..fe2146f 100644 --- a/client/src/app/features/dashboard/recipe-details/recipe-details.component.html +++ b/client/src/app/features/dashboard/recipe-details/recipe-details.component.html @@ -1,3 +1,339 @@ -
-

recipe-details works!

+
+
+
+
+ กาแฟดำ(อเมริกาโน) | 12-03-0003 +
+
+
+

สูตร

+

กาแฟดำ(อเมริกาโน)

+
+
+

ประเภท

+

เครื่องดื่ม

+
+
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+ +
+
+

+ +

+
+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+
+

+ +

+
+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+
+ + +
+
+ + +
diff --git a/client/src/app/features/dashboard/recipe-details/recipe-details.component.ts b/client/src/app/features/dashboard/recipe-details/recipe-details.component.ts index 4b68446..787e634 100644 --- a/client/src/app/features/dashboard/recipe-details/recipe-details.component.ts +++ b/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(''), + name: new FormControl(''), + otherName: new FormControl(''), + description: new FormControl(''), + otherDescription: new FormControl(''), + price: new FormControl(0), + isUse: new FormControl(false), + isShow: new FormControl(false), + disable: new FormControl(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 = new EventEmitter(); + showConfirmCloseModal: EventEmitter = new EventEmitter(); + + 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(['..']); + } + } +} diff --git a/client/src/assets/bn_hot_america_no.png b/client/src/assets/bn_hot_america_no.png new file mode 100644 index 0000000..36705c6 Binary files /dev/null and b/client/src/assets/bn_hot_america_no.png differ