119 lines
4.0 KiB
Vue
119 lines
4.0 KiB
Vue
<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"
|
|
:internal-search="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(this,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(this,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(this,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>
|