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 1/2] 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>

From 54211a5b72e3bbde7fe2cf41a5652c953dfc9b46 Mon Sep 17 00:00:00 2001
From: weichien00 <weichien00@gmail.com>
Date: Thu, 9 Sep 2021 13:48:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=20add=20approve=20change=20pr?=
 =?UTF-8?q?der=20address=20component=20-=20admin=20access=20only.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ApproveChangeAddressComponent.vue         | 22 +++++++++
 .../elements/ChangeAddressComponent.vue       |  2 +-
 .../ApproveChangeAddressFormComponent.vue     | 49 +++++++++++++++++++
 .../sections/OrderProfileSectionComponent.vue |  4 +-
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue
 create mode 100644 resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue

diff --git a/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue
new file mode 100644
index 00000000..d4217fd5
--- /dev/null
+++ b/resources/assets/vue/components/orders/elements/ApproveChangeAddressComponent.vue
@@ -0,0 +1,22 @@
+<template>
+    <i v-show="data.address_change_request&&$store.getters.isAdmin" class="fa fa-exclamation pointer requestModal"  data-type="approveChangeAddress">
+        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="approveChangeAddress" size="large">
+            <approve-change-address-form-component :data="data" :section="section" class="text-center"></approve-change-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/elements/ChangeAddressComponent.vue b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
index e8c2636d..dc82ede2 100644
--- a/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
+++ b/resources/assets/vue/components/orders/elements/ChangeAddressComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <i class="fa fa-edit pointer requestModal"  data-type="addressesList" v-tooltip:right="data.address_change_request.reference">
+    <i class="fa fa-edit pointer requestModal"  data-type="addressesList">
         <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>
diff --git a/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue b/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue
new file mode 100644
index 00000000..ce9f4769
--- /dev/null
+++ b/resources/assets/vue/components/orders/forms/ApproveChangeAddressFormComponent.vue
@@ -0,0 +1,49 @@
+<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>Approve</h3>
+                        </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="approveChangeAddress()" >Approve</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 : {
+                    order_id: this.data.id,
+                }
+            }
+        },
+        methods:{
+            approveChangeAddress(){
+                this.submit((this.route('api.order.address.change.approve')), '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 ad49af1c..4e52c1e3 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -24,7 +24,9 @@
                             <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>
-                                    <change-address-component :data="order"></change-address-component></h6>
+                                    <change-address-component :data="order"></change-address-component>
+                                    <approve-change-address-component :data="order"></approve-change-address-component>
+                                    </h6>
                                 </div>
                                 <div class="col-auto">
                                     <h6 class="no-margin"><b>Warehouse:</b> {{order.warehouse.id === 3 ? 'Guang Zhou' : 'Yiwu'}}</h6>