From 6d20c8d49eae38e1f32b8721ef858acff6a37dca Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Sun, 7 Dec 2025 14:22:11 +0800
Subject: [PATCH] Fix district listing to display state info for clarity when 2
 state share the same district name

---
 app/Http/Resources/DistrictResource.php                     | 1 +
 .../vue/components/addresses/forms/AddressFormComponent.vue | 4 ++--
 .../addresses/forms/WarehouseAddressFormComponent.vue       | 6 +++---
 .../companies/forms/EInvoiceInfoFormComponent.vue           | 3 +--
 .../forms/ChangeCustomerCompanyDetailsFormComponent.vue     | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/Http/Resources/DistrictResource.php b/app/Http/Resources/DistrictResource.php
index a922f2ed..29b8c51d 100644
--- a/app/Http/Resources/DistrictResource.php
+++ b/app/Http/Resources/DistrictResource.php
@@ -17,6 +17,7 @@ class DistrictResource extends JsonResource
         return [
             'id' => $this->id,
             'city' => $this->name,
+            'city_state' => $this->name . ' - ' . optional($this->state)->name,
             'state' => $this->state,
             'country' => $this->country,
             'postcode' => $this->postcode,
diff --git a/resources/assets/vue/components/addresses/forms/AddressFormComponent.vue b/resources/assets/vue/components/addresses/forms/AddressFormComponent.vue
index a77beace..2f334a82 100644
--- a/resources/assets/vue/components/addresses/forms/AddressFormComponent.vue
+++ b/resources/assets/vue/components/addresses/forms/AddressFormComponent.vue
@@ -23,7 +23,7 @@
                         <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                             <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                 <label>District</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-12 col-md pl-md-1">
@@ -107,7 +107,7 @@
                         <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                             <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                 <label>City/Town</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-12 col-md pl-md-1">
diff --git a/resources/assets/vue/components/addresses/forms/WarehouseAddressFormComponent.vue b/resources/assets/vue/components/addresses/forms/WarehouseAddressFormComponent.vue
index 81800c43..6fde8cd5 100644
--- a/resources/assets/vue/components/addresses/forms/WarehouseAddressFormComponent.vue
+++ b/resources/assets/vue/components/addresses/forms/WarehouseAddressFormComponent.vue
@@ -31,7 +31,7 @@
                         <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                             <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                 <label>District</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-12 col-md pl-md-1">
@@ -115,7 +115,7 @@
                         <div class="col-12 col-md pr-md-1 pb-3 pb-md-0">
                             <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                 <label>City/Town</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-12 col-md pl-md-1">
@@ -186,7 +186,7 @@
                     // person_in_charge: null,
 				}
 
-            }            
+            }
 		},
         created(){
             if(this.data){
diff --git a/resources/assets/vue/components/companies/forms/EInvoiceInfoFormComponent.vue b/resources/assets/vue/components/companies/forms/EInvoiceInfoFormComponent.vue
index d1072b53..b5ba2cc4 100644
--- a/resources/assets/vue/components/companies/forms/EInvoiceInfoFormComponent.vue
+++ b/resources/assets/vue/components/companies/forms/EInvoiceInfoFormComponent.vue
@@ -49,8 +49,7 @@
                                 <div class="col-7 p-r-5">
                                     <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                         <label class="text-primary">District</label>
-
-                                        <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                        <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                                     </validation-wrapper-component>
                                 </div>
                                 <div class="col-5 p-l-5">
diff --git a/resources/assets/vue/components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue b/resources/assets/vue/components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue
index afe06a81..448b4a66 100644
--- a/resources/assets/vue/components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue
+++ b/resources/assets/vue/components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue
@@ -82,7 +82,7 @@
                         <div class="col-7 p-r-5">
                             <validation-wrapper-component selectable :validator="$v.parameters.district_id">
                                 <label class="text-primary">District</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city_state']" v-model="parameters.district_id"></selectable-component>
                             </validation-wrapper-component>
                         </div>
                         <div class="col-5 p-l-5">