Skip to content

Commit 28d1cfc

Browse files
seyfebseyfeb
authored
Merge 2b85dee into 212fb43 
2 parents 212fb43 + 2b85dee commit 28d1cfc

File tree

2 files changed

+112
-100
lines changed

2 files changed

+112
-100
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
## [Unreleased]
22

3+
### Changed
4+
- Using computed property in recipe view
5+
[#522](https://github.com./nextcloud/cookbook/pull/522/) @seyfeb
6+
37
## 0.7.10 - 2021-01-16
48

59
### Fixed

‎src/components/RecipeView.vue

+108-100
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@
88
<div class='meta'>
99
<h2>{{ $store.state.recipe.name }}</h2>
1010
<div class="details">
11-
<p v-if="keywords.length">
12-
<ul v-if="keywords.length">
13-
<RecipeKeyword v-for="(keyword,idx) in keywords" :key="'keyw'+idx" :name="keyword" :title="t('cookbook', 'Search recipes with this keyword')" v-on:keyword-clicked="keywordClicked(keyword)" />
11+
<p v-if="recipe.keywords.length">
12+
<ul v-if="recipe.keywords.length">
13+
<RecipeKeyword v-for="(keyword,idx) in recipe.keywords" :key="'keyw'+idx" :name="keyword" :title="t('cookbook', 'Search recipes with this keyword')" v-on:keyword-clicked="keywordClicked(keyword)" />
1414
</ul>
1515
</p>
1616

1717
<p class="dates">
1818
<span v-if="showCreatedDate" class="date" :title="t('cookbook', 'Date created')">
1919
<span class="icon-calendar-dark date-icon" />
20-
<span class="date-text">{{ dateCreated }}</span>
20+
<span class="date-text">{{ recipe.dateCreated }}</span>
2121
</span>
2222
<span v-if="showModifiedDate" class="date" :title="t('cookbook', 'Last modified')">
2323
<span class="icon-rename date-icon" />
24-
<span class="date-text">{{ dateModified }}</span>
24+
<span class="date-text">{{ recipe.dateModified }}</span>
2525
</span>
2626
</p>
2727

@@ -32,9 +32,9 @@
3232
<p><strong>{{ t('cookbook', 'Servings') }}: </strong>{{ $store.state.recipe.recipeYield }}</p>
3333
</div>
3434
<div class="times">
35-
<RecipeTimer v-if="timerPrep" :value="timerPrep" :phase="'prep'" :timer="false" :label="'Preparation time'" />
36-
<RecipeTimer v-if="timerCook" :value="timerCook" :phase="'prep'" :timer="true" :label="'Cooking time'" />
37-
<RecipeTimer v-if="timerTotal" :value="timerTotal" :phase="'total'" :timer="false" :label="'Total time'" />
35+
<RecipeTimer v-if="recipe.timerPrep" :value="recipe.timerPrep" :phase="'prep'" :timer="false" :label="'Preparation time'" />
36+
<RecipeTimer v-if="recipe.timerCook" :value="recipe.timerCook" :phase="'prep'" :timer="true" :label="'Cooking time'" />
37+
<RecipeTimer v-if="recipe.timerTotal" :value="recipe.timerTotal" :phase="'total'" :timer="false" :label="'Total time'" />
3838
</div>
3939
</div>
4040
</div>
@@ -43,41 +43,41 @@
4343
<section>
4444
<aside>
4545
<section>
46-
<h3 v-if="ingredients.length">{{ t('cookbook', 'Ingredients') }}</h3>
47-
<ul v-if="ingredients.length">
48-
<RecipeIngredient v-for="(ingredient,idx) in ingredients" :key="'ingr'+idx" :ingredient="ingredient" :recipeIngredientsHaveSubgroups="recipeIngredientsHaveSubgroups" />
46+
<h3 v-if="recipe.ingredients.length">{{ t('cookbook', 'Ingredients') }}</h3>
47+
<ul v-if="recipe.ingredients.length">
48+
<RecipeIngredient v-for="(ingredient,idx) in recipe.ingredients" :key="'ingr'+idx" :ingredient="ingredient" :recipeIngredientsHaveSubgroups="recipeIngredientsHaveSubgroups" />
4949
</ul>
5050
</section>
5151

5252
<section>
53-
<h3 v-if="tools.length">{{ t('cookbook', 'Tools') }}</h3>
54-
<ul v-if="tools.length">
55-
<RecipeTool v-for="(tool,idx) in tools" :key="'tool'+idx" :tool="tool" />
53+
<h3 v-if="recipe.tools.length">{{ t('cookbook', 'Tools') }}</h3>
54+
<ul v-if="recipe.tools.length">
55+
<RecipeTool v-for="(tool,idx) in recipe.tools" :key="'tool'+idx" :tool="tool" />
5656
</ul>
5757
</section>
5858

5959
<section v-if="showNutritions">
6060
<h3>{{ t('cookbook', 'Nutrition Information') }}</h3>
6161
<ul class="nutrition-items">
62-
<recipe-nutrition-info-item v-if="('servingSize' in nutrition) && !isNullOrEmpty(nutrition['servingSize'])" :title="t('cookbook', 'Serving Size')" :data="nutrition['servingSize']" />
63-
<recipe-nutrition-info-item v-if="('calories' in nutrition) && !isNullOrEmpty(nutrition['calories'])" :title="t('cookbook', 'Energy')" :data="nutrition['calories']" />
64-
<recipe-nutrition-info-item v-if="('sugarContent' in nutrition) && !isNullOrEmpty(nutrition['sugarContent'])" :title="t('cookbook', 'Sugar')" :data="nutrition['sugarContent']" />
65-
<recipe-nutrition-info-item v-if="('carbohydrateContent' in nutrition) && !isNullOrEmpty(nutrition['carbohydrateContent'])" :title="t('cookbook', 'Carbohydrate')" :data="nutrition['carbohydrateContent']" />
66-
<recipe-nutrition-info-item v-if="('cholesterolContent' in nutrition) && !isNullOrEmpty(nutrition['cholesterolContent'])" :title="t('cookbook', 'Cholesterol')" :data="nutrition['cholesterolContent']" />
67-
<recipe-nutrition-info-item v-if="('fiberContent' in nutrition) && !isNullOrEmpty(nutrition['fiberContent'])" :title="t('cookbook', 'Fiber')" :data="nutrition['fiberContent']" />
68-
<recipe-nutrition-info-item v-if="('proteinContent' in nutrition) && !isNullOrEmpty(nutrition['proteinContent'])" :title="t('cookbook', 'Protein')" :data="nutrition['proteinContent']" />
69-
<recipe-nutrition-info-item v-if="('sodiumContent' in nutrition) && !isNullOrEmpty(nutrition['sodiumContent'])" :title="t('cookbook', 'Sodium')" :data="nutrition['sodiumContent']" />
70-
<recipe-nutrition-info-item v-if="('fatContent' in nutrition) && !isNullOrEmpty(nutrition['fatContent'])" :title="t('cookbook', 'Fat total')" :data="nutrition['fatContent']" />
71-
<recipe-nutrition-info-item v-if="('saturatedFatContent' in nutrition) && !isNullOrEmpty(nutrition['saturatedFatContent'])" :title="t('cookbook', 'Saturated Fat')" :data="nutrition['saturatedFatContent']" />
72-
<recipe-nutrition-info-item v-if="('unsaturatedFatContent' in nutrition) && !isNullOrEmpty(nutrition['unsaturatedFatContent'])" :title="t('cookbook', 'Unsaturated Fat')" :data="nutrition['unsaturatedFatContent']" />
73-
<recipe-nutrition-info-item v-if="('transFatContent' in nutrition) && !isNullOrEmpty(nutrition['transFatContent'])" :title="t('cookbook', 'Trans Fat')" :data="nutrition['transFatContent']" />
62+
<recipe-nutrition-info-item v-if="('servingSize' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['servingSize'])" :title="t('cookbook', 'Serving Size')" :data="recipe.nutrition['servingSize']" />
63+
<recipe-nutrition-info-item v-if="('calories' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['calories'])" :title="t('cookbook', 'Energy')" :data="recipe.nutrition['calories']" />
64+
<recipe-nutrition-info-item v-if="('sugarContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['sugarContent'])" :title="t('cookbook', 'Sugar')" :data="recipe.nutrition['sugarContent']" />
65+
<recipe-nutrition-info-item v-if="('carbohydrateContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['carbohydrateContent'])" :title="t('cookbook', 'Carbohydrate')" :data="recipe.nutrition['carbohydrateContent']" />
66+
<recipe-nutrition-info-item v-if="('cholesterolContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['cholesterolContent'])" :title="t('cookbook', 'Cholesterol')" :data="recipe.nutrition['cholesterolContent']" />
67+
<recipe-nutrition-info-item v-if="('fiberContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['fiberContent'])" :title="t('cookbook', 'Fiber')" :data="recipe.nutrition['fiberContent']" />
68+
<recipe-nutrition-info-item v-if="('proteinContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['proteinContent'])" :title="t('cookbook', 'Protein')" :data="recipe.nutrition['proteinContent']" />
69+
<recipe-nutrition-info-item v-if="('sodiumContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['sodiumContent'])" :title="t('cookbook', 'Sodium')" :data="recipe.nutrition['sodiumContent']" />
70+
<recipe-nutrition-info-item v-if="('fatContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['fatContent'])" :title="t('cookbook', 'Fat total')" :data="recipe.nutrition['fatContent']" />
71+
<recipe-nutrition-info-item v-if="('saturatedFatContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['saturatedFatContent'])" :title="t('cookbook', 'Saturated Fat')" :data="recipe.nutrition['saturatedFatContent']" />
72+
<recipe-nutrition-info-item v-if="('unsaturatedFatContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['unsaturatedFatContent'])" :title="t('cookbook', 'Unsaturated Fat')" :data="recipe.nutrition['unsaturatedFatContent']" />
73+
<recipe-nutrition-info-item v-if="('transFatContent' in recipe.nutrition) && !isNullOrEmpty(recipe.nutrition['transFatContent'])" :title="t('cookbook', 'Trans Fat')" :data="recipe.nutrition['transFatContent']" />
7474
</ul>
7575
</section>
7676
</aside>
77-
<main v-if="instructions.length">
77+
<main v-if="recipe.instructions.length">
7878
<h3>{{ t('cookbook', 'Instructions') }}</h3>
7979
<ol class="instructions">
80-
<RecipeInstruction v-for="(instruction,idx) in instructions" :key="'instr'+idx" :instruction="instruction" />
80+
<RecipeInstruction v-for="(instruction,idx) in recipe.instructions" :key="'instr'+idx" :instruction="instruction" />
8181
</ol>
8282
</main>
8383
</section>
@@ -111,33 +111,93 @@ export default {
111111
},
112112
data () {
113113
return {
114-
headerPrefix: "## ",
115-
// Own properties
116-
ingredients: [],
117-
instructions: [],
118-
keywords: [],
119-
timerCook: null,
120-
timerPrep: null,
121-
timerTotal: null,
122-
tools: [],
123-
dateCreated: null,
124-
dateModified: null,
125-
nutrition: null
114+
headerPrefix: "## "
126115
}
127116
},
128117
computed: {
118+
recipe: function() {
119+
let recipe = {
120+
ingredients: [],
121+
instructions: [],
122+
keywords: [],
123+
timerCook: null,
124+
timerPrep: null,
125+
timerTotal: null,
126+
tools: [],
127+
dateCreated: null,
128+
dateModified: null,
129+
nutrition: null
130+
}
131+
132+
if (this.$store.state.recipe.recipeIngredient) {
133+
recipe.ingredients = Object.values(this.$store.state.recipe.recipeIngredient)
134+
}
135+
136+
if (this.$store.state.recipe.recipeInstructions) {
137+
recipe.instructions = Object.values(this.$store.state.recipe.recipeInstructions)
138+
}
139+
140+
if (this.$store.state.recipe.keywords) {
141+
recipe.keywords = String(this.$store.state.recipe.keywords).split(',')
142+
}
143+
144+
if (this.$store.state.recipe.cookTime) {
145+
let cookT = this.$store.state.recipe.cookTime.match(/PT(\d+?)H(\d+?)M/)
146+
recipe.timerCook = { hours: parseInt(cookT[1]), minutes: parseInt(cookT[2]) }
147+
}
148+
149+
if (this.$store.state.recipe.prepTime) {
150+
let prepT = this.$store.state.recipe.prepTime.match(/PT(\d+?)H(\d+?)M/)
151+
recipe.timerPrep = { hours: parseInt(prepT[1]), minutes: parseInt(prepT[2]) }
152+
}
153+
154+
if (this.$store.state.recipe.totalTime) {
155+
let totalT = this.$store.state.recipe.totalTime.match(/PT(\d+?)H(\d+?)M/)
156+
recipe.timerTotal = { hours: parseInt(totalT[1]), minutes: parseInt(totalT[2]) }
157+
}
158+
159+
if (this.$store.state.recipe.tool) {
160+
recipe.tools = this.$store.state.recipe.tool
161+
}
162+
163+
if (this.$store.state.recipe.dateCreated) {
164+
let date = this.parseDateTime(this.$store.state.recipe.dateCreated)
165+
recipe.dateCreated = (date != null ? date.format('L, LT').toString() : null)
166+
}
167+
168+
if (this.$store.state.recipe.dateModified) {
169+
let date = this.parseDateTime(this.$store.state.recipe.dateModified)
170+
recipe.dateModified = (date != null ? date.format('L, LT').toString() : null)
171+
}
172+
if (this.$store.state.recipe.nutrition) {
173+
if ( this.$store.state.recipe.nutrition instanceof Array) {
174+
this.$store.state.recipe.nutrition = {}
175+
}
176+
} else {
177+
this.$store.state.recipe.nutrition = {}
178+
}
179+
recipe.nutrition = this.$store.state.recipe.nutrition
180+
181+
return recipe
182+
},
129183
recipeIngredientsHaveSubgroups: function() {
130-
if (this.ingredients && this.ingredients.length > 0) {
131-
for (let idx = 0; idx < this.ingredients.length; ++idx) {
132-
if (this.ingredients[idx].startsWith(this.headerPrefix)) {
184+
if (this.recipe.ingredients && this.recipe.ingredients.length > 0) {
185+
for (let idx = 0; idx < this.recipe.ingredients.length; ++idx) {
186+
if (this.recipe.ingredients[idx].startsWith(this.headerPrefix)) {
133187
return true
134188
}
135189
}
136190
}
137191
return false
138192
},
193+
showCreatedDate: function() {
194+
if (!this.recipe.dateCreated) {
195+
return false
196+
}
197+
return true
198+
},
139199
showModifiedDate: function() {
140-
if (!this.dateModified) {
200+
if (!this.recipe.dateModified) {
141201
return false
142202
}
143203
else if ( this.$store.state.recipe.dateCreated
@@ -148,13 +208,10 @@ export default {
148208
}
149209
return true
150210
},
151-
showCreatedDate: function() {
152-
if (!this.dateCreated) {
153-
return false
154-
}
155-
return true
156-
},
157-
showNutritions: function() { return this.nutrition && !(this.nutrition instanceof Array) && Object.keys(this.nutrition).length > 0 }
211+
showNutritions: function() {
212+
return this.recipe.nutrition && !(this.recipe.nutrition instanceof Array)
213+
&& Object.keys(this.recipe.nutrition).length > 0
214+
}
158215
},
159216
methods: {
160217
isNullOrEmpty: function(str) {
@@ -203,55 +260,6 @@ export default {
203260
// Store recipe data in vuex
204261
$this.$store.dispatch('setRecipe', { recipe: recipe })
205262
206-
if ($this.$store.state.recipe.recipeIngredient) {
207-
$this.ingredients = Object.values($this.$store.state.recipe.recipeIngredient)
208-
}
209-
210-
if ($this.$store.state.recipe.recipeInstructions) {
211-
$this.instructions = Object.values($this.$store.state.recipe.recipeInstructions)
212-
}
213-
214-
if ($this.$store.state.recipe.keywords) {
215-
$this.keywords = String($this.$store.state.recipe.keywords).split(',')
216-
}
217-
218-
if ($this.$store.state.recipe.cookTime) {
219-
let cookT = $this.$store.state.recipe.cookTime.match(/PT(\d+?)H(\d+?)M/)
220-
$this.timerCook = { hours: parseInt(cookT[1]), minutes: parseInt(cookT[2]) }
221-
}
222-
223-
if ($this.$store.state.recipe.prepTime) {
224-
let prepT = $this.$store.state.recipe.prepTime.match(/PT(\d+?)H(\d+?)M/)
225-
$this.timerPrep = { hours: parseInt(prepT[1]), minutes: parseInt(prepT[2]) }
226-
}
227-
228-
if ($this.$store.state.recipe.totalTime) {
229-
let totalT = $this.$store.state.recipe.totalTime.match(/PT(\d+?)H(\d+?)M/)
230-
$this.timerTotal = { hours: parseInt(totalT[1]), minutes: parseInt(totalT[2]) }
231-
}
232-
233-
if ($this.$store.state.recipe.tool) {
234-
$this.tools = $this.$store.state.recipe.tool
235-
}
236-
237-
if ($this.$store.state.recipe.dateCreated) {
238-
let date = $this.parseDateTime($this.$store.state.recipe.dateCreated)
239-
$this.dateCreated = (date != null ? date.format('L, LT').toString() : null)
240-
}
241-
242-
if ($this.$store.state.recipe.dateModified) {
243-
let date = $this.parseDateTime($this.$store.state.recipe.dateModified)
244-
$this.dateModified = (date != null ? date.format('L, LT').toString() : null)
245-
}
246-
if ($this.$store.state.recipe.nutrition) {
247-
if ( $this.$store.state.recipe.nutrition instanceof Array) {
248-
$this.$store.state.recipe.nutrition = {}
249-
}
250-
} else {
251-
$this.$store.state.recipe.nutrition = {}
252-
}
253-
$this.nutrition = $this.$store.state.recipe.nutrition
254-
255263
// Always set the active page last!
256264
$this.$store.dispatch('setPage', { page: 'recipe' })
257265
})

0 commit comments

Comments
 (0)