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,
  Topping,
} from 'src/app/core/models/recipe.model';
import { ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
import { UserService } from 'src/app/core/services/user.service';
import { UserPermissions } from 'src/app/core/auth/userPermissions';
import { ToppingService } from 'src/app/core/services/topping.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 = "";

  //
  department: string = this._route.parent!.snapshot.params['department'];

  constructor(
    private _formBuilder: FormBuilder,
    private _route: ActivatedRoute,
    private _router: Router,
    private _recipeService: RecipeService,
    private _toppingService: ToppingService,
    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 = []

  topping: Topping | null = null;

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


    this._toppingService.getToppings(this.department, this._recipeService.getCurrentFile()).subscribe((data) => {
      this.topping = data;
    })

    // 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 = ""

      username = this._userService.getCurrentUser()!.name;


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


      // TODO: update value in targeted recipe
      console.log('to_send', to_send);
      this._recipeService.editChanges(
        this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile(),
        {
          ...to_send,
        }
      );
      console.log('Sending changes');
      void this._router.navigate(['/'+this.department+'/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(['/'+this.department+'/recipes']);
    },
  };

  onPressConfirmSave() {
    if (this.isValueChanged) {
      this.showConfirmSaveModal.emit(true);
    } else {
      this._router.navigate(['/'+this.department+'/recipes']);
    }
  }

  onPressConfirmClose() {
    if (this.isValueChanged) {
      this.showConfirmCloseModal.emit(true);
    } else {
      this._router.navigate(['/'+this.department+'/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;
  }

  isEditable(){
    return this._userService.getCurrentUser()!.permissions.includes(UserPermissions.EDITOR);
  }
}