Files
FE_CPONE/test/vuex/one-md-favorite-new/components/mdFavoriteTest.vue
2026-04-27 10:13:31 +07:00

336 lines
10 KiB
Vue

<template>
<v-layout >
<v-snackbar
v-model="snackbar"
:color="color"
:timeout="5000"
:multi-line="false"
:vertical="false"
:top="true"
>
{{msgsnackbar}}
<v-btn
flat
@click="updateAlert_success(false)"
>
Tutup
</v-btn>
</v-snackbar>
<v-flex xs12 >
<v-card class="mb-2" color="white" style="min-height:100px" >
<v-toolbar class="mb-1" color="blue lighten-3" dark height="50px">
<v-toolbar-title></v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
color="primary"
@click="saveFavorite()"
>
SIMPAN
</v-btn>
</v-toolbar>
<v-layout row>
<v-flex xs-8 pl-3 pr-3 pb-3 pt-2>
<v-card>
<v-card-title
dark
class="headline info pt-2 pb-2"
primary-title
style="color:white"
>
<h5 dark>LISTING PEMERIKSAAN</h5>
</v-card-title>
<v-card-text>
<v-layout class="mb-2" row>
<v-text-field class="xs6 ma-1"
label=""
placeholder="Kode / nama pemeriksaan"
single-line
outline
v-model="search"
hide-details
></v-text-field>
<span @click="searchTests" class="icon-medium-fill-base white--text success iconsearch-search">
</v-layout>
<v-data-table
:headers="headers"
:items="xtests"
:loading="is_loading"
:pagination.sync="pagination"
class="elevation-1">
<template slot="items" slot-scope="props">
<td class="text-xs-left pa-2">{{ props.item.testcode }}</td>
<td class="text-xs-left pa-2">{{ props.item.testname}}</td>
<td class="text-xs-right pa-2">
<div>
<v-btn @click="addToTests(props.item)" v-if="checkInTests(props.item) === false" small color="error"><v-icon left>close</v-icon> Belum dipilih</v-btn>
<v-btn v-if="checkInTests(props.item) === true" flat small color="success"><v-icon left>check</v-icon> Sudah terpilih</v-btn>
</div>
</td>
</template>
<template>
<div class="text-xs-center">
<v-pagination
v-model="page"
:length="15"
:total-visible="7"
></v-pagination>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</v-flex>
<v-flex xs-4 pl-3 pr-3 pb-3 pt-2>
<v-card style="width: 800px;">
<v-card-title
dark
class="headline error pt-2 pb-2"
primary-title
style="color:white"
>
<h5 dark>PEMERIKSAAN TERPILIH [ {{xfavorites.length}} ]</h5>
</v-card-title>
<v-card-text>
<v-btn class="mt-1 mb-2" v-for="(vst,idx) in xfavorites" :key="vst.id" small color="error">{{vst.testname}} <v-icon @click="deleteFavorite(vst)" right dark>clear</v-icon> </v-btn>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-card>
</v-flex>
<template>
<v-dialog
v-model="dialogdeletealerttest"
max-width="30%"
>
<v-card>
<v-card-title
class="headline grey lighten-2 pt-2 pb-2"
primary-title
>
Peringatan !
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 xs12>
{{msgalerttest}}
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialogdeletealerttest = false"
>
Tutup
</v-btn>
<v-btn
color="primary"
flat
@click="closeDeleteAlertTest()"
>
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</v-layout>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
min-height:60px;
}
</style>
<script>
module.exports = {
mounted() {
this.$store.dispatch("favorite/lookuptests",{
search:this.search
})
this.$store.dispatch("favorite/lookup",{
search:this.search
})
},
computed: {
openalertconfirmation: {
get() {
return this.$store.state.favorite.open_alert_confirmation
},
set(val) {
this.$store.commit("favorite/update_open_alert_confirmation",val)
}
},
dialogfavorite(){
return this.$store.state.favorite.dialog_form_favorite_test
},
xselected_test: {
get() {
return this.$store.state.favorite.selected_test
},
set(val) {
this.$store.commit("favorite/update_selected_test",val)
}
},
xfavorites(){
return this.$store.state.favorite.selected_favorite
},
xtests(){
return this.$store.state.favorite.tests
},
xtotal_test() {
return this.$store.state.favorite.total_test
},
xfavorites(){
return this.$store.state.favorite.favorite_tests
},
is_loading() {
return this.$store.state.favorite.search_status == 1
},
snackbar: {
get() {
return this.$store.state.favorite.alert_success
},
set(val) {
this.$store.commit("favorite/update_alert_success",val)
}
},
msgsnackbar(){
return this.$store.state.favorite.msg_success
},
},
methods : {
searchTests(){
this.$store.dispatch("favorite/lookuptests",{
search:this.search
})
},
checkInTests(value){
let arrtests = this.$store.state.favorite.favorite_tests
var idx = _.findIndex(arrtests, favorite => favorite.testid === value.testid && favorite.testtype === value.testtype )
if(idx !== -1){
return true
}
else{
return false
}
},
addToTests(value){
let arrtests = this.$store.state.favorite.favorite_tests
if(arrtests.length < 50){
arrtests.push({id:0,testid:value.testid,testname:value.testname,paket:value.paket,ispaket:value.ispaket,testtype:value.testtype})
this.$store.commit("favorite/update_favorite_tests",arrtests)
this.$store.commit("favorite/update_no_save",true)
this.$store.dispatch("favorite/lookuptests",{
search:this.search
})
}else{
alert("maksimal 50 pemeriksaan")
}
},
closeAlertConfirmation(){
this.$store.commit("favorite/update_open_alert_confirmation",false)
},
forgetAlertConfirmation(){
this.$store.commit("favorite/update_no_save",false)
this.$store.commit("favorite/update_open_alert_confirmation",false)
},
deleteFavorite(value){
var arrtests = this.$store.state.favorite.favorite_tests
var idx = _.findIndex(arrtests, favorite => favorite.testid === value.testid)
if(idx !== -1){
arrtests.splice(idx, 1)
this.$store.commit("favorite/update_favorite_tests",arrtests)
}
if(value.id !== 0){
var deltests = this.$store.state.favorite.deleted_favorite_tests
deltests.push(value)
this.$store.commit("favorite/update_deleted_favorite_tests",deltests)
}
},
saveFavorite(){
this.$store.dispatch("favorite/save",{
favorites:this.$store.state.favorite.favorite_tests,
deletedfavorite :this.$store.state.favorite.deleted_favorite_tests
})
},
updateAlert_success(val){
this.$store.commit("favorite/update_alert_success",val)
},
},
data: () => ({
color:"success",
validtest:false,
search:"",
dialogdeletealerttest:false,
msgalertconfirmation:"Belum memilih salah satu favorite !",
xid:0,
page:1,
msgalerttest:"",
chip2:false,
headers: [
{
text: "KODE PEMERIKSAAN",
align: "left",
sortable: false,
value: "mr",
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "NAMA PEMERIKSAAN",
align: "left",
sortable: false,
value: "lab",
width: "35%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "STATUS",
align: "center",
sortable: false,
value: "status",
width: "15%",
class: "pa-2 blue lighten-3 white--text"
}
],pagination:{
descending: false,
page: 1,
rowsPerPage: 10,
sortBy: 'testcode',
totalItems: this.xtotal_test
}
}),
}
</script>