shipping-portal/resources/assets/vue/components/orders/elements/OrderComponent.vue

<template>
    <div class="row m-l-0 m-r-0 m-b-30 parentContainer">
        <div class="col bg-white">
            <div class="row align-items-center">
                <div class="col-6 no-padding">
                    <div class="row">
                        <div class="col">
                            <a :href="route('order.qr.download', item.id)" target="_blank">
                                <div class="peelable-corner overflow-hidden relative">
                                    <img :src="'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={id:'+item.id+'}'" class="w-100">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <small class="fs-10 all-caps muted">Order No</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-9 p-r-0">
                                    <h6 class="no-margin small" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.reference}}</h6>
                                </div>
                                <div class="col p-l-0" v-if="item.remarks.length >= 1">
                                    <i class="fa fa-info-circle m-l-5" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>Remarks</h6><p class=\'text-white text-left lh-17 no-margin\'>'+item.remarks[0].content+'</p>'" ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-5">
                        <div class="col">
                            <small class="fs-10 all-caps muted">Warehouse</small>
                            <h6 class="no-margin small">{{item.warehouse.name}}</h6>
                        </div>
                    </div>
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <small class="fs-10 all-caps muted">Delivery Address</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-9 p-r-0">
                                    <h6 class="no-margin small" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.address.reference}}</h6>
                                </div>
                                <div class="col p-l-0">
                                    <div class="row"><div class="col"><div class="row"><div class="col"></div></div><div class="row"><div class="col"></div></div></div></div>
                                    <i class="fa fa-info-circle m-l-5" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+item.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+item.address.street_one+' '+(item.address.street_two ? item.address.street_two : '')+', '+ item.address.district.name+', '+item.address.post_code+' '+item.address.state.name+', '+item.address.country.name+'</p>'" ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row b-t b-grey">
                <div class="col">
                    <div class="row text-center">
                        <div class="col b-r b-grey text-info p-t-5 p-b-10">
                            <small class="fs-10 all-caps bold">Received</small>
                            <h6 class="bold no-margin text-info">{{item.parcels.received_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                        </div>
                        <div class="col b-r b-grey text-primary p-t-5 p-b-10">
                            <small class="fs-10 all-caps bold">In Transit</small>
                            <h6 class="bold no-margin text-primary">{{item.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).concat(item.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages)).reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                        </div>
                        <div class="col text-success p-t-5 p-b-10">
                            <small class="fs-10 all-caps bold">Delivered</small>
                            <h6 class="bold no-margin text-success">{{item.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.quantity + total, 0)}}</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row p-t-5 p-b-15 b-t b-grey">
                <div class="col">
                    <div class="row">
                        <div class="col-auto" v-if="$store.getters.isAdmin">
                            <small class="fs-10 all-caps muted">Marking</small>
                            <a :href="route('customer.profile', item.company_module.marking)">
                                <h6 class="no-margin small">{{item.company_module.marking}}</h6>
                            </a>
                        </div>
                        <div class="col">
                            <small class="fs-10 all-caps muted">Date</small>
                            <h6 class="no-margin small">{{item.created_at}}</h6>
                        </div>
                        <div class="col-auto text-right">
                            <small class="fs-10 all-caps muted">Total CBM</small>
                            <h6 class="no-margin semi-bold">{{(Math.ceil((item.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + item.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + item.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + item.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col no-padding">
                    <div class="row">
                        <div class="col">
                            <a :href="route('order.show', item.reference)">
                                <div class="btn btn-sm btn-default bg-master-lighter no-border btn-block b-rad-none">More Details</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-auto no-padding">
                    <div class="row">
                        <div class="col">
                            <div class="btn btn-sm btn-default bg-master-light text-info btn-block b-rad-none no-border" @click="expanded = !expanded">
                                <i class="fa fa-fw" :class="{'fa-ellipsis-v': !expanded, 'fa-times': expanded}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <transition-component group enter-class="animate__animated animate__flipInX animate__fast" leave-class="animate__animated animate__fadeOut animate__faster">
                <div class="absolute w-50" style="bottom: 32px; right: 15px;" key="1" v-if="expanded">
                    <div class="row">
                        <div class="col bg-master-lightest b-a b-grey">
                            <div class="row p-t-15 p-b-15 b-b b-grey pointer requestModal" v-if="item.status !== 5" data-type="cancelOrder">
                                <div class="col">
                                    <h6 class="light no-margin fs-13 text-danger"><i class="fa fa-times m-r-10"></i>Cancel Order</h6>
                                </div>
                            </div>
                            <div class="row p-t-15 p-b-15 b-b b-grey pointer requestModal" v-if="item.status === 5" data-type="restoreOrder">
                                <div class="col">
                                    <h6 class="light no-margin fs-13 text-success"><i class="fa fa-history m-r-10"></i>Restore Order</h6>
                                </div>
                            </div>
                            <a :href="route('order.qr.download', item.id)" target="_blank">
                                <div class="row p-t-15 p-b-15 b-b b-grey pointer">
                                    <div class="col">
                                        <h6 class="light no-margin fs-13"><i class="fa fa-cloud-download m-r-10"></i>Download QR Cod PDF</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </transition-component>
        </div>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="cancelOrder">
            <cancel-order-form-component :data="item" section="oderList" class="text-center"></cancel-order-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="restoreOrder">
            <restore-order-form-component :data="item" section="oderList" class="text-center"></restore-order-form-component>
        </modal-component>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        created(){
            $('[data-toggle="tooltip"]').tooltip()
        },
        data(){
            return {
                expanded: false
            }
        },
        mixins: [componentHandler]
    }
</script>