mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-10 00:28:22 -05:00
Code Issues Packages Projects Releases Wiki Activity

ingredient card cleanup

Browse Source
This commit is contained in:
Kaibu
2022-06-15 16:42:28 +02:00
parent d3c3339d5e
commit cdc95d8fd2
1 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
vue/src/components/IngredientsCard.vue
View File

@@ -1,48 +1,53 @@
<template> <template>
<div :class="{ 'card border-primary no-border': header }"> <div :class="{ 'card border-primary no-border': header }">
<div :class="{ 'card-body': header }"> <div :class="{ 'card-body': header, 'p-0': header }">
<div class="row" v-if="header"> <div class="card-header" v-if="header">
<div class="col col-md-6"> <div class="row">
<h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h4> <div class="col-6">
</div> <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h4>
<div class="col col-md-6 text-right" v-if="header"> </div>
<h4 class="d-print-none"> <div class="col-6 text-right" v-if="header">
<i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2" @click="saveShopping(true)"></i> <h4 class="d-print-none card-title">
<i v-if="show_shopping" class="fas fa-save text-success px-2" @click="saveShopping()"></i> <i v-if="show_shopping && ShoppingRecipes.length > 0" class="fas fa-trash text-danger px-2"
<i class="fas fa-shopping-cart px-2" @click="getShopping()"></i> @click="saveShopping(true)"></i>
</h4> <i v-if="show_shopping" class="fas fa-save text-success px-2" @click="saveShopping()"></i>
<i class="fas fa-shopping-cart px-2" @click="getShopping()"></i>
</h4>
</div>
</div> </div>
</div> </div>
<div class="row text-right" v-if="ShoppingRecipes.length > 1 && !add_shopping_mode"> <div class="card-body p-3 p-md-5">
<div class="col col-md-6 offset-md-6 text-right"> <div class="row text-right" v-if="ShoppingRecipes.length > 1 && !add_shopping_mode">
<b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes" size="sm"></b-form-select> <div class="col col-md-6 offset-md-6 text-right">
<b-form-select v-model="selected_shoppingrecipe" :options="ShoppingRecipes"
size="sm"></b-form-select>
</div>
</div> </div>
</div> <div class="row no-gutter">
<br v-if="header" /> <div class="col-12 m-0" :class="{ 'p-0': !header }">
<div class="row no-gutter"> <table class="table table-sm mb-0">
<div class="col-md-12"> <!-- eslint-disable vue/no-v-for-template-key-on-child -->
<table class="table table-sm"> <template v-for="s in steps">
<!-- eslint-disable vue/no-v-for-template-key-on-child --> <tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && !add_shopping_mode">
<template v-for="s in steps"> <td colspan="5">
<tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && !add_shopping_mode"> <b>{{ s.name }}</b>
<td colspan="5"> </td>
<b>{{ s.name }}</b> </tr>
</td> <template v-for="i in s.ingredients">
</tr> <ingredient-component
<template v-for="i in s.ingredients"> :ingredient="prepareIngredient(i)"
<ingredient-component :ingredient_factor="ingredient_factor"
:ingredient="prepareIngredient(i)" :key="i.id"
:ingredient_factor="ingredient_factor" :show_shopping="show_shopping"
:key="i.id" :detailed="detailed"
:show_shopping="show_shopping" @checked-state-changed="$emit('checked-state-changed', $event)"
:detailed="detailed" @add-to-shopping="addShopping($event)"
@checked-state-changed="$emit('checked-state-changed', $event)" />
@add-to-shopping="addShopping($event)" </template>
/>
</template> </template>
</template> <!-- eslint-enable vue/no-v-for-template-key-on-child -->
<!-- eslint-enable vue/no-v-for-template-key-on-child --> </table>
</table> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -51,18 +56,18 @@
<script> <script>
import Vue from "vue" import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue" import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css" import "bootstrap-vue/dist/bootstrap-vue.css"
import IngredientComponent from "@/components/IngredientComponent" import IngredientComponent from "@/components/IngredientComponent"
import { ApiMixin, StandardToasts } from "@/utils/utils" import {ApiMixin, StandardToasts} from "@/utils/utils"
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
export default { export default {
name: "IngredientCard", name: "IngredientCard",
mixins: [ApiMixin], mixins: [ApiMixin],
components: { IngredientComponent }, components: {IngredientComponent},
props: { props: {
steps: { steps: {
type: Array, type: Array,
@@ -70,13 +75,13 @@ export default {
return [] return []
}, },
}, },
recipe: { type: Number }, recipe: {type: Number},
ingredient_factor: { type: Number, default: 1 }, ingredient_factor: {type: Number, default: 1},
servings: { type: Number, default: 1 }, servings: {type: Number, default: 1},
detailed: { type: Boolean, default: true }, detailed: {type: Boolean, default: true},
header: { type: Boolean, default: false }, header: {type: Boolean, default: false},
add_shopping_mode: { type: Boolean, default: false }, add_shopping_mode: {type: Boolean, default: false},
recipe_list: { type: Number, default: undefined }, recipe_list: {type: Number, default: undefined},
}, },
data() { data() {
return { return {
@@ -175,20 +180,20 @@ export default {
this.genericAPI(this.Models.RECIPE, this.Actions.SHOPPING, params) this.genericAPI(this.Models.RECIPE, this.Actions.SHOPPING, params)
.then((result) => { .then((result) => {
if (del_shopping) { if (del_shopping) {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
} else if (this.selected_shoppingrecipe) { } else if (this.selected_shoppingrecipe) {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
} else { } else {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
} }
}) })
.catch((err) => { .catch((err) => {
if (del_shopping) { if (del_shopping) {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
} else if (this.selected_shoppingrecipe) { } else if (this.selected_shoppingrecipe) {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
} else { } else {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
} }
this.$emit("shopping-failed") this.$emit("shopping-failed")
}) })