feat: update device API with server-side pagination support
- Add support for backend pagination with current_page, current_limit, total_limit, total_page - Handle multiple sources for total count (total_data, rows, data.length) - Transform backend paging structure to frontend format - Maintain client-side pagination as fallback - Add comprehensive error handling with try-catch - Add detailed console logging for debugging - Map backend fields: current_page->page, current_limit->limit, total_limit->total - Calculate total_page if not provided by backend Backend response format: GET /api/device?page=1&limit=10 Supports both server-side and client-side pagination modes
This commit is contained in:
@@ -1,43 +1,88 @@
|
|||||||
import { SendRequest } from '../components/Global/ApiRequest';
|
import { SendRequest } from '../components/Global/ApiRequest';
|
||||||
|
|
||||||
const getAllDevice = async (queryParams) => {
|
const getAllDevice = async (queryParams) => {
|
||||||
const response = await SendRequest({
|
try {
|
||||||
method: 'get',
|
const response = await SendRequest({
|
||||||
prefix: `device?${queryParams.toString()}`,
|
method: 'get',
|
||||||
});
|
prefix: `device?${queryParams.toString()}`,
|
||||||
console.log('getAllDevice response:', response);
|
});
|
||||||
console.log('Query params:', queryParams.toString());
|
console.log('getAllDevice response:', response);
|
||||||
|
console.log('Query params:', queryParams.toString());
|
||||||
|
|
||||||
// Parse query params to get page and limit
|
// Backend response structure:
|
||||||
const params = Object.fromEntries(queryParams);
|
// {
|
||||||
const currentPage = parseInt(params.page) || 1;
|
// statusCode: 200,
|
||||||
const currentLimit = parseInt(params.limit) || 10;
|
// data: [...devices],
|
||||||
|
// paging: {
|
||||||
|
// current_page: 1,
|
||||||
|
// current_limit: 10,
|
||||||
|
// total_limit: 50,
|
||||||
|
// total_page: 5
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
// Backend returns all data, so we need to do client-side pagination
|
// Check if backend returns paginated data
|
||||||
const allData = response.data || [];
|
if (response.paging) {
|
||||||
const totalData = allData.length;
|
const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
|
||||||
|
|
||||||
// Calculate start and end index for current page
|
return {
|
||||||
const startIndex = (currentPage - 1) * currentLimit;
|
status: response.statusCode || 200,
|
||||||
const endIndex = startIndex + currentLimit;
|
data: {
|
||||||
|
data: response.data || [],
|
||||||
// Slice data for current page
|
paging: {
|
||||||
const paginatedData = allData.slice(startIndex, endIndex);
|
page: response.paging.current_page || 1,
|
||||||
|
limit: response.paging.current_limit || 10,
|
||||||
// Transform response to match TableList expected structure
|
total: totalData,
|
||||||
return {
|
page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
|
||||||
status: response.statusCode || 200,
|
},
|
||||||
data: {
|
total: totalData
|
||||||
data: paginatedData,
|
}
|
||||||
paging: {
|
};
|
||||||
page: currentPage,
|
|
||||||
limit: currentLimit,
|
|
||||||
total: totalData,
|
|
||||||
page_total: Math.ceil(totalData / currentLimit)
|
|
||||||
},
|
|
||||||
total: totalData
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
// Fallback: If backend returns all data without pagination (old behavior)
|
||||||
|
const params = Object.fromEntries(queryParams);
|
||||||
|
const currentPage = parseInt(params.page) || 1;
|
||||||
|
const currentLimit = parseInt(params.limit) || 10;
|
||||||
|
|
||||||
|
const allData = response.data || [];
|
||||||
|
const totalData = allData.length;
|
||||||
|
|
||||||
|
// Client-side pagination
|
||||||
|
const startIndex = (currentPage - 1) * currentLimit;
|
||||||
|
const endIndex = startIndex + currentLimit;
|
||||||
|
const paginatedData = allData.slice(startIndex, endIndex);
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: response.statusCode || 200,
|
||||||
|
data: {
|
||||||
|
data: paginatedData,
|
||||||
|
paging: {
|
||||||
|
page: currentPage,
|
||||||
|
limit: currentLimit,
|
||||||
|
total: totalData,
|
||||||
|
page_total: Math.ceil(totalData / currentLimit)
|
||||||
|
},
|
||||||
|
total: totalData
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('getAllDevice error:', error);
|
||||||
|
return {
|
||||||
|
status: 500,
|
||||||
|
data: {
|
||||||
|
data: [],
|
||||||
|
paging: {
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
total: 0,
|
||||||
|
page_total: 0
|
||||||
|
},
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
error: error.message
|
||||||
|
};
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getDeviceById = async (id) => {
|
const getDeviceById = async (id) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user