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,
  ToppingList,
  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[]>();

  allToppings: Topping | undefined = undefined;

  allToppingsDefinitions:
    | { groupId: string; name: string; members: string; default: string }[]
    | null = [{ groupId: '0', name: 'none', members: '0', default: '0' }];

  allToppingMembersByGroup: {
    id: string;
    members: { id: string; name: string }[];
  }[] = [];

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

  async ngOnInit(): Promise<void> {
    this._toppingService
      .getToppingsOfRecipe(
        await this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile(),
        this.productCode
      )
      .subscribe((data) => {
        // this.toppingForm.patchValue({toppingList: data});
        this._toppingSetOriginalArray = data;

        data.forEach((toppingSet: ToppingSet) => {
          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(
        await 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,
              members: group.idInGroup,
              default: group.idDefault,
            });

            this.allToppingMembersByGroup.push({
              id: group.groupID,
              members: this.mapToppingListToMember(group.idInGroup.split(',')),
            });
          }
        });

        // console.log(this.allToppingsDefinitions);
        // console.log('allToppingMembersByGroup', this.allToppingMembersByGroup);
      });

    this.toppingForm.valueChanges.subscribe((value) => {
      //validator
      for (let i = 0; i < value.toppingList!.length; i++) {
        let toppingSet = value.toppingList![i] as any;

        // handle null case
        if (toppingSet.defaultIDSelect == null) {
          toppingSet.defaultIDSelect = 0;
        }

        // handle null case
        if (toppingSet.groupID == null) {
          toppingSet.groupID = '0';
        }

        // handle null case
        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) => {
          // transform value
          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;
  }

  getMembersByGroupId(groupID: string) {
    return this.allToppingMembersByGroup.find((x) => x.id == groupID)?.members;
  }

  getGroupIdByIndex(i: number) {
    // console.log("getGroupId",this.toppingList.value![i])
    return (this.toppingList.value![i] as any).groupID as string;
  }

  mapToppingListToMember = (mm: string[]) =>
    mm.map((m) => {
      // find actual topping from toppingList
      let actualTopping = this.allToppings!.ToppingList.find((t) => t.id == m);

      return {
        id: actualTopping!.id,
        name: actualTopping?.name == null ? m : actualTopping!.name,
      };
    });

  getDefaultOfGroup(groupID: any) {
    this.toppingList.controls.forEach((control) => {
      if ((control.value as any).groupID == groupID) {
        let newDefault = this.allToppingsDefinitions!.find(
          (x) => x.groupId == groupID
        )!.default;
        // set new defaultid
        control.get('defaultIDSelect')?.setValue(newDefault);
      }
    });
  }

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