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();
// }