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

<template>
    <v-card flat>
       <v-layout row align-center >
          <v-flex xs5 pa-1>
             <v-text-field
                label="NIK"
                placeholder="Cari NIK"
                class="ma-0"
                outline
                hide-details
                v-model="search_nik"
                type="search"
                @keyup.enter="seachingPatient"
                clearable
                ></v-text-field>
          </v-flex>
          <v-flex xs5 pa-1>
             <v-text-field
                label="Nama"
                placeholder="Cari Nama"
                class="ma-0"
                hide-details
                v-model="search_name"
                type="search"
                outline
                @keyup.enter="seachingPatient"
                clearable
                ></v-text-field>
          </v-flex>
          <v-flex xs5 pa-1>
             <v-text-field
                label="Tanggal Lahir"
                placeholder="format : DD-MM-YYYY , contoh : 22-06-1988"
                class="ma-0"
                hide-details
                type="search"
                v-model="search_dob"
                hint="format : DD-MM-YYYY , contoh : 22-06-1988"
                outline
                @keyup.enter="seachingPatient"
                clearable
                ></v-text-field>
          </v-flex>
          <v-flex xs5 pa-1>
             <v-text-field
                label="Nomor HP"
                placeholder="Cari Nomor HP"
                class="ma-0"
                hide-details
                type="search"
                outline
                v-model="search_phone"
                @keyup.enter="seachingPatient"
                clearable
                ></v-text-field>
          </v-flex>

          <patient-clinic-search-dialog></patient-clinic-search-dialog>
       </v-layout>
       <v-divider ></v-divider>
       <v-layout row >
          <v-flex xs12 pl-1>
             <p  class="mb-0 mt-1 mono caption">Tekan <kbd>enter</kbd> untuk memulai pencarian </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-clinic-search-dialog': httpVueLoader('./patientClinicSearchDialog.vue'),
    },
    data() {
       return {
         showhint:false,
       };
    },
    mounted () {

    },
    computed: {
      search_phone: {
         get() {
            return this.$store.state.patient.search_phone
         },
         set(val) {
            this.$store.commit('patient/update_search_phone',val)
         }
      },
      search_dob: {
         get() {
            return this.$store.state.patient.search_dob
         },
         set(val) {
            this.$store.commit('patient/update_search_dob',val)
         }
      },
      search_name: {
         get() {
            return this.$store.state.patient.search_name
         },
         set(val) {
            this.$store.commit('patient/update_search_name',val)
         }
      },
      search_nik: {
         get() {
            return this.$store.state.patient.search_nik
         },
         set(val) {
            this.$store.commit('patient/update_search_nik',val)
         }
      },
      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)
         }
      },
    },
    methods: {
      seachingPatient(){
         console.log('hoe')
         var search_nik = this.search_nik
         var search_name = this.search_name
         var search_dob = this.search_dob
         var search_phone = this.search_phone
         if (search_nik.length === 0 && search_name.length === 0 && search_dob.length === 0 && search_phone.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.$store.commit('patient/update_act', 'edit')
         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')
      },
      keyup(e) {
         this.showhint = true
         console.log('keyup e', e)
         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.$store.commit('patient/update_act', 'edit')
               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')
         }
      },
    },
    
 }
 </script>