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

improve experience when importing multiple recipes

Browse Source
This commit is contained in:
vabene1111 2022-04-22 20:19:39 +02:00
parent 3cf0395a18
commit 1740913a14
3 changed files with 107 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/views/api.py
View File

@ -1199,7 +1199,7 @@ def recipe_from_source(request):
'recipe_json': recipe_json, 'recipe_json': recipe_json,
'recipe_tree': recipe_tree, 'recipe_tree': recipe_tree,
'recipe_html': recipe_html, 'recipe_html': recipe_html,
'recipe_images': recipe_images, 'recipe_images': list(dict.fromkeys(recipe_images)),
}) })

140
vue/src/apps/ImportView/ImportView.vue
View File

@ -37,7 +37,8 @@
v-model="website_url" v-model="website_url"
placeholder="Website URL" @paste="onURLPaste"></b-input> placeholder="Website URL" @paste="onURLPaste"></b-input>
<b-input-group-append> <b-input-group-append>
<b-button variant="primary" @click="loadRecipe(false,undefined)" <b-button variant="primary"
@click="loadRecipe(website_url,false,undefined)"
v-if="!import_multiple"><i v-if="!import_multiple"><i
class="fas fa-search fa-fw"></i> class="fas fa-search fa-fw"></i>
</b-button> </b-button>
@ -57,7 +58,7 @@
<ul> <ul>
<li v-for="x in recent_urls" v-bind:key="x"> <li v-for="x in recent_urls" v-bind:key="x">
<a href="#" <a href="#"
@click="website_url=x; loadRecipe(false, undefined)">{{ @click="loadRecipe(x, false, undefined)">{{
x x
}}</a> }}</a>
</li> </li>
@ -195,7 +196,8 @@
</b-card> </b-card>
<!-- IMPORT --> <!-- IMPORT -->
<b-card no-body v-if="recipe_json !== undefined"> <b-card no-body
v-if="recipe_json !== undefined || (imported_recipes.length > 0 || failed_imports.length>0)">
<b-card-header header-tag="header" class="p-1" role="tab"> <b-card-header header-tag="header" class="p-1" role="tab">
<b-col cols="12" md="6" offset="0" offset-md="3"> <b-col cols="12" md="6" offset="0" offset-md="3">
<b-button block v-b-toggle.id_accordion_import variant="info" <b-button block v-b-toggle.id_accordion_import variant="info"
@ -207,18 +209,53 @@
role="tabpanel" v-model="collapse_visible.import"> role="tabpanel" v-model="collapse_visible.import">
<b-card-body class="text-center"> <b-card-body class="text-center">
<b-row> <b-row>
<b-col cols="12" md="6" xl="4" offset="0" offset-md="3" offset-xl="4"> <b-col cols="12" md="6" xl="4" offset="0" offset-md="3" offset-xl="4"
v-if="!import_multiple">
<recipe-card :recipe="recipe_json" :detailed="false" <recipe-card :recipe="recipe_json" :detailed="false"
:show_context_menu="false"></recipe-card> :show_context_menu="false"
></recipe-card>
</b-col>
<b-col>
<b-list-group>
<b-list-group-item
v-for="r in imported_recipes"
v-bind:key="r.id"
v-hover>
<div class="clearfix">
<a class="float-left" target="_blank"
rel="noreferrer nofollow"
:href="resolveDjangoUrl('view_recipe',r.id)">{{
r.name
}}</a>
<span class="float-right">Imported</span>
<!-- TODO localize -->
</div>
</b-list-group-item>
<b-list-group-item
v-for="u in failed_imports"
v-bind:key="u"
v-hover>
<div class="clearfix">
<a class="float-left" target="_blank"
rel="noreferrer nofollow" :href="u">{{ u }}</a>
<span class="float-right">Failed</span>
<!-- TODO localize -->
</div>
</b-list-group-item>
</b-list-group>
</b-col> </b-col>
</b-row> </b-row>
</b-card-body> </b-card-body>
<b-card-footer class="text-center"> <b-card-footer class="text-center">
<b-button-group> <b-button-group>
<b-button @click="importRecipe('view')">Import & View</b-button> <b-button @click="importRecipe('view')" v-if="!import_multiple">Import & View</b-button> <!-- TODO localize -->
<b-button @click="importRecipe('edit')" variant="success">Import & Edit <b-button @click="importRecipe('edit')" variant="success" v-if="!import_multiple">Import & Edit
</b-button> </b-button>
<b-button @click="importRecipe('import')">Import & Restart <b-button @click="importRecipe('import')" v-if="!import_multiple">Import & Restart
</b-button>
<b-button @click="location.reload()">Restart
</b-button> </b-button>
</b-button-group> </b-button-group>
</b-card-footer> </b-card-footer>
@ -261,7 +298,7 @@
:placeholder="$t('paste_json')" style="font-size: 12px"> :placeholder="$t('paste_json')" style="font-size: 12px">
</b-textarea> </b-textarea>
</div> </div>
<b-button @click="loadRecipe(false, undefined)" variant="primary"><i <b-button @click="loadRecipe('',false, undefined)" variant="primary"><i
class="fas fa-code"></i> class="fas fa-code"></i>
{{ $t('Import') }} {{ $t('Import') }}
</b-button> </b-button>
@ -339,7 +376,9 @@ export default {
website_url_list: [ website_url_list: [
'https://madamedessert.de/schokoladenpudding-rezept-mit-echter-schokolade/', 'https://madamedessert.de/schokoladenpudding-rezept-mit-echter-schokolade/',
'https://www.essen-und-trinken.de/rezepte/58294-rzpt-schokoladenpudding', 'https://www.essen-und-trinken.de/rezepte/58294-rzpt-schokoladenpudding',
'https://www.chefkoch.de/rezepte/1825781296124455/Schokoladenpudding-selbst-gemacht.html' 'https://www.chefkoch.de/rezepte/1825781296124455/Schokoladenpudding-selbst-gemacht.html',
'test.com',
'https://bla.com'
], ],
import_multiple: false, import_multiple: false,
recent_urls: [], recent_urls: [],
@ -348,6 +387,8 @@ export default {
recipe_html: undefined, recipe_html: undefined,
recipe_tree: undefined, recipe_tree: undefined,
recipe_images: [], recipe_images: [],
imported_recipes: [],
failed_imports: [],
// App Import // App Import
INTEGRATIONS: INTEGRATIONS, INTEGRATIONS: INTEGRATIONS,
recipe_app: undefined, recipe_app: undefined,
@ -366,7 +407,7 @@ export default {
this.tab_index = 0 //TODO add ability to pass open tab via get parameter this.tab_index = 0 //TODO add ability to pass open tab via get parameter
if (window.BOOKMARKLET_IMPORT_ID !== -1) { if (window.BOOKMARKLET_IMPORT_ID !== -1) {
this.loadRecipe(false, window.BOOKMARKLET_IMPORT_ID) this.loadRecipe('', false, window.BOOKMARKLET_IMPORT_ID)
} }
}, },
methods: { methods: {
@ -374,24 +415,43 @@ export default {
* Import recipe based on the data configured by the client * Import recipe based on the data configured by the client
* @param action: action to perform after import (options are: edit, view, import) * @param action: action to perform after import (options are: edit, view, import)
* @param data: if parameter is passed ignore global application state and import form data variable * @param data: if parameter is passed ignore global application state and import form data variable
* @param silent do not show any messages for imports
*/ */
importRecipe: function (action, data) { importRecipe: function (action, data, silent) {
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.show)) if (this.recipe_json !== undefined) {
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.show))
}
let apiFactory = new ApiApiFactory() let apiFactory = new ApiApiFactory()
let recipe_json = data !== undefined ? data : this.recipe_json let recipe_json = data !== undefined ? data : this.recipe_json
apiFactory.createRecipe(recipe_json).then(response => { // save recipe if (recipe_json !== undefined) {
let recipe = response.data apiFactory.createRecipe(recipe_json).then(response => { // save recipe
apiFactory.imageRecipe(response.data.id, undefined, recipe_json.image).then(response => { // save recipe image let recipe = response.data
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) apiFactory.imageRecipe(response.data.id, undefined, recipe_json.image).then(response => { // save recipe image
this.afterImportAction(action, recipe) if (!silent) {
}).catch(e => { StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE) }
this.afterImportAction(action, recipe) this.afterImportAction(action, recipe)
}).catch(e => {
if (!silent) {
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
}
this.afterImportAction(action, recipe)
})
}).catch(err => {
if (recipe_json.source_url !== '') {
this.failed_imports.push(recipe_json.source_url)
}
if (!silent) {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
}
}) })
}).catch(err => { } else {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE) console.log('cant import recipe without data')
}) if (!silent) {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
}
}
}, },
/** /**
* Action performed after URL import * Action performed after URL import
@ -413,6 +473,9 @@ export default {
case 'import': case 'import':
location.reload(); location.reload();
break; break;
case 'multi_import':
this.imported_recipes.push(recipe)
break;
case 'nothing': case 'nothing':
break; break;
} }
@ -420,22 +483,23 @@ export default {
/** /**
* Requests the recipe to be loaded form the source (url/data) from the server * Requests the recipe to be loaded form the source (url/data) from the server
* Updates all variables to contain what they need to render either simple preview or manual mapping mode * Updates all variables to contain what they need to render either simple preview or manual mapping mode
* @param url url to import (optional, empty string for bookmarklet imports)
* @param silent do not open the options tab after loading the recipe * @param silent do not open the options tab after loading the recipe
* @param bookmarklet id of bookmarklet import to load instead of url, default undefined * @param bookmarklet id of bookmarklet import to load instead of url, default undefined
*/ */
loadRecipe: function (silent, bookmarklet) { loadRecipe: function (url, silent, bookmarklet) {
// keep list of recently imported urls // keep list of recently imported urls
if (this.website_url !== '') { if (url !== '') {
if (this.recent_urls.length > 5) { if (this.recent_urls.length > 5) {
this.recent_urls.pop() this.recent_urls.pop()
} }
if (this.recent_urls.filter(x => x === this.website_url).length === 0) { if (this.recent_urls.filter(x => x === url).length === 0) {
this.recent_urls.push(this.website_url) this.recent_urls.push(url)
} }
window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls)) window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls))
} }
if (this.website_url === '' && bookmarklet === undefined) { if (url === '' && bookmarklet === undefined) {
this.empty_input = true this.empty_input = true
setTimeout(() => { setTimeout(() => {
this.empty_input = false this.empty_input = false
@ -443,7 +507,9 @@ export default {
return return
} }
this.loading = true if (!silent) {
this.loading = true
}
// reset all variables // reset all variables
this.recipe_html = undefined this.recipe_html = undefined
@ -453,7 +519,7 @@ export default {
// load recipe // load recipe
let payload = { let payload = {
'url': this.website_url, 'url': url,
'data': this.source_data, 'data': this.source_data,
} }
@ -484,7 +550,11 @@ export default {
} }
return this.recipe_json return this.recipe_json
}).catch((err) => { }).catch((err) => {
if (url !== '') {
this.failed_imports.push(url)
}
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH, err.response.data.msg) StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH, err.response.data.msg)
throw "Load Recipe Error"
}) })
}, },
/** /**
@ -492,13 +562,13 @@ export default {
* Takes input from website_url_list * Takes input from website_url_list
*/ */
autoImport: function () { autoImport: function () {
this.collapse_visible.import = true
this.website_url_list.forEach(r => { this.website_url_list.forEach(r => {
this.website_url = r this.loadRecipe(r, true, undefined).then((recipe_json) => {
this.loadRecipe(true, undefined).then((recipe_json) => { this.website_url_list = this.website_url_list.filter(u => u !== r)
this.importRecipe('nothing', recipe_json) //TODO handle feedback of what was imported and what not this.importRecipe('multi_import', recipe_json) //TODO handle feedback of what was imported and what not
}) })
}) })
this.website_url_list = []
}, },
/** /**
* Import recipes with uploaded files and app integration * Import recipes with uploaded files and app integration

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

@ -24,7 +24,7 @@
<b-card-text style="text-overflow: ellipsis"> <b-card-text style="text-overflow: ellipsis">
<template v-if="recipe !== null"> <template v-if="recipe !== null">
<recipe-rating :recipe="recipe"></recipe-rating> <recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null"> <template v-if="recipe.description !== null && recipe.description !== undefined">
<span v-if="recipe.description.length > text_length"> <span v-if="recipe.description.length > text_length">
{{ recipe.description.substr(0, text_length) + "\u2026" }} {{ recipe.description.substr(0, text_length) + "\u2026" }}
</span> </span>