wip-feat: request change order shipping address ui.

This commit is contained in:
weichien00
2021-09-09 01:49:44 +08:00
parent 97adb6b03d
commit a4b2e02ec3
4 changed files with 99 additions and 1 deletions
+1
View File
@@ -28,6 +28,7 @@ class OrderResource extends JsonResource
'company_module' => new CompanyModuleResource($this->companyModule),
'warehouse' => new CompanyModuleResource($this->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_WAREHOUSE)->first()->appointee),
'address' => new AddressResource($this->addresses()->first()),
'address_change_request' => new AddressResource($this->addressesPendingVerification()->first()),
$this->mergeWhen($this->relationLoaded('parcels'), [
'origin_warehouse_packages' => PackageResource::collection($this->parcels()->whereHas('packingList', function($query){
return $query->where('type', PackingListType::SHIPPING_PACKING_LIST)->whereDoesntHave('containers', function($query) {
@@ -0,0 +1,22 @@
<template>
<i class="fa fa-edit pointer requestModal" data-type="addressesList" v-tooltip:right="data.address_change_request.reference">
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addressesList" size="large">
<change-order-address-form-component :data="data" :section="section" class="text-center"></change-order-address-form-component>
</modal-component>
</i>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true,
}
},
data() {
return {
section:"changeAddressSection"
}
},
}
</script>
@@ -0,0 +1,74 @@
<template>
<div class="row justify-content-center">
<div class="col col-md-10">
<div class="row m-b-20">
<div class="col">
<div class="row m-b-20 text-info">
<div class="col text-center">
<h3>Please select the address where you want to receive this order</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col col-md-10">
<list-component style="min-height: 50px;" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 10, HasMorphCompanyModule: data.company_module.id}">
<template slot="list" slot-scope="{data}">
<select-address-component :data="data" :value="parameters.address_id" v-model="parameters.address_id"></select-address-component>
</template>
</list-component>
<div class="row m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
<div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.address_id, 'b-grey': parameters.address_id}" @click="parameters.address_id = null">
<div class="row align-items-center">
<div class="col-auto p-r-0">
<i class="fa fs-20 p-t-5" :class="{'fa-circle-o': parameters.address_id, 'fa-check-circle': !parameters.address_id, 'text-primary': !parameters.address_id}"></i>
</div>
<div class="col-auto semi-bold">New Address</div>
</div>
<div class="row" v-show="!parameters.address_id">
<div class="col">
<address-form-component :id="data.company_module.id" section="addressList" @input="parameters.address_id = $event"></address-form-component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
<div class="col col-md-8 no-padding">
<div class="row">
<div class="col p-l-5">
<button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="changeAddress()" >Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
export default {
props: {
data: {
type: Object,
required: true,
}
},
data() {
return {
parameters : {
address_id: '',
order_id: this.data.id,
}
}
},
methods:{
changeAddress(){
this.submit((this.route('api.order.address.change.request')), 'post', 'orderListSection', true, true);
},
},
mixins: [componentHandler, ModalFormHandler]
}
</script>
@@ -23,7 +23,8 @@
</div>
<div class="row m-b-10">
<div class="col-auto">
<h6 class="no-margin"><b>Delivery Address:</b> {{order.address.reference}} <i class="fa fa-info-circle m-l-10" v-tooltip:right="order.address.street_one+' '+(order.address.street_two ? order.address.street_two : '')+', '+ order.address.district.name+', '+order.address.post_code+' '+order.address.state.name+', '+order.address.country.name" ></i></h6>
<h6 class="no-margin"><b>Delivery Address:</b> {{order.address.reference}} <i class="fa fa-info-circle m-l-10" v-tooltip:right="order.address.street_one+' '+(order.address.street_two ? order.address.street_two : '')+', '+ order.address.district.name+', '+order.address.post_code+' '+order.address.state.name+', '+order.address.country.name" ></i>
<change-address-component :data="order"></change-address-component></h6>
</div>
<div class="col-auto">
<h6 class="no-margin"><b>Warehouse:</b> {{order.warehouse.id === 3 ? 'Guang Zhou' : 'Yiwu'}}</h6>