add display materials WIP

.gitmodules

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

client/src/app/app-routing.module.ts

@@ -131,13 +131,20 @@ const routes: Routes = [
           permissionsGuard(UserPermissions.THAI_PERMISSION),
         ],
       },
-      // {
+      {
-      //   path: 'log',
+        path: 'log',
-      //   loadComponent: () =>
+        loadComponent: () =>
-      //     import('./features/changelog/changelog.component').then(
+          import('./features/changelog/changelog.component').then(
-      //       (m) => m.ChangelogComponent
+            (m) => m.ChangelogComponent
-      //     ),
+          ),
-      // },
+      },
+      {
+        path: 'materials',
+        loadComponent: () =>
+          import('./features/material-settings/material-settings.component').then(
+            (m) => m.MaterialSettingsComponent
+          ),
+      }
     ],
   },
   {

client/src/app/core/layout/layout.component.ts

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

client/src/app/features/material-settings/material-settings.component.html

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

client/src/app/features/material-settings/material-settings.component.ts

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

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

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

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

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

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

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

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

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