cmc_fe/src/views/medfeeds/MedFeedsEdit.vue

<template>
    <v-card :title="title" :subtitle="'Medicated Feed : ' + mf.id">
        <v-card-text>
            <v-container>
                <v-row>
                    <v-col cols="6">
                        <v-text-field label="Customer" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showCustomerSearch" :model-value="mf.customer.acc_no + ' - ' + mf.customer.name">
                        </v-text-field>
                        <v-text-field label="Vet" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showVetSearch" :model-value="mf.vet.practice">
                        </v-text-field>

                    </v-col>
                    <v-col cols="6">
                        <v-card title="Medication :">
                            <v-card-text>
                                <v-text-field label="Medication" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showMedSearch" :model-value="mf.medication.name">
                                </v-text-field>
                                <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-card-text>
                        </v-card>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12">
                        <v-text-field label="Product" readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showProductSearch" :model-value="mf.product.code + ' - ' + mf.product.name">
                        </v-text-field>
                    </v-col>
                    <v-col cols="6">
                        <v-text-field label="Tonnage" variant="outlined" type="number" v-model="mf.tonnage"></v-text-field>
                    </v-col>
                    <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 :disabled="!mf.repeat" label="Repeat Message" v-model="mf.repeat_message" variant="outlined"></v-textarea>
                    </v-col>
                </v-row>
            </v-container>
        </v-card-text>
        <DebugPanel :data="mf"></DebugPanel>
        <ErrorBanner :errors="errors" />
        <v-card-actions>
            <v-btn v-if="!mf.isNew" color="red-darken-1"
                                    variant="text"
                                    :loading="saving"
                                    @click="saveMedFeed(mf)">Save</v-btn>
            <v-btn v-if="mf.isNew" color="red-darken-1"
                                   variant="text"
                                   :loading="saving"
                                   @click="saveMedFeed(mf)">Add</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="blue-darken-1"
                   variant="text"
                   @click="close">Close</v-btn>
        </v-card-actions>
    </v-card>
    <v-dialog v-model="search[0]">
        <CustomerSearch @returnCustomer="setCustomer"></CustomerSearch>
    </v-dialog>
    <v-dialog v-model="search[1]">
        <ProductSearch @returnProduct="setProduct"></ProductSearch>
    </v-dialog>
    <v-dialog v-model="search[2]">
        <VetSearch @returnVet="setVet"></VetSearch>
    </v-dialog>
    <v-dialog v-model="search[3]">
        <MedSearch @returnMed="setMed"></MedSearch>
    </v-dialog>
</template>
<script> 
import DatePicker from '@vuepic/vue-datepicker'
import axios from 'axios';
import CustomerSearch from '@/components/CustomerSearch.vue'
import ProductSearch from '@/components/ProductSearch.vue'
import VetSearch from '@/components/VetSearch.vue'
import MedSearch from '@/components/MedSearch.vue'
import ErrorBanner from '@/components/ErrorBanner.vue'
export default {
    props:{
        set_mf: {}
    },
    components: {
        DatePicker,
        CustomerSearch,
        ProductSearch,
        ErrorBanner,
        VetSearch,
        MedSearch
    },
    watch: {
        set_mf(newval) {
            this.mf = newval
        },
    },
    data() {
        return {
            mf: this.set_mf,
            vets: [],
            medications: [],
            products: [],
            search: [],
            searching: {},
            errors: [],
            saving: false
        }
    },
    computed: {
        title() {
            if ( this.mf.isNew ) {
                return "New Medicated Feed"
            } else {
                return "Edit Medicated Feed"
            }
        }
    },
    emits: ['closetab','medfeedupdated'],
    methods: {
        close() {
            this.$emit('closetab','list')
        },
        saveMedFeed(medfeed) {
            this.errors = []
            this.saving = true
            let url = this.$api_url + "/customers/medicated-feeds/" + this.mf.id + "/save"
            if (this.mf.isNew) {
                url = this.$api_url + "/customers/medicated-feeds/add"
            }
            console.log("Saving Med Feed...")
            axios.post(url,{
                medfeed: medfeed
                })
                .then(resp => {
                    let stat = resp.data
                    if (stat.status == true ) {
                        this.$emit('medfeedupdated')
                    } else {
                        this.errors.push("Error Saving... ")
                    }
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(()=>{
                    this.saving = false
                })
        },
        showCustomerSearch(){
            this.search[0] = true
        },
        setCustomer(c){
            this.mf.customer = c
            this.search[0] = false
        },
        showProductSearch() {
            this.search[1] = true
        },
        setProduct(p) {
            this.mf.product = p
            this.search[1] = false
        },
        showVetSearch() {
            this.search[2] = true
        },
        setVet(v) {
            this.mf.vet = v
            this.search[2] = false
        },
        showMedSearch() {
            this.search[3] = true
        },
        setMed(med) {
            this.mf.medication = med
            this.search[3] = false
        },
    },
}
</script>