From 18ea6402821687c168733c4965136b45545cf69f Mon Sep 17 00:00:00 2001 From: "pakintada@gmail.com" Date: Tue, 6 Feb 2024 16:07:10 +0700 Subject: [PATCH] addable & removable recipelist | savable topping & material WIP --- client/src/app/core/models/recipe.model.ts | 23 +- .../material-settings.component.html | 220 ++++++--- .../material-settings.component.ts | 113 ++++- .../recipe-details.component.html | 2 +- .../recipe-list/recipe-list.component.html | 13 +- .../recipe-list/recipe-list.component.ts | 424 ++++++++++-------- .../features/toppings/toppings.component.html | 124 ++++- .../features/toppings/toppings.component.ts | 50 ++- 8 files changed, 668 insertions(+), 301 deletions(-) diff --git a/client/src/app/core/models/recipe.model.ts b/client/src/app/core/models/recipe.model.ts index 02016b3..c3053a1 100644 --- a/client/src/app/core/models/recipe.model.ts +++ b/client/src/app/core/models/recipe.model.ts @@ -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; diff --git a/client/src/app/features/material-settings/material-settings.component.html b/client/src/app/features/material-settings/material-settings.component.html index d75d589..565b333 100644 --- a/client/src/app/features/material-settings/material-settings.component.html +++ b/client/src/app/features/material-settings/material-settings.component.html @@ -1,9 +1,20 @@ -
+
+

Material Settings

+ +
+ +
- {{ cat }} + + {{ cat }} +
+ + +
+
+ +
+ +
+

Material Settings

+ + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Is UseIDID AlternateNameOther Name
+ + + + + + + + + +
+ + + + +
+ + + +
+ +
+
+

Powder

+ +
+ +
+

Syrup

+ +
+ +
+

Bean

+ +
+ +
+

Soda

+ +
+ +
+

Equipment

+ +
+ +
+

Leaves

+ +
+ +
+

Ice Cream

+ +
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+ +
+ +
+
+ +
+
+
+
@@ -22,66 +174,4 @@
- - - -
- - -
diff --git a/client/src/app/features/material-settings/material-settings.component.ts b/client/src/app/features/material-settings/material-settings.component.ts index f5bc4fe..36830c5 100644 --- a/client/src/app/features/material-settings/material-settings.component.ts +++ b/client/src/app/features/material-settings/material-settings.component.ts @@ -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 { // 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(); } ); } diff --git a/client/src/app/features/recipes/recipe-details/recipe-details.component.html b/client/src/app/features/recipes/recipe-details/recipe-details.component.html index 9d36615..33a7339 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-details.component.html +++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.html @@ -133,7 +133,7 @@ >
diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html index 4d6b6ee..5c7445b 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html +++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html @@ -13,8 +13,13 @@ *ngFor="let mat of recipeListData.controls; let i = index" > @@ -189,6 +194,10 @@ +
+ + +
@@ -396,7 +405,7 @@ [(ngModel)]="showMaterialSelector" />