cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactored ingredient components

Browse Source
This commit is contained in:
vabene1111
2021-01-13 18:42:59 +01:00
parent 98aadf2869
commit 9f51b9fd16
5 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -81,15 +81,11 @@
<br/>
<div class="row">
<div class="col-md-12">
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="s in recipe.steps">
<template v-for="i in s.ingredients">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
</template>
<Ingredients :step="s" :servings="servings" :key="s.id"></Ingredients>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
</div>
</div>
@ -143,7 +139,7 @@ import {apiLoadRecipe} from "@/utils/api";
import Step from "@/components/Step";
import RecipeContextMenu from "@/components/RecipeContextMenu";
import {GettextMixin, ToastMixin} from "@/utils/utils";
import Ingredient from "@/components/Ingredient";
import Ingredients from "@/components/Ingredients";
import PdfViewer from "@/components/PdfViewer";
import ImageViewer from "@/components/ImageViewer";
@ -164,7 +160,7 @@ export default {
components: {
PdfViewer,
ImageViewer,
Ingredient,
Ingredients,
Step,
RecipeContextMenu,
Nutrition,

4
vue/src/components/Ingredient.vue → vue/src/components/IngredientRow.vue
View File

@ -3,7 +3,7 @@
<td>
<input type="checkbox">
</td>
<td>
<td style="text-align: right">
<span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
</td>
<td>
@ -31,7 +31,7 @@
import {calculateAmount} from "@/utils/utils";
export default {
name: 'Ingredient',
name: 'IngredientRow',
props: {
ingredient: Object,
servings: {

31
vue/src/components/Ingredients.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="i in step.ingredients">
<IngredientRow v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></IngredientRow>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</template>
<script>
import IngredientRow from "@/components/IngredientRow";
export default {
name: 'Ingredient',
components: {
IngredientRow,
},
props: {
step: Object,
servings: {
type: Number,
default: 1,
}
},
}
</script>

12
vue/src/components/Step.vue
View File

@ -31,13 +31,7 @@
<b-collapse id="collapse-1" v-model="details_visible">
<div class="row">
<div class="col col-md-4" v-if="step.ingredients.length > 0 && recipe.steps.length > 1">
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="i in step.ingredients">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
<Ingredients :step="step" :servings="servings"></Ingredients>
</div>
<div class="col" :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1,}">
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
@ -114,12 +108,12 @@
import {calculateAmount} from "@/utils/utils";
import Ingredient from "@/components/Ingredient";
import {GettextMixin} from "@/utils/utils";
import CompileComponent from "@/components/CompileComponent";
import Vue from "vue";
import moment from "moment";
import Ingredients from "@/components/Ingredients";
Vue.prototype.moment = moment
@ -129,7 +123,7 @@ export default {
GettextMixin,
],
components: {
Ingredient,
Ingredients,
CompileComponent,
},
props: {

2
vue/webpack-stats.json
View File

@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.fab07d3cd83db7e32016.hot-update.js","publicPath":"http://localhost:8080/recipe_view.fab07d3cd83db7e32016.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.fab07d3cd83db7e32016.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n 79:9 error '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead vue/no-deprecated-v-bind-sync\n\n✖ 1 problem (1 error, 0 warnings)\n 1 error and 0 warnings potentially fixable with the `--fix` option.\n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.e0742691919ff3fcce04.hot-update.js","publicPath":"http://localhost:8080/recipe_view.e0742691919ff3fcce04.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.e0742691919ff3fcce04.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n Errors compiling template:\n\n text \"Test\" outside root element will be ignored.\n\n 7 | </template>\n 8 | <!-- eslint-enable vue/no-v-for-template-key-on-child -->\n 9 | </table>\n | \n 10 | Test\n | ^^^^\n 11 | \n | \n"}