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, 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 { RecipeListComponent } from './recipe-list/recipe-list.component';
import {
  RecipeDetail,
  RecipeDetailMat,
} from 'src/app/core/models/recipe.model';
import { ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
import { UserService } from 'src/app/core/services/user.service';

@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;

  commit_msg :string = "";

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

  productCode!: string;

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

  repl = []

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

    this.recipeDetail$ = this._recipeService
      .getRecipeDetail(this.productCode)
      .pipe(first());
    this.recipeDetail$.subscribe((detail) => {

      console.log('Recipe Detail', 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');

      // get username
      let username:string = ""
      this._userService.currentUser.pipe(map((user) => {
        if (user)
          username = user.name;

        let to_send = {
          edit_by: username,
          commit_msg: this.commit_msg,
          productCode: this.productCode,
          name: this.recipeDetailForm.getRawValue().name,
          otherName: this.recipeDetailForm.getRawValue().otherName,
          Description: this.recipeDetailForm.getRawValue().Description,
          otherDescription: this.recipeDetailForm.getRawValue().otherDescription,
          LastChange: this.recipeDetailForm.getRawValue().lastModified,
          price: this.recipeDetailForm.getRawValue().price,
          // isUse: this,
          // isShow: null,
          // disable: null,
          recipes: [
            ...this.repl
          ],
        }


        // TODO: update value in targeted recipe
        this._recipeService.editChanges(
          this._recipeService.getCurrentCountry(),
          this._recipeService.getCurrentFile(),
          {
            ...to_send,
          }
        );
        console.log('Sending changes');
        void this._router.navigate(['/recipes']);
      }))



    },
  };

  onKeyUpCommitMsg(e: any){
    this.commit_msg = e.target.value;
  }

  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(repl: unknown[]) {
    console.log('Recipe List Form Changed', repl);
    this.repl = repl as never[];
    this.isValueChanged ||= repl != undefined;
  }
}