add display materials WIP
This commit is contained in:
pakintada@gmail.com
parent
ad8913f3c5
commit
e6f5d152f0
9 changed files with 151 additions and 281 deletions
2
.gitmodules
vendored
2
.gitmodules
vendored
|
|
@ -4,5 +4,5 @@
|
|||
branch = master
|
||||
[submodule "server/taobin_project"]
|
||||
path = server/taobin_project
|
||||
url = ssh://ikong@192.168.10.159:/1TBHDD/ikong/taobin_project
|
||||
url = ssh://ikong@192.168.10.159/1TBHDD/ikong/taobin_project
|
||||
branch = masterpiece
|
||||
|
|
|
|||
|
|
@ -131,13 +131,20 @@ const routes: Routes = [
|
|||
permissionsGuard(UserPermissions.THAI_PERMISSION),
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: 'log',
|
||||
// loadComponent: () =>
|
||||
// import('./features/changelog/changelog.component').then(
|
||||
// (m) => m.ChangelogComponent
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
path: 'log',
|
||||
loadComponent: () =>
|
||||
import('./features/changelog/changelog.component').then(
|
||||
(m) => m.ChangelogComponent
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'materials',
|
||||
loadComponent: () =>
|
||||
import('./features/material-settings/material-settings.component').then(
|
||||
(m) => m.MaterialSettingsComponent
|
||||
),
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -39,6 +39,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
|
|||
icon_url: 'assets/icons/logs.svg',
|
||||
link: '/' + this.current_department + '/log',
|
||||
},
|
||||
{
|
||||
name: 'Materials',
|
||||
icon_url: '',
|
||||
link: '/' + this.current_department + '/materials',
|
||||
}
|
||||
];
|
||||
date = new Date();
|
||||
clockSubscription: Subscription | null = null;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="overflow-auto h-[100vh] 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>
|
||||
|
||||
<div class="collapse-content">
|
||||
<div class="grid grid-flow-row grid-cols-7 gap-4">
|
||||
<div class="m-1" *ngFor="let material of allMaterialsGroupedByTypes[cat]">
|
||||
<button class="bg-slate-100 p-2 rounded-md w-44">
|
||||
<p>{{ material.name }} ({{ material.id }})</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- open material settings modal -->
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { CommonModule, NgIf } from '@angular/common';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MaterialService } from 'src/app/core/services/material.service';
|
||||
import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-material-settings',
|
||||
templateUrl: './material-settings.component.html',
|
||||
standalone: true,
|
||||
imports: [
|
||||
NgIf,
|
||||
CommonModule
|
||||
]
|
||||
})
|
||||
export class MaterialSettingsComponent implements OnInit {
|
||||
// material settings
|
||||
allMaterials:
|
||||
| {
|
||||
materialId: number;
|
||||
name: string;
|
||||
nameEN: string;
|
||||
type: string;
|
||||
}[]
|
||||
| null = [];
|
||||
|
||||
allMaterialsGroupedByTypes: { [key: string]: any[] } = {};
|
||||
|
||||
constructor(private _materialService: MaterialService) {}
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
// do fetch material settings
|
||||
(await this._materialService.getFullMaterialDetail()).subscribe((data) => {
|
||||
this.allMaterials = data;
|
||||
this.allMaterialsGroupedByTypes = this.ListCategory();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------ Functions ---------------------
|
||||
|
||||
// filter material by type
|
||||
ListCategory = () => {
|
||||
let catMap: { [key: string]: any[] } = {
|
||||
others: [],
|
||||
};
|
||||
|
||||
// create category map
|
||||
getCategories().forEach((category) => {
|
||||
catMap[category] = [];
|
||||
});
|
||||
|
||||
console.log('generated category', catMap);
|
||||
|
||||
this.allMaterials!.forEach((mat) => {
|
||||
let category = getMaterialType(mat.materialId);
|
||||
// try again
|
||||
if(category == 'others'){
|
||||
// find min
|
||||
// console.log(Math.floor(mat.materialId / 1000) );
|
||||
let interCode = Math.floor(mat.materialId / 10000) * 10000;
|
||||
let originalCode = mat.materialId - (interCode);
|
||||
|
||||
// console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode);
|
||||
category = getMaterialType(originalCode);
|
||||
// console.log("get original category of inter", category);
|
||||
}
|
||||
|
||||
if (Array.isArray(catMap[category])) {
|
||||
catMap[category].push({
|
||||
id: mat.materialId,
|
||||
name: mat.name,
|
||||
nameEN: mat.nameEN,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return catMap;
|
||||
};
|
||||
|
||||
// list all categories
|
||||
getCategories = () => {
|
||||
return getCategories();
|
||||
}
|
||||
}
|
||||
|
|
@ -29,6 +29,9 @@
|
|||
(click)="openMaterialList(i)"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<!-- TODO: do support en name -->
|
||||
|
||||
<td class="font-medium text-gray-900 whitespace-nowrap sticky">
|
||||
<input type="text" class="input" formControlName="name" />
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import {
|
|||
} from 'src/app/shared/helpers/recipe';
|
||||
|
||||
import { RecipeToppingComponent } from '../recipe-topping/recipe-topping.component';
|
||||
import Lang from 'src/app/shared/helpers/lang';
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-list',
|
||||
|
|
@ -49,7 +50,7 @@ export class RecipeListComponent implements OnInit {
|
|||
materialList: MaterialCode[] = [];
|
||||
|
||||
fullMaterialList:
|
||||
| { materialId: number; name: string; type: string }[]
|
||||
| { materialId: number; name: string; nameEN: string;type: string }[]
|
||||
| null = [];
|
||||
showMaterialSelector: boolean = false;
|
||||
|
||||
|
|
@ -57,7 +58,7 @@ export class RecipeListComponent implements OnInit {
|
|||
|
||||
isMatLoaded: boolean = false;
|
||||
|
||||
categoriedMaterial: { [key: string]: { id: number; name: string }[] } = {};
|
||||
categoriedMaterial: { [key: string]: { id: number; name: string; nameEN: string }[] } = {};
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
// string params
|
||||
|
|
@ -405,6 +406,7 @@ export class RecipeListComponent implements OnInit {
|
|||
catMap[category].push({
|
||||
id: mat.materialId,
|
||||
name: mat.name,
|
||||
nameEN: mat.nameEN,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -571,4 +573,19 @@ export class RecipeListComponent implements OnInit {
|
|||
// trigger emitter
|
||||
this.recipeListFormChange.emit([this.toppingList, this.recipeListData.value]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// language handler
|
||||
async displayLang(material: any){
|
||||
let currLang = await Lang.getCurrentLanguage();
|
||||
|
||||
if(currLang == 'th'){
|
||||
return material.name;
|
||||
} else {
|
||||
return material.nameEN;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
<!-- <table class="table" [formGroup]="toppingForm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Slot (Material Id)</th>
|
||||
<th>Is Use</th>
|
||||
<th>Group</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody
|
||||
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>
|
||||
<td class="px-6 py-4">
|
||||
<ng-select
|
||||
[clearable]="false"
|
||||
[compareWith]="this.compareFunc"
|
||||
formControlName="groupID"
|
||||
(close)="getDefaultOfGroup(getGroupIdByIndex(i))"
|
||||
>
|
||||
<ng-option
|
||||
*ngFor="let item of allToppingsDefinitions"
|
||||
[value]="item.groupId.toString()"
|
||||
>
|
||||
<div>{{ item.name }} ({{ item.groupId }})</div>
|
||||
</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>
|
||||
</tbody>
|
||||
</table> -->
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
// import { NgFor } from '@angular/common';
|
||||
// import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
|
||||
// import {
|
||||
// FormArray,
|
||||
// FormBuilder,
|
||||
// FormsModule,
|
||||
// ReactiveFormsModule,
|
||||
// } from '@angular/forms';
|
||||
// import { forEach, isEqual } from 'lodash';
|
||||
// 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';
|
||||
// import { CommonModule } from '@angular/common';
|
||||
|
||||
// @Component({
|
||||
// selector: 'app-recipe-toppingset',
|
||||
// templateUrl: './recipe-toppingset.component.html',
|
||||
// standalone: true,
|
||||
// imports: [
|
||||
// NgFor,
|
||||
// FormsModule,
|
||||
// ReactiveFormsModule,
|
||||
// CommonModule,
|
||||
// NgSelectModule,
|
||||
// ],
|
||||
// })
|
||||
// export class RecipeToppingsetComponent implements OnInit {
|
||||
// @Input() productCode!: string;
|
||||
// @Output() toppingSetChange = new EventEmitter<unknown[]>();
|
||||
|
||||
// allToppings: Topping | undefined = undefined;
|
||||
|
||||
// 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
|
||||
// ) {}
|
||||
|
||||
// toppingForm = this._formBuilder.group(
|
||||
// {
|
||||
// toppingList: this._formBuilder.array([]),
|
||||
// },
|
||||
// { updateOn: 'blur' }
|
||||
// );
|
||||
|
||||
// get toppingList(): FormArray {
|
||||
// return this.toppingForm.get('toppingList') as FormArray;
|
||||
// }
|
||||
|
||||
// async ngOnInit(): Promise<void> {
|
||||
// this._toppingService
|
||||
// .getToppingsOfRecipe(
|
||||
// await this._recipeService.getCurrentCountry(),
|
||||
// this._recipeService.getCurrentFile(),
|
||||
// this.productCode
|
||||
// )
|
||||
// .subscribe((data) => {
|
||||
// // this.toppingForm.patchValue({toppingList: data});
|
||||
// this._toppingSetOriginalArray = data;
|
||||
|
||||
// data.forEach((toppingSet: ToppingSet) => {
|
||||
// this.toppingList.push(
|
||||
// this._formBuilder.group({
|
||||
// isUse: toppingSet.isUse,
|
||||
// groupID: toppingSet.groupID,
|
||||
// defaultIDSelect: toppingSet.defaultIDSelect,
|
||||
// ListGroupID: toppingSet.ListGroupID,
|
||||
// })
|
||||
// );
|
||||
// });
|
||||
|
||||
// // console.log('controls', this.toppingList.controls);
|
||||
|
||||
// // this.toppingSetChange.emit(this.toppingSetList);
|
||||
// });
|
||||
|
||||
// // fetch all toppings : group and list
|
||||
// this._toppingService
|
||||
// .getToppings(
|
||||
// await this._recipeService.getCurrentCountry(),
|
||||
// this._recipeService.getCurrentFile()
|
||||
// )
|
||||
// .subscribe((data) => {
|
||||
// this.allToppings = data;
|
||||
// // console.log('allToppings', data);
|
||||
|
||||
// data.ToppingGroup.forEach((group: ToppingGroup) => {
|
||||
// if (this.allToppingsDefinitions != null) {
|
||||
// // this.allToppingsDefinitions = {};
|
||||
// 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) => {
|
||||
// //validator
|
||||
// for (let i = 0; i < value.toppingList!.length; i++) {
|
||||
// let toppingSet = value.toppingList![i] as any;
|
||||
|
||||
// // 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;
|
||||
// } else {
|
||||
// return undefined;
|
||||
// }
|
||||
// }
|
||||
|
||||
// openToppingList(i: any) {
|
||||
// console.log('select', 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;
|
||||
// }
|
||||
|
||||
// getGroupIdByIndex(i: number) {
|
||||
// // console.log("getGroupId",this.toppingList.value![i])
|
||||
// return (this.toppingList.value![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,
|
||||
// };
|
||||
// });
|
||||
|
||||
// getDefaultOfGroup(groupID: any) {
|
||||
// this.toppingList.controls.forEach((control) => {
|
||||
// if ((control.value as any).groupID == groupID) {
|
||||
// let newDefault = this.allToppingsDefinitions!.find(
|
||||
// (x) => x.groupId == groupID
|
||||
// )!.default;
|
||||
// // set new defaultid
|
||||
// control.get('defaultIDSelect')?.setValue(newDefault);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// compareFunc = (a: any, b: any) => a.toString() === b.toString();
|
||||
// }
|
||||
Loading…
Add table
Add a link
Reference in a new issue