update recipe detail and recipe detail list
This commit is contained in:
Kenta420
parent
8b45ed53ee
commit
d52cad09fd
16 changed files with 947 additions and 458 deletions
|
|
@ -1,16 +1,16 @@
|
|||
<div class="p-4">
|
||||
<form class="grid grid-cols-3 gap-4 mb-4" [formGroup]="recipeDetail">
|
||||
<form class="grid grid-cols-3 gap-4 mb-4" [formGroup]="recipeDetailForm">
|
||||
<div
|
||||
class="block col-span-1 p-6 bg-white border border-gray-200 rounded-lg shadow"
|
||||
>
|
||||
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
|
||||
<div class="flex flex-wrap">
|
||||
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
||||
{{ recipeDetail.value.name }}
|
||||
{{ recipeDetailForm.getRawValue().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">
|
||||
{{ recipeDetail.value.otherName }}
|
||||
{{ recipeDetailForm.getRawValue().otherName }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
<p class="text-sm text-gray-500">Last Modify</p>
|
||||
<p class="ml-2 text-sm text-gray-900">
|
||||
{{
|
||||
recipeDetail.value.lastModified | date : "dd/MM/yyyy HH:mm:ss"
|
||||
recipeDetailForm.getRawValue().lastModified
|
||||
| date : "dd/MM/yyyy HH:mm:ss"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -109,11 +110,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-3 min-h-[500px] max-h-[500px] overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
|
||||
class="col-span-3 overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
|
||||
>
|
||||
<app-recipe-list
|
||||
[matRecipeList]="materialListIds$"
|
||||
[parentForm]="recipeDetail"
|
||||
[parentForm]="recipeDetailForm"
|
||||
[productCode]="productCode"
|
||||
[actionRecord]="actionRecord"
|
||||
[recipeDetailOriginal]="recipeOriginalDetail"
|
||||
></app-recipe-list>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
|
|
|
|||
|
|
@ -1,32 +1,25 @@
|
|||
import { DatePipe, NgFor, NgIf } from '@angular/common';
|
||||
import { CommonModule, DatePipe } from '@angular/common';
|
||||
import { Component, EventEmitter, OnInit } from '@angular/core';
|
||||
import {
|
||||
FormArray,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { isEqual } from 'lodash';
|
||||
import { BehaviorSubject, Subject, finalize, map } from 'rxjs';
|
||||
import { Observable, first } 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';
|
||||
RecipeDetail,
|
||||
RecipeDetailMat,
|
||||
} from 'src/app/core/models/recipe.model';
|
||||
import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-details',
|
||||
templateUrl: './recipe-details.component.html',
|
||||
standalone: true,
|
||||
imports: [
|
||||
NgIf,
|
||||
NgFor,
|
||||
CommonModule,
|
||||
RouterLink,
|
||||
ReactiveFormsModule,
|
||||
ConfirmModal,
|
||||
|
|
@ -44,88 +37,65 @@ import { MatRecipe } from 'src/app/core/models/recipe.model';
|
|||
})
|
||||
export class RecipeDetailsComponent implements OnInit {
|
||||
title: string = 'Recipe Detail';
|
||||
recipeMetaData: RecipeMetaData | null = null;
|
||||
|
||||
originalRecipeDetail: BehaviorSubject<RecipeDetail | null> =
|
||||
new BehaviorSubject<RecipeDetail | null>(null);
|
||||
|
||||
matForRecipeList = this.originalRecipeDetail.pipe(
|
||||
map((x) => x?.recipe.recipes)
|
||||
);
|
||||
recipeDetail$!: Observable<RecipeDetail>;
|
||||
|
||||
isLoaded: boolean = false;
|
||||
isMatLoaded: boolean = false;
|
||||
|
||||
actionRecord: ActionRecord<RecipeDetail | RecipeDetailMat> =
|
||||
new ActionRecord();
|
||||
|
||||
recipeOriginalDetail!: typeof this.recipeDetailForm.value;
|
||||
|
||||
constructor(
|
||||
private _formBuilder: FormBuilder,
|
||||
private _route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _recipeService: RecipeService
|
||||
) {}
|
||||
|
||||
recipeDetail = new FormGroup({
|
||||
productCode: new FormControl<string>(''),
|
||||
name: new FormControl<string>(''),
|
||||
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),
|
||||
productCode!: string;
|
||||
|
||||
recipeDetailForm = this._formBuilder.group({
|
||||
productCode: '',
|
||||
name: '',
|
||||
otherName: '',
|
||||
description: '',
|
||||
otherDescription: '',
|
||||
lastModified: new Date(),
|
||||
price: 0,
|
||||
isUse: false,
|
||||
isShow: false,
|
||||
disable: false,
|
||||
recipeListData: this._formBuilder.array([]),
|
||||
});
|
||||
|
||||
materialListIds$: Subject<{
|
||||
ids: number[];
|
||||
matRecipeList: MatRecipe[];
|
||||
}> = new Subject<{
|
||||
ids: number[];
|
||||
matRecipeList: MatRecipe[];
|
||||
}>();
|
||||
|
||||
ngOnInit() {
|
||||
this._recipeService
|
||||
.getRecipesById(this._route.snapshot.params['productCode'])
|
||||
.pipe(finalize(() => {}))
|
||||
.subscribe(({ recipe, recipeMetaData }) => {
|
||||
this.title = recipe.name + ' | ' + recipe.productCode;
|
||||
this.recipeDetail.patchValue({
|
||||
productCode: recipe.productCode,
|
||||
name: recipe.name,
|
||||
otherName: recipe.otherName,
|
||||
description: recipe.Description,
|
||||
otherDescription: recipe.otherDescription,
|
||||
lastModified: recipe.LastChange,
|
||||
price: recipe.cashPrice,
|
||||
isUse: recipe.isUse,
|
||||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
});
|
||||
this.originalRecipeDetail.next({
|
||||
recipe: {
|
||||
lastModified: recipe.LastChange,
|
||||
productCode: recipe.productCode,
|
||||
name: recipe.name,
|
||||
otherName: recipe.otherName,
|
||||
description: recipe.Description,
|
||||
otherDescription: recipe.otherDescription,
|
||||
price: recipe.cashPrice,
|
||||
isUse: recipe.isUse,
|
||||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
},
|
||||
recipes: recipe.recipes,
|
||||
});
|
||||
this.productCode = this._route.snapshot.params['productCode'];
|
||||
|
||||
const ids = recipe.recipes?.map((recipe) => recipe.materialPathId);
|
||||
this.materialListIds$.next({
|
||||
ids: ids || [],
|
||||
matRecipeList: recipe.recipes || [],
|
||||
});
|
||||
this.recipeDetail$ = this._recipeService
|
||||
.getRecipeDetail(this.productCode)
|
||||
.pipe(first());
|
||||
this.recipeDetail$.subscribe((detail) => {
|
||||
this.recipeDetailForm.patchValue(detail);
|
||||
this.isLoaded = true;
|
||||
this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
|
||||
});
|
||||
|
||||
this.recipeMetaData = recipeMetaData;
|
||||
this.isLoaded = true;
|
||||
});
|
||||
// snap recipe detail form value
|
||||
|
||||
this.actionRecord.registerOnAddAction((currAction, allAction) => {
|
||||
if (currAction.type === 'recipeListData') {
|
||||
switch (currAction.action) {
|
||||
case 'add':
|
||||
break;
|
||||
case 'delete':
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log('Action Record', allAction);
|
||||
});
|
||||
}
|
||||
|
||||
showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
|
|
@ -137,13 +107,13 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
confirmCallBack: () => {
|
||||
console.log('confirm save');
|
||||
// TODO: update value in targeted recipe
|
||||
this._recipeService.editChanges(
|
||||
this._recipeService.getCurrentCountry(),
|
||||
this._recipeService.getCurrentFile(),
|
||||
{
|
||||
...this.recipeDetail,
|
||||
}
|
||||
);
|
||||
// this._recipeService.editChanges(
|
||||
// this._recipeService.getCurrentCountry(),
|
||||
// this._recipeService.getCurrentFile(),
|
||||
// {
|
||||
// ...this.recipeDetail,
|
||||
// }
|
||||
// );
|
||||
console.log('Sending changes');
|
||||
this._router.navigate(['/recipes']);
|
||||
},
|
||||
|
|
@ -176,8 +146,8 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
|
||||
get isValueChanged() {
|
||||
return !isEqual(
|
||||
this.recipeDetail.value,
|
||||
this.originalRecipeDetail.getValue()?.recipe
|
||||
this.recipeOriginalDetail,
|
||||
this.recipeDetailForm.getRawValue()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<table class="table" [formGroup]="parentForm">
|
||||
<thead>
|
||||
<tr class="bg-gray-200">
|
||||
<th class="px-6 py-3">Enable</th>
|
||||
<th class="px-6 py-3">Action</th>
|
||||
<th class="px-6 py-3">Material ID</th>
|
||||
<th class="px-6 py-3">Material Name</th>
|
||||
<th class="px-6 py-3">MixOrder</th>
|
||||
|
|
@ -11,55 +11,57 @@
|
|||
<th class="px-6 py-3">Syrup Gram</th>
|
||||
<th class="px-6 py-3">Syrup Time</th>
|
||||
<th class="px-6 py-3">Water Cold</th>
|
||||
<th class="px-6 py-3">Water Hot</th>
|
||||
<th class="px-6 py-3">Water Yield</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody formArrayName="recipes" *ngIf="isMatLoaded">
|
||||
<tr
|
||||
*ngFor="let mat of recipeListData.controls; let i = index"
|
||||
class="bg-white la border-b hover:bg-secondary"
|
||||
>
|
||||
<div formGroupName="{{ i }}">
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm"
|
||||
formControlName="enable"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="id" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="name" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="mixOrder" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="stirTime" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="powderGram" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="powderTime" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="SyrupGram" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="SyrupTime" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="waterCold" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="waterHot" />
|
||||
</td>
|
||||
</div>
|
||||
<tbody
|
||||
formArrayName="recipeListData"
|
||||
*ngFor="let mat of recipeListData.controls; let i = index"
|
||||
>
|
||||
<tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
(click)="deleteRecipeData(i)"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary" (click)="addRecipeData()" type="button">
|
||||
Add
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="materialID" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="name" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="mixOrder" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="powderGram" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="powderTime" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="syrupGram" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="syrupTime" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="waterCold" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="waterYield" />
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<input type="text" class="input" formControlName="stirTime" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,18 @@ import { NgFor, NgIf } from '@angular/common';
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import {
|
||||
FormArray,
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { Observable } from 'rxjs';
|
||||
import { MatRecipe } from 'src/app/core/models/recipe.model';
|
||||
import { MaterialService } from 'src/app/core/services/material.service';
|
||||
import { first } from 'rxjs';
|
||||
import {
|
||||
RecipeDetail,
|
||||
RecipeDetailMat,
|
||||
} from 'src/app/core/models/recipe.model';
|
||||
import { RecipeService } from 'src/app/core/services/recipe.service';
|
||||
import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
|
||||
|
||||
export interface RecipeListDataFormGroup {
|
||||
id: FormControl<number | null>;
|
||||
|
|
@ -31,97 +36,86 @@ export interface RecipeListDataFormGroup {
|
|||
imports: [NgIf, NgFor, ReactiveFormsModule],
|
||||
})
|
||||
export class RecipeListComponent implements OnInit {
|
||||
@Input({ required: true }) matRecipeList!: Observable<{
|
||||
ids: number[];
|
||||
matRecipeList: MatRecipe[];
|
||||
}>;
|
||||
|
||||
@Input({ required: true }) parentForm!: FormGroup;
|
||||
@Input({ required: true }) actionRecord!: ActionRecord<
|
||||
RecipeDetail | RecipeDetailMat
|
||||
>;
|
||||
|
||||
recipeListData!: FormArray<FormGroup<RecipeListDataFormGroup>>;
|
||||
@Input({ required: true }) recipeDetailOriginal!: any;
|
||||
|
||||
@Input({ required: true }) productCode!: string;
|
||||
|
||||
isMatLoaded: boolean = false;
|
||||
|
||||
constructor(private _materialService: MaterialService) {}
|
||||
constructor(
|
||||
private _recipeService: RecipeService,
|
||||
private _formBuilder: FormBuilder
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
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._recipeService
|
||||
.getRecipeDetailMat(this.productCode)
|
||||
.pipe(first())
|
||||
.subscribe(({ result }) => {
|
||||
if (this.recipeDetailOriginal)
|
||||
this.recipeDetailOriginal.recipeListData = result;
|
||||
else this.recipeDetailOriginal = { recipeListData: result };
|
||||
result.forEach((recipeDetailMat: RecipeDetailMat) => {
|
||||
this.recipeListData.push(
|
||||
this._formBuilder.group({
|
||||
materialID: recipeDetailMat.materialID,
|
||||
name: recipeDetailMat.name,
|
||||
enable: recipeDetailMat.isUse,
|
||||
mixOrder: recipeDetailMat.mixOrder,
|
||||
stirTime: recipeDetailMat.stirTime,
|
||||
powderGram: recipeDetailMat.powderGram,
|
||||
powderTime: recipeDetailMat.powderTime,
|
||||
syrupGram: recipeDetailMat.syrupGram,
|
||||
syrupTime: recipeDetailMat.syrupTime,
|
||||
waterCold: recipeDetailMat.waterCold,
|
||||
waterYield: recipeDetailMat.waterYield,
|
||||
})
|
||||
);
|
||||
});
|
||||
this.isMatLoaded = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get recipeListData(): FormArray {
|
||||
return this.parentForm.get('recipeListData') as FormArray;
|
||||
}
|
||||
|
||||
addRecipeData(): void {
|
||||
const newRecipeDetailMat: RecipeDetailMat = {
|
||||
materialID: 0,
|
||||
name: '',
|
||||
mixOrder: 0,
|
||||
feedParameter: 0,
|
||||
feedPattern: 0,
|
||||
isUse: false,
|
||||
materialPathId: 0,
|
||||
powderGram: 0,
|
||||
powderTime: 0,
|
||||
stirTime: 0,
|
||||
syrupGram: 0,
|
||||
syrupTime: 0,
|
||||
waterCold: 0,
|
||||
waterYield: 0,
|
||||
};
|
||||
this.recipeListData.push(this._formBuilder.group(newRecipeDetailMat));
|
||||
this.actionRecord.addAction(
|
||||
new Action('add', newRecipeDetailMat, 'recipeListData')
|
||||
);
|
||||
}
|
||||
|
||||
deleteRecipeData(index: number): void {
|
||||
const recipeDetailMat: RecipeDetailMat =
|
||||
this.recipeListData.at(index).value;
|
||||
|
||||
this.recipeListData.removeAt(index);
|
||||
|
||||
this.actionRecord.addAction(
|
||||
new Action('delete', recipeDetailMat, 'recipeListData')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,17 @@
|
|||
class="relative overflow-auto max-h-[900px] shadow-md sm:rounded-lg"
|
||||
#table
|
||||
>
|
||||
<table *ngIf="isLoaded" class="table">
|
||||
<table class="table">
|
||||
<caption class="p-5 text-lg font-semibold text-left text-gray-900">
|
||||
<div class="divide-y divide-solid divide-gray-400">
|
||||
<div
|
||||
class="divide-y divide-solid divide-gray-400"
|
||||
*ngIf="recipesDashboard$ | async as recipesDashboard; else loading"
|
||||
>
|
||||
<div class="flex flex-row py-3 justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
>Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
|
||||
{{ currentFile }}</span
|
||||
>Recipe Version {{ recipesDashboard.configNumber }} |
|
||||
{{ recipesDashboard.filename }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col ml-5">
|
||||
|
|
@ -106,7 +109,9 @@
|
|||
<div class="flex flex-col ml-auto">
|
||||
<span class=""
|
||||
>Last Updated:
|
||||
{{ recipes?.Timestamp | date : "dd-MMM-yyyy hh:mm:ss" }}</span
|
||||
{{
|
||||
recipesDashboard.configNumber | date : "dd-MMM-yyyy hh:mm:ss"
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,7 +204,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
*ngFor="let recipe of recipes01"
|
||||
*ngFor="let recipe of recipeOverviewList"
|
||||
class="bg-white la border-b hover:bg-secondary"
|
||||
>
|
||||
<th>
|
||||
|
|
@ -219,9 +224,9 @@
|
|||
{{ recipe.name }}
|
||||
</td>
|
||||
<td class="px-6 py-4">{{ recipe.otherName }}</td>
|
||||
<td class="px-6 py-4 flex-wrap max-w-xs">{{ recipe.Description }}</td>
|
||||
<td class="px-6 py-4 flex-wrap max-w-xs">{{ recipe.description }}</td>
|
||||
<td class="px-6 py-4">
|
||||
{{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
|
||||
{{ recipe.lastUpdated | date : "dd-MMM-yyyy hh:mm:ss" }}
|
||||
</td>
|
||||
<td class="px-4 py-4 flex">
|
||||
<!-- <recipe-modal productCode="{{ recipe.productCode }}"></recipe-modal> -->
|
||||
|
|
@ -249,7 +254,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div *ngIf="!isLoaded">
|
||||
<ng-template #loading>
|
||||
<div
|
||||
class="flex w-full items-center justify-center h-56 border border-gray-200 rounded-lg bg-gray-50"
|
||||
>
|
||||
|
|
@ -272,7 +277,7 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<button
|
||||
class="btn btn-circle fixed z-100 bottom-5 right-1"
|
||||
|
|
|
|||
|
|
@ -6,11 +6,23 @@ import {
|
|||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { CommonModule, DatePipe } from '@angular/common';
|
||||
import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
|
||||
import {
|
||||
Recipe,
|
||||
Recipe01,
|
||||
RecipeOverview,
|
||||
RecipesDashboard,
|
||||
} from 'src/app/core/models/recipe.model';
|
||||
import { RecipeService } from 'src/app/core/services/recipe.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { RecipeModalComponent } from 'src/app/shared/modal/recipe-details/recipe-modal.component';
|
||||
import { BehaviorSubject, Subscription, map } from 'rxjs';
|
||||
import {
|
||||
BehaviorSubject,
|
||||
Observable,
|
||||
Subscription,
|
||||
finalize,
|
||||
map,
|
||||
tap,
|
||||
} from 'rxjs';
|
||||
import * as lodash from 'lodash';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
|
|
@ -31,9 +43,8 @@ import { MaterialService } from 'src/app/core/services/material.service';
|
|||
templateUrl: './recipes.component.html',
|
||||
})
|
||||
export class RecipesComponent implements OnInit, OnDestroy {
|
||||
recipes: Recipe | null = null;
|
||||
recipes01: Recipe01[] | null = null;
|
||||
currentFile: string = '';
|
||||
recipesDashboard$!: Observable<RecipesDashboard>;
|
||||
recipeOverviewList!: RecipeOverview[];
|
||||
selectMaterialFilter: number[] | null = null;
|
||||
materialList: { id: number; name: string | number }[] | null = null;
|
||||
|
||||
|
|
@ -47,8 +58,8 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
private offset = 0;
|
||||
private take = 20;
|
||||
|
||||
isLoaded: boolean = false;
|
||||
isLoadMore: boolean = false;
|
||||
// isLoaded: boolean = false;
|
||||
isLoadMore: boolean = true;
|
||||
isHasMore: boolean = true;
|
||||
|
||||
private searchStr = '';
|
||||
|
|
@ -72,7 +83,7 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
if (isBottom && !this.isLoadMore) {
|
||||
this.isLoadMore = true;
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
.getRecipeOverview({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
search: this.oldSearchStr,
|
||||
|
|
@ -80,21 +91,16 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
country: this._recipeService.getCurrentCountry(),
|
||||
materialIds: this.selectMaterialFilter || [],
|
||||
})
|
||||
.subscribe(({ recipes, hasMore, fileName }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
if (this.recipes01 && this.isHasMore) {
|
||||
this.recipes01 = [...this.recipes01, ...Recipe01];
|
||||
.subscribe(({ result, hasMore, totalCount }) => {
|
||||
if (this.recipeOverviewList) {
|
||||
this.recipeOverviewList =
|
||||
this.recipeOverviewList.concat(result);
|
||||
} else {
|
||||
this.recipes01 = Recipe01;
|
||||
this.recipeOverviewList = result;
|
||||
}
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.currentFile = fileName;
|
||||
this.offset += 10;
|
||||
this.isLoadMore = false;
|
||||
this.isHasMore = hasMore;
|
||||
this.isLoadMore = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -108,31 +114,30 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
search: this.oldSearchStr,
|
||||
this.recipesDashboard$ = this._recipeService
|
||||
.getRecipesDashboard({
|
||||
filename: this._recipeService.getCurrentFile(),
|
||||
country: this._recipeService.getCurrentCountry(),
|
||||
materialIds: this.selectMaterialFilter || [],
|
||||
})
|
||||
.subscribe(({ recipes, hasMore, fileName }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
if (this.recipes01 && this.isHasMore) {
|
||||
this.recipes01 = [...this.recipes01, ...Recipe01];
|
||||
} else {
|
||||
this.recipes01 = Recipe01;
|
||||
}
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.currentFile = fileName;
|
||||
this.offset += 10;
|
||||
this.isLoaded = true;
|
||||
this.isHasMore = hasMore;
|
||||
});
|
||||
.pipe(
|
||||
finalize(() => {
|
||||
this._recipeService
|
||||
.getRecipeOverview({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
search: this.oldSearchStr,
|
||||
filename: this._recipeService.getCurrentFile(),
|
||||
country: this._recipeService.getCurrentCountry(),
|
||||
materialIds: this.selectMaterialFilter || [],
|
||||
})
|
||||
.subscribe(({ result, hasMore, totalCount }) => {
|
||||
this.recipeOverviewList = result;
|
||||
this.offset += 10;
|
||||
this.isHasMore = hasMore;
|
||||
this.isLoadMore = false;
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
this._materialService
|
||||
.getMaterialCodes()
|
||||
|
|
@ -157,28 +162,22 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
|
||||
search(event: Event) {
|
||||
this.offset = 0;
|
||||
this.isLoadMore = true;
|
||||
this.oldSearchStr = this.searchStr;
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
.getRecipeOverview({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
search: this.searchStr,
|
||||
search: this.oldSearchStr,
|
||||
filename: this._recipeService.getCurrentFile(),
|
||||
country: this._recipeService.getCurrentCountry(),
|
||||
materialIds: this.selectMaterialFilter || [],
|
||||
})
|
||||
.subscribe(({ recipes, hasMore, fileName }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
this.recipes01 = Recipe01;
|
||||
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.currentFile = fileName;
|
||||
.subscribe(({ result, hasMore, totalCount }) => {
|
||||
this.recipeOverviewList = result;
|
||||
this.offset += 10;
|
||||
this.isLoaded = true;
|
||||
this.isHasMore = hasMore;
|
||||
this.isLoadMore = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -282,17 +281,19 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
|
||||
loadRecipe(recipeFileName: string) {
|
||||
// clear all recipes
|
||||
this.recipes = null;
|
||||
this.recipes01 = null;
|
||||
this.offset = 0;
|
||||
this.isLoaded = false;
|
||||
this.isHasMore = true;
|
||||
this.isLoadMore = false;
|
||||
this.isLoadMore = true;
|
||||
this.oldSearchStr = '';
|
||||
localStorage.setItem('currentRecipeFile', recipeFileName);
|
||||
|
||||
this.recipesDashboard$ = this._recipeService.getRecipesDashboard({
|
||||
filename: recipeFileName,
|
||||
country: this.selectedCountry!,
|
||||
});
|
||||
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
.getRecipeOverview({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
search: this.oldSearchStr,
|
||||
|
|
@ -300,21 +301,11 @@ export class RecipesComponent implements OnInit, OnDestroy {
|
|||
country: this.selectedCountry!,
|
||||
materialIds: this.selectMaterialFilter || [],
|
||||
})
|
||||
.subscribe(({ recipes, hasMore, fileName }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
if (this.recipes01 && this.isHasMore) {
|
||||
this.recipes01 = [...this.recipes01, ...Recipe01];
|
||||
} else {
|
||||
this.recipes01 = Recipe01;
|
||||
}
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.currentFile = fileName;
|
||||
.subscribe(({ result, hasMore, totalCount }) => {
|
||||
this.recipeOverviewList = result;
|
||||
this.offset += 10;
|
||||
this.isLoaded = true;
|
||||
this.isHasMore = hasMore;
|
||||
this.isLoadMore = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue