FE_CPONE/test/vuex/one-fo-registration-dev-2/components/oneFoRegistrationCompany.vue

<template>
   <v-layout column pb-2>
      <v-card >
         <v-layout row>
            <v-flex  pt-1 pb-1 pl-2 pr-1 xs12 sm6 md6>
               <v-autocomplete
                  label="Perusahaan"
                  v-model="selected_company"
                  :items="companies"
                  :search-input.sync="search"
                  :readonly="isHavingTest"
                  auto-select-first
                  no-filter
                  return-object
                  :clearable="! isHavingTest"
                  item-text="M_CompanyName"
                  :loading="is_loading"
                  no-data-text="Pilih Company"
                  >
                  <template
                     slot="item"
                     slot-scope="{ item }"
                     >
                     <v-list-tile-content>
                        <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                     <v-list-tile-sub-title v-text="getMou(item)"></v-list-tile-sub-title>
                     </v-list-tile-content>
                  </template>

               </v-autocomplete>
            </v-flex>
            <v-flex  pt-1 pb-1 pl-1 pr-2 xs12 sm6 md6>
               <v-select
                  v-model="selected_mou"
                  :items="company_mou"
                  :readonly="isHavingTest"
                  auto-select-first
                  item-text = "M_MouName"
                  return-object
                  label="Agreement"
                  hide-details
                  hide-detail
                  class="mb-1"
                  >
                  <template
                     slot="item"
                     slot-scope="{ item }"
                     >
                     <v-list-tile-content>
                        <v-list-tile-title v-text="item.M_MouName"></v-list-tile-title>
                     <v-list-tile-sub-title v-text="getMouDate(item)"></v-list-tile-sub-title>
                     </v-list-tile-content>
                  </template>
               </v-select>
               <div v-for="(note, n) in selected_mou_note" v-bind:key="n" class="caption">{{ note }}</div>
            </v-flex>

            
         </v-layout>
      </v-card>
   </v-layout>
</template>

<style scoped>
</style>
<script>
module.exports = {
   computed: {
      search:{
         get(){
            return this.$store.state.company.search
         },
         set(val)  {
            if (val == null) return
            this.$store.commit('company/update_search',val)
         }
      },
      isHavingTest() {
         return this.$store.state.px.selected_test.length > 0 ||
            this.$store.state.px.selected_panel.length > 0
      },
      selected_mou: {
            get() {
                return this.$store.state.company.selected_mou
            },

            set(val) {
                this.$store.commit("company/update_selected_mou", val)

                // Auto CHECKED
                let dlv = this.$store.state.delivery.checked_id
                let cmou = val
                
                if (cmou.M_MouEmail != "" && cmou.M_MouEmailIsDefault == "Y") {
                    if (dlv.indexOf(cmou.delivery_email_code) < 0) {
                        dlv.push(cmou.delivery_email_code)
                    }
                } else {
                    let idx = dlv.indexOf(cmou.delivery_email_code)
                    if ( idx > -1) {
                        dlv.splice(idx, 1)
                    }
                }
                this.$store.commit('delivery/update_checked_id', dlv)
                // End of Auto CHECKED

                this.$store.commit("delivery/update_params", {m_id:val.M_MouID})
                this.$store.dispatch("delivery/search")

                // Search Test
                this.$store.dispatch('px/search')
            }
      },
      selected_company: {
         get() {
            return this.$store.state.company.selected_company
         },
         set(val) {
            this.$store.commit("company/update_selected_company",val)
         }
      },
      company_mou() {
         if (! this.$store.state.company.selected_company) return []
         if (! this.$store.state.company.selected_company.mou) return []
         return this.$store.state.company.selected_company.mou
      },

      companies() {
         return this.$store.state.company.companies
      },
      is_loading() {
         return this.$store.state.company.search_status == 1
      },

        selected_mou_note() {
            let x = this.selected_mou
            if (!x)
                return []
            if (!x.M_MouNote)
                return []

            return x.M_MouNote.split(/\n/)
        }
   },
   methods: {
      getMouDate(item) {
         return item.M_MouStartDate + ' s/d ' + item.M_MouEndDate
      },
      getMou(item) {
         if (!item) return ''
         if (!item.mou) return ''
         let s_mou = ''
         item.mou.forEach( function(mou,idx) {
            if (s_mou!='') s_mou += ', '
            s_mou += mou.M_MouName
         });
         return s_mou
      },
      thr_search: _.debounce( function () {
         this.$store.dispatch("company/search")
      }, 700)
   },
   watch: {
      search(val,old) {
         if (this.$store.state.order.is_from_clinic)
            return
         if (val == null || typeof val == 'undefined') val = ""
         if (val == old ) return
         if (this.$store.state.company.search_status == 1 ) return  
         this.$store.commit("company/update_search",val)
         this.thr_search()
      }
   },
   data: function() {
      return {
         // search : ''
      }
   },

   mounted () {
      this.$store.dispatch('company/search_default')
   }
}
</script>