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

update recipe detail and recipe detail list

Browse source
This commit is contained in:
Kenta420 2023-11-24 17:47:44 +07:00
parent 8b45ed53ee
commit d52cad09fd
16 changed files with 947 additions and 458 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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