cmc_fe/src/components/ComplaintInfo.vue

<template>
    <v-card :class="{ 'bg-red-lighten-5' : complaint.at_risk }">
        <v-card-title>
            Complaint Info : {{ complaint.id }} 
            <v-icon v-if="complaint.active" icon="mdi-play" title="Active"></v-icon>
            <v-icon v-if="complaint.at_risk" color="red" icon="mdi-exclamation" title="At Risk"></v-icon>
        </v-card-title>
        <v-card-subtitle>
            {{ complaint.customer.acc_no }} - {{ complaint.customer.name }}<br/>
            {{ formatDate(complaint.complaint_date,"DD/MM/YYYY") }}
        </v-card-subtitle>
        <v-card-text>
            Reason: {{ complaint.reason }}<br/>
            Driver: {{ complaint.driver.name }}<br/>
            Delivery Date {{ formatDate(complaint.delivery_date,"DD/MM/YYYY") }}<br/>
            Order : {{ complaint.sop.doc_no }}<br/>
        </v-card-text>
        <v-card-subtitle>
        <v-progress-linear indeterminate :active="info_loading">
        </v-progress-linear>
            Comments
        </v-card-subtitle>
        <v-card-text>
            {{ complaint.info.comments }}
        </v-card-text>
        <v-card-subtitle>
            Info 
        </v-card-subtitle>
        <v-card-text>
            <v-row>
                <v-col cols=4>
                    <v-row dense nogutters>
                        <v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox()" />
                            <v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox()"/>
                                <v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox()"/>
                    </v-row>
                    <v-row dense nogutters>
                        <v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox()" />
                            <v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox()" />
                    </v-row>
                </v-col>
            </v-row>
        </v-card-text>
        <v-card-actions>
        </v-card-actions>
    </v-card>
</template>
<script>
import Complaint from '@/types/ComplaintType.vue'
import methods from '@/CommonMethods.vue'
import axios from 'axios'
export default {
    props: {
        in_complaint: new Complaint()
    },
    watch: {
        in_complaint(){
            this.complaint = this.in_complaint
        }
    },
    mixins: [methods],
    emits: ["return"],
    data() {
        return {
            complaint: this.in_complaint,
            info_loading: true
        }
    },
    methods:{
        getComplaintInfo() {
            this.info_loading = true
            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info"
            console.log("Getting Complaint Info...")
            axios.get(url)
                .then(resp =>{
                    this.complaint.info = resp.data
                    this.info_loading = false
                })
        },
        changeComplaintCheckbox() {
            let set = this.setComplaintStatus()
            if (this.complaint.at_risk && set && this.complaint.info.one && this.complaint.info.two && this.complaint.info.three) {
                console.log("Contract no longer at risk")
                this.complaint.at_risk = false
            }
        },
        setComplaintStatus() {
            this.info_loading = true
            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info/set"
            console.log("Getting Complaint Info...")
            axios.post(url, {
                one: this.complaint.info.one,
                two: this.complaint.info.two,
                three: this.complaint.info.three,
                at_risk: this.complaint.at_risk,
                permanent: this.complaint.info.permanent
            }).then(resp => {
                let stat = resp.data
                console.log(stat)
                this.getComplaintInfo()
                this.info_loading = false
            })
            return true
        },
    },
    created() {
        this.getComplaintInfo()
    }
}
</script>