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

want to extract recipe list from recipe detail. But still have no idea about link formControl between 2 component

Browse source
This commit is contained in:
Kenta420 2023-10-18 13:57:13 +07:00
parent 72f27f198d
commit bb29e7de5a
7 changed files with 257 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,43 +3,13 @@ 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 { delay, finalize } from 'rxjs';
import { finalize } from 'rxjs';
import { RecipeService } from 'src/app/core/services/recipe.service';
import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { animate, style, transition, trigger } from '@angular/animations';
import { MatRecipe } from 'src/app/core/models/recipe.model';
import { MaterialService } from 'src/app/core/services/material.service';
interface RecipeDetail {
lastModified: Date;
productCode: string;
name: string;
otherName: string;
description: string;
otherDescription: string;
price: number;
isUse: boolean;
isShow: boolean;
disable: boolean;
recipes: MatRecipe[];
matData?: MaterialData[];
}
interface MaterialData {
id: number;
name: string;
enable: boolean;
}
interface RecipeMetaData {
productCode: string;
name: string;
otherName: string;
description: string;
otherDescription: string;
picture: string;
}
import { RecipeMetaData, RecipeDetail } from 'src/app/shared/types/recipe';
import { RecipeListComponent } from './recipe-list/recipe-list.component';
@Component({
selector: 'app-recipe-details',
@ -52,6 +22,7 @@ interface RecipeMetaData {
ReactiveFormsModule,
ConfirmModal,
DatePipe,
RecipeListComponent,
],
animations: [
trigger('inOutAnimation', [
@ -108,35 +79,81 @@ export class RecipeDetailsComponent implements OnInit {
disable: recipe.disable,
});
this.originalRecipeDetail = {
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,
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.recipeMetaData = recipeMetaData;
this.isLoaded = true;
const ids = this.originalRecipeDetail.recipes.map(
const ids = this.originalRecipeDetail.recipes?.map(
(recipe) => recipe.materialPathId
);
this._materialService.getMaterialCodes(ids).subscribe((data) => {
this.originalRecipeDetail.matData = 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.materialID,
name: item.PackageDescription,
enable: false,
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) => (a.id > b.id ? -1 : -1));
.sort((a, b) => {
return a.id === 0 ? 1 : a.id > b.id ? 1 : -1;
});
this.isMatLoaded = true;
});
});
@ -180,6 +197,6 @@ export class RecipeDetailsComponent implements OnInit {
}
get isValueChanged() {
return !isEqual(this.recipeDetail.value, this.originalRecipeDetail);
return !isEqual(this.recipeDetail.value, this.originalRecipeDetail?.recipe);
}
}