large commit

This commit is contained in:
Omair Saleh
2019-06-17 09:56:25 +08:00
parent 31fcaf9e32
commit b5ba151575
2 changed files with 78 additions and 38 deletions
@@ -168,26 +168,26 @@
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-content parentContainer">
<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-4': showArrangements}, {'col-8': !showArrangements}, ]">
<div class="row fs-12">
<div class="col">
<div class="row bg-white all-caps muted p-t-10 p-b-10 b-b b-grey">
<div class="row bg-white all-caps 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>
<small class="all-caps text-complete pointer requestModal" data-type="packingList" :class="{'hide': showArrangements}">Edit List</small>
</div>
</div>
<div class="row" v-if="order.packing_list !== null">
<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">
<div class="col 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" v-show="!showArrangements"></div>
<div class="col-4" :class="[{'col-5': showArrangements}, {'col-4': !showArrangements}, ]">
<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>
@@ -209,7 +209,7 @@
<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 class="col text-right" v-show="!showArrangements"><small class="muted bold">{{package.length}} x {{package.width}} x {{package.height}} cm</small></div>
</div>
</div>
</div>
@@ -237,30 +237,35 @@
</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-10 p-b-10 hint-text">
<div class="row m-b-20 fs-12">
<div class="col bg-master-lighter hint-text p-b-10">
<div class="row p-t-10 p-b-10 bg-white b-l b-grey fs-12">
<div class="col">
<div class="row m-l-0 m-r-0 m-b-5">
<div class="col no-padding p-b-10 b-b" style="border-color: rgb(204, 204, 204);">
<div class="row">
<div class="col">
<small class="bold all-caps no-margin hint-text" >Shipping</small>
<div class="row">
<div class="col">
<small class="bold all-caps no-margin" >Arrangements</small>
</div>
<div class="col-auto p-l-0"><small class="bold text-complete pointer all-caps" @click="showArrangements = !showArrangements" >Show <span v-if="!showArrangements">more</span><span v-else>less</span></small></div>
</div>
</div>
</div>
<div class="row m-b-10 fs-12">
<div class="col">
<div class="row no-margin">
<div class="col no-padding">
<div class="row bg-master-light">
<div class="col p-t-5 p-b-5">
<small class="bold all-caps no-margin" >Shipping</small>
</div>
<div class="col-4 no-padding" v-show="showArrangements && order.shipping_arrangement !== null">
<small class="btn btn-xs btn-block fs-9 h-100 lh-18 p-t-5 p-b-5 bg-warning all-caps bold no-border pointer requestModal " data-type="shippingArrangement">Reschedule Shipping</small>
</div>
<div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
</div>
</div>
</div>
<div class="row" v-if="order.shipping_arrangement !== null">
<div class="row p-t-10 p-b-10" v-if="order.shipping_arrangement !== null">
<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">
@@ -279,7 +284,19 @@
<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 class="col-auto" v-show="showArrangements">
<div class="row">
<div class="col"><small class="muted">Remark</small></div>
</div>
<div class="row">
<div class="col"><small class="bold" v-if="schedule.remark">{{schedule.remark}}</small><small class="muted" v-else>...</small></div>
</div>
</div>
<div class="col text-right">
<i class="fa fa-circle fs-8" :class="[{'text-success': schedule.status === 0}, {'text-danger': schedule.status === 2}]"></i>
<i class="fa fa-times text-danger fs-10 m-l-5" v-show="showArrangements"></i>
<i class="fa fa-pencil text-info fs-10 m-l-5" v-show="showArrangements"></i>
</div>
</div>
</div>
</div>
@@ -302,27 +319,28 @@
</div>
<div class="row">
<div class="col">
<small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
<small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold pointer requestModal" data-type="shippingArrangement"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
</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 p-b-10 b-b" style="border-color: rgb(204, 204, 204);">
<div class="row">
<div class="col">
<small class="bold all-caps no-margin hint-text" >Delivery</small>
<div class="row no-margin">
<div class="col no-padding">
<div class="row bg-master-light">
<div class="col p-t-5 p-b-5">
<small class="bold all-caps no-margin " >Delivery</small>
</div>
<div class="col-4 no-padding" v-show="showArrangements && order.shipping_arrangement !== null">
<small class="btn btn-xs btn-block fs-9 h-100 lh-18 p-t-5 p-b-5 bg-warning all-caps bold no-border pointer requestModal " data-type="deliveryArrangement">Reschedule Delivery</small>
</div>
<div class="col-auto"><small class="bold text-complete pointer all-caps">Show more</small></div>
</div>
</div>
</div>
<div class="row" v-if="order.delivery_arrangement !== null">
<div class="row p-t-10 p-b-10" v-if="order.delivery_arrangement !== null">
<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">
@@ -345,7 +363,7 @@
</div>
</div>
</div>
<div class="row p-t-10 p-b-10" v-show="order.shipping_arrangement === null">
<div class="row p-t-10 p-b-10" v-show="order.delivery_arrangement === null">
<div class="col text-center">
<div class="row">
<div class="col">
@@ -365,7 +383,7 @@
</div>
<div class="row">
<div class="col">
<small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
<small class="p-t-5 p-b-5 p-r-10 p-l-15 bg-master-light all-caps bold pointer requestModal" data-type="deliveryArrangement"><i class="fa fa-plus m-r-5 muted"></i>New Arrangement</small>
</div>
</div>
@@ -696,6 +714,27 @@
</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>
<modal-component type="shippingArrangement">
<div class="card card-default no-border">
<div class="card-block no-padding">
<shipping-arrangement-form-component :attachments="this.order.shipping_arrangement" :data="this.orderId"></shipping-arrangement-form-component>
</div>
</div>
</modal-component>
<modal-component type="deliveryArrangement">
<div class="card card-default no-border">
<div class="card-block no-padding">
<delivery-arrangement-form-component :attachments="this.order.delivery_arrangement" :data="this.orderId"></delivery-arrangement-form-component>
</div>
</div>
</modal-component>
</div>
</div>
<div class="col">
@@ -811,6 +850,7 @@
return {
orderId: this.data,
order: null,
showArrangements: false,
isLoading: true
}
},
@@ -84,7 +84,7 @@
</div>
</div>
</div>
<div class="col-7">
<div class="col-9">
<div class="card no-border bg-transparent">
<div class="row" v-show="this.searchActive">
<div class="col">