FE_CPONE/test/vuex/one-sampling-v2/components/oneSamplingPatientSearchResult.vue

<template>
    <v-card class="xs12 md12 mt-2" >
    
        <v-data-table :headers="headers" :items="patients" 
        :loading="isLoading"
        hide-actions class="elevation-1">

        <template slot="no-data">
            <v-alert :value="isError" color="error" icon="warning">
               Data Pasien tidak di temukan
               {{errorMessage}}
            </v-alert>
         </template>

        <template slot="items" slot-scope="props">
            <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)" @click="selectMe(props.item)">{{ props.item.T_OrderHeaderLabNumber }}</td>
            <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)" @click="selectMe(props.item)">{{ props.item.M_PatientNoReg }}</td>
            <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)" @click="selectMe(props.item)">{{ props.item.M_PatientName }}</td>
            <td class="pa-2" v-bind:class="is_selected(props.item)" @click="selectMe(props.item)">
                <v-btn outline small :color="status_code(props.item.status_code).color" dark class="mb-0 mt-0">
                    {{ status_code(props.item.status_code).text }}
                </v-btn>
            </td>
            <td class="pa-2" v-bind:class="is_selected(props.item)" @click="selectMe(props.item)">
                <v-btn outline small :color="call_status_code(props.item.call_status_code).color" dark class="mb-0 mt-0">
                    {{ call_status_code(props.item.call_status_code).text }}
                    </v-btn>
                
            </td>
            
        </template>
        
        </v-data-table>
    </v-card>
</template>

<style scoped>
    table.v-table tbody td,table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            query: "",
            headers: [
                {
                    text: "NO LAB",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "20%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NO RM",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAMA",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "55%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "SAMPLING STATUS",
                    align: "left",
                    sortable: false,
                    value: "hp",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "PEMANGGILAN",
                    align: "left",
                    sortable: false,
                    value: "hp",
                    width: "10%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ]
        };
    },

    computed : {
        isError() {
            // return true;
         return this.$store.state.patient.search_status == 3
      },
      errorMessage() {
         return this.$store.state.patient.search_error_message 
      },
      isLoading() {
         return this.$store.state.patient.search_status == 1
      },
      patients() {
         return this.$store.state.patient.patients
      },
      total() {
         return this.$store.state.patient.total_patient
      }
    },

    methods : {
        selectMe (a) {
            let z = {
                mr: a.M_PatientNoReg,
                name: a.M_PatientName,
                phone: a.M_PatientHP,
                dob: a.M_PatientDOB,
                age: a.T_OrderHeaderM_PatientAge,
                order_id: a.T_OrderHeaderID,
                photo: a.M_PatientPhoto,
                lab_no: a.T_OrderHeaderLabNumber,
                sex: a.M_SexName
            }

            this.$store.commit('patient/update_selected_patient', z)
            this.$store.dispatch('sampling/get_samples', {
                order_id:a.T_OrderHeaderID,
                station_id:this.$store.state.patient.selected_station.id
            })

            this.$store.commit('sampling/update_note_sampling', a.T_OrderHeaderSamplingNote)
            this.$store.commit('sampling/update_note_fo', a.T_OrderHeaderFoNote)
            this.$store.commit('sampling/update_if_ver_photo', false)
            this.$store.commit('sampling/update_ver_photo', 
                { checked:(a.ver_photo=='Y'?true:false), 
                note:a.ver_photo_note,
                error:(a.ver_photo=='Y' || (a.ver_photo_note!='' && a.ver_photo_note!=null)) ? false : true })
            var x = this.$store
            setTimeout(function(){ x.commit('sampling/update_if_ver_photo', true) }, 50)

            this.$store.commit('sampling/update_note_supervisor', a.note_supervisor)

            // QUEUE
            this.$store.commit('queue/update_order_id', a.T_OrderHeaderID)
            this.$store.commit('queue/update_call_status', a.call_status_code)
            this.$store.commit('queue/update_call_status_id', a.call_status_id)

            // Requirements
            this.$store.commit('patient/update_req', {req_status:a.req_status, reqs:JSON.parse(a.reqs)})
        },

        call_status_code(x) {
            let y = {}
            switch(x) {
                case "QUE.Sampling.Call":
                    y = {text:"DIPANGGIL", color:"green"}
                    break
                case "QUE.Sampling.Skip":
                    y = {text:"DILEWATI", color:"orange"}
                    break
                case "QUE.Sampling.Process":
                    y = {text:"DIPROSES", color:"green"}
                    break
                case "QUE.Sampling.Partial":
                    y = {text:"PARSIAL", color:"yellow"}
                    break
                case "QUE.Sampling.Done":
                    y = {text:"SELESAI", color:"black"}
                    break
                default:
                    y = {text:"BARU", color:"blue"}
            }

            return y
        },

        status_code(x) {
            let y = {}
            switch(x) {
                case "N":
                    y = {text:"BARU", color:"blue"}
                    break
                case "X":
                    y = {text:"PARSIAL", color:"orange"}
                    break
                case "Y":
                    y = {text:"SELESAI", color:"black"}
                    break
                default:
                    y = {text:"BARU", color:"blue"}
            }

            return y
        },
        
        is_selected (item) {
         let x = this.$store.state.patient.selected_patient
         if (!x)
            return ''
         
         if (x.order_id == item.T_OrderHeaderID)
            return 'amber lighten-5'

         return ''
      }
    }
}
</script>