src/pages/Zone/Card/ZoneBasicData.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+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';
@@ -19,6 +19,11 @@ const agencyFilter = {
     limit: 30,
 };
 const agencyOptions = ref([]);
+const validAddresses = ref([]);
+
+const filterWhere = computed(() => ({
+    id: { inq: validAddresses.value.map((item) => item.addressFk) },
+}));
 </script>
 
 <template>
@@ -28,7 +33,11 @@ const agencyOptions = ref([]);
         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>
@@ -128,6 +137,8 @@ const agencyOptions = ref([]);
                     hide-selected
                     map-options
                     :rules="validate('data.addressFk')"
+                    :filter-options="['id']"
+                    :where="filterWhere"
                 />
             </VnRow>
             <VnRow>

src/pages/Zone/Card/ZoneSearchbar.vue

@@ -28,9 +28,6 @@ const exprBuilder = (param, value) => {
     <VnSearchbar
         data-key="ZonesList"
         url="Zones"
-        :filter="{
-            include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-        }"
         :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,9 +25,8 @@ const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 const tableRef = ref();
 const warehouseOptions = ref([]);
-const validAddresses = ref([]);
 
-const tableFilter = {
+const tableFilter = computed(() => ({
     include: [
         {
             relation: 'agencyMode',
@@ -63,7 +61,7 @@ const tableFilter = {
             },
         },
     ],
-};
+}));
 
 const columns = computed(() => [
     {
@@ -165,26 +163,14 @@ const handleClone = (id) => {
     );
 };
 
-function showValidAddresses(row) {
+function formatRow(row) {
-    if (row.addressFk) {
+    if (!row?.address) return '-';
-        const isValid = validAddresses.value.some(
+    return dashIfEmpty(`${row?.address?.nickname},
-            (address) => address.addressFk === row.addressFk
+            ${row?.address?.postcode?.town?.name} (${row?.address?.province?.name})`);
-        );
-        if (isValid)
-            return `${row.address?.nickname},
-            ${row.address?.postcode?.town?.name} (${row.address?.province?.name})`;
-        else return '-';
-    }
-    return '-';
 }
 </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