FE_CPONE/test/vuex/one-md-instrument-local/components/oneSelectedInstrument.vue

<template>
    <v-layout>
        <v-flex xs12>
            <v-card class="mb-2" color="white">
                <v-toolbar color="blue lighten-2" dark height="50px">
                    <v-toolbar-title class="white--text">INSTRUMENT YANG TERPILIH (TOTAL {{xtotaltests}} )</v-toolbar-title>
                    <v-spacer></v-spacer>
                </v-toolbar>

                <v-layout row wrap class="scroll-container" style="max-height:150px;overflow: auto;">
                    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>

                        <v-layout xs12 row wrap>
                            <v-flex xs2 v-for="(vst,idx) in vtests" :key="vst.Nat_InstrumentID" class="pr-2 pb-1">
                                <v-layout row>
                                    <v-flex class="boxoutline" style="text-overflow:ellipsis;overflow:hidden;" xs11>
                                        <span>{{vst.Nat_InstrumentName}}</span>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>

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

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

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

    .boxoutline {
        color: teal;
        border: 1px solid teal;
        justify-content: center;
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 500;
        border-radius: 1px
    }

    .boxoutline:hover {
        background: rgba(0, 0, 0, 0.07) !important;
        font-size: 15px;
        font-weight: 700;
    }


    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        background: white;
        border: 0px;
    }

    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    table>tr>td {
        padding: 8px;
    }

    table>tr>td:first {
        padding-left: 15px !important;
    }

    .scroll-container {
        scroll-padding: 50px 0 0 50px;
    }

    ::-webkit-scrollbar {
        width: 7px;
    }

    /* this targets the default scrollbar (compulsory) */

    ::-webkit-scrollbar-track {
        background-color: #73baf3;
    }

    /* the new scrollbar will have a flat appearance with the set background color */

    ::-webkit-scrollbar-thumb {
        background-color: #2196f3;
    }

    /* this will style the thumb, ignoring the track */

    ::-webkit-scrollbar-button {
        background-color: #0079da;
    }

    /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

    ::-webkit-scrollbar-corner {
        background-color: black;
    }

    /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
    module.exports = {
        data() {
            return {
                xtestid: 0,
                xtestname: '',
                isLoading: false,
                validtest: false,
                search_test: '',
                items: [],
                msgalert: "",
                msgalertmou: "",
                dialogdeleteinstrumentlocalalert: false,
                dialognoschedulealert: false
            };
        },
        computed: {
            selected: {
                get() {
                    return this.$store.state.instrumentlocal.selected
                }
            },
            xschedule() {
                return this.$store.state.schedule.selected_schedule
            },
            dialogscheduletest() {
                return this.$store.state.instrumentlocal.dialog_form_schedule_test
            },
            xtests() {
                return this.$store.state.instrumentlocal.tests
            },
            test: {
                get() {
                    return this.$store.state.instrumentlocal.test
                },
                set(val) {
                    this.$store.commit("instrumentlocal/update_test", val)
                }
            },
            vtests() {
                return this.$store.state.instrumentlocal.selected
            },
            xtotaltests() {
                return this.$store.state.instrumentlocal.total_tests
            }
        },
        methods: {
            isSelected(id) {
                let vals = this.$store.state.instrumentlocal.selected
                if (vals.indexOf(id) > -1) return true
                return false
            },
            addTestToSchedule(id, name) {
                let scheduleid = this.$store.state.schedule.selected_schedule.id
                if (scheduleid > 0) {
                    this.xtestid = id
                    this.xtestname = name
                    this.msgalert = "Yakin, mau tambahkan pemeriksaan " + this.xtestname + " ke janji hasil " +
                        this.$store.state.schedule.selected_schedule.name + " ?"
                    this.dialogdeleteinstrumentlocalalert = true
                } else {
                    this.msgalert = "Janji hasilnya belum dipilih"
                    this.dialognoschedulealert = true
                }

            },
            closeDeleteAlert() {
                let scheduleid = this.$store.state.schedule.selected_schedule.id
                this.$store.dispatch("instrumentlocal/save", {
                    xid: this.xid,
                    scheduleid: this.$store.state.schedule.selected_schedule.id,
                    schedulename: this.$store.state.schedule.selected_schedule.name,
                    testid: this.xtestid,
                    testname: this.xtestname
                })
                this.dialogdeleteinstrumentlocalalert = false
            },
            async deleteTest(id, name) {
                let scheduleid = this.$store.state.schedule.selected_schedule.id
                await this.$store.dispatch("instrumentlocal/delete", {
                    id: id,
                    name: name,
                    scheduleid: scheduleid
                })
                await this.$store.dispatch("instrumentlocal/selected", scheduleid)
            },
            updateDialogFormScheduleTest() {
                this.$store.commit("instrumentlocal/update_dialog_form_schedule_test", false)
            },
            thr_search_test: _.debounce(function () {
                this.$store.dispatch("instrumentlocal/searchtest", {
                    search: this.search_test,
                    schedulegroup_id: this.$store.state.schedule.selected_schedule.id
                })
            }, 2000),
            openFormScheduleTest(val) {
                //console.log("masuk")
                this.xid = val
                this.search_test = ''
                this.$store.commit("instrumentlocal/update_tests", [])
                this.test = {}
                this.$refs.formscheduletest.reset()
                this.$refs.formscheduletest.resetValidation()
                this.$store.commit("instrumentlocal/update_dialog_form_schedule_test", true)
            },
            saveFormScheduleTest() {
                if (this.$refs.formscheduletest.validate()) {
                    this.$store.dispatch("instrumentlocal/save", {
                        xid: this.xid,
                        scheduleid: this.$store.state.schedule.selected_schedule.id,
                        schedulename: this.$store.state.schedule.selected_schedule.name,
                        testid: this.test.Nat_InstrumentID
                    })
                }
            },
            updateAlert_success(val) {
                this.$store.commit("schedule/update_alert_success", val)
            }
        },
        watch: {
            search_test(val, old) {
                if (val == old) return
                if (!val) return
                if (val.length < 1) return
                if (this.$store.state.instrumentlocal.update_autocomplete_status == 1) return
                this.thr_search_test()
            }
        }
    }
</script>