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

import { DatePipe, NgFor, 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, finalize } 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';
import { MatRecipe } from 'src/app/core/models/recipe.model';
import { MaterialService } from 'src/app/core/services/material.service';

interface RecipeDetail {
  lastModified: Date;
  productCode: string;
  name: string;
  otherName: string;
  description: string;
  otherDescription: string;
  price: number;
  isUse: boolean;
  isShow: boolean;
  disable: boolean;
  recipes: MatRecipe[];
  matData?: MaterialData[];
}

interface MaterialData {
  id: number;
  name: string;
  enable: 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,
    NgFor,
    RouterLink,
    ReactiveFormsModule,
    ConfirmModal,
    DatePipe,
  ],
  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;

  isLoaded: boolean = false;
  isMatLoaded: boolean = false;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _recipeService: RecipeService,
    private _materialService: MaterialService
  ) {}

  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'])
      .pipe(finalize(() => {}))
      .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 = {
          lastModified: recipe.LastChange,
          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,
          recipes: recipe.recipes,
        };
        this.recipeMetaData = recipeMetaData;
        this.isLoaded = true;

        const ids = this.originalRecipeDetail.recipes.map(
          (recipe) => recipe.materialPathId
        );

        this._materialService.getMaterialCodes(ids).subscribe((data) => {
          this.originalRecipeDetail.matData = data
            .map((item) => {
              return {
                id: item.materialID,
                name: item.PackageDescription,
                enable: false,
              };
            })
            .sort((a, b) => (a.id > b.id ? -1 : -1));
          this.isMatLoaded = 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);
  }
}