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

books lazy loading details

Browse Source
This commit is contained in:
Kaibu 2021-10-12 18:20:14 +02:00
parent a7c80d65b1
commit b6c17f3bf3
3 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
vue/src/apps/CookbookView/CookbookView.vue
View File

@ -22,7 +22,7 @@
</div>
</div>
</div>
<div class="mb-3" v-for="book in filteredBooks" v-bind:key="book.id">
<div class="mb-3" v-for="book in filteredBooks" :key="book.id">
<div class="row">
<div class="col-md-12">
<b-card class="d-flex flex-column" v-hover
@ -49,7 +49,8 @@
<loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
<transition name="slide-fade">
<cookbook-slider :recipes="recipes" :book="book" v-if="current_book === book.id && !loading" v-on:refresh="refreshData"></cookbook-slider>
<cookbook-slider :recipes="recipes" :book="book" :key="`slider_${book.id}`"
v-if="current_book === book.id && !loading" v-on:refresh="refreshData"></cookbook-slider>
</transition>
</div>
</div>

23
vue/src/components/CookbookSlider.vue
View File

@ -19,11 +19,12 @@
<div class="col-md-5">
<transition name="flip" mode="out-in">
<cookbook-edit-card :book="book" v-if="current_page === 1"
v-on:editing="cookbook_editing = $event" v-on:refresh="$emit('refresh')"></cookbook-edit-card>
v-on:editing="cookbook_editing = $event"
v-on:refresh="$emit('refresh')"></cookbook-edit-card>
</transition>
<transition name="flip" mode="out-in">
<recipe-card :recipe="display_recipes[0].recipe_content"
v-if="current_page > 1" :key="display_recipes[0]"></recipe-card>
v-if="current_page > 1" :key="display_recipes[0].recipe"></recipe-card>
</transition>
</div>
<div class="col-md-5">
@ -31,9 +32,10 @@
<cookbook-toc :recipes="recipes" v-if="current_page === 1"
v-on:switchRecipe="switchRecipe($event)"></cookbook-toc>
</transition>
<transition name="flip">
<transition name="flip" mode="out-in">
<recipe-card :recipe="display_recipes[1].recipe_content"
v-if="current_page > 1 && display_recipes.length === 2" :key="display_recipes[1]"></recipe-card>
v-if="current_page > 1 && display_recipes.length === 2"
:key="display_recipes[1].recipe"></recipe-card>
</transition>
</div>
<div class="col-md-1" @click="swipeLeft" style="cursor: pointer;">
@ -50,6 +52,7 @@ import CookbookEditCard from "./CookbookEditCard";
import CookbookToc from "./CookbookToc";
import Vue2TouchEvents from "vue2-touch-events"
import Vue from "vue";
import {ApiApiFactory} from "../utils/openapi/api";
Vue.use(Vue2TouchEvents)
@ -82,6 +85,18 @@ export default {
pageChange: function (page) {
this.current_page = page
this.display_recipes = this.recipes.slice(((this.current_page - 1) - 1) * 2, (this.current_page - 1) * 2)
this.loadRecipeDetails(page)
},
loadRecipeDetails: function (page) {
this.display_recipes.forEach((recipe, index) => {
let apiClient = new ApiApiFactory()
apiClient.retrieveRecipe(recipe.recipe).then(result => {
let new_entry = Object.assign({}, recipe);
new_entry.recipe_content = result.data
this.$set(this.display_recipes, index, new_entry)
})
})
},
swipeLeft: function () {
if (this.cookbook_editing) {

33
vue/src/components/RecipeCard.vue
View File

@ -44,20 +44,22 @@
<last-cooked :recipe="recipe"></last-cooked>
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
</p>
<div class="row mt-3" v-if="detailed">
<div class="col-md-12">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h6>
<table class="table table-sm text-wrap">
<!-- 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 :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient>
<transition name="fade" mode="in-out">
<div class="row mt-3" v-if="detailed">
<div class="col-md-12">
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h6>
<table class="table table-sm text-wrap">
<!-- 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 :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient>
</template>
</template>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
</div>
</div>
</transition>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
<!-- <b-badge pill variant="success"
@ -147,5 +149,10 @@ export default {
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>