FE_CPONE/test/vuex/one-process-resultverification-v21/components/oneProcessReHistory.vue

<template>
<v-dialog
v-model="dialog"    
persistent
max-width="1000px"
min-height="600px"
transition="dialog-transition"
>

<v-layout class="fill-height" column>
   <v-card class="grow" color="blue-grey lighten-2">
      <v-card-title primary-title class="title white--text pb-2">
         HISTORI PEMERIKSAAN
         <v-spacer></v-spacer>
         <v-btn color="white" flat @click="filter_test()">{{text_filter_test}}</v-btn>
         <v-btn color="white" flat @click="uncheck_all()">Clear Test</v-btn>
         <v-btn color="white" flat @click="dialog = false">Tutup</v-btn>
      </v-card-title>

      <v-card-text class="pt-2 pb-2">

	<v-layout v-if="show_filter_test" xs12 row wrap style="background-color:white;padding-top:10px;border-radius:10px 10px 0px 0px;padding-left:10px;">
	   <v-flex xs3 v-for="(p, i) in pxs" v-bind:key="p.code" class="pr-2 pb-1">
	      <v-layout row>
		 <v-flex class="boxoutline" class="text-left" style="padding-top:10px" pl-2 pr-2 xs2>
		    <v-layout row align-left justify-space-between>
		       <v-icon v-if="! px_selected(p.code)" @click="selectPx(p.code)" style="color:red">clear</v-icon>
		       <v-icon v-if="px_selected(p.code)" @click="unSelectPx(p.code)" style="color:green">check</v-icon>
		    </v-layout>
		 </v-flex>
		 <v-flex class="boxoutline " style="text-overflow:ellipsis;overflow:hidden;padding-top:10px;" xs11>
		    <span >{{p.name}}</span>
		 </v-flex>
	      </v-layout>
	   </v-flex>
        </v-layout>


         <v-layout row wrap>
            <v-flex xs12 >
               <v-card>
                  <v-card-text class="pt-1 pb-1 pl-1 pr-1">
                     <v-data-table
                     :headers="new_headers" :items="result"
                     :loading="isLoading"
                     hide-actions class="elevation-1 table-history"
                     >
                     <template slot="items" slot-scope="props">
                        <td class="text-xs-left pl-2 pr-2 pa-1 green--text" >
                           {{ props.item.px_name }}
                        </td>
                        <td class="text-xs-left pl-2 pr-2 pa-1" >
                           {{ props.item.unit}}
                        </td>

                        <td class="text-xs-left pl-2 pr-2 pa-1" v-for="xdate in dates" >
                           {{ props.item.result[xdate] }} 
                        </td>
                     </template>
                     </v-data-table>
                  </v-card-text>
               </v-card>
            </v-flex>
         </v-layout>

      </v-card-text>
   <v-card-actions>
   <v-spacer></v-spacer>
   <v-btn color="white" flat @click="dialog = false">Tutup</v-btn>
   </v-card-actions>


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

<style>

.table-history table td {
   height: 40px !important
}

.boxoutline {
   color: #000099;
   border: 1px solid #e6f7ff;
   justify-content: center;
   height: 55px;
   line-height: 25px;
   padding-left: 5px;
   background: #b3e7ff;
   font-size: 14px;
   border-radius: 1px;
   font-weight: 200;
}

.boxoutline:hover {
   background: #e6f7ff!important;
   font-size: 14px;
   font-weight: 300;
}

</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],

         isLoading: false,
	 show_filter_test: false
      };
   },

   methods : {
      filter_test() {
	this.show_filter_test = !this.show_filter_test
      },
      oneMoment : function(d) {
         return window.oneMoment(d)
      },
      uncheck_all() {
	 this.$store.commit('re_history/update_selected_px',[])
      },
      selectPx(code) {
	console.log('Select ' + code )
	let pxs = this.$store.state.re_history.pxs
        let obj = _.filter(pxs,function(o){ return o.code == code})
	let spx = this.$store.state.re_history.selected_px
	let n_spx = _.concat(spx,obj)
	this.$store.commit('re_history/update_selected_px',n_spx)	
      },
      unSelectPx(code) {
	let spx = this.$store.state.re_history.selected_px
	let new_spx = _.filter(spx,function(o){ return o.code != code })
	this.$store.commit('re_history/update_selected_px',new_spx)	
      },
      px_selected(code) {
	let spx = this.$store.state.re_history.selected_px
	let rst = _.findIndex(spx,{'code':code}) 	
	if (rst == -1 ) return false
	return true
      }, 
   },

   computed : {
      dates() {
         return this.$store.state.re_history.dates
      },
      text_filter_test() {
	if (this.show_filter_test) return "Hide Test"
	return "Show Test"
      },
      new_headers() {
         let headers = [
            {
            text: "PEMERIKSAAN",
            align: "left",
            sortable: false,
            width: "45%",
            class: "pa-2 blue lighten-3 white--text"
         },
         {
            text: "Unit",
            align: "left",
            sortable: false,
            value: "mr",
            width: "16%",
            class: "pa-2 blue lighten-3 white--text"
         } ]

         for(let i =0; i< this.dates.length ; i++ ) {
            headers.push({
               text: this.dates[i],
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            })
         }

         return headers
      },
      result () {
	 let spx = this.$store.state.re_history.selected_px
         let rst = this.$store.state.re_history.result
	 let new_rst = _.filter(rst, function(r) {
		return _.findIndex(spx,{'code':r.code}) > -1
	 })
	 return new_rst
      },
      pxs () {
         return this.$store.state.re_history.pxs
      },
      dialog : {
         get () { return this.$store.state.re_history.dialog_history },
         set (v) { this.$store.commit('re_history/update_dialog_history', v) }
      },
      selected_px: {
         get () { return this.$store.state.re_history.selected_px }
      }

   },

}
</script>