/
pageContainer.tsx
99 lines (92 loc) · 2.63 KB
/
pageContainer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import Vue, { ComponentOptions } from 'vue';
import { RecipeEntity, RecipeError } from '../../../model';
import { recipeAPI } from '../../../api/recipe';
import { editFormValidation } from './validations/editFormValidation';
import { EditRecipePage } from './page';
interface EditRecipeContainerOptions extends Vue {
recipe: RecipeEntity;
recipeError: RecipeError;
updateRecipe: (name) => void;
addIngredient: (ingredient) => void;
removeIngredient: (ingredient) => void;
validateRecipeField: (field, value) => void;
updateRecipeError: (field, result) => void;
save: () => void;
}
export const EditRecipeContainer = Vue.extend({
render: function(h) {
return (
<EditRecipePage
recipe={this.recipe}
recipeError={this.recipeError}
updateRecipe={this.updateRecipe}
addIngredient={this.addIngredient}
removeIngredient={this.removeIngredient}
save={this.save}
/>
);
},
props: [
'id'
],
data: function() {
return {
recipe: new RecipeEntity(),
recipeError: new RecipeError(),
};
},
beforeMount: function() {
const id = Number(this["id"]) || 0;
recipeAPI.fetchRecipeById(id)
.then((recipe) => {
this.recipe = recipe;
});
},
methods: {
updateRecipe: function(name) {
this.recipe = {
...this.recipe,
name,
};
this.validateRecipeField('name', name);
},
addIngredient: function(ingredient: string) {
this.recipe = {
...this.recipe,
ingredients: [...this.recipe.ingredients, ingredient],
};
this.validateRecipeField('ingredients', this.recipe.ingredients);
},
removeIngredient: function(ingredient: string) {
this.recipe = {
...this.recipe,
ingredients: this.recipe.ingredients.filter((i) => {
return i !== ingredient;
}),
};
this.validateRecipeField('ingredients', this.recipe.ingredients);
},
validateRecipeField: function(field, value) {
editFormValidation.validateField(this.recipe, field, value)
.then((result) => this.updateRecipeError(field, result));
},
updateRecipeError: function(field, result) {
this.recipeError = {
...this.recipeError,
[field]: result,
};
},
save: function() {
editFormValidation.validateForm(this.recipe)
.then((result) => {
this.recipeError = {
...this.recipeError,
...result.fieldErrors,
};
if (result.succeeded) {
console.log('Save recipe');
}
});
},
}
} as ComponentOptions<EditRecipeContainerOptions>);