src/pages/Zone/Card/ZoneBasicData.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -7,10 +9,33 @@ import VnInputTime from 'src/components/common/VnInputTime.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
+
+const agencyFilter = {
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    limit: 30,
+};
+const agencyOptions = ref([]);
+const validAddresses = ref([]);
+
+const filterWhere = computed(() => ({
+    id: { inq: validAddresses.value.map((item) => item.addressFk) },
+}));
 </script>
 
 <template>
-    <FormModel :url="`Zones/${$route.params.id}`" auto-load model="zone">
+    <FetchData
+        :filter="agencyFilter"
+        @on-fetch="(data) => (agencyOptions = data)"
+        auto-load
+        url="AgencyModes/isActive"
+    />
+    <FetchData
+        url="RoadmapAddresses"
+        auto-load
+        @on-fetch="(data) => (validAddresses = data)"
+    />
+    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
@@ -109,6 +134,8 @@ const { t } = useI18n();
                     hide-selected
                     map-options
                     :rules="validate('data.addressFk')"
+                    :filter-options="['id']"
+                    :where="filterWhere"
                 />
             </VnRow>
             <VnRow>

src/pages/Zone/Card/ZoneSearchbar.vue

@@ -22,15 +22,50 @@ const exprBuilder = (param, value) => {
             return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
     }
 };
+
+const tableFilter = {
+    include: [
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'address',
+            scope: {
+                fields: ['id', 'nickname', 'provinceFk', 'postalCode'],
+                include: [
+                    {
+                        relation: 'province',
+                        scope: {
+                            fields: ['id', 'name'],
+                        },
+                    },
+                    {
+                        relation: 'postcode',
+                        scope: {
+                            fields: ['code', 'townFk'],
+                            include: {
+                                relation: 'town',
+                                scope: {
+                                    fields: ['id', 'name'],
+                                },
+                            },
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
 </script>
 
 <template>
     <VnSearchbar
         data-key="ZonesList"
         url="Zones"
-        :filter="{
-            include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-        }"
+        :filter="tableFilter"
         :expr-builder="exprBuilder"
         :label="t('list.searchZone')"
         :info="t('list.searchInfo')"

src/pages/Zone/ZoneList.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import axios from 'axios';
 
-import { toCurrency } from 'src/filters';
+import { dashIfEmpty, toCurrency } from 'src/filters';
 import { toTimeFormat } from 'src/filters/date';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
@@ -17,7 +17,6 @@ import VnInputTime from 'src/components/common/VnInputTime.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
 import ZoneSearchbar from './Card/ZoneSearchbar.vue';
-import FetchData from 'src/components/FetchData.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -26,7 +25,6 @@ const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 const tableRef = ref();
 const warehouseOptions = ref([]);
-const validAddresses = ref([]);
 
 const tableFilter = {
     include: [
@@ -161,30 +159,18 @@ const handleClone = (id) => {
     openConfirmationModal(
         t('list.confirmCloneTitle'),
         t('list.confirmCloneSubtitle'),
-        () => clone(id)
+        () => clone(id),
     );
 };
 
-function showValidAddresses(row) {
-    if (row.addressFk) {
-        const isValid = validAddresses.value.some(
-            (address) => address.addressFk === row.addressFk
-        );
-        if (isValid)
-            return `${row.address?.nickname},
-            ${row.address?.postcode?.town?.name} (${row.address?.province?.name})`;
-        else return '-';
-    }
-    return '-';
+function formatRow(row) {
+    if (!row?.address) return '-';
+    return dashIfEmpty(`${row?.address?.nickname},
+            ${row?.address?.postcode?.town?.name} (${row?.address?.province?.name})`);
 }
 </script>
 
 <template>
-    <FetchData
-        url="RoadmapAddresses"
-        auto-load
-        @on-fetch="(data) => (validAddresses = data)"
-    />
     <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
@@ -207,7 +193,7 @@ function showValidAddresses(row) {
         :right-search="false"
     >
         <template #column-addressFk="{ row }">
-            {{ showValidAddresses(row) }}
+            {{ dashIfEmpty(formatRow(row)) }}
         </template>
         <template #more-create-dialog="{ data }">
             <VnSelect