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 {
  FormArray,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { isEqual } from 'lodash';
import { BehaviorSubject, Subject, finalize, map } from 'rxjs';
import { RecipeService } from 'src/app/core/services/recipe.service';
import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
import { animate, style, transition, trigger } from '@angular/animations';
import { MaterialService } from 'src/app/core/services/material.service';
import { RecipeMetaData, RecipeDetail } from 'src/app/shared/types/recipe';
import {
  RecipeListComponent,
  RecipeListDataFormGroup,
} from './recipe-list/recipe-list.component';
import { MatRecipe } from 'src/app/core/models/recipe.model';

@Component({
  selector: 'app-recipe-details',
  templateUrl: './recipe-details.component.html',
  standalone: true,
  imports: [
    NgIf,
    NgFor,
    RouterLink,
    ReactiveFormsModule,
    ConfirmModal,
    DatePipe,
    RecipeListComponent,
  ],
  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: BehaviorSubject<RecipeDetail | null> =
    new BehaviorSubject<RecipeDetail | null>(null);

  matForRecipeList = this.originalRecipeDetail.pipe(
    map((x) => x?.recipe.recipes)
  );

  isLoaded: boolean = false;
  isMatLoaded: 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>(''),
    lastModified: new FormControl<Date>(new Date()),
    price: new FormControl<number>(0),
    isUse: new FormControl<boolean>(false),
    isShow: new FormControl<boolean>(false),
    disable: new FormControl<boolean>(false),
  });

  materialListIds$: Subject<{
    ids: number[];
    matRecipeList: MatRecipe[];
  }> = new Subject<{
    ids: number[];
    matRecipeList: MatRecipe[];
  }>();

  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,
          lastModified: recipe.LastChange,
          price: recipe.cashPrice,
          isUse: recipe.isUse,
          isShow: recipe.isShow,
          disable: recipe.disable,
        });
        this.originalRecipeDetail.next({
          recipe: {
            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,
        });

        const ids = recipe.recipes?.map((recipe) => recipe.materialPathId);
        this.materialListIds$.next({
          ids: ids || [],
          matRecipeList: recipe.recipes || [],
        });

        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');
      // TODO: update value in targeted recipe
      this._recipeService.editChanges(
        this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile(),
        {
          ...this.recipeDetail,
        }
      );
      console.log('Sending changes');
      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.getValue()?.recipe
    );
  }
}