created product search component

This commit is contained in:
Paul Wilde 2023-03-20 21:55:08 +00:00
parent bd99364728
commit 814fe233e4
2 changed files with 68 additions and 37 deletions

View 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>

View file

@ -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
}, },