change dashboard -> recipe

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

@@ -0,0 +1,145 @@
+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';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+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],
+  animations: [
+    trigger('inOutAnimation', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('1s ease-out', style({ opacity: 1 })),
+      ]),
+    ]),
+  ],
+})
+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(['/recipes']);
+    },
+  };
+
+  confirmClose = {
+    title: 'The changes will be lost!',
+    message: 'Do you want to close without saving?',
+    confirmCallBack: () => {
+      console.log('confirm close');
+      this._router.navigate(['/recipes']);
+    },
+  };
+
+  onPressConfirmSave() {
+    if (this.isValueChanged) {
+      this.showConfirmSaveModal.emit(true);
+    } else {
+      this._router.navigate(['/recipes']);
+    }
+  }
+
+  onPressConfirmClose() {
+    if (this.isValueChanged) {
+      this.showConfirmCloseModal.emit(true);
+    } else {
+      this._router.navigate(['/recipes']);
+    }
+  }
+
+  get isValueChanged() {
+    return !isEqual(this.recipeDetail.value, this.originalRecipeDetail);
+  }
+}