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: {

16
vue/src/components/CookbookEditCard.vue
View File

@ -2,7 +2,7 @@
<b-card no-body v-hover>
<b-card-header class="p-4">
<h5>{{ book_copy.icon }}&nbsp;{{ book_copy.name }}
<span class="float-right" @click="editOrSave"><i
<span class="float-right text-primary" @click="editOrSave"><i
class="fa" v-bind:class="{ 'fa-pen': !editing, 'fa-save': editing }"
aria-hidden="true"></i></span></h5>
</b-card-header>
@ -24,6 +24,8 @@
</textarea>
</div>
<button v-if="editing" class="btn btn-danger" @click="deleteBook">{{$t('Delete')}}</button>
<button v-if="editing" class="btn btn-primary float-right" @click="editOrSave">{{$t('Save')}}</button>
<b-card-text style="text-overflow: ellipsis;" v-if="!editing">
{{ book_copy.description }}
</b-card-text>
@ -97,6 +99,18 @@ export default {
this.users = result.data
})
},
deleteBook: function () {
if (confirm(this.$t('delete_confirmation', {source: this.book.name}))) {
let apiClient = new ApiApiFactory()
apiClient.destroyRecipeBook(this.book.id).then(result => {
this.$emit('refresh')
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
}).catch(error => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
})
}
}
}
}
</script>

2
vue/src/components/CookbookSlider.vue
View File

@ -19,7 +19,7 @@
<div class="col-md-5">
<transition name="flip" mode="out-in">
<cookbook-edit-card :book="book" v-if="current_page === 1"
v-on:editing="cookbook_editing = $event"></cookbook-edit-card>
v-on:editing="cookbook_editing = $event" v-on:refresh="$emit('refresh')"></cookbook-edit-card>
</transition>
<transition name="flip" mode="out-in">
<recipe-card :recipe="display_recipes[0].recipe_content"

83
vue/src/utils/models.js
View File

@ -22,7 +22,7 @@ export class Models {
'operator': 'not_exist',
'true': 0,
'false': undefined
}
}
},
'tree': {'default': undefined},
},
@ -34,10 +34,10 @@ export class Models {
'type': 'instruction',
'function': 'translate',
'phrase': "del_confimation_tree",
'params':[
'params': [
{
'token': 'source',
'from':'item1',
'from': 'item1',
'attribute': "name"
}
]
@ -51,7 +51,7 @@ export class Models {
'type': 'lookup',
'field': 'target',
'list': 'self',
'sticky_options': [{'id': 0,'name': i18n.t('tree_root')}]
'sticky_options': [{'id': 0, 'name': i18n.t('tree_root')}]
}
}
}
@ -111,7 +111,7 @@ export class Models {
}
static KEYWORD = {
'name': i18n.t('Keyword'), // *OPTIONAL: parameters will be built model -> model_type -> default
'apiName': 'Keyword',
'apiName': 'Keyword',
'model_type': this.TREE,
'badges': {
'icon': true
@ -145,7 +145,7 @@ export class Models {
}
static UNIT = {
'name': i18n.t('Unit'),
'apiName': 'Unit',
'apiName': 'Unit',
'create': {
'params': [['name', 'description']],
'form': {
@ -170,7 +170,32 @@ export class Models {
static SHOPPING_LIST = {}
static RECIPE_BOOK = {
'name': i18n.t('Recipe_Book'),
'apiName': 'RecipeBook',
'apiName': 'RecipeBook',
'create': {
'params': [['name', 'description', 'icon']],
'form': {
'name': {
'form_field': true,
'type': 'text',
'field': 'name',
'label': i18n.t('Name'),
'placeholder': ''
},
'description': {
'form_field': true,
'type': 'text',
'field': 'description',
'label': i18n.t('Description'),
'placeholder': ''
},
'icon': {
'form_field': true,
'type': 'emoji',
'field': 'icon',
'label': i18n.t('Icon')
},
}
},
}
static SHOPPING_CATEGORY = {
'name': i18n.t('Shopping_Category'),
@ -195,14 +220,14 @@ export class Models {
}
},
}
static RECIPE = {
'name': i18n.t('Recipe'),
'apiName': 'Recipe',
'list': {
'params': ['query', 'keywords', 'foods', 'units', 'rating', 'books', 'keywordsOr', 'foodsOr', 'booksOr', 'internal', 'random', '_new', 'page', 'pageSize', 'options'],
'config': {
'foods': {'type':'string'},
'foods': {'type': 'string'},
'keywords': {'type': 'string'},
'books': {'type': 'string'},
}
@ -228,11 +253,11 @@ export class Actions {
'title': {
'function': 'translate',
'phrase': 'create_title',
'params' : [
'params': [
{
'token': 'type',
'from': 'model',
'attribute':'name'
'attribute': 'name'
}
],
},
@ -245,11 +270,11 @@ export class Actions {
"form_title": {
'function': 'translate',
'phrase': 'edit_title',
'params' : [
'params': [
{
'token': 'type',
'from': 'model',
'attribute':'name'
'attribute': 'name'
}
],
},
@ -261,11 +286,11 @@ export class Actions {
'title': {
'function': 'translate',
'phrase': 'delete_title',
'params' : [
'params': [
{
'token': 'type',
'from': 'model',
'attribute':'name'
'attribute': 'name'
}
],
},
@ -276,10 +301,10 @@ export class Actions {
'label': {
'function': 'translate',
'phrase': "delete_confirmation",
'params':[
'params': [
{
'token': 'source',
'from':'item1',
'from': 'item1',
'attribute': "name"
}
]
@ -312,11 +337,11 @@ export class Actions {
'title': {
'function': 'translate',
'phrase': 'merge_title',
'params' : [
'params': [
{
'token': 'type',
'from': 'model',
'attribute':'name'
'attribute': 'name'
}
],
},
@ -327,15 +352,15 @@ export class Actions {
'label': {
'function': 'translate',
'phrase': "merge_selection",
'params':[
'params': [
{
'token': 'source',
'from':'item1',
'from': 'item1',
'attribute': "name"
},
{
'token': 'type',
'from':'model',
'from': 'model',
'attribute': "name"
},
]
@ -360,11 +385,11 @@ export class Actions {
'title': {
'function': 'translate',
'phrase': 'move_title',
'params' : [
'params': [
{
'token': 'type',
'from': 'model',
'attribute':'name'
'attribute': 'name'
}
],
},
@ -375,20 +400,20 @@ export class Actions {
'label': {
'function': 'translate',
'phrase': "move_selection",
'params':[
'params': [
{
'token': 'source',
'from':'item1',
'from': 'item1',
'attribute': "name"
},
{
'token': 'type',
'from':'model',
'from': 'model',
'attribute': "name"
},
]
}
},
'target': {
'form_field': true,
@ -397,6 +422,6 @@ export class Actions {
'list': 'self'
}
}
}
}