64 lines
2 KiB
Vue
64 lines
2 KiB
Vue
<template>
|
|
<v-card title="Product Search">
|
|
<v-card-text>
|
|
<v-text-field label="Search" v-model="product_search" append-icon="mdi-magnify" @click:append="searchProducts" @keyup.enter.prevent="searchProducts"></v-text-field>
|
|
<v-progress-linear indeterminate :active="products_loading">
|
|
</v-progress-linear>
|
|
<v-list>
|
|
<RecycleScroller class="scroller"
|
|
:items="products"
|
|
:item-size="50"
|
|
v-slot="{ item }"
|
|
key-field="code"
|
|
>
|
|
<v-list-item>
|
|
<v-btn icon="mdi-arrow-right" title="select" @click="setProduct(item)" size="small" color="success"></v-btn>
|
|
{{ item.code }} - {{ item.name }}
|
|
</v-list-item>
|
|
</RecycleScroller>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
|
export default {
|
|
props:{
|
|
},
|
|
data() {
|
|
return {
|
|
product_search: "",
|
|
products: [],
|
|
products_loading: null
|
|
}
|
|
},
|
|
emits: ['returnProduct'],
|
|
methods: {
|
|
searchProducts() {
|
|
this.products_loading = true
|
|
console.log("Searching for " & this.product_search)
|
|
let url = this.$api_url + "/products/search/" + this.product_search
|
|
axios.get(url)
|
|
.then(resp => {
|
|
console.log(resp)
|
|
this.products = resp.data
|
|
})
|
|
.catch(err => {
|
|
console.log(err)
|
|
})
|
|
.finally(() => {
|
|
this.products_loading = false
|
|
})
|
|
},
|
|
setProduct(p){
|
|
this.$emit('returnProduct',p)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.scroller {
|
|
height:500px;
|
|
}
|
|
</style>
|
|
|