Taobin-Recipe-Manager/client/src/app/features/toppings/toppings.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { ToppingService } from 'src/app/core/services/topping.service';
import { ToppingGroup, ToppingList } from 'src/app/core/models/recipe.model';
import { RecipeService } from 'src/app/core/services/recipe.service';
import {
  FormArray,
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { forEach } from 'lodash';
import { RecipeListComponent } from '../recipes/recipe-details/recipe-list/recipe-list.component';

@Component({
  selector: 'app-toppings',
  standalone: true,
  templateUrl: './toppings.component.html',
  imports: [
    CommonModule,
    NgSelectModule,
    FormsModule,
    ReactiveFormsModule,
    RecipeListComponent,
  ],
})
export class ToppingsComponent implements OnInit {
  onRecipeListFormChange($event: unknown[]) {
    console.log("recipe list form change",$event);
  }
  // topping group
  toppingGroupList: ToppingGroup[] = [];
  toppingLists: ToppingList[] = [];

  groupMembersMap: { [key: string]: { [key: string]: any } } = {
    '0': { members: [] },
  };

  // topping list keys
  toppingListKeys: string[] = [];

  // modals controller
  showToppingBuilder: boolean = false;

  // forms

  toppingGroupForm = this._formBuilder.group(
    {
      toppingGroup: this._formBuilder.array([]),
    },
    { updateOn: 'blur' }
  );
  productCode: string | undefined;
  addingNewRecipeList: boolean = false;

  // current data variables
  currentMembersData: { [key: string]: any }[] | undefined = undefined;
  currentMemberDataForm: FormGroup = this._formBuilder.group({
    currentMembersOfToppingGroup: this._formBuilder.array([]),
  });

  get toppingGroup(): FormArray {
    return this.toppingGroupForm.get('toppingGroup') as FormArray;
  }

  get currentMembersOfToppingGroup(): FormArray {
    return this.currentMemberDataForm.get('currentMembersOfToppingGroup') as FormArray;
  }

  // ----------------------------------------------------------------------------

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

  async ngOnInit(): Promise<void> {
    // initialize
    (
      await this._toppingService.getToppingGroups(
        await this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile()
      )
    ).subscribe((data) => {
      // sort by group id
      data.sort((a, b) => parseInt(a.groupID) - parseInt(b.groupID));

      this.toppingGroupList = data;
      this.mapMembers();
      console.log(
        'topping groups: ',
        this.toppingGroupList,
        'mapper:',
        this.groupMembersMap,
        'length',
        this.toppingGroupList.length
      );

      // do push to form
      data.forEach((tg) => {
        this.toppingGroup.push(
          this._formBuilder.group({
            Desc: tg.Desc,
            name: tg.name,
            otherName: tg.otherName,
            groupID: tg.groupID,
            idInGroup: tg.idInGroup,
            idDefault: tg.idDefault,
            inUse: tg.inUse,
          })
        );
      });

      console.log('create topping group form', this.toppingGroup);
    });

    (
      await this._toppingService.getToppingLists(
        await this._recipeService.getCurrentCountry(),
        this._recipeService.getCurrentFile()
      )
    ).subscribe((data) => {
      this.toppingLists = data;
      this.mapNameToMember();

      // push keys to list
      for (let tpl of this.toppingLists) {
        let currentKeys = Object.keys(tpl);
        // console.log(tpl);
        if (this.toppingListKeys.length == 0) {
          this.toppingListKeys = currentKeys;
        }

        if (currentKeys.length > this.toppingListKeys.length) {
          this.toppingListKeys = currentKeys;
        }
      }

      console.log(
        'topping lists: ',
        this.toppingLists,
        'keys: ',
        this.toppingListKeys
      );
    });
  }

  // -------------------------------------- Functions -------------------------------------------

  // mapping member to group
  mapMembers = () => {
    this.toppingGroupList.forEach((tpg) => {
      let spl_mem = tpg.idInGroup.split(',');
      this.groupMembersMap[tpg.groupID] = { members: spl_mem };
    });
  };

  // get members of group id
  getMemberByGroupId = (id: string) =>
    this.groupMembersMap[id]['members'] as string[];

  // match name to member
  mapNameToMember = () => {
    if (this.toppingLists.length > 0) {
      this.toppingGroupList.forEach((tpg) => {
        let members = this.groupMembersMap[tpg.groupID]['members'];
        members.forEach((member_id: string) => {
          // do get member data from topping list
          let member_data = this.toppingLists.find(
            (v) => v.id.toString() == member_id.toString()
          );
          // set data to group
          this.groupMembersMap[tpg.groupID][member_id] = member_data;
        });
      });
    }
  };

  // get member data from group
  getMemberData = (group: string, member_id: string) => {
    if (this.groupMembersMap[group][member_id] == undefined) {
      return { name: '' };
    }
    return this.groupMembersMap[group][member_id];
  };

  // check which list does not have name
  findUndefinedName = () =>
    this.toppingLists.filter((tl) => tl.name == '' || tl.name == undefined);

  // get with default value
  returnThisOrElse = (value: any, default_value: any) =>
    value == undefined || value == '' ? default_value : value;

  // get value from form by given key
  getAttrFromForm(index: number, key: string) {
    let x = this.toppingGroup.controls.at(index) as any;
    return x.value[key];
  }

  // diff and find matched
  comapareFunction = (a: any, b: any) =>
    a != undefined && b != undefined && a.toString() === b.toString();

  // onclick: set default of topping in the group
  setDefaultOfToppingGroup = (index: number, member: string) => {
    // get default of group in form
    let targetForm = this.toppingGroup.controls.at(index);
    console.log('get id default', targetForm);

    let targetDefault = targetForm?.get('idDefault');

    // if click on the same index, set 0
    if (targetDefault?.value == member) {
      member = '0';
    }

    targetDefault?.setValue(member);
  };

  // boolean checking if default is within the member of set group
  isDefaultInMember = (group: string, member: string) => {
    // get member from group
    // console.log('isDefaultInMember', group, member, this.getMemberByGroupId(group), this.getMemberByGroupId(group).includes(member.toString()));
    return this.getMemberByGroupId(group).includes(member.toString());
  };

  // topping list form structure
  createToppingListForm = (data: ToppingList) => {
    return this._formBuilder.group({
      ExtendID: data.ExtendID,
      OnTOP: data.OnTOP,
      MenuStatus: data.MenuStatus,
      cashPrice: data.cashPrice,
      disable: data.disable,
      disable_by_cup: data.disable_by_cup,
      disable_by_ice: data.disable_by_ice,
      EncoderCount: data.EncoderCount,
      id: data.id,
      isUse: data.isUse,
      isShow: data.isShow,
      StringParam: data.StringParam,
      name: data.name,
      nonCashPrice: data.nonCashPrice,
      otherName: data.otherName,
      productCode: data.productCode,
      recipes: data.recipes,
      total_time: data.total_time,
      total_weight: data.total_weight,
      useGram: data.useGram,
      weight_float: data.weight_float,
    })
  }




  // use when selected a group, show its member data
  showToppingList = (groupID: string) => {

    // check empty
    console.log("toppingList.empty", this.toppingLists, "groupMembersMap.empty", this.groupMembersMap);

    // do another mapping, just to make sure data is included
    this.mapNameToMember();

    if(this.currentMembersData != undefined){
      this.currentMembersData = undefined;
      this.currentMembersOfToppingGroup.clear();
    }


    let members = this.groupMembersMap[groupID]['members'];
    members.forEach((member_id: string) => {
      // get each member data from group
      let member_data = this.getMemberData(groupID, member_id);
      if(this.currentMembersData == undefined){
        this.currentMembersData = [];
      }
      this.currentMembersData!.push(member_data);
      this.currentMembersOfToppingGroup.push(this.createToppingListForm(member_data));
    });
    // this.isShowToppingList = true;

    // query selector
    let toppingListModal = document.getElementById('topping_list_modal') as any;
    toppingListModal?.showModal();

    console.log('current members data', this.currentMembersData);
    console.log("current members of topping group", this.currentMembersOfToppingGroup);
  }
}