From f9d833e3b7c9196ff971a2790834cfef26b6d9d8 Mon Sep 17 00:00:00 2001 From: "pakintada@gmail.com" Date: Fri, 5 Jan 2024 15:09:52 +0700 Subject: [PATCH] add selectable topping defaultId --- .../recipe-details.component.ts | 5 +- .../recipe-toppingset.component.html | 43 ++-- .../recipe-toppingset.component.ts | 192 +++++++++++------- 3 files changed, 156 insertions(+), 84 deletions(-) diff --git a/client/src/app/features/recipes/recipe-details/recipe-details.component.ts b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts index fadfa63..f55645c 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-details.component.ts +++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts @@ -159,6 +159,9 @@ export class RecipeDetailsComponent implements OnInit { recipes: [ ...(this.repl.length <= 0 ? [] : this.repl) ], + ToppingSet: [ + ...(this.tpl.length <= 0 ? [] : this.tpl) + ] } @@ -221,7 +224,7 @@ export class RecipeDetailsComponent implements OnInit { } onToppingListChange(tpl: unknown[]) { - // console.log('Topping List Form Changed', tpl); + console.log('Topping List Form Changed', tpl); this.tpl = tpl as never[]; this.isValueChanged ||= tpl != undefined; diff --git a/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html b/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html index f0f4004..026b7ac 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html +++ b/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html @@ -1,5 +1,4 @@ - @@ -13,22 +12,40 @@ formArrayName="toppingList" *ngFor="let topping of toppingList.controls; let i = index" > - - - + + + + {{ item.name }} ({{ item.groupId }}) + + + + - - + -
Slot (Material Id)
{{i+1}} ({{8110+i+1}})
{{ i + 1 }} ({{ 8110 + i + 1 }}) - - {{ item.name }} - + - - - + + {{ item.name }} ({{ item.id }}) + +
diff --git a/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts b/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts index 5f51596..104c548 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts +++ b/client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts @@ -1,8 +1,18 @@ import { NgFor } from '@angular/common'; import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; -import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; +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 { + 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'; @@ -12,7 +22,13 @@ import { CommonModule } from '@angular/common'; selector: 'app-recipe-toppingset', templateUrl: './recipe-toppingset.component.html', standalone: true, - imports: [ NgFor, FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule ], + imports: [ + NgFor, + FormsModule, + ReactiveFormsModule, + CommonModule, + NgSelectModule, + ], }) export class RecipeToppingsetComponent implements OnInit { @Input() productCode!: string; @@ -21,22 +37,26 @@ export class RecipeToppingsetComponent implements OnInit { toppingSetList: ToppingSet[] = []; allToppings: Topping | undefined = undefined; - allToppingsDefinitions: { groupId: string; name: string }[] | null = []; + 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, + private _formBuilder: FormBuilder ) {} - toppingForm = this._formBuilder.group( - { + toppingForm = this._formBuilder.group( + { toppingList: this._formBuilder.array([]), - }, - { updateOn: 'blur' } - ); + }, + { updateOn: 'blur' } + ); get toppingList(): FormArray { return this.toppingForm.get('toppingList') as FormArray; @@ -50,34 +70,32 @@ export class RecipeToppingsetComponent implements OnInit { this.productCode ) .subscribe((data) => { - console.log("getToppingset",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, - }) - ); - }) + this._formBuilder.group({ + isUse: toppingSet.isUse, + groupID: toppingSet.groupID, + defaultIDSelect: toppingSet.defaultIDSelect, + ListGroupID: toppingSet.ListGroupID, + }) + ); + }); - console.log("controls",this.toppingList.controls); + console.log('controls', this.toppingList.controls); // this.toppingSetChange.emit(this.toppingSetList); }); - - // fetch all toppings : group and list + // fetch all toppings : group and list this._toppingService .getToppings( this._recipeService.getCurrentCountry(), @@ -85,79 +103,113 @@ export class RecipeToppingsetComponent implements OnInit { ) .subscribe((data) => { this.allToppings = data; - console.log("allToppings",data); + console.log('allToppings', data); data.ToppingGroup.forEach((group: ToppingGroup) => { - if(this.allToppingsDefinitions != null) { + if (this.allToppingsDefinitions != null) { // this.allToppingsDefinitions = {}; - this.allToppingsDefinitions.push({ groupId: group.groupID, name: group.name }); + 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) => { + this.toppingForm.valueChanges.subscribe((value) => { + //validator + for (let i = 0; i < value.toppingList!.length; i++) { + let toppingSet = value.toppingList![i] as any; - // 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([]); + // 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; + 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) + openToppingList(i: any) { + console.log('select', i); } - currentGroupId(i: any){ - console.log("currentGroupId", 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; + } - compareFunc = (a: any,b: any) => a.toString() === b.toString(); + getGroupIdByIndex(i: number) { + return (this.toppingForm.value.toppingList![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, + }; + }); + + + compareFunc = (a: any, b: any) => a.toString() === b.toString(); }