Fix after rebase

vue/src/apps/CookbookView/CookbookView.vue

@@ -1,158 +1,164 @@
 <template>
-  <div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
-    <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
-      <div class="row">
-        <div class="col col-md-12">
-          <div class="row justify-content-center">
-            <div class="col-12 col-lg-10 mt-3 mb-3">
-              <b-input-group>
-                <b-input class="form-control form-control-lg form-control-borderless form-control-search"
-                         v-model="search"
-                         v-bind:placeholder="$t('Search')"></b-input>
-                <b-input-group-append>
-                  <b-button variant="primary"
-                            v-b-tooltip.hover :title="$t('Create')"
-                            @click="createNew">
-                    <i class="fas fa-plus"></i>
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <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
-                  v-on:click="openBook(book.id)">
-            <b-row no-gutters style="height:inherit;">
-              <b-col no-gutters md="2" style="height:inherit;">
-                <h3>{{ book.icon }}</h3>
-              </b-col>
-              <b-col no-gutters md="10" style="height:inherit;">
-                <b-card-body class="m-0 py-0" style="height:inherit;">
-                  <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
-                    <h5 class="m-0 mt-1 text-truncate">{{ book.name }} <span class="float-right"><i
-                        class="fa fa-book"></i></span></h5>
-                    <div class="m-0 text-truncate">{{ book.description }}</div>
-                    <div class="mt-auto mb-1 d-flex flex-row justify-content-end">
+    <div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
+        <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
+            <div class="row">
+                <div class="col col-md-12">
+                    <div class="row justify-content-center">
+                        <div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
+                            <b-input-group>
+                                <b-input
+                                    class="form-control form-control-lg form-control-borderless form-control-search"
+                                    v-model="search"
+                                    v-bind:placeholder="$t('Search')"
+                                ></b-input>
+                                <b-input-group-append>
+                                    <b-button variant="primary" v-b-tooltip.hover :title="$t('Create')" @click="createNew">
+                                        <i class="fas fa-plus"></i>
+                                    </b-button>
+                                </b-input-group-append>
+                            </b-input-group>
+                        </div>
                     </div>
-                  </b-card-text>
-                </b-card-body>
-              </b-col>
-            </b-row>
-          </b-card>
+                </div>
+            </div>
         </div>
-      </div>
+        <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 v-on:click="openBook(book.id)">
+                        <b-row no-gutters style="height:inherit;">
+                            <b-col no-gutters md="2" style="height:inherit;">
+                                <h3>{{ book.icon }}</h3>
+                            </b-col>
+                            <b-col no-gutters md="10" style="height:inherit;">
+                                <b-card-body class="m-0 py-0" style="height:inherit;">
+                                    <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
+                                        <h5 class="m-0 mt-1 text-truncate">
+                                            {{ book.name }} <span class="float-right"><i class="fa fa-book"></i></span>
+                                        </h5>
+                                        <div class="m-0 text-truncate">{{ book.description }}</div>
+                                        <div class="mt-auto mb-1 d-flex flex-row justify-content-end"></div>
+                                    </b-card-text>
+                                </b-card-body>
+                            </b-col>
+                        </b-row>
+                    </b-card>
+                </div>
+            </div>
 
-      <loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
-      <transition name="slide-fade">
-        <cookbook-slider :recipes="recipes" :book="book" :key="`slider_${book.id}`"
-                         v-if="current_book === book.id && !loading" v-on:refresh="refreshData"></cookbook-slider>
-      </transition>
+            <loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
+            <transition name="slide-fade">
+                <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>
-  </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import {BootstrapVue} from 'bootstrap-vue'
+import Vue from "vue"
+import { BootstrapVue } from "bootstrap-vue"
 
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import {ApiApiFactory} from "@/utils/openapi/api.ts";
-import CookbookSlider from "../../components/CookbookSlider";
-import LoadingSpinner from "../../components/LoadingSpinner";
-import {StandardToasts} from "../../utils/utils";
+import "bootstrap-vue/dist/bootstrap-vue.css"
+import { ApiApiFactory } from "@/utils/openapi/api"
+import CookbookSlider from "@/components/CookbookSlider"
+import LoadingSpinner from "@/components/LoadingSpinner"
+import { StandardToasts } from "@/utils/utils"
 
 Vue.use(BootstrapVue)
 
 export default {
-  name: 'CookbookView',
-  mixins: [],
-  components: {LoadingSpinner, CookbookSlider},
-  data() {
-    return {
-      cookbooks: [],
-      book_background: window.IMAGE_BOOK,
-      recipes: [],
-      current_book: undefined,
-      loading: false,
-      search: ''
-    }
-  },
-  computed: {
-    filteredBooks: function () {
-      return this.cookbooks.filter(book => {
-        return book.name.toLowerCase().includes(this.search.toLowerCase())
-      })
-    }
-  },
-  mounted() {
-    this.refreshData()
-    this.$i18n.locale = window.CUSTOM_LOCALE
-  },
-  methods: {
-    refreshData: function () {
-      let apiClient = new ApiApiFactory()
-
-      apiClient.listRecipeBooks().then(result => {
-        this.cookbooks = result.data
-      })
+    name: "CookbookView",
+    mixins: [],
+    components: { LoadingSpinner, CookbookSlider },
+    data() {
+        return {
+            cookbooks: [],
+            book_background: window.IMAGE_BOOK,
+            recipes: [],
+            current_book: undefined,
+            loading: false,
+            search: "",
+        }
     },
-    openBook: function (book) {
-      if (book === this.current_book) {
-        this.current_book = undefined
-        this.recipes = []
-        return
-      }
-      this.loading = true
-      let apiClient = new ApiApiFactory()
-
-      this.current_book = book
-      apiClient.listRecipeBookEntrys({query: {book: book}}).then(result => {
-        this.recipes = result.data
-        this.loading = false
-      })
+    computed: {
+        filteredBooks: function() {
+            return this.cookbooks.filter((book) => {
+                return book.name.toLowerCase().includes(this.search.toLowerCase())
+            })
+        },
     },
-    createNew: function () {
-      let apiClient = new ApiApiFactory()
-
-      apiClient.createRecipeBook({name: this.$t('New_Cookbook'), description: '', icon: '', shared: []}).then(result => {
-        let new_book = result.data
+    mounted() {
         this.refreshData()
-        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
-      }).catch(error => {
-        StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
-      })
-    }
-  },
-  directives: {
-    hover: {
-      inserted: function (el) {
-        el.addEventListener('mouseenter', () => {
-          el.classList.add("shadow")
-        });
-        el.addEventListener('mouseleave', () => {
-          el.classList.remove("shadow")
-        });
-      }
-    }
-  }
-}
+        this.$i18n.locale = window.CUSTOM_LOCALE
+    },
+    methods: {
+        refreshData: function() {
+            let apiClient = new ApiApiFactory()
 
+            apiClient.listRecipeBooks().then((result) => {
+                this.cookbooks = result.data
+            })
+        },
+        openBook: function(book) {
+            if (book === this.current_book) {
+                this.current_book = undefined
+                this.recipes = []
+                return
+            }
+            this.loading = true
+            let apiClient = new ApiApiFactory()
+
+            this.current_book = book
+            apiClient.listRecipeBookEntrys({ query: { book: book } }).then((result) => {
+                this.recipes = result.data
+                this.loading = false
+            })
+        },
+        createNew: function() {
+            let apiClient = new ApiApiFactory()
+
+            apiClient
+                .createRecipeBook({ name: "New Book", description: "", icon: "", shared: [] })
+                .then((result) => {
+                    let new_book = result.data
+                    this.refreshData()
+                    StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+                })
+                .catch((error) => {
+                    StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
+                })
+        },
+    },
+    directives: {
+        hover: {
+            inserted: function(el) {
+                el.addEventListener("mouseenter", () => {
+                    el.classList.add("shadow")
+                })
+                el.addEventListener("mouseleave", () => {
+                    el.classList.remove("shadow")
+                })
+            },
+        },
+    },
+}
 </script>
 
 <style>
 .slide-fade-enter-active {
-  transition: all .6s ease;
+    transition: all 0.6s ease;
 }
 
 .slide-fade-enter, .slide-fade-leave-to
   /* .slide-fade-leave-active below version 2.1.8 */
-{
-  transform: translateX(10px);
-  opacity: 0;
+ {
+    transform: translateX(10px);
+    opacity: 0;
 }
 </style>

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -166,6 +166,7 @@
                 >
                     <a class="dropdown-item p-2" href="#"><i class="fas fa-shopping-cart"></i> {{ $t("Add_to_Shopping") }}</a>
                 </ContextMenuItem>
+                <!-- TODO: Add new shopping Modal -->
                 <ContextMenuItem
                     @click="
                         $refs.menu.close()
@@ -250,22 +251,24 @@
 </template>
 
 <script>
+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 { CalendarView, CalendarMathMixin } from "vue-simple-calendar/src/components/bundle"
-import Vue from "vue"
-import { ApiApiFactory } from "@/utils/openapi/api"
-import MealPlanCard from "../../components/MealPlanCard"
-import moment from "moment"
-import { ApiMixin, StandardToasts } from "@/utils/utils"
-import MealPlanEditModal from "@/components/Modals/MealPlanEditModal"
-import VueCookies from "vue-cookies"
+import MealPlanCard from "@/components/MealPlanCard"
+import MealPlanEditModal from "@/components/MealPlanEditModal"
 import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader"
-import EmojiInput from "../../components/Modals/EmojiInput"
+import EmojiInput from "@/components/Modals/EmojiInput"
+
+import moment from "moment"
 import draggable from "vuedraggable"
+import VueCookies from "vue-cookies"
+
+import { ApiMixin, StandardToasts } from "@/utils/utils"
+import { CalendarView, CalendarMathMixin } from "vue-simple-calendar/src/components/bundle"
+import { ApiApiFactory } from "@/utils/openapi/api"
 
 const { makeToast } = require("@/utils/utils")
 

vue/src/apps/RecipeView/RecipeView.vue

@@ -25,8 +25,34 @@
             </div>
 
             <div style="text-align: center">
-                <keywords :recipe="recipe"></keywords>
+        <keywords-component :recipe="recipe"></keywords-component>
+      </div>
+
+      <hr/>
+      <div class="row">
+        <div class="col col-md-3">
+          <div class="row d-flex" style="padding-left: 16px">
+            <div class="my-auto" style="padding-right: 4px">
+              <i class="fas fa-user-clock fa-2x text-primary"></i>
             </div>
+            <div class="my-auto" style="padding-right: 4px">
+              <span class="text-primary"><b>{{ $t('Preparation') }}</b></span><br/>
+              {{ recipe.working_time }} {{ $t('min') }}
+            </div>
+
+            <div class="row text-center">
+                <div class="col col-md-12">
+                    <recipe-rating :recipe="recipe"></recipe-rating>
+                    <last-cooked :recipe="recipe" class="mt-2"></last-cooked>
+                </div>
+            </div>
+
+            <div class="my-auto">
+                <div class="col-12" style="text-align: center">
+                    <i>{{ recipe.description }}</i>
+                </div>
+            </div>
+
 
             <hr />
             <div class="row">
@@ -92,38 +118,32 @@
                         </div>
                     </div>
 
-                    <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
-                        <div class="col-12">
-                            <Nutrition :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
-            <template v-if="!recipe.internal">
-                <div v-if="recipe.file_path.includes('.pdf')">
-                    <PdfViewer :recipe="recipe"></PdfViewer>
-                </div>
-                <div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
-                    <ImageViewer :recipe="recipe"></ImageViewer>
-                </div>
-            </template>
 
-            <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-                <Step
-                    :recipe="recipe"
-                    :step="s"
-                    :ingredient_factor="ingredient_factor"
-                    :index="index"
-                    :start_time="start_time"
-                    @update-start-time="updateStartTime"
-                    @checked-state-changed="updateIngredientCheckedState"
-                ></Step>
+          <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
+            <div class="col-12">
+              <Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component>
             </div>
         </div>
 
         <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
 
+        <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
+            <div class="col col-md-12">
+                <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
+            </div>
+        </div>
+      </template>
+
+
+      <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
+        <step-component :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
+              @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></step-component>
+      </div>
+    </div>
+
+        <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
+
         <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
             <div class="col col-md-12">
                 <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
@@ -139,17 +159,17 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import { apiLoadRecipe } from "@/utils/api"
 
-import Step from "@/components/Step"
+import StepComponent from "@/components/StepComponent";
 import RecipeContextMenu from "@/components/ContextMenu/RecipeContextMenu"
 import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
 
 import PdfViewer from "@/components/PdfViewer"
 import ImageViewer from "@/components/ImageViewer"
-import Nutrition from "@/components/Nutrition"
 import IngredientsCard from "@/components/IngredientsCard"
 
 import moment from "moment"
-import Keywords from "@/components/Keywords"
+import KeywordsComponent from "@/components/KeywordsComponent";
+import NutritionComponent from "@/components/NutritionComponent";
 import LoadingSpinner from "@/components/LoadingSpinner"
 import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
 import RecipeRating from "@/components/RecipeRating"
@@ -168,10 +188,10 @@ export default {
         PdfViewer,
         ImageViewer,
         IngredientsCard,
-        Step,
+        StepComponent,
         RecipeContextMenu,
-        Nutrition,
-        Keywords,
+        NutritionComponent,
+        KeywordsComponent,
         LoadingSpinner,
         AddRecipeToBook,
     },