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

change save file method, add file changes history

Browse source
This commit is contained in:
pakintada@gmail.com 2023-12-05 14:33:45 +07:00
parent 519749fd3a
commit 820557a268
12 changed files with 2388 additions and 2036 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,158 +1,203 @@
import { CommonModule, DatePipe } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
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 { RecipeListComponent } from './recipe-list/recipe-list.component';
import {
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: [
CommonModule,
RouterLink,
ReactiveFormsModule,
ConfirmModal,
DatePipe,
RecipeListComponent,
],
animations: [
trigger('inOutAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('1s ease-out', style({ opacity: 1 })),
]),
]),
],
})
export class RecipeDetailsComponent implements OnInit {
title: string = 'Recipe Detail';
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
) {}
productCode!: string;
recipeDetailForm = this._formBuilder.group({
productCode: '',
name: '',
otherName: '',
description: '',
otherDescription: '',
lastModified: new Date(),
price: 0,
isUse: false,
isShow: false,
disable: false,
});
ngOnInit() {
this.productCode = this._route.snapshot.params['productCode'];
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.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
// 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>();
showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
confirmSave = {
title: 'The changes detected!',
message: 'Do you want to save changes?',
confirmCallBack: () => {
console.log('confirm save');
// TODO: update value in targeted recipe
// this._recipeService.editChanges(
// this._recipeService.getCurrentCountry(),
// this._recipeService.getCurrentFile(),
// {
// ...this.recipeDetail,
// }
// );
console.log('Sending changes');
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']);
}
}
isValueChanged: boolean = false;
onRecipeDetailFormChange(recipeDetail: typeof this.recipeDetailForm.value) {
console.log('Recipe Detail Form Changed', recipeDetail);
}
onRecipeListFormChange(isValueChanged: boolean) {
console.log('Recipe List Form Changed', isValueChanged);
this.isValueChanged ||= isValueChanged;
}
}
import { CommonModule, DatePipe } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
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 { RecipeListComponent } from './recipe-list/recipe-list.component';
import {
RecipeDetail,
RecipeDetailMat,
} from 'src/app/core/models/recipe.model';
import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
import { isEqual } from 'lodash';
import { UserService } from 'src/app/core/services/user.service';
@Component({
selector: 'app-recipe-details',
templateUrl: './recipe-details.component.html',
standalone: true,
imports: [
CommonModule,
RouterLink,
ReactiveFormsModule,
ConfirmModal,
DatePipe,
RecipeListComponent,
],
animations: [
trigger('inOutAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('1s ease-out', style({ opacity: 1 })),
]),
]),
],
})
export class RecipeDetailsComponent implements OnInit {
title: string = 'Recipe Detail';
recipeDetail$!: Observable<RecipeDetail>;
isLoaded: boolean = false;
isMatLoaded: boolean = false;
actionRecord: ActionRecord<RecipeDetail | RecipeDetailMat> =
new ActionRecord();
recipeOriginalDetail!: typeof this.recipeDetailForm.value;
commit_msg :string = "";
constructor(
private _formBuilder: FormBuilder,
private _route: ActivatedRoute,
private _router: Router,
private _recipeService: RecipeService,
private _userService: UserService
) {}
productCode!: string;
recipeDetailForm = this._formBuilder.group({
productCode: '',
name: '',
otherName: '',
Description: '',
otherDescription: '',
lastModified: new Date(),
price: 0,
isUse: false,
isShow: false,
disable: false,
});
repl = []
ngOnInit() {
this.productCode = this._route.snapshot.params['productCode'];
this.recipeDetail$ = this._recipeService
.getRecipeDetail(this.productCode)
.pipe(first());
this.recipeDetail$.subscribe((detail) => {
console.log('Recipe Detail', detail);
this.recipeDetailForm.patchValue(detail);
this.isLoaded = true;
this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
});
this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
// 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>();
showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
confirmSave = {
title: 'The changes detected!',
message: 'Do you want to save changes?',
confirmCallBack: () => {
console.log('confirm save');
// get username
let username:string = ""
this._userService.getCurrentUser().subscribe((user) => {
username = user.user.name;
let to_send = {
edit_by: username,
commit_msg: this.commit_msg,
productCode: this.productCode,
name: this.recipeDetailForm.getRawValue().name,
otherName: this.recipeDetailForm.getRawValue().otherName,
Description: this.recipeDetailForm.getRawValue().Description,
otherDescription: this.recipeDetailForm.getRawValue().otherDescription,
LastChange: this.recipeDetailForm.getRawValue().lastModified,
price: this.recipeDetailForm.getRawValue().price,
// isUse: this,
// isShow: null,
// disable: null,
recipes: [
...this.repl
],
}
// TODO: update value in targeted recipe
this._recipeService.editChanges(
this._recipeService.getCurrentCountry(),
this._recipeService.getCurrentFile(),
{
...to_send,
}
);
console.log('Sending changes');
this._router.navigate(['/recipes']);
})
},
};
onKeyUpCommitMsg(e: any){
this.commit_msg = e.target.value;
}
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']);
}
}
isValueChanged: boolean = false;
onRecipeDetailFormChange(recipeDetail: typeof this.recipeDetailForm.value) {
console.log('Recipe Detail Form Changed', recipeDetail);
}
onRecipeListFormChange(repl: unknown[]) {
console.log('Recipe List Form Changed', repl);
this.repl = repl as never[];
this.isValueChanged ||= repl != undefined ? true : false;
}
}