page for med feeds add/edit done - need to do searches for vets and meds

This commit is contained in:
Paul Wilde 2023-02-15 16:30:07 +00:00
parent 207035bd8d
commit c4d3ccf66a
2 changed files with 148 additions and 4 deletions

View file

@ -0,0 +1,17 @@
<script>
import axios from 'axios'
export default {
methods: {
customerSearch(query) {
let url = this.$api_url + "/customers/search/" + query
axios.get(url)
.then(resp => {
return resp.data
})
.catch(err => {
console.log(err)
})
}
}
}
</script>

View file

@ -3,16 +3,104 @@
<v-card-subtitle>
Medicated Feed :
<template v-if="mf.isNew">New</template>
<template v-else>{{ mf.id }}</template>
<template v-else>{{ mf.id }} - {{ mf.customer.name }}</template>
</v-card-subtitle>
<v-card-text>
<v-container>
<v-row>
<v-col cols="6">
<v-autocomplete label="Customer"
:items="customers"
v-model="mf.customer"
v-model:search="search[1]"
item-title="full_title"
return-object
:loading="searching[1]"
append-icon="mdi-magnify"
@keyup.enter="searchCustomers()"
@click:append="searchCustomers()"
no-data-text="No results (press Enter to search)"
></v-autocomplete>
</v-col>
<v-col cols="6">
<v-autocomplete label="Vet"
:items="vets"
v-model="mf.vet.practice"
v-model:search="search[2]"
:loading="searching[2]"
append-icon="mdi-magnify"
item-title="practice"
item-value="id"
@keyup.enter="searchVets()"
@click:append="searchVets()"
no-data-text="No results (press Enter to search)"
></v-autocomplete>
</v-col>
<v-col cols="6">
<v-autocomplete label="Medication"
:items="medications"
v-model="mf.medication.name"
v-model:search="search[3]"
:loading="searching[3]"
append-icon="mdi-magnify"
item-title="name"
item-value="id"
@keyup.enter="searchMeds()"
no-data-text="No results (press Enter to search)"
@click:append="searchMeds()"
></v-autocomplete>
{{ mf.medication }}
</v-col>
<v-col cols="6">
Name : {{ mf.medication.name }}<br/>
Info : <template v-for="(i, idx) in mf.medication.info" :key="idx" >
<template v-if="i != ''">
{{ i }}<br/>
</template>
</template>
Med Code : {{ mf.medication.med_code }}<br/>
Inclusion Rate : {{ mf.medication.inclusion_rate }}
</v-col>
</v-row>
<v-row>
<v-col cols="6">
{{ mf.product }}
<v-autocomplete label="Product"
:items="products"
item-title="name"
v-model="mf.product"
return-object
v-model:search="search[4]"
append-icon="mdi-magnify"
:loading="searching[4]"
@keyup.enter="searchProducts()"
@click:append="searchProducts()"
no-data-text="No results (press Enter to search)"
></v-autocomplete>
</v-col>
<v-col cols="6">
{{ mf.product.name }}
<v-text-field label="Tonnage" type="number" v-model="mf.tonnage"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<label>
Date Required :
<DatePicker v-model="mf.date_required" format="dd/MM/yyyy" />
</label>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<v-switch color="blue" label="Repeat prescription" v-model="mf.repeat"></v-switch>
</v-col>
<v-col cols="6">
<v-textarea label="Repeat Message" v-model="mf.repeat_message"></v-textarea>
</v-col>
</v-row>
</v-container>
{{ mf }}
</v-card-text>
<v-card-actions>
<v-btn v-if="!mf.isNew" color="red-darken-1"
@ -29,10 +117,15 @@
</v-card>
</template>
<script>
import DatePicker from '@vuepic/vue-datepicker'
import axios from 'axios';
export default {
props:{
set_mf: {}
},
components: {
DatePicker
},
watch: {
set_mf(newval) {
this.mf = newval
@ -41,6 +134,12 @@ export default {
data() {
return {
mf: this.set_mf,
vets: [],
medications: [],
products: [],
customers: [],
search: {},
searching:{}
}
},
computed: {
@ -58,7 +157,35 @@ export default {
},
saveMedFeed(medfeed) {
console.log(medfeed)
}
}
},
searchCustomers() {
this.searching[1] = true
let url = this.$api_url + "/customers/search/" + this.search[1]
axios.get(url)
.then(resp => {
this.customers = resp.data
})
.catch(err => {
console.log(err)
})
.finally(() => {
this.searching[1] = false
})
},
searchProducts() {
this.searching[4] = true
let url = this.$api_url + "/products/search/" + this.search[4]
axios.get(url)
.then(resp => {
this.products = resp.data
})
.catch(err => {
console.log(err)
})
.finally(() => {
this.searching[4] = false
})
},
},
}
</script>