update recipe list and disable git pulling

2023-10-31 10:30:06 +07:00 · 2023-10-31 10:30:06 +07:00 · fea5f8452a
commit fea5f8452a
parent 15e74d47e3
7 changed files with 171 additions and 133 deletions
--- a/client/src/app/features/recipes/recipe-details/recipe-details.component.html
+++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.html
@ -6,18 +6,20 @@
      <div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
        <div class="flex flex-wrap">
          <h5 class="mb-2 text-xl font-bold text-gray-900">
-            {{ recipeMetaData!.name }}
+            {{ recipeDetail.value.name }}
          </h5>
          <h5 class="mb-2 px-3 text-xl font-bold text-gray-900">|</h5>
          <h5 class="mb-2 text-xl font-bold text-gray-900">
-            {{ recipeMetaData!.productCode }}
+            {{ recipeDetail.value.otherName }}
          </h5>
        </div>
        <div class="flex items-center mb-2">
          <div class="flex items-center">
            <p class="text-sm text-gray-500">Last Modify</p>
            <p class="ml-2 text-sm text-gray-900">
-              {{ recipeMetaData!.lastModified | date : "dd/MM/yyyy HH:mm:ss" }}
+              {{
+                recipeDetail.value.lastModified | date : "dd/MM/yyyy HH:mm:ss"
+              }}
            </p>
          </div>
        </div>
@ -109,7 +111,10 @@
    <div
      class="col-span-3 min-h-[500px] max-h-[500px] overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
    >
-      <app-recipe-list [recipeListData]="matForRecipeList"></app-recipe-list>
+      <app-recipe-list
+        [matRecipeList]="materialListIds$"
+        [parentForm]="recipeDetail"
+      ></app-recipe-list>
    </div>
    <div class="grid grid-cols-2 gap-4 mb-4">
      <div
--- a/client/src/app/features/recipes/recipe-details/recipe-details.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts
@ -1,15 +1,24 @@
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Component, EventEmitter, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { isEqual } from 'lodash';
-import { BehaviorSubject, finalize, map } from 'rxjs';
+import { BehaviorSubject, Subject, finalize, map } from 'rxjs';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { MaterialService } from 'src/app/core/services/material.service';
 import { RecipeMetaData, RecipeDetail } from 'src/app/shared/types/recipe';
-import { RecipeListComponent } from './recipe-list/recipe-list.component';
+import {
+  RecipeListComponent,
+  RecipeListDataFormGroup,
+} from './recipe-list/recipe-list.component';
+import { MatRecipe } from 'src/app/core/models/recipe.model';

@Component({
  selector: 'app-recipe-details',
@ -50,8 +59,7 @@ export class RecipeDetailsComponent implements OnInit {
  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
-    private _recipeService: RecipeService,
-    private _materialService: MaterialService
+    private _recipeService: RecipeService
  ) {}

  recipeDetail = new FormGroup({
@ -60,12 +68,21 @@ export class RecipeDetailsComponent implements OnInit {
    otherName: new FormControl<string>(''),
    description: new FormControl<string>(''),
    otherDescription: new FormControl<string>(''),
+    lastModified: new FormControl<Date>(new Date()),
    price: new FormControl<number>(0),
    isUse: new FormControl<boolean>(false),
    isShow: new FormControl<boolean>(false),
    disable: new FormControl<boolean>(false),
  });

+  materialListIds$: Subject<{
+    ids: number[];
+    matRecipeList: MatRecipe[];
+  }> = new Subject<{
+    ids: number[];
+    matRecipeList: MatRecipe[];
+  }>();
+
  ngOnInit() {
    this._recipeService
      .getRecipesById(this._route.snapshot.params['productCode'])
@ -78,6 +95,7 @@ export class RecipeDetailsComponent implements OnInit {
          otherName: recipe.otherName,
          description: recipe.Description,
          otherDescription: recipe.otherDescription,
+          lastModified: recipe.LastChange,
          price: recipe.cashPrice,
          isUse: recipe.isUse,
          isShow: recipe.isShow,
@ -98,84 +116,16 @@ export class RecipeDetailsComponent implements OnInit {
          },
          recipes: recipe.recipes,
        });
+
+        const ids = recipe.recipes?.map((recipe) => recipe.materialPathId);
+        this.materialListIds$.next({
+          ids: ids || [],
+          matRecipeList: recipe.recipes || [],
+        });
+
        this.recipeMetaData = recipeMetaData;
        this.isLoaded = true;
      });
-
-    this.originalRecipeDetail.subscribe((originalRecipeDetail) => {
-      if (originalRecipeDetail == null) return;
-
-      const ids = originalRecipeDetail.recipes?.map(
-        (recipe) => recipe.materialPathId
-      );
-
-      if (originalRecipeDetail.recipe.recipes != null) {
-        return;
-      }
-
-      this._materialService.getMaterialCodes(ids).subscribe((data) => {
-        this.originalRecipeDetail.next({
-          ...originalRecipeDetail,
-          recipe: {
-            ...originalRecipeDetail.recipe,
-            recipes: originalRecipeDetail
-              .recipes!.map((item) => {
-                for (let i = 0; i < data.length; i++) {
-                  if (item.materialPathId === 0) {
-                    return {
-                      id: 0,
-                      name: '',
-                      enable: item.isUse,
-                      mixOrder: item.MixOrder,
-                      stirTime: item.stirTime,
-                      powderGram: item.powderGram,
-                      powderTime: item.powderTime,
-                      syrupGram: item.syrupGram,
-                      syrupTime: item.syrupTime,
-                      waterCold: item.waterCold,
-                      waterHot: item.waterYield,
-                    };
-                  }
-
-                  if (item.materialPathId === data[i].materialID) {
-                    return {
-                      id: data[i].materialID,
-                      name: data[i].PackageDescription,
-                      enable: item.isUse,
-                      mixOrder: item.MixOrder,
-                      stirTime: item.stirTime,
-                      powderGram: item.powderGram,
-                      powderTime: item.powderTime,
-                      syrupGram: item.syrupGram,
-                      syrupTime: item.syrupTime,
-                      waterCold: item.waterCold,
-                      waterHot: item.waterYield,
-                    };
-                  }
-                }
-
-                return {
-                  id: item.materialPathId,
-                  name: '',
-                  enable: item.isUse,
-                  mixOrder: item.MixOrder,
-                  stirTime: item.stirTime,
-                  powderGram: item.powderGram,
-                  powderTime: item.powderTime,
-                  syrupGram: item.syrupGram,
-                  syrupTime: item.syrupTime,
-                  waterCold: item.waterCold,
-                  waterHot: item.waterYield,
-                };
-              })
-              .sort((a, b) => {
-                return a.id === 0 ? 1 : a.id > b.id ? 1 : -1;
-              }),
-          },
-        });
-        this.isMatLoaded = true;
-      });
-    });
  }

  showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
--- 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
@ -1,4 +1,4 @@
-<table class="table" *ngIf="$isLoaded; else indicator">
+<table class="table" [formGroup]="parentForm">
  <thead>
    <tr class="bg-gray-200">
      <th class="px-6 py-3">Enable</th>
@ -14,12 +14,12 @@
      <th class="px-6 py-3">Water Hot</th>
    </tr>
  </thead>
-  <tbody formArrayName="recipes">
+  <tbody formArrayName="recipes" *ngIf="isMatLoaded">
    <tr
-      *ngFor="let mat of recipeListDataForm.controls; let i = index"
+      *ngFor="let mat of recipeListData.controls; let i = index"
      class="bg-white la border-b hover:bg-secondary"
    >
-      <div formGroupName="i">
+      <div formGroupName="{{ i }}">
        <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
          <label>
            <input
@ -63,8 +63,3 @@
    </tr>
  </tbody>
 </table>
-<ng-template #indicator>
-  <div class="flex w-full h-full justify-center items-center">
-    <span class="loading loading-spinner w-20"></span>
-  </div>
-</ng-template>
--- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
+++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
@ -6,10 +6,11 @@ import {
  FormGroup,
  ReactiveFormsModule,
 } from '@angular/forms';
-import { BehaviorSubject, Observable, map } from 'rxjs';
-import { MaterialData } from 'src/app/shared/types/recipe';
+import { Observable } from 'rxjs';
+import { MatRecipe } from 'src/app/core/models/recipe.model';
+import { MaterialService } from 'src/app/core/services/material.service';

-interface RecipeListDataFormGroup {
+export interface RecipeListDataFormGroup {
  id: FormControl<number | null>;
  name: FormControl<string | null>;
  enable: FormControl<boolean | null>;
@ -30,36 +31,97 @@ interface RecipeListDataFormGroup {
  imports: [NgIf, NgFor, ReactiveFormsModule],
 })
 export class RecipeListComponent implements OnInit {
-  @Input({ required: true }) recipeListData: Observable<
-    MaterialData[] | undefined
-  > = new Observable<MaterialData[] | undefined>(undefined);
+  @Input({ required: true }) matRecipeList!: Observable<{
+    ids: number[];
+    matRecipeList: MatRecipe[];
+  }>;

-  $isLoaded: Observable<boolean> = this.recipeListData.pipe(map((x) => !!x));
+  @Input({ required: true }) parentForm!: FormGroup;

-  recipeListDataForm = new FormArray<FormGroup<RecipeListDataFormGroup>>([]);
+  recipeListData!: FormArray<FormGroup<RecipeListDataFormGroup>>;
+
+  isMatLoaded: boolean = false;
+
+  constructor(private _materialService: MaterialService) {}

  ngOnInit(): void {
-    this.recipeListData.subscribe((x) => {
-      if (x) {
-        for (let recipe of x) {
-          const x = new FormControl<number>(0);
-          this.recipeListDataForm.push(
-            new FormGroup<RecipeListDataFormGroup>({
-              id: new FormControl<number>(recipe.id),
-              name: new FormControl<string>(recipe.name),
-              enable: new FormControl<boolean>(recipe.enable),
-              mixOrder: new FormControl<number>(recipe.mixOrder),
-              stirTime: new FormControl<number>(recipe.stirTime),
-              powderGram: new FormControl<number>(recipe.powderGram),
-              powderTime: new FormControl<number>(recipe.powderTime),
-              syrupGram: new FormControl<number>(recipe.syrupGram),
-              syrupTime: new FormControl<number>(recipe.syrupTime),
-              waterCold: new FormControl<number>(recipe.waterCold),
-              waterHot: new FormControl<number>(recipe.waterHot),
-            })
-          );
-        }
-      }
+    this.matRecipeList.subscribe((x) => {
+      this._materialService.getMaterialCodes(x.ids).subscribe((data) => {
+        const matList = x.matRecipeList
+          .map((item) => {
+            for (let i = 0; i < data.length; i++) {
+              if (item.materialPathId === 0) {
+                return {
+                  id: 0,
+                  name: '',
+                  enable: item.isUse,
+                  mixOrder: item.MixOrder,
+                  stirTime: item.stirTime,
+                  powderGram: item.powderGram,
+                  powderTime: item.powderTime,
+                  syrupGram: item.syrupGram,
+                  syrupTime: item.syrupTime,
+                  waterCold: item.waterCold,
+                  waterHot: item.waterYield,
+                };
+              }
+
+              if (item.materialPathId === data[i].materialID) {
+                return {
+                  id: data[i].materialID,
+                  name: data[i].PackageDescription,
+                  enable: item.isUse,
+                  mixOrder: item.MixOrder,
+                  stirTime: item.stirTime,
+                  powderGram: item.powderGram,
+                  powderTime: item.powderTime,
+                  syrupGram: item.syrupGram,
+                  syrupTime: item.syrupTime,
+                  waterCold: item.waterCold,
+                  waterHot: item.waterYield,
+                };
+              }
+            }
+
+            return {
+              id: item.materialPathId,
+              name: '',
+              enable: item.isUse,
+              mixOrder: item.MixOrder,
+              stirTime: item.stirTime,
+              powderGram: item.powderGram,
+              powderTime: item.powderTime,
+              syrupGram: item.syrupGram,
+              syrupTime: item.syrupTime,
+              waterCold: item.waterCold,
+              waterHot: item.waterYield,
+            };
+          })
+          .sort((a, b) => {
+            return a.id === 0 ? 1 : a.id > b.id ? 1 : -1;
+          });
+
+        this.recipeListData = new FormArray<FormGroup<RecipeListDataFormGroup>>(
+          matList.map((item) => {
+            return new FormGroup<RecipeListDataFormGroup>({
+              id: new FormControl<number>(item.id),
+              name: new FormControl<string>(item.name),
+              enable: new FormControl<boolean>(item.enable),
+              mixOrder: new FormControl<number>(item.mixOrder),
+              stirTime: new FormControl<number>(item.stirTime),
+              powderGram: new FormControl<number>(item.powderGram),
+              powderTime: new FormControl<number>(item.powderTime),
+              syrupGram: new FormControl<number>(item.syrupGram),
+              syrupTime: new FormControl<number>(item.syrupTime),
+              waterCold: new FormControl<number>(item.waterCold),
+              waterHot: new FormControl<number>(item.waterHot),
+            });
+          })
+        );
+        this.parentForm.addControl('recipes', this.recipeListData);
+        console.log(this.parentForm);
+        this.isMatLoaded = true;
+      });
    });
  }
 }