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

@Component({
  selector: 'app-toppings',
  standalone: true,
  imports: [CommonModule, NgSelectModule,FormsModule, ReactiveFormsModule],
  templateUrl: './toppings.component.html',
})
export class ToppingsComponent implements OnInit {
  // topping group
  toppingGroupList: ToppingGroup[] = [];
  toppingLists: ToppingList[] = [];

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

  // forms

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

  get toppingGroup(): FormArray {
    return this.toppingGroupForm.get('toppingGroup') 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.groupMemebersMap,
        '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();

      console.log(
        'get topping list',
        this.toppingLists,
        'mapper:',
        this.groupMemebersMap
      );

      console.log('undefined name of topping list', this.findUndefinedName());
    });
  }

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

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

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

  // match name to member
  mapNameToMember = () => {
    if (this.toppingLists.length > 0) {
      this.toppingGroupList.forEach((tpg) => {
        let members = this.groupMemebersMap[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.groupMemebersMap[tpg.groupID][member_id] = member_data;
        });
      });
    }
  };

  // get member data from group
  getMemberData = (group: string, member_id: string) => {
    if (this.groupMemebersMap[group][member_id] == undefined) {
      return {};
    }
    return this.groupMemebersMap[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());
}