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

import { NgFor } from '@angular/common';
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { forEach, isEqual } from 'lodash';
import { Topping, ToppingGroup, ToppingSet } from 'src/app/core/models/recipe.model';
import { RecipeService } from 'src/app/core/services/recipe.service';
import { ToppingService } from 'src/app/core/services/topping.service';
import { NgSelectModule } from '@ng-select/ng-select';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-recipe-toppingset',
  templateUrl: './recipe-toppingset.component.html',
  standalone: true,
  imports: [ NgFor, FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule ],
})
export class RecipeToppingsetComponent implements OnInit {
  @Input() productCode!: string;
  @Output() toppingSetChange = new EventEmitter<unknown[]>();

  toppingSetList: ToppingSet[] = [];
  allToppings: Topping | undefined = undefined;

  allToppingsDefinitions: { groupId: string; name: string }[] | null = [];

  private _toppingSetOriginalArray!: ToppingSet[];

  constructor(
    private _recipeService: RecipeService,
    private _toppingService: ToppingService,
    private _formBuilder: FormBuilder,
  ) {}

    toppingForm = this._formBuilder.group(
      {
      toppingList: this._formBuilder.array([]),
      },
      { updateOn: 'blur' }
    );

  get toppingList(): FormArray {
    return this.toppingForm.get('toppingList') as FormArray;
  }

  ngOnInit(): void {
    this._toppingService
      .getToppingsOfRecipe(
        this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile(),
        this.productCode
      )
      .subscribe((data) => {
        console.log("getToppingset",data);
        this.toppingSetList = data;
        // this.toppingForm.patchValue({toppingList: data});
        this._toppingSetOriginalArray = data;


        data.forEach((toppingSet: ToppingSet) => {
          // console.log("getToppingset",toppingSet);

          // toppingSet.ListGroupID = toppingSet.ListGroupID.map((id) => id.toString());

          this.toppingList.push(
              this._formBuilder.group({
                isUse: toppingSet.isUse,
                groupID: toppingSet.groupID,
                defaultIDSelect: toppingSet.defaultIDSelect,
                ListGroupID: toppingSet.ListGroupID,
              })
            );
        })

        console.log("controls",this.toppingList.controls);

        // this.toppingSetChange.emit(this.toppingSetList);
      });


      // fetch all toppings : group and list
    this._toppingService
      .getToppings(
        this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile()
      )
      .subscribe((data) => {
        this.allToppings = data;
        console.log("allToppings",data);

        data.ToppingGroup.forEach((group: ToppingGroup) => {
          if(this.allToppingsDefinitions != null) {
            // this.allToppingsDefinitions = {};
            this.allToppingsDefinitions.push({ groupId: group.groupID, name: group.name });
          }
        })

        console.log(this.allToppingsDefinitions);
      });

      this.toppingForm.valueChanges.subscribe((value) => {

        // check if list group id is not list
        //transform
        for(let i = 0; i < value.toppingList!.length; i++) {
          let toppingSet = value.toppingList![i] as any;

          if(!Array.isArray(toppingSet.ListGroupID)) {
            toppingSet.ListGroupID = [
              parseInt(toppingSet.groupID),
              0,
              0,
              0
            ];
          }

        }
        let isDiff = !isEqual(this._toppingSetOriginalArray, value.toppingList!);

        if(isDiff) {

          let newToppingSetList: any[] = [];

          forEach(value.toppingList!, (toppingSet:any) => {
            toppingSet.defaultIDSelect = parseInt(toppingSet.defaultIDSelect);
            newToppingSetList.push(toppingSet);
          })

          console.log("newToppingList", newToppingSetList);
          this.toppingSetChange.emit(newToppingSetList as unknown[] );

        } else {

          console.log("newToppingListNoChange", value.toppingList);
          this.toppingSetChange.emit([]);
        }


      })
  }

  // match group id to its name
  getGroupName(groupID: string) {

    // check if array
    if(Array.isArray(this.allToppings!.ToppingGroup)) {
      return (this.allToppings!.ToppingGroup as ToppingGroup[]).find((group) => group.groupID == groupID)?.name;
    } else {
      return undefined;
    }
  }

  openToppingList(i: any){
    console.log("select", i)
  }

  currentGroupId(i: any){
    console.log("currentGroupId", i);
    return (this.toppingForm.value.toppingList![i] as any).groupID as string;
  }


  compareFunc = (a: any,b: any) => a.toString() === b.toString();
}