biotest-satu-sehat-web/one-klinik-biotest/test/vuex/one-clinic-form/components/patientClinicSearchResult.vue

<template>
    <div>
      <v-layout wrap>
             <v-flex xs12 pl-0 pr-0 pt-2 pb-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 caption mono pt-1 pb-1 pl-2 " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">
                         {{ props.item.M_PatientNoReg }}
                      </td>
                      <td class="text-xs-left caption mono  pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">
                         <p class="mb-0">{{ props.item.M_PatientName }}</p>
                         <p class="mb-0">{{ props.item.M_PatientIDTypeName }} {{props.item.M_PatientIDNumber}}</p>
                      </td>
                      <td class="text-xs-left caption mono  pa-1" v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.dob_ina}}</td>
                      <td class="pa-1 caption mono " v-bind:class="{'teal lighten-4':props.item.divider === 'Y','amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.M_PatientAddress }}</td>
                   </template>
 
                </v-data-table>
                <div class="text-xs-center pt-2">
                   <v-btn  :loading="loading" dark v-if="show_more" @click="showMore()" small color="teal lighten-3">
                      Tampilkan lebih banyak
                     <template v-slot:loader>
                        sedang memuat ...
                      </template>
                   </v-btn>
                   <v-btn depressed v-if="!show_more" small color="grey lighten-2">Tidak ada lagi data</v-btn>
                </div>
          </v-flex>
          </v-layout>
    </div>
 </template>
 
 <style scoped>
 .custom-loader {
     animation: loader 1s infinite;
     display: flex;
   }
   @-moz-keyframes loader {
     from {
       transform: rotate(0);
     }
     to {
       transform: rotate(360deg);
     }
   }
   @-webkit-keyframes loader {
     from {
       transform: rotate(0);
     }
     to {
       transform: rotate(360deg);
     }
   }
   @-o-keyframes loader {
     from {
       transform: rotate(0);
     }
     to {
       transform: rotate(360deg);
     }
   }
   @keyframes loader {
     from {
       transform: rotate(0);
     }
     to {
       transform: rotate(360deg);
     }
   }
 table.v-table tbody td,table.v-table tbody th {
    height: 40px;
 }
 
 table.v-table thead tr {
    height: 40px;
 }
 </style>
 
 <script>
 module.exports = {
    methods: {
       showMore(){
          if(!this.loading){
             this.$store.commit('patient/update_loading', true)
             var xnow = this.curr_page
             this.curr_page = xnow + 1
          }
       },
       selectMe(pat) {
          this.$store.commit('patient/update_selected_patient', pat)
 
          this.$store.commit('patient/update_search_dialog_is_active',false)

 
         //  clear parameter search
          this.$store.commit('patient/update_search_nik', '')
          this.$store.commit('patient/update_search_name', '')
          this.$store.commit('patient/update_search_dob', '')
          this.$store.commit('patient/update_search_phone', '')
 
       }
    },
    computed : {
       loading() {
          return this.$store.state.patient.loading
       },
       show_more() {
          return this.$store.state.patient.show_more
       },
       curr_page: {
          get() {
             return this.$store.state.patient.current_page
          },
          set(val) { 
             this.$store.commit("patient/update_current_page",val)
             this.$store.dispatch('patient/search')
          }
       },
    //    xtotal_page: {
    //       get() {
    //          return this.$store.state.patient.total_patient
    //       },
    //       set(val) {
    //          this.$store.commit("patient/update_total_patient",val)
    //       }
    //    },
       isError() {
          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
    //    },
    //    total_display() {
    //       return this.$store.state.patient.total_display
    //    },
 
    },
    data() {
       return {
          headers: [
             {
                text: "NO REG",
                align: "left",
                sortable: false,
                value: "mr",
                width: "15%",
                class: "pa-2 teal lighten-3 white--text"
             },
             {
                text: "NAMA",
                align: "left",
                sortable: false,
                value: "name",
                width: "25%",
                class: "pa-2 teal lighten-3 white--text"
             },
             {
                text: "TANGGAL LAHIR",
                align: "left",
                sortable: false,
                value: "hp",
                width: "15%",
                class: "pa-2 teal lighten-3 white--text"
             },
             {
                text: "ALAMAT",
                align: "left",
                sortable: false,
                value: "dob",
                width: "15%",
                class: "pa-2 teal lighten-3 white--text"
             }
          ],
       };
    }
 }
 </script>