update env
This commit is contained in:
Kenta420
parent
0431f7d871
commit
e5eee656d5
5 changed files with 143 additions and 83 deletions
|
|
@ -6,21 +6,18 @@
|
|||
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
|
||||
<div class="flex flex-wrap">
|
||||
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
||||
{{ originalRecipeDetail.recipe.name }}
|
||||
{{ recipeMetaData!.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">
|
||||
{{ originalRecipeDetail.recipe.productCode }}
|
||||
{{ recipeMetaData!.productCode }}
|
||||
</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">
|
||||
{{
|
||||
originalRecipeDetail.recipe.lastModified
|
||||
| date : "dd/MM/yyyy HH:mm:ss"
|
||||
}}
|
||||
{{ recipeMetaData!.lastModified | date : "dd/MM/yyyy HH:mm:ss" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,9 +109,7 @@
|
|||
<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]="originalRecipeDetail.recipe.recipes"
|
||||
></app-recipe-list>
|
||||
<app-recipe-list [recipeListData]="matForRecipeList"></app-recipe-list>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Component, EventEmitter, OnInit } from '@angular/core';
|
|||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { isEqual } from 'lodash';
|
||||
import { finalize } from 'rxjs';
|
||||
import { BehaviorSubject, 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';
|
||||
|
|
@ -37,7 +37,12 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
title: string = 'Recipe Detail';
|
||||
recipeMetaData: RecipeMetaData | null = null;
|
||||
|
||||
originalRecipeDetail!: RecipeDetail;
|
||||
originalRecipeDetail: BehaviorSubject<RecipeDetail | null> =
|
||||
new BehaviorSubject<RecipeDetail | null>(null);
|
||||
|
||||
matForRecipeList = this.originalRecipeDetail.pipe(
|
||||
map((x) => x?.recipe.recipes)
|
||||
);
|
||||
|
||||
isLoaded: boolean = false;
|
||||
isMatLoaded: boolean = false;
|
||||
|
|
@ -78,7 +83,7 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
});
|
||||
this.originalRecipeDetail = {
|
||||
this.originalRecipeDetail.next({
|
||||
recipe: {
|
||||
lastModified: recipe.LastChange,
|
||||
productCode: recipe.productCode,
|
||||
|
|
@ -92,71 +97,81 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
disable: recipe.disable,
|
||||
},
|
||||
recipes: recipe.recipes,
|
||||
};
|
||||
});
|
||||
this.recipeMetaData = recipeMetaData;
|
||||
this.isLoaded = true;
|
||||
|
||||
const ids = this.originalRecipeDetail.recipes?.map(
|
||||
(recipe) => recipe.materialPathId
|
||||
);
|
||||
|
||||
this._materialService.getMaterialCodes(ids).subscribe((data) => {
|
||||
this.originalRecipeDetail.recipe.recipes = recipe.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;
|
||||
});
|
||||
});
|
||||
|
||||
this.originalRecipeDetail.subscribe((originalRecipeDetail) => {
|
||||
if (originalRecipeDetail == null) return;
|
||||
|
||||
const ids = originalRecipeDetail.recipes?.map(
|
||||
(recipe) => recipe.materialPathId
|
||||
);
|
||||
|
||||
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>();
|
||||
|
|
@ -197,6 +212,9 @@ export class RecipeDetailsComponent implements OnInit {
|
|||
}
|
||||
|
||||
get isValueChanged() {
|
||||
return !isEqual(this.recipeDetail.value, this.originalRecipeDetail?.recipe);
|
||||
return !isEqual(
|
||||
this.recipeDetail.value,
|
||||
this.originalRecipeDetail.getValue()?.recipe
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
</thead>
|
||||
<tbody formArrayName="recipes">
|
||||
<tr
|
||||
*ngFor="let mat of recipeListData"
|
||||
*ngFor="let mat of recipeListDataForm.controls; let i = index"
|
||||
class="bg-white la border-b hover:bg-secondary"
|
||||
>
|
||||
<div>
|
||||
<div formGroupName="i">
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm"
|
||||
[disabled]="mat.enable"
|
||||
formControlName="enable"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,65 @@
|
|||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import {
|
||||
FormArray,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
ReactiveFormsModule,
|
||||
} from '@angular/forms';
|
||||
import { BehaviorSubject, Observable, map } from 'rxjs';
|
||||
import { MaterialData } from 'src/app/shared/types/recipe';
|
||||
|
||||
interface RecipeListDataFormGroup {
|
||||
id: FormControl<number | null>;
|
||||
name: FormControl<string | null>;
|
||||
enable: FormControl<boolean | null>;
|
||||
mixOrder: FormControl<number | null>;
|
||||
stirTime: FormControl<number | null>;
|
||||
powderGram: FormControl<number | null>;
|
||||
powderTime: FormControl<number | null>;
|
||||
syrupGram: FormControl<number | null>;
|
||||
syrupTime: FormControl<number | null>;
|
||||
waterCold: FormControl<number | null>;
|
||||
waterHot: FormControl<number | null>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-list',
|
||||
templateUrl: './recipe-list.component.html',
|
||||
standalone: true,
|
||||
imports: [NgIf, NgFor],
|
||||
imports: [NgIf, NgFor, ReactiveFormsModule],
|
||||
})
|
||||
export class RecipeListComponent implements OnInit {
|
||||
@Input({ required: true }) recipeListData: MaterialData[] | undefined;
|
||||
@Input({ required: true }) recipeListData: Observable<
|
||||
MaterialData[] | undefined
|
||||
> = new Observable<MaterialData[] | undefined>(undefined);
|
||||
|
||||
$isLoaded: Observable<boolean> = new BehaviorSubject<boolean>(false);
|
||||
$isLoaded: Observable<boolean> = this.recipeListData.pipe(map((x) => !!x));
|
||||
|
||||
ngOnInit(): void {}
|
||||
recipeListDataForm = new FormArray<FormGroup<RecipeListDataFormGroup>>([]);
|
||||
|
||||
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),
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export const environment = {
|
||||
production: true,
|
||||
api: 'https://recipe.taobin.io:8090/api/',
|
||||
api: 'https://recipe.taobin.io:8090/api',
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue