addable & removable recipelist | savable topping & material WIP
This commit is contained in:
pakintada@gmail.com
parent
c0e9c62d85
commit
18ea640282
8 changed files with 668 additions and 301 deletions
|
|
@ -166,26 +166,31 @@ export interface ToppingSet {
|
|||
}
|
||||
|
||||
export interface MaterialSetting {
|
||||
StringParam: string,
|
||||
materialName: string;
|
||||
materialId: number;
|
||||
materialOtherName: string;
|
||||
RawMaterialUnit: string;
|
||||
IceScreamBingsuChannel: boolean;
|
||||
StringParam: string;
|
||||
AlarmIDWhenOffline: string;
|
||||
BeanChannel: string;
|
||||
BeanChannel: boolean;
|
||||
CanisterType: string;
|
||||
DrainTimer: string;
|
||||
IsEquipment: string;
|
||||
LeavesChannel: string;
|
||||
IsEquipment: boolean;
|
||||
LeavesChannel: boolean;
|
||||
LowToOffline: string;
|
||||
MaterialStatus: string;
|
||||
PowderChannel: string;
|
||||
PowderChannel: boolean;
|
||||
RefillUnitGram: string;
|
||||
RefillUnitMilliliters: string;
|
||||
RefillUnitPCS: string;
|
||||
ScheduleDrainType: string;
|
||||
SodaChannel: string;
|
||||
StockAdjust: string;
|
||||
SyrupChannel: string;
|
||||
id: string;
|
||||
idAlternate: string;
|
||||
isUse: string;
|
||||
SyrupChannel: boolean;
|
||||
id: number;
|
||||
idAlternate: number;
|
||||
isUse: boolean;
|
||||
pay_rettry_max_count: string;
|
||||
feed_mode: string;
|
||||
MaterialParameter: string;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
<div class="overflow-auto h-[90vh] w-[85vw]">
|
||||
<div class="flex sticky top-10 p-2 space-x-2 items-center">
|
||||
<p class="m-4 font-bold text-lg">Material Settings</p>
|
||||
<button class="btn m-4">New Category</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-auto h-[80vh] w-[85vw]">
|
||||
<div class="m-4 w-[90%]" *ngFor="let cat of getCategories()">
|
||||
<details class="bg-stone-300 p-4 collapse collapse-arrow">
|
||||
<summary class="font-bold text-lg collapse-title">{{ cat }}</summary>
|
||||
<summary class="font-bold text-lg collapse-title">
|
||||
{{ cat }}
|
||||
</summary>
|
||||
|
||||
<div class="collapse-content">
|
||||
<button class="btn">New {{ cat }} material</button>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-flow-row grid-cols-7 gap-4">
|
||||
<div
|
||||
class="m-1"
|
||||
|
|
@ -11,10 +22,151 @@
|
|||
>
|
||||
<button
|
||||
class="bg-slate-100 p-2 rounded-md w-44"
|
||||
(click)="getMaterialSettingsById(material.id)"
|
||||
(click)="openMaterialSettingModal(material.id)"
|
||||
>
|
||||
<p>{{ material.name }} ({{ material.id }})</p>
|
||||
</button>
|
||||
<dialog
|
||||
id="material_settings_modal_{{ material.id }}"
|
||||
class="modal"
|
||||
>
|
||||
<div class="modal-box max-w-5xl">
|
||||
|
||||
<div *ngIf="currentMaterialSettings != null" [formGroup]="materialSettingForm">
|
||||
<p>Material Settings</p>
|
||||
|
||||
<!-- TODO: add form -->
|
||||
|
||||
<div class="divider"></div>
|
||||
<div formArrayName="materialSetting" *ngFor="let material of materialSetting.controls; let i = index">
|
||||
<!-- only show the current form matched by index -->
|
||||
<div formGroupName="{{i}}">
|
||||
<div class="" *ngIf="i == currentFormIndex">
|
||||
|
||||
<!-- <p>Form at {{i}}</p> -->
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Is Use</th>
|
||||
<th>ID</th>
|
||||
<th>ID Alternate</th>
|
||||
<th>Name</th>
|
||||
<th>Other Name</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<input class="toggle" type="checkbox" formControlName="isUse" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="id" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="idAlternate" />
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="materialName" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<input class="input input-sm input-bordered" formControlName="materialOtherName" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RawMaterialUnit" />
|
||||
<input class="input input-sm input-bordered" formControlName="MaterialParameter" />
|
||||
<input class="input input-sm input-bordered" formControlName="id" />
|
||||
<input class="input input-sm input-bordered" formControlName="idAlternate" />
|
||||
<input class="input input-sm input-bordered" formControlName="pay_rettry_max_count" />
|
||||
<input class="input input-sm input-bordered" formControlName="feed_mode" />
|
||||
<input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- channels -->
|
||||
|
||||
<div class="bg-stone-500 p-2 rounded-md text-white">
|
||||
|
||||
<div class="flex space-x-2 justify-evenly">
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Powder</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="PowderChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Syrup</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="SyrupChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Bean</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="BeanChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Soda</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="SodaChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Equipment</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="IsEquipment" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Leaves</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="LeavesChannel" />
|
||||
</div>
|
||||
|
||||
<div class="justify-center">
|
||||
<p class="font-bold">Ice Cream</p>
|
||||
<input class="checkbox checkbox-info" type="checkbox" formControlName="IceScreamBingsuChannel" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="StringParam" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="AlarmIDWhenOffline" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="CanisterType" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="DrainTimer" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="LowToOffline" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitGram" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitMilliliters" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="RefillUnitPCS" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="ScheduleDrainType" /> -->
|
||||
<!-- <input class="input input-sm input-bordered" formControlName="StockAdjust" /> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-action sticky bottom-0 right-0">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-warning">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,66 +174,4 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 0: "StringParam"1: "AlarmIDWhenOffline"2: "BeanChannel"3: "CanisterType"4: "DrainTimer"5: "IceScreamBingsuChannel"6: "IsEquipment"7: "LeavesChannel"8: "LowToOffline"9: "MaterialStatus"10: "PowderChannel"11: "RefillUnitGram"12: "RefillUnitMilliliters"13: "RefillUnitPCS"14: "ScheduleDrainType"15: "SodaChannel"16: "StockAdjust"17: "SyrupChannel"18: "id"19: "idAlternate"20: "isUse"21: "pay_rettry_max_count"22: "feed_mode"23: "MaterialParameter"24: "materialName"25: "materialOtherName"26: "RawMaterialUnit" -->
|
||||
|
||||
<!-- open material settings modal -->
|
||||
<div *ngIf="currentMaterialSettings != null">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="material_settings_modal"
|
||||
class="modal-toggle"
|
||||
#checkBox="ngModel"
|
||||
[(ngModel)]="showMaterialSettingModal"
|
||||
(close)="currentMaterialSettings = null"
|
||||
/>
|
||||
<label for="material_settings_modal" class="modal">
|
||||
<div class="modal-box max-w-5xl">
|
||||
<p>Material Settings</p>
|
||||
|
||||
<input type="checkbox" value="{{currentMaterialSettings.isUse == 'true' ? true : false}}">
|
||||
|
||||
|
||||
<p>{{ currentMaterialSettings.materialName }}</p>
|
||||
<p>{{ currentMaterialSettings.materialId }}</p>
|
||||
<p>{{ currentMaterialSettings.materialOtherName }}</p>
|
||||
|
||||
<p>Status {{ currentMaterialSettings.MaterialStatus }}</p>
|
||||
<p>CanisterType {{ currentMaterialSettings.CanisterType }}</p>
|
||||
<p>AlarmIDWhenOffline {{ currentMaterialSettings.AlarmIDWhenOffline }}</p>
|
||||
<p>ScheduleDrainType {{ currentMaterialSettings.ScheduleDrainType }}</p>
|
||||
<p>LowToOffline {{ currentMaterialSettings.LowToOffline }}</p>
|
||||
|
||||
<p>StockAdjust {{ currentMaterialSettings.StockAdjust }}</p>
|
||||
|
||||
<p>pay_rettry_max_count {{ currentMaterialSettings.pay_rettry_max_count }}</p>
|
||||
<!-- Material Param -->
|
||||
<div
|
||||
class="bg-green-200 rounded-md p-4"
|
||||
>
|
||||
<p>StringParam {{ currentMaterialSettings.StringParam }}</p>
|
||||
<p>Parameter {{ currentMaterialSettings.MaterialParameter }}</p>
|
||||
<p>RawMaterialUnit {{ currentMaterialSettings.RawMaterialUnit }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Types -->
|
||||
<div class="bg-amber-300 rounded-md p-4">
|
||||
<p>IsEquipment? {{ currentMaterialSettings.IsEquipment }}</p>
|
||||
<p>Bean? {{ currentMaterialSettings.BeanChannel }}</p>
|
||||
<p>Powder? {{ currentMaterialSettings.PowderChannel }}</p>
|
||||
<p>Syrup? {{ currentMaterialSettings.SyrupChannel }}</p>
|
||||
<p>Soda? {{ currentMaterialSettings.SodaChannel }}</p>
|
||||
<p>Leaves? {{ currentMaterialSettings.LeavesChannel }}</p>
|
||||
<p>IceScreamBingsu? {{ currentMaterialSettings.IceScreamBingsuChannel }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Refill -->
|
||||
<div class="bg-blue-200 rounded-md p-4">
|
||||
<p>RefillUnitGram? {{ currentMaterialSettings.RefillUnitGram }}</p>
|
||||
<p>RefillUnitMilliliters? {{ currentMaterialSettings.RefillUnitMilliliters }}</p>
|
||||
<p>RefillUnitPCS? {{ currentMaterialSettings.RefillUnitPCS }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { CommonModule, NgIf } from '@angular/common';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { FormArray, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MaterialSetting } from 'src/app/core/models/recipe.model';
|
||||
import { MaterialService } from 'src/app/core/services/material.service';
|
||||
import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe';
|
||||
|
||||
|
|
@ -21,23 +22,36 @@ export class MaterialSettingsComponent implements OnInit {
|
|||
}[]
|
||||
| null = [];
|
||||
allMaterialsGroupedByTypes: { [key: string]: any[] } = {};
|
||||
currentMaterialSettings: any = null;
|
||||
currentMaterialSettings: MaterialSetting | undefined = undefined;
|
||||
showMaterialSettingModal: boolean = false;
|
||||
|
||||
constructor(private _materialService: MaterialService) {}
|
||||
// current form index
|
||||
currentFormIndex: number | undefined = undefined;
|
||||
|
||||
// mandatory form
|
||||
materialSettingForm = this.formBuilder.group({
|
||||
materialSetting: this.formBuilder.array([]),
|
||||
}, { updateOn: 'blur' });
|
||||
|
||||
// getter
|
||||
get materialSetting() {
|
||||
return this.materialSettingForm.get('materialSetting') as FormArray;
|
||||
}
|
||||
|
||||
constructor(private _materialService: MaterialService, private formBuilder: FormBuilder) {}
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
// do fetch material settings
|
||||
(await this._materialService.getFullMaterialDetail()).subscribe((data) => {
|
||||
this.allMaterials = data;
|
||||
this.allMaterialsGroupedByTypes = this.ListCategory();
|
||||
this.allMaterialsGroupedByTypes = this.listCategory();
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------ Functions ---------------------
|
||||
|
||||
// filter material by type
|
||||
ListCategory = () => {
|
||||
listCategory = () => {
|
||||
let catMap: { [key: string]: any[] } = {
|
||||
others: [],
|
||||
};
|
||||
|
|
@ -82,16 +96,93 @@ export class MaterialSettingsComponent implements OnInit {
|
|||
return catList;
|
||||
};
|
||||
|
||||
// get material settings by id
|
||||
async getMaterialSettingsById(id: number) {
|
||||
// Implementation goes here
|
||||
(await this._materialService.getMaterialSettingById(id)).subscribe(
|
||||
|
||||
createMaterialSettingFormGroup(mat_set: MaterialSetting){
|
||||
return this.formBuilder.group({
|
||||
materialName: mat_set.materialName,
|
||||
materialId: mat_set.materialId,
|
||||
materialOtherName: mat_set.materialOtherName,
|
||||
RawMaterialUnit: mat_set.RawMaterialUnit,
|
||||
IceScreamBingsuChannel: mat_set.IceScreamBingsuChannel,
|
||||
StringParam: mat_set.StringParam,
|
||||
AlarmIDWhenOffline: mat_set.AlarmIDWhenOffline,
|
||||
BeanChannel: mat_set.BeanChannel,
|
||||
CanisterType: mat_set.CanisterType,
|
||||
DrainTimer: mat_set.DrainTimer,
|
||||
IsEquipment: mat_set.IsEquipment,
|
||||
LeavesChannel: mat_set.LeavesChannel,
|
||||
LowToOffline: mat_set.LowToOffline,
|
||||
MaterialStatus: mat_set.MaterialStatus,
|
||||
PowderChannel: mat_set.PowderChannel,
|
||||
RefillUnitGram: mat_set.RefillUnitGram,
|
||||
RefillUnitMilliliters: mat_set.RefillUnitMilliliters,
|
||||
RefillUnitPCS: mat_set.RefillUnitPCS,
|
||||
ScheduleDrainType: mat_set.ScheduleDrainType,
|
||||
SodaChannel: mat_set.SodaChannel,
|
||||
StockAdjust: mat_set.StockAdjust,
|
||||
SyrupChannel: mat_set.SyrupChannel,
|
||||
id: mat_set.id,
|
||||
idAlternate: mat_set.idAlternate,
|
||||
isUse: mat_set.isUse,
|
||||
pay_rettry_max_count: mat_set.pay_rettry_max_count,
|
||||
feed_mode: mat_set.feed_mode,
|
||||
MaterialParameter: mat_set.MaterialParameter
|
||||
});
|
||||
}
|
||||
|
||||
// open material id modal
|
||||
async openMaterialSettingModal(id: string){
|
||||
// set current material
|
||||
(await this._materialService.getMaterialSettingById(parseInt(id))).subscribe(
|
||||
(data) => {
|
||||
this.currentMaterialSettings = data;
|
||||
this.showMaterialSettingModal = true;
|
||||
console.log('material setting', data);
|
||||
|
||||
// do create form, if not exist
|
||||
// - find matching form
|
||||
// - if not exist, create new form
|
||||
let pushableFlag = false;
|
||||
let foundFlag = false;
|
||||
// this.materialSetting.controls.forEach((control, index) => {
|
||||
// console.log("different id", "checkon value", control.value,control.value.id, id);
|
||||
|
||||
// if(foundFlag){
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (control == undefined ||(control.value as any).id == id) {
|
||||
// pushableFlag = false;
|
||||
// foundFormIndex = index;
|
||||
// } else {
|
||||
// // set to last index, if not found. Meaning this is new form
|
||||
// foundFormIndex = this.materialSetting.length;
|
||||
// }
|
||||
// });
|
||||
|
||||
// filter find index
|
||||
let foundFormIndex = this.materialSetting.controls.findIndex((control) => {
|
||||
return (control.value as any).id == id
|
||||
});
|
||||
|
||||
console.log("found form index", foundFormIndex);
|
||||
|
||||
if(foundFormIndex < 0){
|
||||
foundFormIndex = this.materialSetting.length - 1 < 0 ? 0 : this.materialSetting.length;
|
||||
|
||||
pushableFlag = true;
|
||||
}
|
||||
|
||||
if(pushableFlag){
|
||||
this.materialSetting.push(this.createMaterialSettingFormGroup(data));
|
||||
console.log('push new form', this.materialSetting);
|
||||
}
|
||||
|
||||
// export index
|
||||
this.currentFormIndex = foundFormIndex;
|
||||
|
||||
console.log('material setting', data, "at index", foundFormIndex, "current form index", this.currentFormIndex);
|
||||
// console.log("keys of material settings", Object.keys(data));
|
||||
console.log('material setting', data.isUse, typeof data.isUse);
|
||||
(document.getElementById("material_settings_modal_"+id) as any)!.showModal();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@
|
|||
>
|
||||
<app-recipe-list
|
||||
[productCode]="productCode"
|
||||
[isSubMenu]="false"
|
||||
[noFetch]="false"
|
||||
(recipeListFormChange)="onRecipeListFormChange($event)"
|
||||
></app-recipe-list>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,13 @@
|
|||
*ngFor="let mat of recipeListData.controls; let i = index"
|
||||
>
|
||||
<tr
|
||||
class="bg-white border-b hover:bg-secondary max-h-4"
|
||||
class="bg-white border-b max-h-4"
|
||||
[ngClass]="{
|
||||
'bg-red-400': selectedRecipeList.includes(i)
|
||||
}"
|
||||
|
||||
formGroupName="{{ i }}"
|
||||
(click)="addToSelection(i)"
|
||||
(mousedown)="initHoldEvent()"
|
||||
(mouseup)="openRecipeListEditor(i)"
|
||||
>
|
||||
|
|
@ -189,6 +194,10 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="justify-center w-full flex flex-row sticky bottom-0">
|
||||
<button class="btn w-1/2" (click)="addRow()">Add</button>
|
||||
<button class="btn w-1/2" (click)="removeRow()">Remove</button>
|
||||
</div>
|
||||
|
||||
<!-- show string param modal -->
|
||||
|
||||
|
|
@ -396,7 +405,7 @@
|
|||
[(ngModel)]="showMaterialSelector"
|
||||
/>
|
||||
<label for="material_selector" class="modal">
|
||||
<div class="modal-box max-h-[400px] overflow-scroll">
|
||||
<div class="modal-box max-h-[75vh] overflow-scroll">
|
||||
<div class="flex flex-row m-2 modal">
|
||||
<p class="font-bold text-lg m-2">Materials</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { CommonModule, NgFor, NgIf } from '@angular/common';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR } from '@angular/core';
|
||||
import {
|
||||
FormArray,
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
NgModel,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { forEach, isBoolean, isEqual, sortBy } from 'lodash';
|
||||
import { forEach, isBoolean, isEqual, sortBy, xorWith } from 'lodash';
|
||||
import { first } from 'rxjs';
|
||||
import { UserPermissions } from 'src/app/core/auth/userPermissions';
|
||||
import {
|
||||
|
|
@ -40,11 +40,11 @@ import Lang from 'src/app/shared/helpers/lang';
|
|||
selector: 'app-recipe-list',
|
||||
templateUrl: './recipe-list.component.html',
|
||||
standalone: true,
|
||||
imports: [NgIf, NgFor, ReactiveFormsModule, FormsModule, RecipeToppingComponent]
|
||||
imports: [CommonModule,NgIf, NgFor, ReactiveFormsModule, FormsModule, RecipeToppingComponent]
|
||||
})
|
||||
export class RecipeListComponent implements OnInit {
|
||||
@Input({ required: true }) productCode!: string;
|
||||
@Input() isSubMenu: boolean = false;
|
||||
@Input() noFetch: boolean = false;
|
||||
@Output() recipeListFormChange = new EventEmitter<unknown[]>();
|
||||
|
||||
materialList: MaterialCode[] = [];
|
||||
|
|
@ -85,6 +85,9 @@ export class RecipeListComponent implements OnInit {
|
|||
// topping list
|
||||
public toppingList: any[] = [];
|
||||
|
||||
// selected recipelist
|
||||
public selectedRecipeList: number[] = [];
|
||||
|
||||
constructor(
|
||||
private _recipeService: RecipeService,
|
||||
private _materialService: MaterialService,
|
||||
|
|
@ -102,181 +105,153 @@ export class RecipeListComponent implements OnInit {
|
|||
private _recipeListOriginalArray!: RecipeDetailMat[];
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
(await this._recipeService
|
||||
.getRecipeDetailMat(this.productCode))
|
||||
.pipe(first())
|
||||
.subscribe(({ result }) => {
|
||||
this._recipeListOriginalArray = result;
|
||||
result.forEach((recipeDetailMat: RecipeDetailMat, index: number) => {
|
||||
|
||||
// fetch material
|
||||
|
||||
(await
|
||||
this._materialService.getMaterialCodes()).subscribe((materials) => {
|
||||
this.materialList = materials;
|
||||
// console.log("[MatService] get materials", materials.length);
|
||||
});
|
||||
|
||||
(await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
|
||||
this.fullMaterialList = materials;
|
||||
this.categoriedMaterial = this.ListCategory();
|
||||
// console.log(this.categoriedMaterial);
|
||||
});
|
||||
|
||||
|
||||
console.log(this.recipeListData);
|
||||
if(!this.noFetch){
|
||||
(await this._recipeService
|
||||
.getRecipeDetailMat(this.productCode))
|
||||
.pipe(first())
|
||||
.subscribe(({ result }) => {
|
||||
this._recipeListOriginalArray = result;
|
||||
result.forEach((recipeDetailMat: RecipeDetailMat, index: number) => {
|
||||
// console.log(this.recipeListData);
|
||||
|
||||
// StringParam
|
||||
if (
|
||||
recipeDetailMat.StringParam != '' ||
|
||||
recipeDetailMat.StringParam != null
|
||||
) {
|
||||
let currStringParam = new StringParam(recipeDetailMat.StringParam);
|
||||
let stringParamList = currStringParam.extract().as_list();
|
||||
// StringParam
|
||||
if (
|
||||
recipeDetailMat.StringParam != '' ||
|
||||
recipeDetailMat.StringParam != null
|
||||
) {
|
||||
let currStringParam = new StringParam(recipeDetailMat.StringParam);
|
||||
let stringParamList = currStringParam.extract().as_list();
|
||||
|
||||
let stringParamListTransform = [];
|
||||
for (let param of stringParamList) {
|
||||
// boolean transform
|
||||
if (param.pvalue == 'true') {
|
||||
param.pvalue = true;
|
||||
} else if (param.pvalue == 'false') {
|
||||
param.pvalue = false;
|
||||
let stringParamListTransform = [];
|
||||
for (let param of stringParamList) {
|
||||
// boolean transform
|
||||
if (param.pvalue == 'true') {
|
||||
param.pvalue = true;
|
||||
} else if (param.pvalue == 'false') {
|
||||
param.pvalue = false;
|
||||
}
|
||||
|
||||
stringParamListTransform.push(
|
||||
this._formBuilder.group({
|
||||
pkey: [{ value: param.pkey, disabled: !this.isEditable() }],
|
||||
pvalue: [
|
||||
{ value: param.pvalue, disabled: !this.isEditable() },
|
||||
],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
stringParamListTransform.push(
|
||||
this._formBuilder.group({
|
||||
pkey: [{ value: param.pkey, disabled: !this.isEditable() }],
|
||||
pvalue: [
|
||||
{ value: param.pvalue, disabled: !this.isEditable() },
|
||||
],
|
||||
})
|
||||
this.stringParamData.push(
|
||||
this._formBuilder.array(stringParamListTransform)
|
||||
);
|
||||
|
||||
this.stringParams[index] = stringParamList;
|
||||
|
||||
// console.log("string param at index", index, this.stringParams[index]);
|
||||
}
|
||||
|
||||
this.stringParamData.push(
|
||||
this._formBuilder.array(stringParamListTransform)
|
||||
this.recipeListData.push(
|
||||
this._formBuilder.group({
|
||||
StringParam: [
|
||||
{
|
||||
value: recipeDetailMat.StringParam,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
isUse: [
|
||||
{ value: recipeDetailMat.isUse, disabled: !this.isEditable() },
|
||||
],
|
||||
materialPathId: [
|
||||
{
|
||||
value: recipeDetailMat.materialPathId,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
name: [{ value: recipeDetailMat.name, disabled: true }],
|
||||
mixOrder: [
|
||||
{
|
||||
value: recipeDetailMat.mixOrder,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
stirTime: [
|
||||
{
|
||||
value: recipeDetailMat.stirTime / 10,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
powderGram: [
|
||||
{
|
||||
value: recipeDetailMat.powderGram,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
powderTime: [
|
||||
{
|
||||
value: recipeDetailMat.powderTime,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
syrupGram: [
|
||||
{
|
||||
value: recipeDetailMat.syrupGram,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
syrupTime: [
|
||||
{
|
||||
value: recipeDetailMat.syrupTime,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
waterCold: [
|
||||
{
|
||||
value: recipeDetailMat.waterCold,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
waterYield: [
|
||||
{
|
||||
value: recipeDetailMat.waterYield,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
feedPattern: [
|
||||
{
|
||||
value: recipeDetailMat.feedPattern,
|
||||
disabled: !this.isEditable(),
|
||||
}
|
||||
],
|
||||
feedParameter: [
|
||||
{
|
||||
value: recipeDetailMat.feedParameter,
|
||||
disabled: !this.isEditable(),
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
this.stringParams[index] = stringParamList;
|
||||
|
||||
// console.log("string param at index", index, this.stringParams[index]);
|
||||
}
|
||||
|
||||
this.recipeListData.push(
|
||||
this._formBuilder.group({
|
||||
StringParam: [
|
||||
{
|
||||
value: recipeDetailMat.StringParam,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
isUse: [
|
||||
{ value: recipeDetailMat.isUse, disabled: !this.isEditable() },
|
||||
],
|
||||
materialPathId: [
|
||||
{
|
||||
value: recipeDetailMat.materialPathId,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
name: [{ value: recipeDetailMat.name, disabled: true }],
|
||||
mixOrder: [
|
||||
{
|
||||
value: recipeDetailMat.mixOrder,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
stirTime: [
|
||||
{
|
||||
value: recipeDetailMat.stirTime / 10,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
powderGram: [
|
||||
{
|
||||
value: recipeDetailMat.powderGram,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
powderTime: [
|
||||
{
|
||||
value: recipeDetailMat.powderTime,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
syrupGram: [
|
||||
{
|
||||
value: recipeDetailMat.syrupGram,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
syrupTime: [
|
||||
{
|
||||
value: recipeDetailMat.syrupTime,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
waterCold: [
|
||||
{
|
||||
value: recipeDetailMat.waterCold,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
waterYield: [
|
||||
{
|
||||
value: recipeDetailMat.waterYield,
|
||||
disabled: !this.isEditable(),
|
||||
},
|
||||
],
|
||||
feedPattern: [
|
||||
{
|
||||
value: recipeDetailMat.feedPattern,
|
||||
disabled: !this.isEditable(),
|
||||
}
|
||||
],
|
||||
feedParameter: [
|
||||
{
|
||||
value: recipeDetailMat.feedParameter,
|
||||
disabled: !this.isEditable(),
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
});
|
||||
this.isMatLoaded = true;
|
||||
});
|
||||
this.isMatLoaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
this.stringParamForm.valueChanges.subscribe((value) => {
|
||||
// value.stringParamData: Array
|
||||
// where this.stringParams: {[key: number] : {pkey: string, pvalue: any}}
|
||||
|
||||
// transform value to map
|
||||
let mapValue: { [key: number]: { pkey: string; pvalue: any }[] } = {};
|
||||
forEach(value.stringParamData, (param: any, index: number) => {
|
||||
mapValue[index] = param;
|
||||
});
|
||||
|
||||
let checkLen =
|
||||
Object.keys(mapValue).length ==
|
||||
Object.keys(this.stringParams as any).length;
|
||||
let baseLen =
|
||||
Object.keys(this.stringParams as any).length >=
|
||||
Object.keys(mapValue).length
|
||||
? Object.keys(this.stringParams as any).length
|
||||
: Object.keys(mapValue).length;
|
||||
|
||||
if (checkLen) {
|
||||
for (let i = 0; i < baseLen; i++) {
|
||||
if (!isEqual(this.stringParams[i], mapValue[i])) {
|
||||
console.log('check', (this.stringParams as any)[i], mapValue[i]);
|
||||
|
||||
// transform back to string
|
||||
let initString = ',';
|
||||
for (let key of Object.keys(mapValue[i])) {
|
||||
initString += `${mapValue[i][parseInt(key)].pkey}=${
|
||||
mapValue[i][parseInt(key)].pvalue
|
||||
},`;
|
||||
}
|
||||
|
||||
if (initString.length > 1) {
|
||||
(this.recipeListData.at(i) as any).controls.StringParam.setValue(
|
||||
initString
|
||||
);
|
||||
console.log('set', initString);
|
||||
}
|
||||
|
||||
// do last
|
||||
this.stringParams[i] = mapValue[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// event listener
|
||||
|
||||
this.recipeListForm.valueChanges.subscribe((value) => {
|
||||
// console.log(value.recipeListData);
|
||||
|
|
@ -307,21 +282,101 @@ export class RecipeListComponent implements OnInit {
|
|||
}
|
||||
});
|
||||
|
||||
// TODO: embed this to recipelist
|
||||
(await
|
||||
// TODO: embed this to recipelist
|
||||
this._materialService.getMaterialCodes()).subscribe((materials) => {
|
||||
this.materialList = materials;
|
||||
console.log("[MatService] get materials", materials.length);
|
||||
});
|
||||
this.stringParamForm.valueChanges.subscribe((value) => {
|
||||
// value.stringParamData: Array
|
||||
// where this.stringParams: {[key: number] : {pkey: string, pvalue: any}}
|
||||
|
||||
(await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
|
||||
this.fullMaterialList = materials;
|
||||
this.categoriedMaterial = this.ListCategory();
|
||||
console.log(this.categoriedMaterial);
|
||||
// transform value to map
|
||||
let mapValue: { [key: number]: { pkey: string; pvalue: any }[] } = {};
|
||||
forEach(value.stringParamData, (param: any, index: number) => {
|
||||
mapValue[index] = param;
|
||||
});
|
||||
|
||||
let checkLen =
|
||||
Object.keys(mapValue).length ==
|
||||
Object.keys(this.stringParams as any).length;
|
||||
let baseLen =
|
||||
Object.keys(this.stringParams as any).length >=
|
||||
Object.keys(mapValue).length
|
||||
? Object.keys(this.stringParams as any).length
|
||||
: Object.keys(mapValue).length;
|
||||
|
||||
if (checkLen) {
|
||||
for (let i = 0; i < baseLen; i++) {
|
||||
if (!isEqual(this.stringParams[i], mapValue[i])) {
|
||||
// console.log('check', (this.stringParams as any)[i], mapValue[i]);
|
||||
|
||||
// transform back to string
|
||||
let initString = ',';
|
||||
for (let key of Object.keys(mapValue[i])) {
|
||||
initString += `${mapValue[i][parseInt(key)].pkey}=${
|
||||
mapValue[i][parseInt(key)].pvalue
|
||||
},`;
|
||||
}
|
||||
|
||||
if (initString.length > 1) {
|
||||
(this.recipeListData.at(i) as any).controls.StringParam.setValue(
|
||||
initString
|
||||
);
|
||||
// console.log('set', initString);
|
||||
}
|
||||
|
||||
// do last
|
||||
this.stringParams[i] = mapValue[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// add new row
|
||||
addRow() {
|
||||
this.recipeListData.push(
|
||||
this._formBuilder.group({
|
||||
isUse: [{ value: false, disabled: !this.isEditable() }],
|
||||
materialPathId: [{ value: 0, disabled: !this.isEditable() }],
|
||||
name: [{ value: "", disabled: true }],
|
||||
mixOrder: [{ value: "", disabled: !this.isEditable() }],
|
||||
stirTime: [{ value: 0 / 10, disabled: !this.isEditable() }],
|
||||
powderGram: [{ value: 0, disabled: !this.isEditable() }],
|
||||
powderTime: [{ value: 0, disabled: !this.isEditable() }],
|
||||
syrupGram: [{ value: 0, disabled: !this.isEditable() }],
|
||||
syrupTime: [{ value: 0, disabled: !this.isEditable() }],
|
||||
waterCold: [{ value: 0, disabled: !this.isEditable() }],
|
||||
waterYield: [{ value: 0, disabled: !this.isEditable() }],
|
||||
feedPattern: [{ value: "", disabled: !this.isEditable() }],
|
||||
feedParameter: [{ value: "", disabled: !this.isEditable() }],
|
||||
StringParam: [{ value: "", disabled: !this.isEditable() }],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// remove from selection
|
||||
removeRow() {
|
||||
|
||||
let i = this.selectedRecipeList;
|
||||
|
||||
i.forEach((idx) => {
|
||||
this.recipeListData.removeAt(idx);
|
||||
});
|
||||
|
||||
this.selectedRecipeList = [];
|
||||
}
|
||||
|
||||
addToSelection(i: number){
|
||||
|
||||
if(this.selectedRecipeList.includes(i)){
|
||||
let index = this.selectedRecipeList.indexOf(i);
|
||||
this.selectedRecipeList.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
this.selectedRecipeList.push(i);
|
||||
// console.log("selected recipe list", this.selectedRecipeList);
|
||||
}
|
||||
|
||||
|
||||
|
||||
get recipeListData(): FormArray {
|
||||
return this.recipeListForm.get('recipeListData') as FormArray;
|
||||
}
|
||||
|
|
@ -341,7 +396,7 @@ export class RecipeListComponent implements OnInit {
|
|||
}
|
||||
|
||||
openMaterialList(i: any) {
|
||||
console.log('open material list for ', i);
|
||||
// console.log('open material list for ', i);
|
||||
this.showMaterialSelector = true;
|
||||
this.currentSelectRecipeList = i;
|
||||
}
|
||||
|
|
@ -360,7 +415,7 @@ export class RecipeListComponent implements OnInit {
|
|||
materialName
|
||||
);
|
||||
|
||||
console.log('set mat ', material, materialName,'to slot', i);
|
||||
// console.log('set mat ', material, materialName,'to slot', i);
|
||||
}
|
||||
|
||||
getTypeForRecipeListAtIndex(i: any) {
|
||||
|
|
@ -391,7 +446,7 @@ export class RecipeListComponent implements OnInit {
|
|||
};
|
||||
}
|
||||
|
||||
// TODO: Filter from full detail by type
|
||||
// Filter from full detail by type
|
||||
ListCategory = () => {
|
||||
let catMap: { [key: string]: any[] } = {
|
||||
others: [],
|
||||
|
|
@ -402,7 +457,7 @@ export class RecipeListComponent implements OnInit {
|
|||
catMap[category] = [];
|
||||
});
|
||||
|
||||
console.log('generated category', catMap);
|
||||
// console.log('generated category', catMap);
|
||||
|
||||
this.fullMaterialList!.forEach((mat) => {
|
||||
let category = getMaterialType(mat.materialId);
|
||||
|
|
@ -497,7 +552,7 @@ export class RecipeListComponent implements OnInit {
|
|||
};
|
||||
|
||||
openStringParamEditor(i: any) {
|
||||
console.log('open param list for ', i);
|
||||
// console.log('open param list for ', i);
|
||||
this.showStringParamSelector = true;
|
||||
this.currentSelectStringParam = i;
|
||||
}
|
||||
|
|
@ -531,7 +586,7 @@ export class RecipeListComponent implements OnInit {
|
|||
|
||||
await Promise.resolve();
|
||||
if (this.timeoutHandler) {
|
||||
console.log("timeout get", this.timeout);
|
||||
// console.log("timeout get", this.timeout);
|
||||
if (this.timeout >= 20) {
|
||||
// alert("Opening Recipe List Editor in detail")
|
||||
if (confirm("Are you sure you want to open Recipe List Editor in detail?")) {
|
||||
|
|
@ -592,6 +647,7 @@ export class RecipeListComponent implements OnInit {
|
|||
|
||||
|
||||
|
||||
|
||||
// language handler
|
||||
async displayLang(material: any){
|
||||
let currLang = await Lang.getCurrentLanguage();
|
||||
|
|
|
|||
|
|
@ -1,8 +1,112 @@
|
|||
<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
|
||||
<div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
|
||||
<button class="btn" (click)="showToppingBuilder = true">
|
||||
<p>New Topping</p>
|
||||
<!-- topping builder -->
|
||||
<button class="btn" onclick="topping_builder_modal.showModal()">
|
||||
Create Topping
|
||||
</button>
|
||||
<dialog id="topping_builder_modal" class="modal">
|
||||
<div class="modal-box max-w-screen-2xl">
|
||||
<div class="sticky top-0 z-10 bg-stone-200 rounded-md">
|
||||
<div class="flex items-center justify-start space-x-4">
|
||||
<h3 class="text-xl font-bold">Topping Builder</h3>
|
||||
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-warning">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- body -->
|
||||
|
||||
<div class="flex space-x-2 items-center justify-evenly">
|
||||
<!-- id -->
|
||||
<div class="flex space-x-3">
|
||||
<p class="text-lg font-bold">ID</p>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- name -->
|
||||
<div class="flex space-x-3">
|
||||
<p class="text-lg font-bold">Name</p>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- productCode -->
|
||||
<div class="flex space-x-3">
|
||||
<p class=" font-bold">Product Code</p>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-screen">
|
||||
<app-recipe-list
|
||||
[productCode]="productCode!"
|
||||
[noFetch]="true"
|
||||
(recipeListFormChange)="onRecipeListFormChange($event)"
|
||||
></app-recipe-list>
|
||||
</div>
|
||||
|
||||
<!-- other config -->
|
||||
<!-- [
|
||||
"ExtendID",
|
||||
"OnTOP",
|
||||
"MenuStatus",
|
||||
"cashPrice",
|
||||
"disable",
|
||||
"disable_by_cup",
|
||||
"disable_by_ice",
|
||||
"EncoderCount",
|
||||
"id", ✅
|
||||
"isUse",
|
||||
"isShow",
|
||||
"StringParam",
|
||||
"name", ✅
|
||||
"nonCashPrice",
|
||||
"otherName",
|
||||
"productCode",
|
||||
"recipes",
|
||||
"total_time",
|
||||
"total_weight",
|
||||
"useGram",
|
||||
"weight_float"
|
||||
] -->
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- group builder -->
|
||||
<button class="btn" onclick="group_editor_modal.showModal()">
|
||||
Group Editor
|
||||
</button>
|
||||
<dialog id="group_editor_modal" class="modal">
|
||||
<div class="modal-box max-w-screen-2xl">
|
||||
<div class="w-full h-screen"></div>
|
||||
<div class="modal-action sticky bottom-0 right-0">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-warning">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- TODO: save all changes and send to server -->
|
||||
<button class="btn">
|
||||
<p>Save Changes</p>
|
||||
</button>
|
||||
|
|
@ -74,19 +178,3 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
|
||||
<!-- modal -->
|
||||
<input
|
||||
type="checkbox"
|
||||
id="topping_builder_modal"
|
||||
class="modal-toggle"
|
||||
#checkbox="ngModel"
|
||||
[(ngModel)]="showToppingBuilder"
|
||||
/>
|
||||
<label for="topping_builder_modal" class="modal">
|
||||
<div class="modal-box max-w-5xl">
|
||||
<h3 class="text-xl font-bold">Topping Builder</h3>
|
||||
<!-- body -->
|
||||
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -12,14 +12,25 @@ import {
|
|||
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,
|
||||
imports: [CommonModule, NgSelectModule, FormsModule, ReactiveFormsModule],
|
||||
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[] = [];
|
||||
|
|
@ -28,6 +39,9 @@ export class ToppingsComponent implements OnInit {
|
|||
'0': { members: [] },
|
||||
};
|
||||
|
||||
// topping list keys
|
||||
toppingListKeys: string[] = [];
|
||||
|
||||
showToppingBuilder: boolean = false;
|
||||
|
||||
// forms
|
||||
|
|
@ -38,6 +52,8 @@ export class ToppingsComponent implements OnInit {
|
|||
},
|
||||
{ updateOn: 'blur' }
|
||||
);
|
||||
productCode: string | undefined;
|
||||
addingNewRecipeList: boolean = false;
|
||||
|
||||
get toppingGroup(): FormArray {
|
||||
return this.toppingGroupForm.get('toppingGroup') as FormArray;
|
||||
|
|
@ -101,14 +117,25 @@ export class ToppingsComponent implements OnInit {
|
|||
this.toppingLists = data;
|
||||
this.mapNameToMember();
|
||||
|
||||
console.log(
|
||||
'get topping list',
|
||||
this.toppingLists,
|
||||
'mapper:',
|
||||
this.groupMembersMap
|
||||
);
|
||||
// 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;
|
||||
}
|
||||
|
||||
console.log('undefined name of topping list', this.findUndefinedName());
|
||||
if (currentKeys.length > this.toppingListKeys.length) {
|
||||
this.toppingListKeys = currentKeys;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
'topping lists: ',
|
||||
this.toppingLists,
|
||||
'keys: ',
|
||||
this.toppingListKeys
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -145,9 +172,9 @@ export class ToppingsComponent implements OnInit {
|
|||
|
||||
// get member data from group
|
||||
getMemberData = (group: string, member_id: string) => {
|
||||
// if (this.groupMembersMap[group][member_id] == undefined) {
|
||||
// return {};
|
||||
// }
|
||||
if (this.groupMembersMap[group][member_id] == undefined) {
|
||||
return { name: '' };
|
||||
}
|
||||
return this.groupMembersMap[group][member_id];
|
||||
};
|
||||
|
||||
|
|
@ -184,4 +211,5 @@ export class ToppingsComponent implements OnInit {
|
|||
|
||||
targetDefault?.setValue(member);
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue