psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

created product search component

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/components/ProductSearch.vue Normal file
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>

41
src/views/contracts/ContractEdit.vue
View file

@ -124,26 +124,7 @@
</v-card>
</v-dialog>
<v-dialog v-model="search[1]">
<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>
<ProductSearch @returnProduct="setProduct"></ProductSearch>
</v-dialog>
</template>
<script>
@ -152,13 +133,15 @@ import DatePicker from '@vuepic/vue-datepicker'
import ErrorBanner from '@/components/ErrorBanner.vue'
import methods from '@/CommonMethods.vue'
import Product from '@/types/ProductType.vue'
import ProductSearch from '@/components/ProductSearch.vue'
export default {
props: {
setcontract: {}
},
components: {
DatePicker,
ErrorBanner
ErrorBanner,
ProductSearch
},
watch: {
setcontract(newval) {
@ -260,22 +243,6 @@ export default {
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) {
return p.code + ' - ' + p.name
},