add to book reimplemented

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