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

import { CommonModule, DatePipe } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { Observable, first } 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 { RecipeListComponent } from './recipe-list/recipe-list.component';
import {
  RecipeDetail,
  RecipeDetailMat,
} from 'src/app/core/models/recipe.model';
import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
import { isEqual } from 'lodash';

@Component({
  selector: 'app-recipe-details',
  templateUrl: './recipe-details.component.html',
  standalone: true,
  imports: [
    CommonModule,
    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';

  recipeDetail$!: Observable<RecipeDetail>;

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

  actionRecord: ActionRecord<RecipeDetail | RecipeDetailMat> =
    new ActionRecord();

  recipeOriginalDetail!: typeof this.recipeDetailForm.value;

  constructor(
    private _formBuilder: FormBuilder,
    private _route: ActivatedRoute,
    private _router: Router,
    private _recipeService: RecipeService
  ) {}

  productCode!: string;

  recipeDetailForm = this._formBuilder.group({
    productCode: '',
    name: '',
    otherName: '',
    description: '',
    otherDescription: '',
    lastModified: new Date(),
    price: 0,
    isUse: false,
    isShow: false,
    disable: false,
  });

  ngOnInit() {
    this.productCode = this._route.snapshot.params['productCode'];

    this.recipeDetail$ = this._recipeService
      .getRecipeDetail(this.productCode)
      .pipe(first());
    this.recipeDetail$.subscribe((detail) => {
      this.recipeDetailForm.patchValue(detail);
      this.isLoaded = true;
      this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
    });

    this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);

    // snap recipe detail form value

    this.actionRecord.registerOnAddAction((currAction, allAction) => {
      if (currAction.type === 'recipeListData') {
        switch (currAction.action) {
          case 'add':
            break;
          case 'delete':
            break;
        }
      }
      console.log('Action Record', allAction);
    });
  }

  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']);
    }
  }

  isValueChanged: boolean = false;

  onRecipeDetailFormChange(recipeDetail: typeof this.recipeDetailForm.value) {
    console.log('Recipe Detail Form Changed', recipeDetail);
  }

  onRecipeListFormChange(isValueChanged: boolean) {
    console.log('Recipe List Form Changed', isValueChanged);
    this.isValueChanged ||= isValueChanged;
  }
}