izyim/resources/assets/vue/components/order/elements/OrderSelectComponent.vue

<template>
    <div class="row m-b-10">
        <div class="col" :class="[{ 'bg-success': selected }, { 'bg-white': !selected }]">
            <div class="row no-margin p-t-10 p-b-10 align-items-center justify-content-center">
                <div class="col p-l-0">
                    <div class="row">
                        <div class="col">
                            <div class="bold fs-12 text-master"><span class="v-align-middle">#{{this.order.marking}} </span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" :class="[{ 'hint-text': selected }]">
                            <div class="fs-10" :class="[{ 'muted': !selected }]">Created: <span class="semi-bold" :class="[{ 'text-success': !selected }]">{{this.order.date}}</span></div>
                        </div>
                    </div>
                </div>
                <div class=" p-r-0" :class="[{ 'col-auto': selected }, { 'col-4': !selected }]">
                    <button type="button" class="btn btn-xs btn-block all-caps b-rad-none pointer no-border" @mouseenter="mouseOver()" @mouseleave="mouseOver()" @click="selectOrder()" :class="[{ 'btn-default': !selected }, {'bg-master-light': !selected}, { 'btn-success': selected }, {'bg-success-darker': selected}]">
                        <span v-show="!selected">Select</span>
                        <span v-show="selected">
                            <i class="fa fa-check fa-fw" v-show="isHover"></i>
                            <i class="fa fa-times text-danger-light fa-fw" v-show="!isHover"></i>
                        </span>
                    </button>
                </div>
            </div>
            <div class="row" v-show="selected">
                <div class="col">
                    <div class="form-group form-group-default bg-success-lighter">
                        <label class="muted">Tracking Number</label>
                        <input class="form-control" @keyup="updateSelection" v-model="tracking_number">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
                selected: false,
                tracking_number: null,
                isHover: true
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
        methods: {
            mouseOver(){
                this.isHover = !this.isHover;
            },
            selectOrder(){
                this.selected = !this.selected;
                this.updateSelection();
            },
            updateSelection(){
                Event.$emit('orderSelected', {
                    id: this.order.id,
                    marking: this.order.marking,
                    tracking_number: this.tracking_number,
                    selected: this.selected
                });
            }
        }
    }
</script>