46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
|
|
Vue.component('entity-search', {
|
|
props: [ "error", "search_text", "found" ],
|
|
data: function() {
|
|
return {
|
|
search_scope: ""
|
|
}
|
|
},
|
|
methods: {
|
|
css() {
|
|
var result = "entity-search";
|
|
if (this.valid) {
|
|
result += " entity-search-found";
|
|
}
|
|
return result;
|
|
},
|
|
add_entity: function(e) {
|
|
this.$emit('add-entity', {entity: this.search_scope});
|
|
},
|
|
changed: function(e) {
|
|
this.$emit('changed', {entity: e.target.value});
|
|
},
|
|
set_value(scope) {
|
|
this.search_scope = scope;
|
|
}
|
|
},
|
|
computed: {
|
|
default_text: function() {
|
|
if (this.search_text) {
|
|
return this.search_text;
|
|
} else {
|
|
return "Find an entity";
|
|
}
|
|
},
|
|
valid: function() {
|
|
return this.found && this.search_scope.length;
|
|
}
|
|
},
|
|
template: `
|
|
<div :class="css()">
|
|
<input v-on:keyup="changed" v-model="search_scope" :placeholder="default_text"></input>
|
|
<img src="images/add.png" class="entity-remove-icon" v-if="!found && search_scope.length" v-on:click="add_entity">
|
|
</div>
|
|
`
|
|
});
|