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

fade-enter-active

Browse Source
This commit is contained in:
smilerz
2021-10-25 11:55:36 -05:00
parent f400c7cd7c
commit 5c9f5e0e1a
3 changed files with 221 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
vue/src/components/Ingredient.vue
View File

@@ -19,18 +19,14 @@
</td>
<td @click="done">
<template v-if="ingredient.food !== null">
<i
<!-- <i
v-if="show_shopping && !add_shopping_mode"
class="far fa-edit fa-sm px-1"
@click="editFood()"
></i>
<a
:href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)"
v-if="ingredient.food.recipe !== null"
target="_blank"
rel="noopener noreferrer"
>{{ ingredient.food.name }}</a
>
></i> -->
<a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">{{
ingredient.food.name
}}</a>
<span v-if="ingredient.food.recipe === null">{{ ingredient.food.name }}</span>
</template>
</td>
@@ -44,9 +40,7 @@
<!-- {{ ingredient.note }}-->
<!-- </span>-->
<div class="d-none d-print-block">
<i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}
</div>
<div class="d-none d-print-block"><i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}</div>
</div>
</td>
<td v-else-if="show_shopping" class="text-right text-nowrap">
@@ -71,13 +65,7 @@
<!-- or in shopping mode and food is ignored: Shopping Badge bypasses linking ingredient to Recipe which would get ignored -->
<shopping-badge :item="ingredient.food" :override_ignore="true" class="px-1" />
<span class="px-2">
<input
type="checkbox"
class="align-middle"
disabled
v-b-popover.hover.click.blur
:title="$t('IgnoredFood', { food: ingredient.food.name })"
/>
<input type="checkbox" class="align-middle" disabled v-b-popover.hover.click.blur :title="$t('IgnoredFood', { food: ingredient.food.name })" />
</span>
<on-hand-badge :item="ingredient.food" />
</div>
@@ -158,10 +146,7 @@ export default {
}
// if we are in add shopping mode start with all checks marked
if (this.add_shopping_mode) {
this.shop =
!this.ingredient.food.on_hand &&
!this.ingredient.food.ignore_shopping &&
!this.ingredient.food.recipe
this.shop = !this.ingredient.food.on_hand && !this.ingredient.food.ignore_shopping && !this.ingredient.food.recipe
}
},
},
@@ -177,9 +162,7 @@ export default {
return this.$t("NotInShopping", { food: this.ingredient.food.name })
} else {
let list = this.shopping_list.filter((x) => x.food.id == this.ingredient.food.id)
let category =
this.$t("Category") + ": " + this.ingredient?.food?.supermarket_category?.name ??
this.$t("Undefined")
let category = this.$t("Category") + ": " + this.ingredient?.food?.supermarket_category?.name ?? this.$t("Undefined")
let popover = []
list.forEach((x) => {
@@ -200,9 +183,7 @@ export default {
].join("")
)
})
return (
"<table class='table-small'><th colspan='4'>" + category + "</th>" + popover.join("") + "</table>"
)
return "<table class='table-small'><th colspan='4'>" + category + "</th>" + popover.join("") + "</table>"
}
},
},

164
vue/src/components/ShoppingLineItem.vue
View File

@@ -4,7 +4,7 @@
<!-- allow reordering or items -->
<div id="app">
<div class="col-12">
<div class="row">
<div class="row" :class="{ 'text-muted': formatChecked }">
<div class="col col-md-1">
<div style="position: static;" class=" btn-group">
<div class="dropdown b-dropdown position-static">
@@ -13,7 +13,7 @@
aria-expanded="false"
type="button"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
@click.stop="$emit('open-context-menu', $event, entries[0])"
@click.stop="$emit('open-context-menu', $event, entries)"
>
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
@@ -25,45 +25,75 @@
<div class="col col-md-1">{{ formatAmount }}</div>
<div class="col col-md-1">{{ formatUnit }}</div>
<div class="col col-md-4">
{{ formatFood }} <span class="text-muted">({{ formatHint }})</span>
<div class="col col-md-6">
{{ formatFood }} <span class="small text-muted">{{ formatHint }}</span>
</div>
<div class="col col-md-1">{{ formatNotes }}</div>
<div class="col col-md-1">
<b-button size="sm" @click="showDetails = !showDetails" class="mr-2" variant="link">
<div class="text-nowrap">{{ showDetails ? "Hide" : "Show" }} Details</div>
</b-button>
</div>
</div>
<div class="row" v-if="showDetails">
<div class="offset-md-1">
<div v-for="e in entries" :key="e.id">
<div style="position: static;" class=" btn-group">
<div class="dropdown b-dropdown position-static">
<button
aria-haspopup="true"
aria-expanded="false"
type="button"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
@click.stop="$emit('open-context-menu', $event, e)"
>
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
</div>
<div class="card no-body" v-if="showDetails">
<div v-for="(e, z) in entries" :key="z">
<div class="row ml-2 small" v-if="formatOneMealPlan(e)">
<div class="col-md-4 overflow-hidden text-nowrap">
<button
aria-haspopup="true"
aria-expanded="false"
type="button"
class="btn btn-link stn-sm m-0 p-0"
style="text-overflow: ellipsis;"
@click.stop="openRecipeCard($event, e)"
@mouseover="openRecipeCard($event, e)"
>
{{ formatOneRecipe(e) }}
</button>
</div>
<b-button
class="btn far text-body text-decoration-none"
variant="link"
@click="checkboxChanged()"
:class="formatChecked ? 'fa-check-square' : 'fa-square'"
/>
{{ e.amount }} - {{ e.unit }}- {{ e.recipe }}- {{ e.mealplan }}- {{ e.note }}- {{ e.unit }}
<div class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</div>
<div class="col-md-4 text-muted">{{ formatOneCreatedBy(e) }}</div>
</div>
<div class="row ml-2 light">
<div class="col-sm-1 text-nowrap">
<div style="position: static;" class=" btn-group ">
<div class="dropdown b-dropdown position-static">
<button
aria-haspopup="true"
aria-expanded="false"
type="button"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
@click.stop="$emit('open-context-menu', $event, e)"
>
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
</div>
</div>
<b-button
class="btn far text-body text-decoration-none"
variant="link"
@click="checkboxChanged(e)"
:class="formatOneChecked(e) ? 'fa-check-square' : 'fa-square'"
/>
</div>
<div class="col-sm-1">{{ formatOneAmount(e) }}</div>
<div class="col-sm-2">{{ formatOneUnit(e) }}</div>
<div class="col-sm-3">{{ formatOneFood(e) }}</div>
<div class="col-sm-4">
<div class="small" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
</div>
</div>
<hr class="w-75" />
</div>
</div>
<hr class="m-1" />
</div>
<ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width:300">
<template #menu="{ contextData }">
<ContextMenuItem><RecipeCard :recipe="contextData" :detail="false" v-if="recipe"></RecipeCard></ContextMenuItem
></template>
</ContextMenu>
</div>
</template>
@@ -71,6 +101,10 @@
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"
import ContextMenu from "@/components/ContextMenu/ContextMenu"
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
import { ApiMixin } from "@/utils/utils"
import RecipeCard from "./RecipeCard.vue"
Vue.use(BootstrapVue)
@@ -78,8 +112,8 @@ export default {
// TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
// or i'm capturing it incorrectly
name: "ShoppingLineItem",
mixins: [],
components: {},
mixins: [ApiMixin],
components: { RecipeCard, ContextMenu, ContextMenuItem },
props: {
entries: {
type: Array,
@@ -89,14 +123,15 @@ export default {
data() {
return {
showDetails: false,
recipe: undefined,
}
},
computed: {
formatAmount: function() {
return this.entries[0].amount
return this.formatOneAmount(this.entries[0])
},
formatCategory: function() {
return this.entries[0]?.food?.supermarket_category?.name ?? this.$t("Undefined")
return this.formatOneCategory(this.entries[0]) || this.$t("Undefined")
},
formatChecked: function() {
return false
@@ -109,20 +144,24 @@ export default {
}
},
formatFood: function() {
return this.entries[0]?.food?.name ?? this.$t("Undefined")
return this.formatOneFood(this.entries[0])
},
formatUnit: function() {
return this.entries[0]?.unit?.name ?? this.$t("Undefined")
return this.formatOneUnit(this.entries[0])
},
formatRecipe: function() {
if (this.entries.length == 1) {
return this.entries[0]?.recipe_mealplan?.name ?? this.$t("Undefined")
if (this.entries?.length == 1) {
return this.formatOneMealPlan(this.entries[0]) || ""
} else {
return [this.entries[0]?.recipe_mealplan?.name ?? this.$t("Undefined"), this.$t("CountMore", { count: this.entries.length - 1 })].join(" ")
let mealplan_name = this.entries.filter((x) => x?.recipe_mealplan?.name)
return [this.formatOneMealPlan(mealplan_name?.[0]), this.$t("CountMore", { count: this.entries?.length - 1 })].join(" ")
}
},
formatNotes: function() {
return [this.entries[0]?.recipe_mealplan?.mealplan_note, this.entries?.ingredient_note].filter(String).join("\n")
if (this.entries?.length == 1) {
return this.formatOneNote(this.entries[0]) || ""
}
return ""
},
},
watch: {},
@@ -146,10 +185,57 @@ export default {
// this.saveThis(item, false)
// this.$refs.table.refresh()
},
formatOneAmount: function(item) {
return item?.amount ?? 1
},
formatOneUnit: function(item) {
return item?.unit?.name ?? ""
},
formatOneCategory: function(item) {
return item?.food?.supermarket_category?.name
},
formatOneFood: function(item) {
return item.food.name
},
formatOneChecked: function(item) {
return item.checked
},
formatOneMealPlan: function(item) {
return item?.recipe_mealplan?.name
},
formatOneRecipe: function(item) {
return item?.recipe_mealplan?.recipe_name
},
formatOneNote: function(item) {
if (!item) {
item = this.entries[0]
}
return [item?.recipe_mealplan?.mealplan_note, item?.ingredient_note].filter(String)
},
formatOneCreatedBy: function(item) {
return [item?.created_by.username, "@", this.formatDate(item.created_at)].join(" ")
},
openRecipeCard: function(e, item) {
this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, { id: item.recipe_mealplan.recipe }).then((result) => {
let recipe = result.data
recipe.steps = undefined
this.recipe = true
this.$refs.recipe_card.open(e, recipe)
})
},
},
}
</script>
<!--style src="vue-multiselect/dist/vue-multiselect.min.css"></style-->
<style></style>
<style>
/* table { border-collapse:collapse } /* Ensure no space between cells */
/* tr.strikeout td { position:relative } /* Setup a new coordinate system */
/* tr.strikeout td:before { /* Create a new element that */
/* content: " "; /* …has no text content */
/* position: absolute; /* …is absolutely positioned */
/* left: 0; top: 50%; width: 100%; /* …with the top across the middle */
/* border-bottom: 1px solid #000; /* …and with a border on the top */
/* } */
</style>