7cddba2b08
## Summary - Add `has_more` to contacts search API response to enable infinite scroll without expensive count queries - Set `count` to the number of items in the current page instead of total count - Implement "Load more" button for contacts search results - Keep existing contacts visible while loading additional pages ## Changes ### Backend - Add `fetch_contacts_with_has_more` method that fetches N+1 records to determine if more pages exist - Return `has_more` in search endpoint meta response - Set `count` to current page size instead of total count ### Frontend - Add `APPEND_CONTACTS` mutation for appending contacts without clearing existing ones - Update search action to support `append` parameter - Add `ContactsLoadMore` component with loading state - Update `ContactsListLayout` to support infinite scroll mode - Update `ContactsIndex` to use infinite scroll for search view
100 lines
2.4 KiB
JavaScript
100 lines
2.4 KiB
JavaScript
import types from '../../mutation-types';
|
|
import * as Sentry from '@sentry/vue';
|
|
|
|
export const mutations = {
|
|
[types.SET_CONTACT_UI_FLAG]($state, data) {
|
|
$state.uiFlags = {
|
|
...$state.uiFlags,
|
|
...data,
|
|
};
|
|
},
|
|
|
|
[types.CLEAR_CONTACTS]: $state => {
|
|
$state.records = {};
|
|
$state.sortOrder = [];
|
|
},
|
|
|
|
[types.SET_CONTACT_META]: ($state, data) => {
|
|
const { count, current_page: currentPage, has_more: hasMore } = data;
|
|
$state.meta.count = count;
|
|
$state.meta.currentPage = currentPage;
|
|
if (hasMore !== undefined) {
|
|
$state.meta.hasMore = hasMore;
|
|
}
|
|
},
|
|
|
|
[types.APPEND_CONTACTS]: ($state, data) => {
|
|
data.forEach(contact => {
|
|
$state.records[contact.id] = {
|
|
...($state.records[contact.id] || {}),
|
|
...contact,
|
|
};
|
|
if (!$state.sortOrder.includes(contact.id)) {
|
|
$state.sortOrder.push(contact.id);
|
|
}
|
|
});
|
|
},
|
|
|
|
[types.SET_CONTACTS]: ($state, data) => {
|
|
const sortOrder = data.map(contact => {
|
|
$state.records[contact.id] = {
|
|
...($state.records[contact.id] || {}),
|
|
...contact,
|
|
};
|
|
return contact.id;
|
|
});
|
|
$state.sortOrder = sortOrder;
|
|
},
|
|
|
|
[types.SET_CONTACT_ITEM]: ($state, data) => {
|
|
$state.records[data.id] = {
|
|
...($state.records[data.id] || {}),
|
|
...data,
|
|
};
|
|
|
|
if (!$state.sortOrder.includes(data.id)) {
|
|
$state.sortOrder.push(data.id);
|
|
}
|
|
},
|
|
|
|
[types.EDIT_CONTACT]: ($state, data) => {
|
|
$state.records[data.id] = data;
|
|
},
|
|
|
|
[types.DELETE_CONTACT]: ($state, id) => {
|
|
const index = $state.sortOrder.findIndex(item => item === id);
|
|
$state.sortOrder.splice(index, 1);
|
|
delete $state.records[id];
|
|
},
|
|
|
|
[types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
|
|
Object.values($state.records).forEach(element => {
|
|
let availabilityStatus;
|
|
try {
|
|
availabilityStatus = data[element.id];
|
|
} catch (error) {
|
|
Sentry.setContext('contact is undefined', {
|
|
records: $state.records,
|
|
data: data,
|
|
});
|
|
Sentry.captureException(error);
|
|
|
|
return;
|
|
}
|
|
if (availabilityStatus) {
|
|
$state.records[element.id].availability_status = availabilityStatus;
|
|
} else {
|
|
$state.records[element.id].availability_status = null;
|
|
}
|
|
});
|
|
},
|
|
|
|
[types.SET_CONTACT_FILTERS](_state, data) {
|
|
_state.appliedFilters = data;
|
|
},
|
|
|
|
[types.CLEAR_CONTACT_FILTERS](_state) {
|
|
_state.appliedFilters = [];
|
|
},
|
|
};
|