add to book reimplemented

vue/src/apps/RecipeView/RecipeView.vue

@@ -70,9 +70,8 @@
       </div>
       <hr/>
 
-      <div class="row" style="margin-top: 2vh">
-        <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0"
-             style="margin-top: 2vh">
+      <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">
           <div class="card border-primary">
             <div class="card-body">
               <div class="row">
@@ -108,7 +107,7 @@
             </div>
           </div>
 
-          <div class="row" style="margin-top: 2vh">
+          <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
             <div class="col-12">
               <Nutrition :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition>
             </div>
@@ -134,6 +133,8 @@
               @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
       </div>
     </div>
+
+    <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
   </div>
 </template>
 
@@ -157,6 +158,7 @@ import Nutrition from "@/components/Nutrition";
 import moment from 'moment'
 import Keywords from "@/components/Keywords";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import AddRecipeToBook from "@/components/AddRecipeToBook";
 
 Vue.prototype.moment = moment
 
@@ -178,6 +180,7 @@ export default {
     Nutrition,
     Keywords,
     LoadingSpinner,
+    AddRecipeToBook,
   },
   computed: {
     ingredient_factor: function () {

vue/src/components/AddRecipeToBook.vue

@@ -0,0 +1,73 @@
+<template>
+
+  <div>
+    <b-modal class="modal" id="id_modal_add_book" :title="_('Add to Book')" :ok-title="_('Add')"
+             :cancel-title="_('Close')" @ok="addToBook()">
+
+      <multiselect
+          v-model="selected_book"
+          :options="books"
+
+          :preserve-search="true"
+          :placeholder="_('Select Book')"
+          label="name"
+          track-by="id"
+          id="id_books"
+          :multiple="false"
+
+          @search-change="loadBook">
+      </multiselect>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+
+import {GettextMixin} from "@/utils/utils";
+import Multiselect from 'vue-multiselect'
+
+import moment from 'moment'
+
+Vue.prototype.moment = moment
+
+import Vue from "vue";
+import {BootstrapVue} from "bootstrap-vue";
+import {apiAddRecipeBookEntry, apiLoadCookBooks, apiLogCooking} from "@/utils/api";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'AddRecipeToBook',
+  mixins: [
+    GettextMixin,
+  ],
+  components: {
+    Multiselect
+  },
+  props: {
+    recipe: Object,
+  },
+  data() {
+    return {
+      books: [],
+      selected_book: null,
+    }
+  },
+  mounted() {
+    this.loadBook('')
+  },
+  methods: {
+    loadBook: function (query) {
+      apiLoadCookBooks(query).then(results => {
+        console.log(results)
+        this.books = results
+      })
+    },
+    addToBook() {
+      apiAddRecipeBookEntry({'recipe': this.recipe.id, 'book': this.selected_book.id})
+    },
+  }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

vue/src/components/RecipeContextMenu.vue

@@ -15,7 +15,7 @@
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
             class="fas fa-exchange-alt fa-fw"></i> {{ _('Convert to internal recipe') }}</a>
 
-        <button class="dropdown-item" onclick="$('#bookmarkModal').modal({'show':true})">
+        <button class="dropdown-item" @click="$bvModal.show('id_modal_add_book')">
           <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
         </button>
 

vue/src/components/Step.vue

@@ -154,7 +154,9 @@ export default {
       return calculateAmount(x, this.ingredient_factor)
     },
     updateTime: function () {
-      this.$emit('update-start-time', moment(this.set_time_input).add(this.time_offset * -1, 'minutes').format('yyyy-MM-DDTHH:mm'))
+      let new_start_time = moment(this.set_time_input).add(this.step.time_offset * -1, 'minutes').format('yyyy-MM-DDTHH:mm')
+
+      this.$emit('update-start-time', new_start_time)
       this.closePopover()
     },
     closePopover: function () {

vue/src/utils/api.js

@@ -28,6 +28,25 @@ export function apiLogCooking(cook_log) {
     })
 }
 
+export function apiLoadCookBooks(query) {
+    return axios.get(resolveDjangoUrl('api:recipebook-list') + '?query=' + query).then((response) => {
+        console.log(response)
+        return response.data
+    }).catch((err) => {
+        handleError(err, 'There was an error creating a resource!', 'danger')
+    })
+}
+
+export function apiAddRecipeBookEntry(entry) {
+    return axios.post(resolveDjangoUrl('api:recipebookentry-list',), entry).then((response) => {
+        console.log(response)
+        makeToast('Saved', 'Recipe Book entry saved!', 'success')
+    }).catch((err) => {
+        handleError(err, 'There was an error creating a resource!', 'danger')
+    })
+}
+
+
 function handleError(error, message) {
     if ('response' in error) {
         console.log(error.response)