cief/izyim
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git synced 2026-08-19 04:24:00 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
919e0252f7b9d6627e6b4d9d22f15633ed735fef
izyim/resources/assets/vue/components/order/elements/OrderProfileComponent.vue
T
Omair Saleh 919e0252f7 large commit
2019-06-03 10:29:08 +08:00

781 lines
81 KiB
Vue
Raw Blame History

<template>
<div class="row m-t-30 p-b-20" v-if="this.order">
<div class="col">
<div class="row m-b-50">
<div class="col">
<div class="row m-b-30">
<div class="col text-center">
<h2 class="all-caps">Order No: <span class="text-primary bold">#{{this.order.marking}}</span></h2>
<p class="all-caps" v-if="order.current_step.details">{{this.order.current_step.details.description}}</p>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col text-center" v-for="(step, index) in order.steps">
<div class="row align-items-center justify-content-center">
<div class="col no-padding" >
<div class="row align-items-center justify-content-center">
<div class="col-auto b-a btn-rounded b-thick no-padding" v-bind:class="[{'b-success': step.complete === '1'}, {'b-grey': step.complete === '0'}, {'b-info': step.reference_id === order.current_step.details.reference_id}]" style=" width: 50px; ">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="35" height="46"
viewBox="0 0 192 192"
style=" fill:#000000;">
<g v-if="step.reference_id === 'PS_PROCESSING'" 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="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M81,117c0,1.656 -1.344,3 -3,3h-24c-1.656,0 -3,-1.344 -3,-3v-12c0,-1.656 1.344,-3 3,-3h24c1.656,0 3,1.344 3,3z"></path><path d="M147,111c0,-8.283 -6.717,-15 -15,-15v15z"></path><rect x="29" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="18" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="26" transform="scale(3,3)" width="10" height="2"></rect><rect x="17" y="30" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="22" transform="scale(3,3)" width="10" height="2"></rect><rect x="29" y="26" transform="scale(3,3)" width="10" height="2"></rect><path d="M159,111c0,-13.875 -10.521,-25.323 -24,-26.823v-36.693c0,-2.403 -0.939,-4.665 -2.637,-6.363l-20.484,-20.484c-1.698,-1.698 -3.96,-2.637 -6.363,-2.637h-63.516c-4.962,0 -9,4.038 -9,9v114c0,4.962 4.038,9 9,9h72v-6h-72c-1.656,0 -3,-1.344 -3,-3v-114c0,-1.656 1.344,-3 3,-3h63v15c0,4.962 4.038,9 9,9h15v36.177c-13.479,1.5 -24,12.948 -24,26.823c0,13.875 10.521,25.323 24,26.823v6.177h-9v21c0,4.962 4.038,9 9,9h6c4.962,0 9,-4.038 9,-9v-21h-9v-6.177c13.479,-1.5 24,-12.948 24,-26.823zM135,168h-6c-1.656,0 -3,-1.344 -3,-3v-3h12v3c0,1.656 -1.344,3 -3,3zM138,156h-12v-6h12zM111,39v-10.758l13.758,13.758h-10.758c-1.656,0 -3,-1.344 -3,-3zM111,111c0,-11.577 9.423,-21 21,-21c11.577,0 21,9.423 21,21c0,11.577 -9.423,21 -21,21c-11.577,0 -21,-9.423 -21,-21z"></path></g></g>
<g v-if="step.reference_id === 'MS_WAREHOUSE_RECEIVING'" 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 id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M132,108h-24c0,-6.63 -5.37,-12 -12,-12v-24c19.89,0 36,16.11 36,36z"></path><path d="M148.572,68.154l8.583,-8.583c2.34,-2.337 2.34,-6.147 0,-8.484l-4.242,-4.242c-2.337,-2.337 -6.147,-2.337 -8.484,0l-8.583,8.583c-10.335,-7.854 -23.043,-12.732 -36.846,-13.353v-6.075h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6v6.075c-35.004,1.575 -63,30.54 -63,65.925c0,36.393 29.607,66 66,66c36.393,0 66,-29.607 66,-66c0,-14.958 -5.01,-28.764 -13.428,-39.846zM87,24h18l0.006,6h-18.006zM149.847,105c-1.515,-27.378 -23.469,-49.332 -50.847,-50.847v-6c30.687,1.527 55.32,26.16 56.847,56.847zM96,156c-26.466,0 -48,-21.534 -48,-48c0,-26.466 21.534,-48 48,-48c26.466,0 48,21.534 48,48c0,26.466 -21.534,48 -48,48zM148.671,51.087l4.242,4.242l-8.193,8.193c-1.35,-1.476 -2.766,-2.892 -4.242,-4.242zM93,48.153v6c-27.378,1.515 -49.332,23.469 -50.847,50.847h-6c1.527,-30.687 26.16,-55.32 56.847,-56.847zM36.153,111h6c1.515,27.378 23.469,49.332 50.847,50.847v6c-30.687,-1.527 -55.32,-26.16 -56.847,-56.847zM99,167.847v-6c27.378,-1.515 49.332,-23.469 50.847,-50.847h6c-1.527,30.687 -26.16,55.32 -56.847,56.847z"></path><path d="M132,111v-6h-21.303c-1.197,-5.868 -5.829,-10.5 -11.697,-11.697v-21.303h-6v21.303c-6.837,1.395 -12,7.452 -12,14.697c0,8.271 6.729,15 15,15c7.245,0 13.302,-5.163 14.697,-12zM96,117c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9z"></path><path d="M60,108h-6c0,23.16 18.84,42 42,42v-6c-19.851,0 -36,-16.149 -36,-36z"></path></g></g>
<g v-if="step.reference_id === 'MS_WAREHOUSE_PACKING'" 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 id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><rect x="37" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M147,141l-6,9v-87l6,-9z"></path><rect x="12" y="18" transform="scale(3,3)" width="11" height="2"></rect><path d="M159,30h-105v6h105c4.962,0 9,4.038 9,9v81h6v-81c0,-8.271 -6.729,-15 -15,-15z"></path><rect x="10" y="48" transform="scale(3,3)" width="10" height="2"></rect><rect x="10" y="44" transform="scale(3,3)" width="9" height="2"></rect><rect x="30" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="34" y="46" transform="scale(3,3)" width="2" height="4"></rect><rect x="38" y="46" transform="scale(3,3)" width="2" height="4"></rect><path d="M156,42h-102.855c-2.073,0 -4.101,0.723 -5.703,2.04l-26.151,21.438c-2.094,1.716 -3.291,4.254 -3.291,6.96v80.562c0,4.962 4.038,9 9,9h96c0.207,0 0.414,-0.006 0.615,-0.021c4.428,-0.198 8.721,-1.809 12.189,-4.578l22.812,-18.252c2.151,-1.716 3.384,-4.284 3.384,-7.041v-84.108c0,-3.309 -2.691,-6 -6,-6zM57,72h36v15c0,1.656 -1.344,3 -3,3h-29.7c-1.725,0 -3.3,-1.431 -3.3,-3zM94.947,66h-32.478l22.227,-18h32.751zM51.243,48.681c0.537,-0.441 1.209,-0.681 1.902,-0.681h22.014l-22.221,18h-22.818zM123.258,155.988c-0.192,0.009 -0.381,0.012 -0.57,0.012h-17.688h-78c-1.656,0 -3,-1.344 -3,-3v-80.562c0,-0.153 0.075,-0.288 0.099,-0.438h26.901v15c0,4.878 4.26,9 9.3,9h29.7c4.962,0 9,-4.038 9,-9v-15h27v81c0,1.566 -1.206,2.856 -2.742,2.988zM128.235,66h-23.682l22.503,-18h23.394l-21.069,16.857c-0.432,0.342 -0.792,0.741 -1.146,1.143zM156,132.108c0,0.924 -0.411,1.779 -1.131,2.352l-22.812,18.252c-0.018,0.015 -0.039,0.033 -0.057,0.048v-80.88c0,-0.915 0.411,-1.764 1.125,-2.334l22.875,-18.306z"></path></g></g>
<g v-if="step.reference_id === 'PS_SHIPPING'" 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="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v36h-15c-6.6,0 -12,5.4 -12,12v22.5h-9c-6.6,0 -12,5.4 -12,12v30c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-30c0,-1.65 1.35,-3 3,-3h111c1.65,0 3,1.35 3,3v41.10059l-56.70117,-22.80176h-0.14941c-0.15,0 -0.29824,-0.14941 -0.44824,-0.14941c-0.15,0 -0.30117,-0.14941 -0.45117,-0.14941c-0.6,-0.15 -1.19883,-0.15 -1.79883,0c-0.15,0 -0.30117,0.14941 -0.45117,0.14941c-0.15,0 -0.30117,-0.00059 -0.45117,0.14941h-0.14941l-74.85059,30c-2.25,0.9 -3.29883,3.30176 -2.54883,5.55176l7.95117,24c0.75,2.4 3.29824,3.60058 5.69824,2.85058c2.4,-0.75 3.60059,-3.30117 2.85059,-5.70117l-6.75,-20.10059l65.25,-25.79883v63.29883c-2.7,-0.75 -5.25059,-2.24824 -7.35059,-4.19825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.65,-1.65 -4.64883,-1.65 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-4.5,0 -8.70059,-1.79825 -11.85059,-4.94825c-1.8,-1.8 -4.64883,-1.8 -6.29883,0c-3.15,3.15 -7.35059,4.94825 -11.85059,4.94825c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883c5.4,0 10.65,-1.64883 15,-4.79883c4.35,3.15 9.6,4.79883 15,4.79883h60h0.75h0.14942c0.15,0 0.45059,-0.14942 0.60058,-0.14942c0.15,0 0.14883,0.00059 0.29883,-0.14942c0.15,0 0.30175,-0.14942 0.30175,-0.14942c0.15,0 0.14883,-0.15234 0.29883,-0.15234c0.15,0 0.30175,-0.14942 0.30175,-0.14942l0.14942,-0.14942c0.15,-0.15 0.29883,-0.14883 0.29883,-0.29883l0.14942,-0.15234c0.15,-0.15 0.15175,-0.29883 0.30175,-0.29883c0,0 0.14942,-0.14883 0.14942,-0.29883c0.15,-0.15 0.14883,-0.30175 0.29883,-0.30175c0.15,-0.15 0.15175,-0.45058 0.30175,-0.60058l15,-45c0.6,-2.7 -0.45117,-5.1 -2.70117,-6l-9.14942,-3.59766v-44.70117c0,-6.6 -5.4,-12 -12,-12h-9v-22.5c0,-6.6 -5.4,-12 -12,-12h-15v-36c0,-2.55 -1.95,-4.5 -4.5,-4.5zM100.5,10.5h21v31.5h-21zM76.5,51h69c1.65,0 3,1.35 3,3v22.5h-75v-22.5c0,-1.65 1.35,-3 3,-3zM80.85059,136.61133c-1.1625,0 -2.32441,0.41426 -3.14941,1.23926l-0.60059,0.60058c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89941c0,1.2 0.44766,2.39941 1.34766,3.14941c0.9,0.9 1.95234,1.35059 3.15234,1.35059c1.2,0 2.69824,-0.45059 3.44824,-1.35059c0.9,-0.9 1.35059,-1.94941 1.35059,-3.14941c0,-0.3 0.00059,-0.59941 -0.14941,-0.89941c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c-0.15,-0.3 -0.29824,-0.45 -0.44824,-0.75c-0.15,-0.3 -0.30059,-0.45058 -0.60059,-0.60058c-0.825,-0.825 -1.98691,-1.23926 -3.14941,-1.23926zM6,175.23633c-0.3,0 -0.59941,0.03925 -0.89941,0.11425c-0.3,0 -0.59941,0.14883 -0.89941,0.29883c-0.3,0.15 -0.45,0.30117 -0.75,0.45117c-0.3,0.15 -0.45,0.30059 -0.75,0.60058c-0.9,0.9 -1.35059,1.94942 -1.35059,3.14942c0,0.3 -0.00059,0.59941 0.14941,0.89942c0.15,0.15 0.14883,0.45 0.29883,0.75c0.15,0.3 0.30117,0.6 0.45117,0.75c0.15,0.3 0.30059,0.45 0.60059,0.75c0.15,0.15 0.45,0.45058 0.75,0.60058c0.3,0.15 0.45,0.29825 0.75,0.44825c0.3,0.15 0.59941,0.15175 0.89941,0.30175c0.3,0 0.59941,0.14942 0.89941,0.14942c0.3,0 0.59941,0.00059 0.89941,-0.14942c0.3,0 0.60234,-0.15175 0.90234,-0.30175c0.3,-0.15 0.6,-0.29825 0.75,-0.44825c0.3,-0.15 0.45,-0.30058 0.75,-0.60058c0.15,-0.15 0.44766,-0.45 0.59766,-0.75c0.15,-0.3 0.30117,-0.45 0.45117,-0.75c0.15,-0.3 0.14883,-0.59941 0.29883,-0.89942c0,-0.3 0.15234,-0.59941 0.15234,-0.89942c0,-0.3 -0.00234,-0.60234 -0.15234,-0.90234c0,-0.3 -0.14883,-0.59942 -0.29883,-0.89942c-0.15,-0.3 -0.30117,-0.6 -0.45117,-0.75c-0.15,-0.3 -0.29766,-0.45 -0.59766,-0.75c-0.15,-0.15 -0.45,-0.45058 -0.75,-0.60058c-0.3,-0.15 -0.45,-0.29825 -0.75,-0.44825c-0.45,0.15 -0.75176,0.15 -1.05176,0c-0.3,-0.075 -0.59941,-0.11425 -0.89941,-0.11425z"></path></g></g>
<g v-if="step.reference_id === 'MS_WAREHOUSE_ARRIVAL'" 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 id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M96,102c-6.618,0 -12,-5.382 -12,-12h6c0,3.309 2.691,6 6,6c3.309,0 6,-2.691 6,-6h6c0,6.618 -5.382,12 -12,12z"></path><rect x="25" y="13" transform="scale(3,3)" width="14" height="2"></rect><rect x="16" y="49" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="45" transform="scale(3,3)" width="18" height="2"></rect><rect x="16" y="41" transform="scale(3,3)" width="18" height="2"></rect><path d="M174,99v-9.024c0,-4.947 -4.029,-8.976 -8.976,-8.976h-18.864l-3.96,-11.886c-1.221,-3.657 -4.632,-6.114 -8.487,-6.114h-16.713v-6h12v-21c0,-4.962 -4.038,-9 -9,-9h-48c-4.962,0 -9,4.038 -9,9v21h12v6h-16.713c-3.855,0 -7.266,2.457 -8.487,6.117l-3.96,11.883h-18.864c-4.947,0 -8.976,4.029 -8.976,8.976v9.024h6v60h-6v6h156v-6h-6v-60zM69,51v-15c0,-1.656 1.344,-3 3,-3h48c1.656,0 3,1.344 3,3v15zM81,57h30v6h-30zM108,159h-66v-42h66zM150,129h-6v6h6v12h-18v-30h18zM132,153h18v6h-18zM162,159h-6v-42c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v42h-12v-42c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v42h-6v-60h42v-6h-48v-3.024c0,-1.641 1.335,-2.976 2.976,-2.976h45.024v-6h-19.839l3.327,-9.981c0.405,-1.206 1.53,-2.019 2.799,-2.019h75.429c1.269,0 2.394,0.813 2.799,2.016l3.324,9.984h-19.839v6h45.024c1.641,0 2.976,1.335 2.976,2.976v3.024h-48v6h42z"></path><path d="M105,75h-18c-4.962,0 -9,4.038 -9,9v9h36v-9c0,-4.962 -4.038,-9 -9,-9zM108,87h-24v-3c0,-1.656 1.344,-3 3,-3h18c1.656,0 3,1.344 3,3z"></path></g></g>
<g v-if="step.reference_id === 'MS_WAREHOUSE_UNPACKING'" 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="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M35.39941,47.39941l-16.04883,0.60059c-2.55,0.15 -4.50059,2.09941 -4.35059,4.64941c0.15,2.55 2.09941,4.35059 4.64941,4.35059l13.35059,-0.45117l23.25,40.5c0.9,1.5 2.39941,2.25 3.89941,2.25c0.75,0 1.5,-0.14766 2.25,-0.59766c2.1,-1.2 2.84942,-4.05234 1.64941,-6.15234l-24.59766,-42.89941c-0.9,-1.5 -2.40176,-2.25 -4.05176,-2.25zM133.65234,67.3916c-0.87187,-0.0668 -1.76426,0.10957 -2.55176,0.55957l-23.39941,13.5c-0.75,0.45 -0.90059,1.34766 -0.60059,2.09766l6,10.35059c1.2,2.1 0.45059,4.94941 -1.64941,6.14941l-7.80176,4.5c-2.1,1.2 -4.94941,0.45059 -6.14941,-1.64941l-6,-10.35059c-0.45,-0.75 -1.35059,-0.89766 -2.10059,-0.59766l-23.39941,13.5c-2.1,1.2 -2.84941,4.04941 -1.64941,6.14941l9.44824,16.35059c-15.3,1.8 -27.14883,14.99942 -27.29883,30.89941c0,8.85 3.60117,16.94942 9.45117,22.64942h-7.95117c-2.55,0 -4.5,1.95 -4.5,4.5c0,2.55 1.95,4.5 4.5,4.5h75c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-22.95117c1.2,-1.2 2.25234,-2.40059 3.15234,-3.60058c1.35,0.9 3.29883,1.04942 4.79883,0.14942l64.95117,-37.34766c2.1,-1.2 2.84942,-4.05234 1.64942,-6.15234l-37.35058,-64.94824c-0.75,-1.3125 -2.14453,-2.09766 -3.59766,-2.20899zM78,136.5h0.14941c12.45,0.15 22.50059,10.19941 22.35059,22.64942c-0.15,12.3 -10.2,22.35058 -22.5,22.35058c-12.6,-0.15 -22.65,-10.19941 -22.5,-22.64942c0.15,-12.3 10.2,-22.35058 22.5,-22.35058zM25.5,181.46192c-1.1625,0 -2.32441,0.41425 -3.14941,1.23925c-0.15,0.15 -0.45059,0.45 -0.60059,0.75c-0.15,0.3 -0.30117,0.45 -0.45117,0.75c-0.15,0.3 -0.14883,0.59942 -0.29883,0.89942c0,0.3 -0.14941,0.59941 -0.14941,0.89942c0,1.2 0.45058,2.39942 1.35058,3.14942c0.9,0.9 1.94941,1.35058 3.14941,1.35058c1.2,0 2.39941,-0.45058 3.14941,-1.35058c0.9,-0.9 1.35059,-1.94942 1.35059,-3.14942c0,-0.3 0.00059,-0.59941 -0.14941,-0.89942c0,-0.3 -0.15176,-0.59941 -0.30176,-0.89942c0.15,-0.15 0.00059,-0.45 -0.14941,-0.75c-0.15,-0.3 -0.30059,-0.45 -0.60059,-0.75c-0.825,-0.825 -1.98691,-1.23925 -3.14941,-1.23925z"></path></g></g>
<g v-if="step.reference_id === 'PS_DELIVERY'" 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 id="Слой_1" :fill="iconColor(step.complete, step.reference_id === order.current_step.details.reference_id)"><path d="M177,126v-15c0,-4.962 -4.038,-9 -9,-9h-13.971c-1.221,0 -2.313,-0.732 -2.775,-1.863l-11.913,-29.163c-1.533,-3.066 -4.617,-4.974 -8.046,-4.974h-17.295v-9c0,-4.962 -4.038,-9 -9,-9h-49.767c-3.57,-8.784 -12.183,-15 -22.233,-15h-24v24c0,11.16 7.665,20.535 18,23.211v45.789c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h3h9.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h36.27h3h6.27c1.434,8.499 8.826,15 17.73,15c8.904,0 16.293,-6.501 17.73,-15h18.27h3c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM15,57v-18h18c9.927,0 18,8.073 18,18c0,9.927 -8.073,18 -18,18c-9.927,0 -18,-8.073 -18,-18zM57,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM74.73,138c-1.434,-8.499 -8.826,-15 -17.73,-15c-8.904,0 -16.293,6.501 -17.73,15h-6.27v-57c13.233,0 24,-10.767 24,-24c0,-1.017 -0.084,-2.016 -0.207,-3h48.207c1.656,0 3,1.344 3,3v18h-42v6h42v6h-30v6h30v6h-18v6h18v33zM138,153c-6.618,0 -12,-5.382 -12,-12c0,-6.618 5.382,-12 12,-12c6.618,0 12,5.382 12,12c0,6.618 -5.382,12 -12,12zM138,123c-8.901,0 -16.293,6.501 -17.73,15h-6.27v-66h17.295c1.143,0 2.172,0.636 2.586,1.449l11.817,28.956c1.392,3.402 4.662,5.595 8.331,5.595h13.971c1.656,0 3,1.344 3,3v15h-6c-3.309,0 -6,2.691 -6,6v6h-3.27c-1.437,-8.499 -8.829,-15 -17.73,-15zM165,138v-6h6v6z"></path><path d="M45,54h-9v-9h-6v15h15z"></path><circle cx="19" cy="47" transform="scale(3,3)" r="2"></circle><circle cx="46" cy="47" transform="scale(3,3)" r="2"></circle><path d="M123,78h3.96c1.233,0 2.34,0.75 2.799,1.893l9.591,23.979c0.789,1.977 -0.666,4.128 -2.793,4.128h-13.557c-1.656,0 -3,-1.344 -3,-3v-24c0,-1.656 1.344,-3 3,-3z"></path></g></g>
</svg>
<div class="absolute" style="top: -2px;right: -6px;" v-if="step.complete === '1'">
<div class="bg-success btn-rounded no-padding">
<div class="fs-8 text-white"><i class="fa fa-check fs-10 padding-5"></i></div>
</div>
</div>
</div>
</div>
<div class="row m-t-10">
<div class="col">
<small class="all-caps fs-11" v-bind:class="[{'muted': step.complete === '0' && step.reference_id !== order.current_step.details.reference_id}, {'text-success': step.complete === '1'}]" style=" white-space: nowrap; "><span v-if="step.complete === '1'">{{step.details.final_name}}</span><span v-else>{{step.details.initial_name}}</span></small>
</div>
</div>
</div>
<div class="col-auto no-padding hint-text" v-if="index !== (order.steps.length - 1)">
<div class="fs-15 m-b-25 " v-bind:class="[{'muted': step.complete !== '1'}]">
<i class="fa fa-ellipsis-h" style=" margin-right: 1px; "></i><i class="fa fa-ellipsis-h"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-30">
<div class="col-3">
<div class="row no-margin">
<div class="col bg-white p-t-20 p-b-20 hint-text">
<div class="row m-b-15">
<div class="col">
<span class="all-caps muted fs-11">Shipping Address</span>
</div>
</div>
<div class="row fs-12">
<div class="col">
<order-delivery-address-component :data="this.order"></order-delivery-address-component>
</div>
</div>
</div>
</div>
<div class="row m-l-0 m-r-0 m-t-15 m-b-20">
<div class="col bg-info p-t-20 p-b-20">
<div class="row m-b-20">
<div class="col"><span class="all-caps text-info-lighter hint-text fs-11 bold">Receive Note</span></div>
</div>
<div class="row fs-12">
<div class="col">
<div class="row m-b-15">
<div class="col">
<div class="row m-b-5">
<div class="col"><span class="all-caps text-white hint-text fs-9">Warehouse</span></div>
</div>
<div class="row">
<div class="col">
<p class="all-caps fs-11 text-white no-margin">GZ-BY-V01 广州白云江高仓库</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div class="row m-b-5">
<div class="col"><span class="all-caps text-white hint-text fs-9">Receive Date</span></div>
</div>
<div class="row">
<div class="col">
<p class="all-caps text-warning no-margin bold fs-11">06/05/2019</p>
</div>
</div>
</div>
<div class="col-auto">
<div class="row m-b-5">
<div class="col"><span class="all-caps text-white hint-text fs-9 ">Tracking Number</span></div>
</div>
<div class="row">
<div class="col">
<p class="all-caps no-margin text-white fs-11">432456453</p>
</div>
</div>
</div>
</div>
<div class="row m-t-20">
<div class="col"><small class="block text-complete-lighter pointer all-caps">Edit Note</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="row m-l-0 m-r-0 m-b-20">
<ul class="nav" data-init-reponsive-tabs="dropdownfx">
<li class="col-4 nav-item">
<a href="#" class="active" data-toggle="tab" data-target="#overview">
<div class="row fs-12">
<div class="col padding-25 arrow_tab b-r">
<div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="130" height="130"
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="#000000"><g id="surface1"><path d="M26.88,7.68v176.64h138.24v-176.64zM34.56,15.36h122.88v161.28h-122.88zM57.6,46.08v7.68h76.8v-7.68zM57.6,84.48v7.68h49.92v-7.68zM122.88,84.48v7.68h11.52v-7.68zM57.6,107.52v7.68h30.72v-7.68zM122.88,107.52v7.68h11.52v-7.68zM57.6,130.56v7.68h49.92v-7.68zM122.88,130.56v7.68h11.52v-7.68z"></path></g></g></g></svg>
</div>
<h5 class="bold all-caps m-t-0">Overview</h5>
<small class="muted">Overview of the order's packing list, shipping and delivery details</small>
</div>
</div>
</a>
</li>
<li class="col-4 nav-item">
<a href="#" data-toggle="tab" data-target="#timeline">
<div class="row fs-12">
<div class="col padding-25 arrow_tab b-r">
<div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="150" height="150"
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 id="Слой_1" fill="#000000"><circle cx="32" cy="32" transform="scale(3,3)" r="4"></circle><path d="M96,21c-15.81,0 -30.78,4.866 -43.533,13.998l-9.132,-9.132c-1.572,-1.569 -3.804,-2.208 -5.967,-1.692c-2.163,0.51 -3.876,2.073 -4.578,4.185l-8.28,24.828c-1.173,3.516 -0.273,7.326 2.346,9.948c1.863,1.863 4.323,2.856 6.855,2.856c1.032,0 2.076,-0.168 3.099,-0.507l24.831,-8.274c2.109,-0.702 3.675,-2.418 4.185,-4.578c0.51,-2.166 -0.123,-4.398 -1.695,-5.967l-7.368,-7.371c11.556,-8.022 25.029,-12.294 39.237,-12.294c38.046,0 69,30.951 69,69c0,38.049 -30.954,69 -69,69c-38.046,0 -69,-30.951 -69,-69h-6c0,41.355 33.645,75 75,75c41.355,0 75,-33.645 75,-75c0,-41.355 -33.645,-75 -75,-75zM59.988,51.255c-0.048,0.198 -0.189,0.246 -0.243,0.267l-24.831,8.277c-1.374,0.45 -2.793,0.12 -3.813,-0.903c-1.017,-1.017 -1.353,-2.442 -0.897,-3.81l8.277,-24.831c0.015,-0.051 0.063,-0.195 0.267,-0.243c0.033,-0.009 0.066,-0.012 0.096,-0.012c0.141,0 0.219,0.078 0.249,0.108l20.799,20.802c0.036,0.036 0.144,0.147 0.096,0.345z"></path><path d="M68.121,128.121l19.62,-19.62c2.373,1.572 5.208,2.499 8.259,2.499c8.271,0 15,-6.729 15,-15c0,-7.245 -5.163,-13.302 -12,-14.697v-24.303h-6v24.303c-6.837,1.395 -12,7.452 -12,14.697c0,3.054 0.927,5.886 2.499,8.259l-19.62,19.62zM96,87c4.962,0 9,4.038 9,9c0,4.962 -4.038,9 -9,9c-4.962,0 -9,-4.038 -9,-9c0,-4.962 4.038,-9 9,-9z"></path><path d="M96,159c34.74,0 63,-28.263 63,-63h-6c0,31.431 -25.569,57 -57,57z"></path></g></g></svg>
</div>
<h5 class="bold all-caps m-t-0">Timeline</h5>
<small class="muted">View order's detailed history outlining the order's every step and update</small>
</div>
</div>
</a>
</li>
<li class="col-4 nav-item">
<a href="#" data-toggle="tab" data-target="#payments">
<div class="row fs-12">
<div class="col padding-25 arrow_tab">
<div class="absolute" style="top: -20px;left: -40px;opacity: 0.02;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="150" height="150"
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 id="Слой_1" fill="#000000"><rect x="49" y="12" transform="scale(3,3)" width="2" height="36"></rect><path d="M153,30h-6v-3c0,-4.962 -4.038,-9 -9,-9h-96c-4.962,0 -9,4.038 -9,9v105v9v12c0,4.962 4.038,9 9,9h9v3c0,4.962 4.038,9 9,9h39h18h3c4.962,0 9,-4.038 9,-9v-3h9c4.962,0 9,-4.038 9,-9v-3h6c3.309,0 6,-2.691 6,-6v-108c0,-3.309 -2.691,-6 -6,-6zM39,27c0,-1.653 1.344,-3 3,-3h96c1.656,0 3,1.347 3,3v105v9c0,1.653 -1.344,3 -3,3h-9v-18h-12h-18h-48v18h-9c-1.656,0 -3,-1.347 -3,-3v-9zM42,156c-1.656,0 -3,-1.347 -3,-3v-3.552c0.942,0.336 1.944,0.552 3,0.552h9v6zM60,168c-1.656,0 -3,-1.347 -3,-3v-33h18v15h6v-15h6v21h6v-21h6v36zM105,168v-36h6v36zM123,165c0,1.653 -1.344,3 -3,3h-3v-36h6zM138,156h-9v-6h9c1.056,0 2.058,-0.216 3,-0.552v3.552c0,1.653 -1.344,3 -3,3zM153,144h-6v-3v-9v-96h6z"></path><path d="M57,60h66c3.309,0 6,-2.691 6,-6v-12c0,-3.309 -2.691,-6 -6,-6h-66c-3.309,0 -6,2.691 -6,6v12c0,3.309 2.691,6 6,6zM57,42h66v12h-66z"></path><path d="M57,84h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,72h6v6h-6z"></path><path d="M123,66h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,78h-6v-6h6z"></path><path d="M57,108h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM57,96h6v6h-6z"></path><path d="M81,84h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6zM81,72h18v6h-18z"></path><path d="M75,102c0,3.309 2.691,6 6,6h18c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6h-18c-3.309,0 -6,2.691 -6,6zM81,96h18v6h-18z"></path><path d="M123,90h-6c-3.309,0 -6,2.691 -6,6v6c0,3.309 2.691,6 6,6h6c3.309,0 6,-2.691 6,-6v-6c0,-3.309 -2.691,-6 -6,-6zM123,102h-6v-6h6z"></path><rect x="19" y="38" transform="scale(3,3)" width="22" height="2"></rect><rect x="35" y="44" transform="scale(3,3)" width="2" height="12"></rect></g></g></svg>
</div>
<h5 class="bold all-caps m-t-0">Payments</h5>
<small class="muted">View order's outstanding payments and payment's receipts</small>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="overview">
<div class="row no-margin">
<div class="col">
<div class="row fs-12 parentContainer ">
<div class="col">
<div class="row bg-white all-caps muted p-t-10 p-b-10 b-b b-grey">
<div class="col">
<small class="bold all-caps">Packing List</small>
</div>
<div class="col text-right">
<small class="all-caps text-complete pointer requestModal" data-type="packingList">Edit List</small>
</div>
</div>
<div class="row">
<div class="col">
<div class="row align-items-center justify-content-center b-b b-grey" v-for="(package, index) in order.packing_list.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}}. {{package.description}}</small></div>
<div class="col-1"></div>
<div class="col-3">
<svg v-if="package.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="package.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">{{package.quantity}}</small>
</div>
<div class="col text-right"><small class="muted bold">{{package.length}} x {{package.width}} x {{package.height}} cm</small></div>
</div>
</div>
</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.order.packing_list" :data="this.orderId"></packing-list-form-component>
</div>
</div>
</modal-component>
</div>
</div>
</div>
<div class="col-4 bg-master-lighter p-t-15 p-b-15 hint-text">
<div class="row m-b-20 fs-12">
<div class="col">
<div class="row m-l-0 m-r-0 m-b-5">
<div class="col no-padding b-b" style="border-color: rgb(204, 204, 204);">
<div class="row">
<div class="col">
<div class="bold all-caps p-b-5 no-margin hint-text" >Shipping</div>
</div>
<div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row m-b-5 align-items-center justify-content-center" v-for="(schedule, index) in order.shipping_arrangement.schedule">
<div class="col-auto p-r-0">
<div class="row">
<div class="col"><small class="muted">ETD</small></div>
</div>
<div class="row">
<div class="col"><small class="bold">{{schedule.ETD}}</small></div>
</div>
</div>
<div class="col-auto">
<div class="row">
<div class="col"><small class="muted">ETA</small></div>
</div>
<div class="row">
<div class="col"><small class="bold">{{schedule.ETA}}</small></div>
</div>
</div>
<div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8" :class="[{'text-success': schedule.status === 0}, {'text-danger': schedule.status === 2}]"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="row fs-12">
<div class="col">
<div class="row m-l-0 m-r-0 m-b-5">
<div class="col no-padding b-b" style="border-color: rgb(204, 204, 204);">
<div class="row">
<div class="col">
<div class="bold all-caps p-b-5 no-margin hint-text" >Delivery</div>
</div>
<div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row m-b-5 align-items-center justify-content-center" v-for="(schedule, index) in order.delivery_arrangement.schedule">
<div class="col-auto p-r-0">
<div class="row">
<div class="col"><small class="muted">ETD</small></div>
</div>
<div class="row">
<div class="col"><small class="bold">{{schedule.ETD}}</small></div>
</div>
</div>
<div class="col-auto">
<div class="row">
<div class="col"><small class="muted">ETA</small></div>
</div>
<div class="row">
<div class="col"><small class="bold">{{schedule.ETA}}</small></div>
</div>
</div>
<div class="col-auto ml-auto p-l-0"><i class="fa fa-circle text-success fs-8" :class="[{'text-success': schedule.status === 0}, {'text-danger': schedule.status === 2}]"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="timeline">
<div class="row fs-12 m-l-0 m-r-0 m-b-20">
<div class="col p-l-0 p-r-0 bg-white">
<div class="row all-caps muted m-l-0 m-r-0 m-b-15 p-t-10 p-b-10 b-b b-grey">
<div class="col">
<small class="bold all-caps">Order's History</small>
</div>
</div>
<order-history-component :data="this.orders"></order-history-component>
</div>
</div>
</div>
<div class="tab-pane fade" id="payments">
<div class="row m-b-20">
<div class="col">
<div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
<div class="col no-padding">
<small class="all-caps muted bold">Invoices</small>
</div>
</div>
<div class="row">
<div class="col">
<div class="row fs-12 m-l-0 m-r-0 m-b-15">
<div class="col bg-white ">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Invoice No.</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="bold all-caps">214441830</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Status</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-danger bold all-caps">Unpaid</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Issue</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">06-05-2019</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Type</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">Shipping</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<small class="all-caps muted">Total</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">RM 212.25</small>
</div>
</div>
</div>
<div class="col-auto p-r-0">
<div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
</div>
</div>
</div>
</div>
<div class="row fs-12 m-l-0 m-r-0 m-b-15">
<div class="col bg-white ">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Invoice No.</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="bold all-caps">214441830</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Status</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-danger bold all-caps">Unpaid</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Issue</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">06-05-2019</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Type</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">Service</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<small class="all-caps muted">Total</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">RM 212.25</small>
</div>
</div>
</div>
<div class="col-auto p-r-0">
<div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row p-b-5 b-b b-grey fs-12 m-b-15 m-l-0 m-r-0">
<div class="col no-padding">
<small class="all-caps muted bold">Receipts</small>
</div>
</div>
<div class="row">
<div class="col">
<div class="row fs-12 m-l-0 m-r-0 m-b-15">
<div class="col bg-white ">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Receipt No.</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="bold all-caps">214441830</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Status</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">Paid</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Issue</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">06-05-2019</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Type</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">Shipping</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<small class="all-caps muted">Total</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">RM 212.25</small>
</div>
</div>
</div>
<div class="col-auto p-r-0">
<div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
</div>
</div>
</div>
</div>
<div class="row fs-12 m-l-0 m-r-0 m-b-15">
<div class="col bg-white ">
<div class="row align-items-center justify-content-center">
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Receipt No.</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="bold all-caps">214441830</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Status</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">Paid</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Issue</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">06-05-2019</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col hint-text">
<small class="all-caps muted hint-text">Type</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="all-caps">Service</small>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<small class="all-caps muted">Total</small>
</div>
</div>
<div class="row">
<div class="col">
<small class="text-success bold all-caps">RM 212.25</small>
</div>
</div>
</div>
<div class="col-auto p-r-0">
<div class="bg-master-lighter pointer h-100 p-t-15 p-b-15 p-r-25 p-l-25 b-rad-none all-caps bold fs-10">View</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row m-b-20">
<div class="col no-padding">
<div class="btn btn-sm btn-block btn-success b-rad-none requestModal">Order Packed</div>
</div>
</div>
<div class="row b-a b-grey">
<div class="col bg-white">
<div class="row p-t-5 p-b-5 bg-master-lighter">
<div class="col fs-11"><small class="all-caps text-info bold ">Order Information</small></div>
</div>
<div class="row">
<div class="col">
<div class="row bg-master-lightest">
<div class="col fs-11">
<div class="row p-t-5 p-b-5 no-margin">
<div class="col no-padding"><small class="all-caps ">Date Created:</small></div>
<div class="col-auto no-padding text-right"><small class="bold">{{order.date}}</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col fs-11">
<div class="row p-t-5 p-b-5 no-margin">
<div class="col no-padding"><small class="all-caps ">Total CBM:</small></div>
<div class="col-auto no-padding text-right"><small class="bold">{{totalCBM()}}</small></div>
</div>
</div>
</div>
<div class="row bg-master-lightest">
<div class="col fs-11">
<div class="row p-t-5 p-b-5 no-margin">
<div class="col no-padding"><small class="all-caps">Number of Packages:</small></div>
<div class="col-auto no-padding text-right"><small class="bold">{{totalPackages()}}</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-20">
<div class="col bg-white">
<div class="row bg-master-lighter text-success p-t-5 p-b-5 ">
<div class="col fs-11"><small class="all-caps bold">Payment Summary</small></div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col fs-11">
<div class="row p-t-10 m-b-5 m-l-0 m-r-0">
<div class="col no-padding"><small class="all-caps">Shipping Fee</small></div>
<div class="col-auto no-padding text-right"><small class="bold">RM 212.25</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col fs-11">
<div class="row m-b-5 m-l-0 m-r-0">
<div class="col no-padding"><small class="all-caps">Service Fee</small></div>
<div class="col-auto no-padding text-right"><small class="bold">RM 41.25</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col fs-11">
<div class="row p-b-5 b-b b-grey m-l-0 m-r-0">
<div class="col no-padding"><small class="all-caps">Discount</small></div>
<div class="col-auto no-padding text-right"><small class="bold">RM 0.00</small></div>
</div>
</div>
</div>
<div class="row">
<div class="col fs-11">
<div class="row align-items-end p-t-5 p-b-10 no-margin">
<div class="col-auto no-padding ">
<div class="row">
<div class="col"><small class="all-caps">Paid</small></div>
</div>
<div class="row">
<div class="col"><small class="bold text-primary no-margin">RM 00.00</small></div>
</div>
</div>
<div class="col no-padding text-right">
<div class="row">
<div class="col"><small class="all-caps">Outstanding</small></div>
</div>
<div class="row">
<div class="col">
<h6 class="bold text-success no-margin">RM 353.50</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
orderId: this.data,
order: null,
}
},
created(){
this.fetchOrder();
},
methods: {
fetchOrder(){
fetch(route('api.order.profile', {'id': this.orderId})).then(response => response.json())
.then(response => {
this.order = response.data;
if(!response.data.current_step.details){
this.order.current_step.details = {
'reference_id': ''
};
}
})
.catch(error => console.log(error))
},
iconColor(complete, isCurrentStep){
if(complete === '1'){
return '#47b5ab';
}
if(isCurrentStep){
return '#4d6286';
}
return '#bababa';
},
totalCBM(){
let total = 0;
$.each(this.order.packing_list.packages, function(key, object){
total += (((object.width/100) * (object.length/100) * (object.height/100)) * object.quantity)
});
return total.toFixed(2);
},
totalPackages(){
let total = 0;
$.each(this.order.packing_list.packages, function(key, object){
total += object.quantity
});
return total;
}
}
}
</script>
Reference in New Issue View Git Blame Copy Permalink