131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
import {
|
|
Component,
|
|
ElementRef,
|
|
EventEmitter,
|
|
Input,
|
|
ViewChild,
|
|
} from '@angular/core';
|
|
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
import { isEqual } from 'lodash';
|
|
import { RecipeService } from 'src/app/core/services/recipe.service';
|
|
import { ConfirmModal } from '../confirm/confirm-modal.component';
|
|
|
|
interface RecipeDetail {
|
|
productCode: string;
|
|
name: string;
|
|
otherName: string;
|
|
description: string;
|
|
otherDescription: string;
|
|
price: number;
|
|
isUse: boolean;
|
|
isShow: boolean;
|
|
disable: boolean;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'recipe-modal',
|
|
templateUrl: './recipe-modal.component.html',
|
|
imports: [ReactiveFormsModule, ConfirmModal],
|
|
standalone: true,
|
|
})
|
|
export class RecipeModalComponent {
|
|
@Input({ required: true }) id!: string;
|
|
|
|
title: string = 'Recipe Detail';
|
|
|
|
recipeDetail = new FormGroup({
|
|
productCode: new FormControl<string>(''),
|
|
name: new FormControl<string>(''),
|
|
otherName: new FormControl<string>(''),
|
|
description: new FormControl<string>(''),
|
|
otherDescription: new FormControl<string>(''),
|
|
price: new FormControl<number>(0),
|
|
isUse: new FormControl<boolean>(false),
|
|
isShow: new FormControl<boolean>(false),
|
|
disable: new FormControl<boolean>(false),
|
|
});
|
|
|
|
originalRecipeDetail: RecipeDetail | null = null;
|
|
|
|
private detailModal: ElementRef<HTMLDialogElement> | null = null;
|
|
|
|
@ViewChild('detailModal', { static: false }) set setDetailModal(
|
|
modal: ElementRef
|
|
) {
|
|
this.detailModal = modal;
|
|
}
|
|
|
|
constructor(private recipeService: RecipeService) {}
|
|
|
|
openModal() {
|
|
this.detailModal?.nativeElement.showModal();
|
|
|
|
if (this.detailModal?.nativeElement.open) {
|
|
this.recipeService.getRecipesById(this.id).subscribe((recipe) => {
|
|
this.title = recipe.name + ' | ' + recipe.productCode;
|
|
this.recipeDetail.patchValue(
|
|
{
|
|
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,
|
|
},
|
|
{ emitEvent: false }
|
|
);
|
|
this.originalRecipeDetail = {
|
|
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,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
|
|
showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
|
|
confirmSave = {
|
|
title: 'The changes detected!',
|
|
message: 'Do you want to save changes?',
|
|
confirmCallBack: () => {
|
|
console.log('confirm save');
|
|
this.detailModal?.nativeElement.close();
|
|
},
|
|
};
|
|
|
|
confirmClose = {
|
|
title: 'The changes will be lost!',
|
|
message: 'Do you want to close without saving?',
|
|
confirmCallBack: () => {
|
|
console.log('confirm close');
|
|
this.detailModal?.nativeElement.close();
|
|
},
|
|
};
|
|
|
|
onConfirmSave() {
|
|
if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
|
|
this.showConfirmSaveModal.emit(true);
|
|
} else {
|
|
this.detailModal?.nativeElement.close();
|
|
}
|
|
}
|
|
|
|
onConfirmClose() {
|
|
if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
|
|
this.showConfirmCloseModal.emit(true);
|
|
} else {
|
|
this.detailModal?.nativeElement.close();
|
|
}
|
|
}
|
|
}
|