resolve customer extended list conflicts

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import { QBtn, QIcon } from 'quasar';
-import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
@@ -12,6 +11,7 @@ import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
+import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 
@@ -19,11 +19,16 @@ const { t } = useI18n();
 const router = useRouter();
 const stateStore = useStateStore();
 
-const allColumnNames = ref([]);
-const rows = ref([]);
-const selectedCustomerId = ref(0);
-const selectedSalesPersonId = ref(0);
-const visibleColumns = ref([]);
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
 
 onMounted(() => {
     const filteredColumns = columns.value.filter(
@@ -32,6 +37,13 @@ onMounted(() => {
     allColumnNames.value = filteredColumns.map((col) => col.name);
 });
 
+const rows = computed(() => arrayData.value.store.data);
+
+const selectedCustomerId = ref(0);
+const selectedSalesPersonId = ref(0);
+const allColumnNames = ref([]);
+const visibleColumns = ref([]);
+
 const tableColumnComponents = {
     customerStatus: {
         component: QIcon,
@@ -473,13 +485,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
 </script>
 
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
-        url="Clients/extendedListFilter"
-    />
-
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <CustomerExtendedListFilter