FE_CPONE/test/vuex/one-md-akreditasi/components/oneSampleCallSOList.vue

<template>
    <v-layout class="fill-height" column>
        <v-card class="mb-2 pa-2 searchbox">
            <v-layout align-center row>
                <v-flex xs4>
                    <v-text-field class="ma-1" style="font-size:14px" label="JPA BARU" outline v-model="new_jpa" hide-details></v-text-field>
                </v-flex>
                <v-flex xs2>
                    <span title="tambahkan jpa baru" v-if="new_jpa !== ''" @click="insertNewJPA()" class="icon-medium-fill-base primary"><v-icon dark>add</v-icon></span>
                </v-flex>
            </v-layout>
        </v-card>
        <v-card>
            <v-layout row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="patients" :loading="isLoading" hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                                <span v-if="props.item.open_edit === 'N'">{{ props.item.Nat_JpaName }}</span>
                                <v-text-field v-if="props.item.open_edit === 'Y'" class="ma-1" style="font-size:14px" single-line @change="changejpa(props.item)"
                                    v-model="props.item.Nat_JpaName" hide-details></v-text-field>
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                                <div>
                                    <span title="simpan" v-if="props.item.open_edit === 'Y'" @click="saveEdit(props.item)" class="icon-medium-fill-base-small info"><v-icon dark>save</v-icon></span>
                                    <span v-if="props.item.open_edit === 'N'" title="edit" @click="xedit(props.item)" class="icon-medium-fill-base-small info"><v-icon dark>edit</v-icon></span>
                                    <span v-if="props.item.open_edit === 'N'" title="hapus" @click="xdelete(props.item)" class="icon-medium-fill-base-small red"><v-icon dark>delete</v-icon></span>
                                </div>
                            </td>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card>
        <!--<one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="closeDialogInfo()"></one-dialog-info>
       <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>-->
    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>

<script>
    module.exports = {
        components: {
            'one-dialog-info': httpVueLoader('../../../common/oneDialogInfo.vue'),
            'one-dialog-alert': httpVueLoader('../../../common/oneDialogAlert.vue'),
            'one-x-check': httpVueLoader('../../../common/onexcheck.vue')
        },
        mounted() {
            this.$store.dispatch("samplecall/search", {
                lastid: -1
            })
        },
        methods: {
            isSelected(p) {
                return p.Nat_JpaID == this.$store.state.samplecall.selected_patient.Nat_JpaID
            },
            searchPatient() {
                this.$store.dispatch("samplecall/search", {
                    lastid: -1
                })
            },
            selectMe(pat) {
                var patients = this.$store.state.samplecall.patients
                this.$store.commit("samplecall/update_selected_patient", pat)
                var idx = _.findIndex(patients, function (o) {
                    return o.Nat_JpaID == pat.Nat_JpaID
                })
                this.$store.commit("samplecall/update_last_id", idx)
                this.$store.dispatch("samplesend/search", pat)
            },
            xedit(value) {
                var patients = this.$store.state.samplecall.patients
                var idx = _.findIndex(patients, function (o) {
                    return o.Nat_JpaID == value.Nat_JpaID
                })
                patients[idx].open_edit = 'Y'
                this.$store.commit("samplecall/update_patients", patients)
            },
            saveEdit(value) {
                var patients = this.$store.state.samplecall.patients
                var idx = _.findIndex(patients, function (o) {
                    return o.Nat_JpaID == value.Nat_JpaID
                })
                patients[idx].open_edit = 'N'
                patients[idx].Nat_JpaName = value.Nat_JpaName

                var prm = patients[idx]
                prm.status = 'Y'
                prm.id = patients[idx].Nat_JpaID
                this.$store.dispatch("samplecall/save", prm)
            },
            xdelete(value) {
                var prm = {
                    id: value.Nat_JpaID,
                    value: value.Nat_JpaName,
                    status: 'N'
                }
                this.$store.dispatch("samplecall/save", prm)
            },
            insertNewJPA() {
                var prm = {
                    id: 0,
                    value: this.new_jpa
                }
                this.$store.dispatch("samplecall/save", prm)
            },
            changejpa(value) {
                var patients = this.$store.state.samplecall.patients
                var idx = _.findIndex(patients, function (o) {
                    return o.Nat_JpaID == value.Nat_JpaID
                })
                patients[idx].open_edit = 'Y'
                patients[idx].Nat_JpaName = value.Nat_JpaName
                this.$store.commit("samplecall/update_patients", patients)
            }
        },
        computed: {
            snackbar: {
                get() {
                    return this.$store.state.samplecall.alert_success
                },
                set(val) {
                    this.$store.commit("samplecall/update_alert_success", val)
                }
            },
            isLoading() {
                return this.$store.state.samplecall.search_status == 1
            },
            patients() {
                return this.$store.state.samplecall.patients
            },
            xselectedpatient: {
                get() {
                    return this.$store.state.samplecall.selected_patient
                },
                set(val) {
                    this.$store.commit("samplecall/update_selected_patient", val)
                }
            },
            new_jpa: {
                get() {
                    return this.$store.state.samplecall.new_jpa
                },
                set(val) {
                    this.$store.commit("samplecall/update_new_jpa", val)
                }
            },
        },
        data() {
            return {
                open_edit: false,
                msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                items: [],
                page: 1,
                headers: [{
                        text: "JPA",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "80%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "AKSI",
                        align: "center",
                        sortable: false,
                        value: "status",
                        width: "20%",
                        class: "pa-2 blue lighten-3 white--text"
                    }
                ]
            };
        }
    }
</script>