rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

more work on ItemInput

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-15 16:31:16 +02:00
parent aa23fd7077
commit b345faa517
2 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
lootalot_front/src/components/ItemInput.vue
View File

@@ -1,23 +1,28 @@
<template>
<div class="container is-fluid">
<div class="container">
<div class="field has-addons">
<div class="control" :class="{'is-loading': is_loading }">
<div class="control is-expanded"
:class="{'is-loading': is_loading }">
<input type="text"
v-model="search"
@input="autoCompletion"
class="input"
:class="{'is-danger': no_results,
'is-warning': auto_open}"
autocomplete="on">
v-model="search"
@input="autoCompletion"
class="input"
:class="{'is-danger': no_results,
'is-warning': auto_open}"
autocomplete="on">
</input>
</div>
<div class="control">
<button class="button is-primary"
:disabled="no_results"
@click="addItem"
>+</button>
</div>
</div>
<ul class="box" v-show="auto_open">
<li v-for="(result,i) in results" :key="i">
<li v-for="(result,i) in results" :key="i"
@click="setResult(result.name)"
>
{{ result.name }}
</li>
</ul>
@@ -45,23 +50,33 @@
autoCompletion (ev) {
// TODO: a lot happens here that
// need to be clarified
this.auto_open = true;
if (this.search == '') {
this.auto_open = false;
this.results = [];
this.no_results = false;
this.auto_open = false;
console.log("empty search");
} else {
this.results = MOCK_ITEMS.filter(item => {
return item.name.includes(this.search);
});
// Update status
this.no_results = this.results.length == 0;
if (this.results.length == 0) {
this.no_results = true;
} else {
this.no_results = false;
this.auto_open = true;
}
}
},
setResult(result) {
this.search = result;
this.auto_open = false;
},
addItem () {
this.$emit("addItem", this.search);
this.search = '';
this.results = [];
this.no_results = false;
this.auto_open = false;
}
},
}