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"
>