FE_CPONE/test/vuex/one-sniper-tools/components/oneFoSupervisorDialogPromise.vue

<template>
<div>
    <v-dialog
    v-model="xpromisedialog"
    persistent 
    max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline darken-1 pt-2 pb-2"
                primary-title
                style="color:white"
                v-bind:class="{ 'cyan':savestatus !== 2, 'success':savestatus === 2}"
            >
            <h4 dark v-if="savestatus !== 2">Konfirmasi</h4>
            <h4 v-if="savestatus === 2">Berhasil !</h4>
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout wrap>
                    <v-flex xs12>
                        <v-layout v-for="promise in xpromises" row>
                            <v-flex xs9 pr-1>
                                <v-text-field
                                    label="Tanggal"
                                    v-model="promise.xdate"
                                    hide-details
                                ></v-text-field>
                                <p style="font-size:7px" class="mono mt-1 mb-1 caption">{{promise.tests}}</p>
                            </v-flex>
                            <v-flex xs3 pl-1>
                                <v-text-field
                                    label="Jam"
                                    v-model="promise.xtime"
                                    hide-details
                                ></v-text-field>
                            </v-flex>
                            
                        </v-layout>
                    </v-flex>
                </v-layout> 
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <p v-for="error in errors" class="error pl-2 pr-2" style="color:#fff">janji hasil {{error.xdate}} {{error.xtime}} , masih salah dong formatnya (dd-mm-yyyy hh:mm)</p>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="cyan"
                    flat
                    @click="doSave()"
                >
                Simpan
                </v-btn>
                <v-btn
                    color="black"
                    flat
                    @click="xpromisedialog = false"
                >
                Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</div>
</template>

<style scoped>
    .label-tagihan{
        text-align:left;
        font-size: 25px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .sub-header{
        text-align:left;
        font-size: 18px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .sub-title{
        text-align:left;
        font-size: 14px;
        font-family: open sans, tahoma, sans-serif;
        font-weight:700;
    }

    .text-tagihan{
        text-align:left;
        font-size: 42px;
        font-family: open sans, tahoma, sans-serif;
    }

    .disabled-background{
        background:#b7b7b7;
    }

    .input-cash{
        width: 100%;
        padding: 8px 14px;
        box-sizing: border-box;
        border: 2px solid grey;
        border-radius: 4px;
        font-size: 22px;
        font-weight:700;
        text-align:right;
    }
    .input-plain{
        width: 100%;
        padding: 4px 8px;
        box-sizing: border-box;
        border: 2px solid grey;
        border-radius: 4px;
        font-size: 14px;
    }
    .v-input, .v-input__slot, .v-messages{
        margin:0px;
        padding:0px;
        min-height: 0px; 
    }
    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
        margin-bottom: 0px;
    }
    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;
    }
    .mini-input .v-input{
        margin-top: 0px; 
    }

    .mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
        margin-top: 0px; 
        margin-bottom:0px;
        margin-left:3px;
    }
    .mini-input .v-messages{
        min-height:0px;
    }

    .border-bottom-dashed{
        border-bottom : 1px dashed rgba(0,0,0,.12);
    }
</style>
<script>
module.exports = {
    data () {
      return {
        printwidth:600
      }
    },
    computed: {
        xpromisedialog:{
            get() {
                return this.$store.state.promise.promise_dialog
            },
            set(val) {
                this.$store.commit("promise/update_promise_dialog",val)
            }
        },
        promisedialogmessage:{
            get() {
                return this.$store.state.promise.promise_dialog_message
            },
            set(val) {
                this.$store.commit("promise/update_promise_dialog_message",val)
            }
        },
        xpromises: {
            get() {
                return this.$store.state.promise.promises
            },
            set(val) {
                this.$store.commit("promise/update_promises",val)
            }
        },
        savestatus(){
            return this.$store.state.supervisor.save_status
        },
        computedDateFormatted (value) {
            return this.formatDate(value)
        },
      errors () {
            return this.$store.state.promise.errors
        },
      
    },
    methods : {
        formatDate (date) {
            if (!date) return null

            const [year, month, day] = date.split('-')
            return `${day}-${month}-${year}`
        },
        deFormatedDate (date) {
            if (!date) return null

            const [ day,month, year] = date.split('-')
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        },
        closeMenudate(value){
            let arrx = this.$store.state.promise.promises
            var idx = _.findIndex(arrx, item => item.id === value.id)
            console.log(idx)
            this.$store.commit("promise/update_promises",arrx)
        },
        doSave(){
            let arrx = this.$store.state.promise.promises
            var errors = []
            arrx.forEach(function(arr) {
                var xDate = moment(arr.xdate, 'DD-MM-YYYY', true)
                var isValidDate = xDate.isValid()
                var xTime = moment(arr.xtime, 'HH:mm', true)
                var isValidTime = xTime.isValid()
                if(!isValidDate){
                    errors.push(arr)
                }
                if(!isValidTime){
                    errors.push(arr)
                }
            })
            
            this.$store.commit("promise/update_errors",errors)
            if(errors.length === 0){
                this.$store.dispatch("promise/save",{
                    data : arrx,
                    orderid:this.$store.state.patient.selected_patient.orderid
                })
            }

        },
        closeDialogRead(){
            if(this.savestatus !== 2){
                this.$store.commit("supervisor/update_read_dialog",false)
            }
            else{
                let arrpatient = this.$store.state.patient.patients
                var idx = _.findIndex(arrpatient, item => item.orderid === this.$store.state.patient.selected_patient.orderid)
                console.log(idx)
                this.$store.dispatch("patient/search",{
                    search: this.$store.state.patient.search,
                    status: this.$store.state.patient.selected_status.value,
                    lastidx:idx
                })
                this.$store.commit("supervisor/update_read_dialog",false)
            }
             
        },

   }
}
</script>