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

<template>
   <v-card-text>
      <v-layout row >
         <v-text-field
            placeholder="ketikkan profile..."
            class="pt-0"
            v-model="search"
            @keyup.enter="do_search"
            >
         </v-text-field>
      </v-layout>
         <v-layout row wrap>
            
            <v-flex xs3 v-for="(profile, idx) in profiles" v-bind:key="idx">
               <v-layout row>
                  <v-flex>
                     <v-btn depressed small color="error" class="mr-0 btn-profile" :disabled="profile.err > 0" :dark="profile.err < 1" block @click="selectPx(profile.detail)">{{ profile.T_ProfileName }}</v-btn>
                  </v-flex>
                  <v-flex>
                     <v-btn depressed small icon color="red lighten-2" dark class="ml-0" @click="profile_detail(profile)"><v-icon>search</v-icon></v-btn>
                  </v-flex>
               </v-layout>
               
               
            </v-flex>

            <v-snackbar
               v-model="snackbar"
               top
            >
               {{ err_text }}
               <v-btn color="red" flat @click="snackbar = false" >
                  Close
               </v-btn>
            </v-snackbar>

            <v-dialog
               v-model="profile_detail_dialog"
               width="500"
            >
               <v-card>
                  <v-card-title
                     class="headline grey lighten-2"
                     primary-title
                  >
                     {{ profile_detail_title }}
                  </v-card-title>

                  <v-card-text>
                     <v-layout row wrap>
                        <v-flex xs6 v-for="(px, i) in profile_detail_px" v-bind:key="i" pa-1>
                           <v-btn color="orange" block dark>{{ px.T_TestName }}</v-btn>
                        </v-flex>
                     </v-layout>
                     
                  </v-card-text>
                  <v-divider></v-divider>
                  <v-card-actions>
                     
                     <v-btn
                        color="primary"
                        flat
                        @click="profile_detail_dialog = false"
                     >
                        Tutup
                     </v-btn>
                     <v-spacer></v-spacer>
                     <v-btn color="red" dark>Tambahkan ke Order</v-btn>
                  </v-card-actions>
               </v-card>
            </v-dialog>

         </v-layout>
   </v-card-text>
</template>
<style scoped>
.v-btn--icon {
   border-radius: 0px
}

.btn-profile {
   border-top-right-radius: 0%;
   border-bottom-right-radius: 0%;
}
</style>

<script>
module.exports = {
   data () {
      return {
         snackbar: false,
         err_text: "",

         profile_detail_dialog: false,
         profile_detail_text: '',
         profile_detail_title: 'SGPT',

         profile_detail_px: []
      }
   },

   computed : {
      profiles () {
         return this.$store.state.px.profiles
      },

      search : {
         get () {
            return this.$store.state.px.search_profile
         },
         set (v) {
            this.$store.commit('px/update_search_profile', v)
         }
      }
   },

   methods : {
      do_search() {
         this.$store.dispatch('px/profile')
      },

      selectPx(pxs) {
         let flag_found = false
         let flag_name = ""
         let selected_test = this.$store.state.px.selected_test

         for (let i in pxs) {
            var px = pxs[i]            
            selected_test.forEach( function(t, idx) {
               if (t.T_TestID == px.T_TestID) {
                  flag_found = true
                  flag_name = t.T_TestName
               }
            })
         }

         if (flag_found) {
            this.err_text = "Tidak bisa menambahkan Profile. Pemeriksaan " + flag_name + " sudah ada !"
            this.snackbar = true
            return
         }

         for (let i in pxs) {
            var px = pxs[i]

            try {
               // if (in_selectPx) return
               // in_selectPx = true

               // let selected_test = this.$store.state.px.selected_test
               flag_found = false
               // let flag_found = false
               // selected_test.forEach( function(t, idx) {
               //    if (t.T_TestID == px.T_TestID) {
               //       selected_test[idx] = px 
               //       flag_found = true
               //    }
               // })

               if (!flag_found) {
                  selected_test.push(px)

                  // let tests = this.$store.state.px.tests
                  // let p_idx = -1
                  // tests.forEach(function(t,idx) {
                  //    if (t.T_TestID == px.T_TestID) {
                  //       p_idx = idx
                  //    }
                  // })
                  // if (p_idx >= 0 ) {
                  //    _.pullAt(tests,[p_idx]) 
                  //    let dt = {
                  //       records: tests,
                  //       total: tests.length
                  //    }
                  //    this.$store.commit('px/update_tests',dt)
                  // }
               }

               this.$store.commit('px/update_selected_test', selected_test)
               if (px.T_TestRequirement != '' ) {
                  let reqs = this.$store.state.px.requirement
                  let rst =  _.find(reqs, function(r) { return r.label == px.T_TestRequirement; }) 
                  if ( rst == undefined ) {
                     reqs.push({
                        px_id: px.T_TestID,
                        label: px.T_TestRequirement,
                        error_message: 'Hasil harus di isi',
                        is_error: true,
                        checked : false,
                        note: ''
                     })
                  }

                  this.$store.commit('px/update_requirement', reqs)

                  // Update Janji Hasil
                  this.$store.dispatch('px/appx_schedule')
               }

               // in_selectPx = false
            } catch(e) {
               console.log(e)
               // in_selectPx = false
            }

         }
         
      },

      profile_detail (profile) {
         this.profile_detail_title = profile.T_ProfileName
         this.profile_detail_text = JSON.stringify(profile.detail)
         this.profile_detail_px = profile.detail
         this.profile_detail_dialog = true
      }
   }
}
</script>