change dashboard -> recipe
This commit is contained in:
Kenta420
parent
e95078307b
commit
36be0426f6
9 changed files with 71 additions and 40 deletions
|
|
@ -0,0 +1,351 @@
|
|||
<div class="p-4">
|
||||
<form class="grid grid-cols-3 gap-4 mb-4" [formGroup]="recipeDetail">
|
||||
<div
|
||||
class="block col-span-1 p-6 bg-white border border-gray-200 rounded-lg shadow"
|
||||
>
|
||||
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
|
||||
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
||||
{{ originalRecipeDetail?.name }} |
|
||||
{{ originalRecipeDetail?.productCode }}
|
||||
</h5>
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex items-center mr-4">
|
||||
<p class="text-sm text-gray-500">สูตร</p>
|
||||
<p class="ml-2 text-sm text-gray-900">
|
||||
{{ originalRecipeDetail?.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="text-sm text-gray-500">ประเภท</p>
|
||||
<p class="ml-2 text-sm text-gray-900">เครื่องดื่ม</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex p-3 items-center justify-center w-full">
|
||||
<img
|
||||
class="rounded-lg shadow"
|
||||
src="/assets/{{ 'bn_hot_america_no' }}.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #indicator>
|
||||
<div class="flex w-full h-full justify-center items-center">
|
||||
<span class="loading loading-spinner w-20"></span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block col-span-2 p-6 bg-white border border-gray-200 rounded-lg shadow min-h-[300px]"
|
||||
>
|
||||
<div
|
||||
*ngIf="isLoaded; else indicator"
|
||||
[@inOutAnimation]
|
||||
class="grid grid-cols-2 gap-4 w-full"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<label class="label"
|
||||
><span class="label-text text-base mr-3 w-max">Name:</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="otherName"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Description:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="description"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Description:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="otherDescription"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row col-span-2 gap-5">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Is Use?</span>
|
||||
<input type="checkbox" class="toggle" formControlName="isUse" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Is Show?</span>
|
||||
<input type="checkbox" class="toggle" formControlName="isShow" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Is Disable?</span>
|
||||
<input type="checkbox" class="toggle" formControlName="disable" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #indicator>
|
||||
<div class="flex w-full h-full justify-center items-center">
|
||||
<span class="loading loading-spinner w-20"></span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
||||
>
|
||||
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sticky bottom-0 col-span-3 flex justify-end bg-white rounded-full shadow-xl p-3"
|
||||
>
|
||||
<button
|
||||
(click)="onPressConfirmClose()"
|
||||
class="btn btn-error w-36 text-white mr-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
(click)="onPressConfirmSave()"
|
||||
class="btn btn-success w-36 text-white"
|
||||
[disabled]="!isValueChanged"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<confirm-modal
|
||||
[title]="confirmSave.title"
|
||||
[message]="confirmSave.message"
|
||||
[confirmCallBack]="confirmSave.confirmCallBack"
|
||||
[show]="showConfirmSaveModal"
|
||||
></confirm-modal>
|
||||
|
||||
<confirm-modal
|
||||
[title]="confirmClose.title"
|
||||
[message]="confirmClose.message"
|
||||
[confirmCallBack]="confirmClose.confirmCallBack"
|
||||
[show]="showConfirmCloseModal"
|
||||
></confirm-modal>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
import { NgIf } from '@angular/common';
|
||||
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 } 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';
|
||||
|
||||
interface RecipeDetail {
|
||||
productCode: string;
|
||||
name: string;
|
||||
otherName: string;
|
||||
description: string;
|
||||
otherDescription: string;
|
||||
price: number;
|
||||
isUse: boolean;
|
||||
isShow: boolean;
|
||||
disable: boolean;
|
||||
}
|
||||
|
||||
interface RecipeMetaData {
|
||||
productCode: string;
|
||||
name: string;
|
||||
otherName: string;
|
||||
description: string;
|
||||
otherDescription: string;
|
||||
picture: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-details',
|
||||
templateUrl: './recipe-details.component.html',
|
||||
standalone: true,
|
||||
imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal],
|
||||
animations: [
|
||||
trigger('inOutAnimation', [
|
||||
transition(':enter', [
|
||||
style({ opacity: 0 }),
|
||||
animate('1s ease-out', style({ opacity: 1 })),
|
||||
]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class RecipeDetailsComponent implements OnInit {
|
||||
title: string = 'Recipe Detail';
|
||||
recipeMetaData: RecipeMetaData | null = null;
|
||||
|
||||
originalRecipeDetail: RecipeDetail | null = null;
|
||||
|
||||
isLoaded: boolean = false;
|
||||
|
||||
constructor(
|
||||
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>(''),
|
||||
price: new FormControl<number>(0),
|
||||
isUse: new FormControl<boolean>(false),
|
||||
isShow: new FormControl<boolean>(false),
|
||||
disable: new FormControl<boolean>(false),
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this._recipeService
|
||||
.getRecipesById(this._route.snapshot.params['productCode'])
|
||||
.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,
|
||||
price: recipe.cashPrice,
|
||||
isUse: recipe.isUse,
|
||||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
});
|
||||
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,
|
||||
};
|
||||
this.recipeMetaData = recipeMetaData;
|
||||
this.isLoaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
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._router.navigate(['/recipes']);
|
||||
},
|
||||
};
|
||||
|
||||
confirmClose = {
|
||||
title: 'The changes will be lost!',
|
||||
message: 'Do you want to close without saving?',
|
||||
confirmCallBack: () => {
|
||||
console.log('confirm close');
|
||||
this._router.navigate(['/recipes']);
|
||||
},
|
||||
};
|
||||
|
||||
onPressConfirmSave() {
|
||||
if (this.isValueChanged) {
|
||||
this.showConfirmSaveModal.emit(true);
|
||||
} else {
|
||||
this._router.navigate(['/recipes']);
|
||||
}
|
||||
}
|
||||
|
||||
onPressConfirmClose() {
|
||||
if (this.isValueChanged) {
|
||||
this.showConfirmCloseModal.emit(true);
|
||||
} else {
|
||||
this._router.navigate(['/recipes']);
|
||||
}
|
||||
}
|
||||
|
||||
get isValueChanged() {
|
||||
return !isEqual(this.recipeDetail.value, this.originalRecipeDetail);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue