books lazy loading details

vue/src/apps/CookbookView/CookbookView.vue

@@ -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>

vue/src/components/CookbookSlider.vue

@@ -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) {

vue/src/components/RecipeCard.vue

@@ -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">
+          <transition name="fade" mode="in-out">
-            <div class="col-md-12">
+            <div class="row mt-3" v-if="detailed">
-              <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h6>
+              <div class="col-md-12">
-              <table class="table table-sm text-wrap">
+                <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t('Ingredients') }}</h6>
-                <!-- eslint-disable vue/no-v-for-template-key-on-child -->
+                <table class="table table-sm text-wrap">
-                <template v-for="s in recipe.steps">
+                  <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                  <template v-for="i in s.ingredients">
+                  <template v-for="s in recipe.steps">
-                    <Ingredient :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient>
+                    <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 -->
-                <!-- eslint-enable vue/no-v-for-template-key-on-child -->
+                </table>
-              </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>