110 lines
3.6 KiB
Vue
110 lines
3.6 KiB
Vue
<template>
|
|
<div class="field is-horizontal">
|
|
<div class="field-label">
|
|
<label class="label">Nouvel objet</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="control is-expanded">
|
|
<input type="text"
|
|
name="name"
|
|
placeholder="Nom de l'objet"
|
|
v-model="item.name"
|
|
@input="autoCompletion"
|
|
class="input"
|
|
autocomplete="on"
|
|
>
|
|
</div>
|
|
<div class="dropdown" :class="{'is-active': showCompletionFrame}">
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-content">
|
|
<a v-for="(result,i) in results"
|
|
:key="i"
|
|
@click="setResult(result)"
|
|
class="dropdown-item"
|
|
>{{ result.name }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-expanded has-addons" v-show="item.name != ''">
|
|
<p class="control"><a class="button is-static">PO</a></p>
|
|
<p class="control">
|
|
<input type="text"
|
|
name="base_price"
|
|
placeholder="Prix"
|
|
class="input"
|
|
:class="{'is-danger': item.base_price == ''}"
|
|
v-model.number="item.base_price"
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-primary"
|
|
@click="addItem"
|
|
:disabled="!isItemValid"
|
|
>Ajouter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["source"],
|
|
data () {
|
|
return {
|
|
is_loading: false,
|
|
item: {
|
|
id: 0,
|
|
name: '',
|
|
base_price: '',
|
|
},
|
|
results: [],
|
|
};
|
|
},
|
|
methods: {
|
|
autoCompletion () {
|
|
// Unset any previous value on input (for every field except item's name)
|
|
this.item.base_price = '';
|
|
if (this.item.name == '') {
|
|
this.results = [];
|
|
} else {
|
|
this.results = this.source.filter(
|
|
item => item.name.toUpperCase().includes(this.item.name.toUpperCase())
|
|
);
|
|
}
|
|
},
|
|
setResult(result) {
|
|
this.item.id = result.id;
|
|
this.item.name = result.name;
|
|
this.item.base_price = result.base_price;
|
|
// Clear results to close completionFrame
|
|
this.results = [];
|
|
},
|
|
addItem () {
|
|
this.$emit("addItem", this.item);
|
|
this.item = {
|
|
name: '',
|
|
base_price: '',
|
|
};
|
|
this.results = [];
|
|
},
|
|
},
|
|
computed: {
|
|
showCompletionFrame () { return this.results.length > 0 },
|
|
isItemValid () { return this.item.name != '' && this.item.base_price != '' },
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dropdown, .dropdown-menu {
|
|
min-width: 100%;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
</style>
|