exchange-2.0/resources/assets/vue/components/settings/forms/PaymentAttemptLimitFormComponent.vue

<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <h6 class="all-caps m-b-0 bold">Payment Attempt Limit</h6>
                            <div class="font-heading fs-10 all-caps muted">Set the payment grace duration before the attempts expires</div>
                        </div>
                    </div>
                    <div class="row  justify-content-center m-b-20">
                        <div class="col-8 bg-master-dark padding-15 b-rad-lg">
                            <div class="row justify-content-center">
                                <div class="col-3 p-r-5 p-l-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Days</label>
                                        <input type="text" class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="days" v-mask="'##'">
                                    </div>
                                </div>
                                <div class="col-auto p-r-5 p-l-5">
                                    <div class="row h-100 align-items-center">
                                        <div class="col">
                                            <div class="font-heading fs-25 p-b-10 blink text-white">:</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3 p-l-5 p-r-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Hours</label>
                                        <input type="text" class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="hours" v-mask="'##'">
                                    </div>
                                </div>
                                <div class="col-auto p-r-5 p-l-5">
                                    <div class="row h-100 align-items-center">
                                        <div class="col">
                                            <div class="font-heading fs-25 p-b-10 blink text-white">:</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3 p-l-5 p-r-5">
                                    <div class="form-group no-margin form-group-default bg-master b-rad-lg p-r-0 p-l-0 p-b-10">
                                        <label class="muted fade fs-8 lh-10 p-b-10">Minutes</label>
                                        <input class="form-control text-center text-success font-orbitron fs-25" v-model.lazy="minutes" v-mask="'##'" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="btn btn-sm btn-default btn-block b-rad-none" data-dismiss="modal">Cancel</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.segment.constant.update', data.segment_id), 'put', section, true, true)">Update</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {TheMask} from 'vue-the-mask'
    import componentHandler from '../../../general/mixins/componentHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        components: {TheMask},
        data(){
            return {
                minutes: '00',
                hours: '00',
                days: '00',
                parameters: {}

            }
        },
        watch: {
            'days' : function (value) {
                this.days = this.formatTime(value);
                this.updateMinutes()
            },
            'hours' : function (value) {
                if(value > 23){ value = value - 24; this.days = parseInt(this.days) + 1 }
                this.hours = this.formatTime(value);
                this.updateMinutes()
            },
            'minutes' : function (value) {
                if(value > 59){ value = value - 60; this.hours = parseInt(this.hours) + 1 }
                this.minutes = this.formatTime(value);
                this.updateMinutes()
            },
            'data' : function () {
                this.days = Math.floor(this.data.detail.minutes / 1440);
                this.hours = Math.floor(this.data.detail.minutes / 60) % 24;
                this.minutes = Math.floor(this.data.detail.minutes % 60);
            }
        },
        methods: {
            updateMinutes(){
                this.parameters.detail.minutes = parseInt((parseInt(this.days) * 1440) + (parseInt(this.hours) * 60) + parseInt(this.minutes));
            },
            formatTime(value){
                return ('00'+value).substr(('00'+value).length-2)
            }
        },
        mixins: [componentHandler, ModalFormHandler]

    }
</script>