basic tests with new factories

vue/src/apps/RecipeView/RecipeView.vue

@@ -25,7 +25,7 @@
             </div>
 
             <div style="text-align: center">
-                <keywords-component :recipe="recipe" />
+                <keywords-component :recipe="recipe"></keywords-component>
             </div>
 
             <hr />
@@ -57,21 +57,32 @@
                         </div>
                     </div>
                 </div>
-              </div>
-              <br/>
-              <template v-for="s in recipe.steps" v-bind:key="s.id">
-                <div class="row" >
-                  <div class="col-md-12">
-                    <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
-                      <b v-bind:key="s.id">{{s.name}}</b>
-                    </template>
-                    <table class="table table-sm">
-                        <template v-for="i in s.ingredients" :key="i.id">
-                          <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor"
-                                      @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
-                        </template>
-                    </table>
-                  </div>
+
+                <div class="col col-md-4 col-10 mt-2 mt-md-0 mt-lg-0 mt-xl-0">
+                    <div class="row d-flex" style="padding-left: 16px">
+                        <div class="my-auto" style="padding-right: 4px">
+                            <i class="fas fa-pizza-slice fa-2x text-primary"></i>
+                        </div>
+                        <div class="my-auto" style="padding-right: 4px">
+                            <input
+                                style="text-align: right; border-width: 0px; border: none; padding: 0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
+                                value="1"
+                                maxlength="3"
+                                min="0"
+                                type="number"
+                                class="form-control form-control-lg"
+                                v-model.number="servings"
+                            />
+                        </div>
+                        <div class="my-auto">
+                            <span class="text-primary"
+                                ><b
+                                    ><template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template
+                                    ><template v-else>{{ recipe.servings_text }}</template></b
+                                ></span
+                            >
+                        </div>
+                    </div>
                 </div>
 
                 <div class="col col-md-2 col-2 my-auto" style="text-align: right; padding-right: 1vw">
@@ -82,7 +93,30 @@
 
             <div class="row">
                 <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0">
-                    <ingredients-card :steps="recipe.steps" :ingredient_factor="ingredient_factor" :servings="servings" :header="true" @checked-state-changed="updateIngredientCheckedState" />
+                    <div class="card border-primary">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col col-md-8">
+                                    <h4 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h4>
+                                </div>
+                            </div>
+                            <br />
+                            <template v-for="s in recipe.steps" v-bind:key="s.id">
+                                <div class="row">
+                                    <div class="col-md-12">
+                                        <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
+                                            <b v-bind:key="s.id">{{ s.name }}</b>
+                                        </template>
+                                        <table class="table table-sm">
+                                            <template v-for="i in s.ingredients" :key="i.id">
+                                                <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
+                                            </template>
+                                        </table>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2">
@@ -139,21 +173,25 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import { apiLoadRecipe } from "@/utils/api"
 
-import StepComponent from "@/components/StepComponent"
+import Step from "@/components/StepComponent"
 import RecipeContextMenu from "@/components/RecipeContextMenu"
 import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
+import Ingredient from "@/components/IngredientComponent"
 
 import PdfViewer from "@/components/PdfViewer"
 import ImageViewer from "@/components/ImageViewer"
-import IngredientsCard from "@/components/IngredientsCard"
+import Nutrition from "@/components/NutritionComponent"
 
 import moment from "moment"
-import KeywordsComponent from "@/components/KeywordsComponent"
-import NutritionComponent from "@/components/NutritionComponent"
+import Keywords from "@/components/KeywordsComponent"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
+import AddRecipeToBook from "@/components/AddRecipeToBook"
 import RecipeRating from "@/components/RecipeRating"
 import LastCooked from "@/components/LastCooked"
+import IngredientComponent from "@/components/IngredientComponent"
+import StepComponent from "@/components/StepComponent"
+import KeywordsComponent from "@/components/KeywordsComponent"
+import NutritionComponent from "@/components/NutritionComponent"
 
 Vue.prototype.moment = moment
 
@@ -167,7 +205,7 @@ export default {
         RecipeRating,
         PdfViewer,
         ImageViewer,
-        IngredientsCard,
+        IngredientComponent,
         StepComponent,
         RecipeContextMenu,
         NutritionComponent,

vue/src/components/AddRecipeToBook.vue

@@ -0,0 +1,122 @@
+<template>
+
+  <div>
+    <b-modal class="modal" :id="`id_modal_add_book_${modal_id}`" :title="$t('Manage_Books')" :ok-title="$t('Add')"
+             :cancel-title="$t('Close')" @ok="addToBook()" @shown="loadBookEntries">
+      <ul class="list-group">
+          <li  class="list-group-item d-flex justify-content-between align-items-center" v-for="be in this.recipe_book_list" v-bind:key="be.id">
+            {{ be.book_content.name }} <span class="btn btn-sm btn-danger" @click="removeFromBook(be)"><i class="fa fa-trash-alt"></i></span>
+          </li>
+        </ul>
+
+      <multiselect
+          style="margin-top: 1vh"
+          v-model="selected_book"
+          :options="books_filtered"
+          :taggable="true"
+          @tag="createBook"
+          v-bind:tag-placeholder="$t('Create')"
+          :placeholder="$t('Select_Book')"
+          label="name"
+          track-by="id"
+          id="id_books"
+          :multiple="false"
+          :loading="books_loading"
+          @search-change="loadBooks">
+      </multiselect>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+
+import Multiselect from 'vue-multiselect'
+
+import moment from 'moment'
+
+Vue.prototype.moment = moment
+
+import Vue from "vue";
+import {BootstrapVue} from "bootstrap-vue";
+import {ApiApiFactory} from "@/utils/openapi/api";
+import {makeStandardToast, StandardToasts} from "@/utils/utils";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'AddRecipeToBook',
+  components: {
+    Multiselect
+  },
+  props: {
+    recipe: Object,
+    modal_id: Number
+  },
+  data() {
+    return {
+      books: [],
+      books_loading: false,
+      recipe_book_list: [],
+      selected_book: null,
+    }
+  },
+  computed: {
+    books_filtered: function () {
+      let books_filtered = []
+
+      this.books.forEach(b => {
+        if (this.recipe_book_list.filter(e => e.book === b.id).length === 0) {
+          books_filtered.push(b)
+        }
+      })
+
+      return books_filtered
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    loadBooks: function (query) {
+      this.books_loading = true
+      let apiFactory = new ApiApiFactory()
+      apiFactory.listRecipeBooks({query: {query: query}}).then(results => {
+        this.books = results.data.filter(e => this.recipe_book_list.indexOf(e) === -1)
+        this.books_loading = false
+      })
+    },
+    createBook: function (name) {
+      let apiFactory = new ApiApiFactory()
+      apiFactory.createRecipeBook({name: name}).then(r => {
+        this.books.push(r.data)
+        this.selected_book = r.data
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+      })
+    },
+    addToBook: function () {
+      let apiFactory = new ApiApiFactory()
+      apiFactory.createRecipeBookEntry({book: this.selected_book.id, recipe: this.recipe.id}).then(r => {
+        this.recipe_book_list.push(r.data)
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+      })
+    },
+    removeFromBook: function (book_entry) {
+      let apiFactory = new ApiApiFactory()
+      apiFactory.destroyRecipeBookEntry(book_entry.id).then(r => {
+        this.recipe_book_list = this.recipe_book_list.filter(e => e.id !== book_entry.id)
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
+      })
+    },
+    loadBookEntries: function () {
+
+      let apiFactory = new ApiApiFactory()
+      apiFactory.listRecipeBookEntrys({query: {recipe: this.recipe.id}}).then(r => {
+        this.recipe_book_list = r.data
+        this.loadBooks('')
+      })
+    }
+  }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

vue/src/utils/openapi/api.ts

@@ -1097,6 +1097,12 @@ export interface MealPlan {
      * @memberof MealPlan
      */
     meal_type_name?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MealPlan
+     */
+    shopping?: string;
 }
 /**
  * 
@@ -3024,6 +3030,18 @@ export interface UserPreference {
      * @memberof UserPreference
      */
     shopping_recent_days?: number;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserPreference
+     */
+    csv_delim?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof UserPreference
+     */
+    csv_prefix?: string;
 }
 
 /**