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

add display materials WIP

Browse source
This commit is contained in:
pakintada@gmail.com 2024-01-24 16:25:49 +07:00
parent ad8913f3c5
commit e6f5d152f0
9 changed files with 151 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/app/app-routing.module.ts
View file

@ -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
),
}
],
},
{

5
client/src/app/core/layout/layout.component.ts
View file

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

25
client/src/app/features/material-settings/material-settings.component.html Normal file
View file

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

84
client/src/app/features/material-settings/material-settings.component.ts Normal file
View file

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

3
client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html
View file

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

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

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

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

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

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

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