diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 13361bd0639..90089593e05 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -74,6 +74,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
+ mapKey: {
+ type: String,
+ default: '',
+ },
});
const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
@@ -96,6 +100,7 @@ const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder,
keepOpts: props.keepOpts,
searchUrl: props.searchUrl,
+ mapKey: props.mapKey,
});
const store = arrayData.store;
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index a492af9bf78..6a9de44cba7 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -63,6 +63,10 @@ const props = defineProps({
type: Function,
default: undefined,
},
+ searchRemoveParams: {
+ type: Boolean,
+ default: true,
+ },
});
const searchText = ref();
@@ -101,12 +105,18 @@ async function search() {
const filter = {
params: {
- ...Object.fromEntries(staticParams),
search: searchText.value,
},
- ...{ filter: props.filter },
+ filter: props.filter,
};
+ if (!props.searchRemoveParams || !searchText.value) {
+ filter.params = {
+ ...Object.fromEntries(staticParams),
+ search: searchText.value,
+ };
+ }
+
if (props.whereFilter) {
filter.filter = {
where: props.whereFilter(searchText.value),
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c0c744852ee..f4b30438af4 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -52,6 +52,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
'exprBuilder',
'searchUrl',
'navigate',
+ 'mapKey',
];
if (typeof userOptions === 'object') {
for (const option in userOptions) {
@@ -121,17 +122,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const { limit } = filter;
store.hasMoreData = limit && response.data.length >= limit;
- if (append) {
- if (!store.data) store.data = [];
- for (const row of response.data) store.data.push(row);
- } else {
- store.data = response.data;
- if (!isDialogOpened()) updateRouter && updateStateParams();
- }
+ processData(response.data, { map: !!store.mapKey, append });
+ if (!append && !isDialogOpened()) updateRouter && updateStateParams();
store.isLoading = false;
-
canceller = null;
+
return response;
}
@@ -293,6 +289,31 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
router.replace(newUrl);
}
+ function processData(data, { map = true, append = true }) {
+ if (!append) {
+ store.data = [];
+ store.map = new Map();
+ }
+
+ if (!Array.isArray(data)) store.data = data;
+ else if (!map && append) for (const row of data) store.data.push(row);
+ else
+ for (const row of data) {
+ const key = row[store.mapKey];
+ const val = { ...row, key };
+ if (store.map.has(key)) {
+ const { position } = store.map.get(key);
+ val.position = position;
+ store.map.set(key, val);
+ store.data[position] = val;
+ } else {
+ val.position = store.map.size;
+ store.map.set(key, val);
+ store.data.push(val);
+ }
+ }
+ }
+
const totalRows = computed(() => (store.data && store.data.length) || 0);
const isLoading = computed(() => store.isLoading || false);
diff --git a/src/pages/Order/Card/OrderCatalog.vue b/src/pages/Order/Card/OrderCatalog.vue
index 26133a7eb5f..2ede429a02a 100644
--- a/src/pages/Order/Card/OrderCatalog.vue
+++ b/src/pages/Order/Card/OrderCatalog.vue
@@ -1,7 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute, useRouter } from 'vue-router';
-import { onMounted, onUnmounted, ref, computed, watch, provide, nextTick } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watch, provide } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -101,6 +101,7 @@ provide('onItemSaved', onItemSaved);
url="Orders/CatalogFilter"
:label="t('Search items')"
:info="t('You can search items by name or id')"
+ :search-remove-params="false"
/>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index 71e3926aca4..1b706922e0b 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -441,6 +441,7 @@ watch(
<QPage class="column items-center q-pa-md">
<VnTable
data-key="advanceTickets"
+ :map-key="false"
ref="vnTableRef"
url="Tickets/getTicketsAdvance"
search-url="advanceTickets"
diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue
index 650047e40c7..5c87faf999e 100644
--- a/src/pages/Zone/Card/ZoneLocationsTree.vue
+++ b/src/pages/Zone/Card/ZoneLocationsTree.vue
@@ -163,7 +163,13 @@ onUnmounted(() => {
<QBtn color="primary" icon="search" dense flat @click="reFetch()" />
</template>
</VnInput>
- <VnSearchbar v-if="!showSearchBar" :data-key="datakey" :url="url" :redirect="false" />
+ <VnSearchbar
+ v-if="!showSearchBar"
+ :data-key="datakey"
+ :url="url"
+ :redirect="false"
+ :search-remove-params="false"
+ />
<QTree
ref="treeRef"
:nodes="nodes"
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index be65de19a65..47bc06fd6fe 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -17,6 +17,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
searchUrl: 'params',
navigate: null,
page: 1,
+ mapKey: 'id',
};
function get(key) {
@@ -46,6 +47,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
function getDefaultState() {
return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
data: ref(),
+ map: ref(new Map()),
});
}
diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js
index 345903c1a56..a67dfcdc638 100644
--- a/test/vitest/__tests__/components/Paginate.spec.js
+++ b/test/vitest/__tests__/components/Paginate.spec.js
@@ -4,7 +4,11 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
describe('VnPaginate', () => {
const expectedUrl = '/api/customers';
-
+ const defaultData = [
+ { id: 1, name: 'Tony Stark' },
+ { id: 2, name: 'Jessica Jones' },
+ { id: 3, name: 'Bruce Wayne' },
+ ];
let vm;
beforeAll(() => {
const options = {
@@ -28,11 +32,7 @@ describe('VnPaginate', () => {
describe('paginate()', () => {
it('should call to the paginate() method and set the data on the rows property', async () => {
vi.spyOn(vm.arrayData, 'loadMore');
- vm.store.data = [
- { id: 1, name: 'Tony Stark' },
- { id: 2, name: 'Jessica Jones' },
- { id: 3, name: 'Bruce Wayne' },
- ];
+ vm.store.data = defaultData;
await vm.paginate();
@@ -42,26 +42,25 @@ describe('VnPaginate', () => {
it('should call to the paginate() method and then call it again to paginate', async () => {
vi.spyOn(axios, 'get').mockResolvedValue({
- data: [
- { id: 1, name: 'Tony Stark' },
- { id: 2, name: 'Jessica Jones' },
- { id: 3, name: 'Bruce Wayne' },
- ],
+ data: defaultData,
});
vm.store.hasMoreData = true;
await vm.$nextTick();
- vm.store.data = [
- { id: 1, name: 'Tony Stark' },
- { id: 2, name: 'Jessica Jones' },
- { id: 3, name: 'Bruce Wayne' },
- ];
+ vm.store.data = defaultData;
await vm.paginate();
expect(vm.store.skip).toEqual(3);
expect(vm.store.data.length).toEqual(6);
+ vi.spyOn(axios, 'get').mockResolvedValue({
+ data: [
+ { id: 4, name: 'Peter Parker' },
+ { id: 5, name: 'Clark Kent' },
+ { id: 6, name: 'Barry Allen' },
+ ],
+ });
await vm.paginate();
expect(vm.store.skip).toEqual(6);
@@ -85,11 +84,7 @@ describe('VnPaginate', () => {
const index = 1;
const done = vi.fn();
- vm.store.data = [
- { id: 1, name: 'Tony Stark' },
- { id: 2, name: 'Jessica Jones' },
- { id: 3, name: 'Bruce Wayne' },
- ];
+ vm.store.data = defaultData;
await vm.onLoad(index, done);
@@ -105,11 +100,7 @@ describe('VnPaginate', () => {
],
});
- vm.store.data = [
- { id: 1, name: 'Tony Stark' },
- { id: 2, name: 'Jessica Jones' },
- { id: 3, name: 'Bruce Wayne' },
- ];
+ vm.store.data = defaultData;
expect(vm.pagination.page).toEqual(1);