cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

delete and create added for books

Browse Source
This commit is contained in:
Kaibu
2021-09-13 20:49:25 +02:00
parent 9efc60232a
commit 22bde0424c
17 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
vue/src/apps/CookbookView/CookbookView.vue
View File

@ -1,32 +1,55 @@
<template>
<div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
<div class="mb-3" v-for="book in cookbooks" v-bind:key="book.id">
<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>
</div>
</div>
</div>
<div class="mb-3" v-for="book in filteredBooks" v-bind: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>
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>
<loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
<transition name="slide-fade">
<cookbook-slider :recipes="recipes" :book="book" v-if="current_book === book.id && !loading"></cookbook-slider>
<cookbook-slider :recipes="recipes" :book="book" v-if="current_book === book.id && !loading" v-on:refresh="refreshData"></cookbook-slider>
</transition>
</div>
</div>
@ -40,6 +63,7 @@ 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)
@ -54,6 +78,14 @@ export default {
recipes: [],
current_book: undefined,
loading: false,
search: ''
}
},
computed: {
filteredBooks: function () {
return this.cookbooks.filter(book => {
return book.name.toLowerCase().includes(this.search.toLowerCase())
})
}
},
mounted() {
@ -69,7 +101,7 @@ export default {
})
},
openBook: function (book) {
if(book === this.current_book) {
if (book === this.current_book) {
this.current_book = undefined
this.recipes = []
return
@ -82,6 +114,17 @@ export default {
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: {