izyim/resources/assets/vue/components/order/elements/steps/PackingStepComponenet.vue

<template>
    <div class="inline">
        <notification-component ref="notification"></notification-component>
        <div class="btn btn-sm btn-success b-rad-none requestModal p-t-10 p-b-10" v-if="this.confirmed"  data-type="packed">Order Packed</div>
        <div class="btn btn-sm btn-complete b-rad-none requestModal p-t-10 p-b-10" v-if="!this.confirmed" data-type="packingList">Packing List</div>
        <modal-component type="packingList" large>
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <packing-list-form-component :attachments="this.attachments" :data="this.data"></packing-list-form-component>
                </div>
            </div>
        </modal-component>
        <modal-component type="packed" large>
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <div class="row p-t-30">
                        <div class="col no-padding">
                            <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                                <h6 class="bold all-caps no-margin text-success">Order Packed</h6>
                                <div class="muted all-caps fs-12">Confirm order has been packed</div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col no-padding">
                            <div class="row fs-12">
                                <div class="col no-padding b-a b-grey">
                                    <div class="row">
                                        <div class="col no-padding">
                                            <div class="row align-items-center justify-content-center b-b b-grey"  v-for="(item, index) in packages">
                                                <div class="col-4 bg-white p-t-15 p-b-15 b-r b-grey"><small class="text-info bold all-caps">{{index + 1}}. {{item.description}}</small></div>
                                                <div class="col-1"></div>
                                                <div class="col-2">
                                                    <svg v-if="item.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
                                                        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal;">
                                                            <path d="M0,192v-192h192v192z" fill="none"></path>
                                                            <g fill="#4d6286">
                                                                <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                    <svg v-if="item.type === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 192 192" style=" fill:#000000;">
                                                        <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                                                            <path d="M0,192v-192h192v192z" fill="none"></path>
                                                            <g fill="#4d6286">
                                                                <g id="surface1">
                                                                    <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                    <small class="m-l-5 m-r-5 text-info hint-text">x</small>
                                                    <small class="bold text-info">{{item.quantity}}</small>
                                                </div>
                                                <div class="col"><small class="muted">{{item.width}} x {{item.length}} x {{item.height}} cm</small></div>
                                                <div class="col-2 text-right">
                                                    <small class="muted bold">{{(((item.width/100) * (item.length/100) * (item.height/100)) * item.quantity).toFixed(2)}} CBM</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-t-10 p-b-10 b-b b-grey bg-master-lighter text-right">
                                    <h6 class="no-margin all-caps bold">Total: <span class="text-info" v-text="this.totalCBM() + ' CBM'"></span></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <action-date-component class="m-b-20" v-model="complete_date"></action-date-component>
                    <div class="row">
                        <div class="col text-right no-padding">
                            <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn b-rad-none btn-success" @click="completePacking" data-dismiss="modal">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
        </modal-component>
    </div>
</template>
<script>
    export default {
        props: {
            'data': {
                type: Number,
                required: true
            },
            'attachments': {
                type: Array
            }
        },
        data(){
            return {
                packages: [],
                confirmed: false,
                complete_date: null,
                showCompleteDate: false
            }
        },
        created(){
            if(this.attachments !== null){
                this.packages = this.attachments;
            }
        },
        watch: {
            'attachments': function() {
                this.packages = this.attachments;
            }
        },
        methods: {
            completePacking() {
                this.$emit('updateStep', {'complete_date': this.complete_date, 'type': 'PACKED'});
            },
            totalCBM(){
                var total = 0;
                $.each(this.packages, function(key, object){
                    total += (((object.width/100) * (object.length/100) * (object.height/100)) * object.quantity)
                });
                return total.toFixed(4);
            },
        }
    }
</script>