From a4b2e02ec304348f512e9722638e7b493d0d53eb Mon Sep 17 00:00:00 2001
From: weichien00 <weichien00@gmail.com>
Date: Thu, 9 Sep 2021 01:49:44 +0800
Subject: [PATCH] wip-feat: request change order shipping address ui.

---
 app/Http/Resources/OrderResource.php          |  1 +
 .../elements/ChangeAddressComponent.vue       | 22 ++++++
 .../forms/ChangeOrderAddressFormComponent.vue | 74 +++++++++++++++++++
 .../sections/OrderProfileSectionComponent.vue |  3 +-
 4 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
 create mode 100644 resources/assets/vue/components/orders/forms/ChangeOrderAddressFormComponent.vue

diff --git a/app/Http/Resources/OrderResource.php b/app/Http/Resources/OrderResource.php
index 183536e3..91e1c4b5 100644
--- a/app/Http/Resources/OrderResource.php
+++ b/app/Http/Resources/OrderResource.php
@@ -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) {
diff --git a/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
new file mode 100644
index 00000000..e8c2636d
--- /dev/null
+++ b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
@@ -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>
diff --git a/resources/assets/vue/components/orders/forms/ChangeOrderAddressFormComponent.vue b/resources/assets/vue/components/orders/forms/ChangeOrderAddressFormComponent.vue
new file mode 100644
index 00000000..8e6c3d7b
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/ChangeOrderAddressFormComponent.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
index 84525c41..ad49af1c 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -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>