FE_CPONE/test/vuex/cpone-card-reader/components/patientSearchBox.vue

<template>
   <v-card flat>
      <v-layout row align-center >
         <v-flex xs1 pa-1>
            <patient-new-dialog></patient-new-dialog>
            <!--<v-text-field
               label="No Antrian"
               placeholder="No Antrian"
               single-line
               outline
               v-model="queue"
               hide-details
               @keyup.enter.native="queue_check"
               ></v-text-field>-->
         </v-flex>
         <v-flex xs2 pa-1>
            <v-text-field
               label="PID"
               placeholder="PID"
               single-line
               class="ma-0"
               outline
               hide-details
               v-model="noreg"
               @keyup.native="keyup"
               clearable
               ></v-text-field>
         </v-flex>
         <v-flex xs5 pa-1>
            <v-text-field
               label="Nama + HP + DOB + Alamat"
               placeholder="Nama + HP + DOB + Alamat"
               v-model="search"
               class="ma-0"
               single-line
               hide-details
               outline
               clearable
               @keyup.native="keyup"
               ></v-text-field>
            
         </v-flex>

         <!--<v-flex xs3>
            <v-layout row wrap>
               <v-flex xs6>
                    <v-btn
                        color="blue"
                        dark
                        class="one-btn-icon ma-1"
                        @click="search_patient"
                    >
                        <span class="icon-search"></span>
                    </v-btn>
                  
               </v-flex>

               <v-flex xs6>
 
                  
               </v-flex>
            </v-layout>


         </v-flex>-->
         <patient-search-dialog></patient-search-dialog>
      </v-layout>
      <v-divider v-if="showhint"></v-divider>
      <v-layout row >
         <v-flex xs1 pl-1  pr-1></v-flex>
         <v-flex xs11 pl-1  pr-1>
            <p v-if="showhint" class="mb-0 mt-1 mono caption">Tekan <kbd>enter</kbd> untuk memulai pencarian [<span class="font-weight-bold">Nama</span> + <span class="font-weight-bold">HP</span>  + <span class="font-weight-bold">DOB</span>  + <span class="font-weight-bold">Alamat</span>]</p>
         </v-flex>
      </v-layout>
   </v-card>
</template>
<style scoped>
.v-btn {
   min-width: auto;
}

.v-input__slot {
   margin-bottom: 0px !important;
}

.v-messages {
   display: none;
}

.v-text-field--box>.v-input__control>.v-input__slot,.v-text-field--full-width>.v-input__control>.v-input__slot,.v-text-field--outline>.v-input__control>.v-input__slot {
   min-height: 25px!important;
   padding-bottom:5px;
}

.v-text-field--box.v-text-field--single-line input,.v-text-field--full-width.v-text-field--single-line input,.v-text-field--outline.v-text-field--single-line input {
   margin-top: 0px;
}

.one-btn-icon { font-size: 1.5em; height: 42px; }
</style>
<script>
module.exports = {
    components : {
        'patient-search-dialog': httpVueLoader('./patientSearchDialog.vue'),
        'patient-new-dialog' : httpVueLoader('./patientNewDialog.vue')
    },

   computed: {
      noreg: {
         get() {
            return this.$store.state.patient.noreg
         },
         set(val) {
            this.$store.commit('patient/update_noreg',val)
         }
      },
      search: {
         get() {
            return this.$store.state.patient.search
         },
         set(val) {
            this.$store.commit('patient/update_search',val)
         }
      },
      queue: {
         get() {
            return this.$store.state.order.queue
         },
         set(v) {
            this.$store.commit('order/update_queue', v)
            return
         }
      }
   },

    methods: {
        keyup(e) {
           this.showhint = true
            if (e.which==13) {
               if (!window.one_token()) {
                    this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                    this.$store.commit('update_dialog_error', true)
                    return
                }
                var xsearch = this.$store.state.patient.search
                var xnoreg = this.$store.state.patient.noreg
                if (xsearch.length === 0 && xnoreg.length === 0) {
                    this.$store.commit('update_message_error', 'Ketika hanya kehampaan, ku tak sanggup mencari ... terlalu berat, cari tau apa yang ingin kau cari')
                    this.$store.commit('update_dialog_error', true)
                    return
                }
                this.showhint = false
                this.$store.commit('patient/update_search_dialog_is_active',true)
                var xxdata = {records:[],total:0}
                this.$store.commit('patient/update_patients',xxdata)
                this.$store.commit('patient/update_current_page',1)
                this.$store.dispatch('patient/search')
            }
        },

        queue_check(e) {
            this.$store.dispatch('order/load_from_clinic')
        },

        search_patient() {
            if (!window.one_token()) {
                this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                this.$store.commit('update_dialog_error', true)
                return
            }
            this.$store.commit('patient/update_current_page',1)
            this.$store.commit('patient/update_search_dialog_is_active',true)
            var xxdata = {records:[],total:0}
            this.$store.commit('patient/update_patients',xxdata)
            this.$store.dispatch('patient/search')
        }
    },
    data() {
      return {
            showhint:false
      };
   },
   
}
</script>