created product search component
This commit is contained in:
parent
bd99364728
commit
814fe233e4
2 changed files with 68 additions and 37 deletions
64
src/components/ProductSearch.vue
Normal file
64
src/components/ProductSearch.vue
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
<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>
|
||||||
|
|
|
@ -124,26 +124,7 @@
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
<v-dialog v-model="search[1]">
|
<v-dialog v-model="search[1]">
|
||||||
<v-card title="Product Search">
|
<ProductSearch @returnProduct="setProduct"></ProductSearch>
|
||||||
<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>
|
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -152,13 +133,15 @@ import DatePicker from '@vuepic/vue-datepicker'
|
||||||
import ErrorBanner from '@/components/ErrorBanner.vue'
|
import ErrorBanner from '@/components/ErrorBanner.vue'
|
||||||
import methods from '@/CommonMethods.vue'
|
import methods from '@/CommonMethods.vue'
|
||||||
import Product from '@/types/ProductType.vue'
|
import Product from '@/types/ProductType.vue'
|
||||||
|
import ProductSearch from '@/components/ProductSearch.vue'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
setcontract: {}
|
setcontract: {}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
ErrorBanner
|
ErrorBanner,
|
||||||
|
ProductSearch
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
setcontract(newval) {
|
setcontract(newval) {
|
||||||
|
@ -260,22 +243,6 @@ export default {
|
||||||
this.customers_loading = false
|
this.customers_loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
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
|
|
||||||
})
|
|
||||||
},
|
|
||||||
productCodeName(p) {
|
productCodeName(p) {
|
||||||
return p.code + ' - ' + p.name
|
return p.code + ' - ' + p.name
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue