mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-08 07:38:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

async loading of multiselect fields

Browse Source
This commit is contained in:
vabene1111
2020-06-23 12:54:27 +02:00
parent 0266476aef
commit e49e53e2b2
1 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
cookbook/templates/url_import.html
View File

@@ -93,7 +93,9 @@
label="text" label="text"
:taggable="true" :taggable="true"
track-by="id" track-by="id"
:multiple="false"> :multiple="false"
:loading="units_loading"
@search-change="searchUnits">>
</multiselect> </multiselect>
</div> </div>
@@ -113,7 +115,9 @@
label="text" label="text"
:id="index" :id="index"
track-by="id" track-by="id"
:multiple="false"> :multiple="false"
:loading="ingredients_loading"
@search-change="searchIngredients">>
</multiselect> </multiselect>
</div> </div>
<div class="col-md-1"> <div class="col-md-1">
@@ -157,7 +161,9 @@
label="text" label="text"
track-by="id" track-by="id"
id="id_keywords" id="id_keywords"
:multiple="true"> :multiple="true"
:loading="keywords_loading"
@search-change="searchKeywords">
</multiselect> </multiselect>
</div> </div>
@@ -227,27 +233,20 @@
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
el: '#app', el: '#app',
data: { data: {
value: [
{name: 'Javascript', code: 'js'}
],
options: [
{name: 'Vue.js', code: 'vu'},
{name: 'Javascript', code: 'js'},
{name: 'Open Source', code: 'os'}
],
remote_url: '', remote_url: '',
keywords: [], keywords: [],
keywords_loading: false,
units: [], units: [],
units_loading: false,
ingredients: [], ingredients: [],
ingredients_loading: false,
recipe_data: undefined, recipe_data: undefined,
error: undefined, error: undefined,
loading: false, loading: false,
all_keywords: false, all_keywords: false,
}, },
mounted: function () { mounted: function () {
this.getKeywords();
this.getUnits();
this.getIngredients();
}, },
methods: { methods: {
loadRecipe: function () { loadRecipe: function () {
@@ -295,23 +294,28 @@
this.ingredients.push(new_ingredient.ingredient) this.ingredients.push(new_ingredient.ingredient)
this.recipe_data.recipeIngredient[index] = new_ingredient this.recipe_data.recipeIngredient[index] = new_ingredient
}, },
//TODO only load when needed searchKeywords: function (query) {
getKeywords: function () { this.keywords_loading = true
this.$http.get("{% url 'dal_keyword' %}").then((response) => { this.$http.get("{% url 'dal_keyword' %}" + '?q=' + query).then((response) => {
this.keywords_loading = false
this.keywords = response.data.results; this.keywords = response.data.results;
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
}, },
getUnits: function () { searchUnits: function (query) {
this.$http.get("{% url 'dal_unit' %}").then((response) => { this.units_loading = true
this.$http.get("{% url 'dal_unit' %}" + '?q=' + query).then((response) => {
this.units_loading = false
this.units = response.data.results; this.units = response.data.results;
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
}, },
getIngredients: function () { searchIngredients: function (query) {
this.$http.get("{% url 'dal_ingredient' %}").then((response) => { this.ingredients_loading = true
this.$http.get("{% url 'dal_ingredient' %}" + '?q=' + query).then((response) => {
this.ingredients_loading = false
this.ingredients = response.data.results; this.ingredients = response.data.results;
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)