refactor: refs #8246 fetch options efficiently and deleted unused data

src/pages/Zone/Card/ZoneBasicData.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -9,33 +9,23 @@ 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 addresses = ref([]);
 
-const filterWhere = computed(() => ({
-    id: { inq: validAddresses.value.map((item) => item.addressFk) },
-}));
+const setFilteredAddresses = (data) => {
+    const validIds = new Set(validAddresses.value.map((item) => item.addressFk));
+    addresses.value = data.filter((address) => validIds.has(address.id));
+};
 </script>
 
 <template>
-    <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">
+    <FetchData url="Addresses" auto-load @on-fetch="setFilteredAddresses" />
+    <FormModel auto-load model="zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
@@ -45,7 +35,6 @@ const filterWhere = computed(() => ({
                     v-model="data.name"
                 />
             </VnRow>
-
             <VnRow>
                 <VnSelect
                     v-model="data.agencyModeFk"
@@ -128,14 +117,12 @@ const filterWhere = computed(() => ({
                     v-model="data.addressFk"
                     option-value="id"
                     option-label="nickname"
-                    url="Addresses"
+                    :options="addresses"
                     :fields="['id', 'nickname']"
                     sort-by="id"
                     hide-selected
                     map-options
                     :rules="validate('data.addressFk')"
-                    :filter-options="['id']"
-                    :where="filterWhere"
                 />
             </VnRow>
             <VnRow>