FE_CPONE/test/vuex/one-doctor-generate/components/orderSearchBox.vue

<template>
   <v-card flat>
      <v-layout row align-center>
         <v-flex xs1 pa-1>
            <v-btn class="mt-1" fab small slot="activator" title="tambahkan pasien baru" @click="new_patient" dark
               color="teal lighten-2">
               <v-icon dark>add</v-icon>
            </v-btn>
         </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 + NIK"
               placeholder="Nama + HP + DOB + Alamat + NIK" v-model="search"
               class="ma-0" single-line hide-details outline clearable @keyup.native="keyup"></v-text-field>

         </v-flex>
      </v-layout>
         <patient-search-dialog></patient-search-dialog>
      <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  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> + <span class="font-weight-bold">NIK</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')
   },

   computed: {
      noreg: {
         get() {
            return this.$store.state.patient.noreg
         },
         set(val) {
            this.$store.commit('patient/update_noreg', val)
         }
      },
      isnewpatient: {
         get() {
            return this.$store.state.patient.isnewpatient
         },
         set(val) {
            this.$store.commit('patient/update_isnewpatient', 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')
      },
      new_patient() {
         this.$store.commit('patient/update_isnewpatient', 'Y')
         pat = this.$store.state.patient.selected_patient
         this.$store.commit('patient/update_patient_new', {
            M_PatientName: pat.M_PatientName,
            M_PatientIDNumber: pat.M_PatientIDNumber,
            M_PatientAddress : pat.M_PatientAddress,
            M_PatientDOB: pat.M_PatientDOB,
            M_PatientHP: pat.M_PatientHP
            })
      },
      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>