pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add selectable topping defaultId

Browse source
This commit is contained in:
pakintada@gmail.com 2024-01-05 15:09:52 +07:00
parent 3b4dec5e61
commit f9d833e3b7
3 changed files with 156 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

5
client/src/app/features/recipes/recipe-details/recipe-details.component.ts
View file

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

43
client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html
View file

@ -1,5 +1,4 @@
<table class="table" [formGroup]="toppingForm">
<thead>
<tr>
<th>Slot (Material Id)</th>
@ -13,22 +12,40 @@
formArrayName="toppingList"
*ngFor="let topping of toppingList.controls; let i = index"
>
<tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
<td class="px-6 py-4"> {{i+1}} ({{8110+i+1}}) </td>
<td class="px-6 py-4"> <input type="checkbox" class="toggle" formControlName="isUse" /> </td>
<tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
<td class="px-6 py-4">{{ i + 1 }} ({{ 8110 + i + 1 }})</td>
<td class="px-6 py-4">
<ng-select [compareWith]="this.compareFunc" formControlName="groupID">
<ng-option *ngFor="let item of allToppingsDefinitions" [value]="item.groupId.toString()">{{ item.name }}</ng-option>
</ng-select>
<input type="checkbox" class="toggle" formControlName="isUse" />
</td>
<td class="px-6 py-4">
<input type="text" class="input" formControlName="defaultIDSelect" />
<!-- link with groupId -->
</td>
<ng-select
[clearable]="false"
[compareWith]="this.compareFunc"
formControlName="groupID"
>
<ng-option
*ngFor="let item of allToppingsDefinitions"
[value]="item.groupId.toString()"
>{{ item.name }} ({{ item.groupId }})</ng-option
>
</ng-select>
</td>
<td class="px-6 py-4">
<ng-select
[clearable]="false"
[compareWith]="this.compareFunc"
formControlName="defaultIDSelect"
>
<ng-option
*ngFor="let item of getMembersByGroupId(getGroupIdByIndex(i))"
[value]="item.id.toString()"
>{{ item.name }} ({{ item.id }})</ng-option
>
</ng-select>
</td>
<!-- ListGroupID -->
</tr>
</tr>
</tbody>
</table>

192
client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts
View file

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