yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update device API with server-side pagination support

Browse Source 
- 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:
vinix
2025-10-10 15:50:20 +07:00
parent e00ecbf116
commit d7a09840b9
1 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/api/master-device.jsx
View File

@@ -1,43 +1,88 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllDevice = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `device?${queryParams.toString()}`,
});
console.log('getAllDevice response:', response);
console.log('Query params:', queryParams.toString());
try {
const response = await SendRequest({
method: 'get',
prefix: `device?${queryParams.toString()}`,
});
console.log('getAllDevice response:', response);
console.log('Query params:', queryParams.toString());
// Parse query params to get page and limit
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
// Backend response structure:
// {
// statusCode: 200,
// 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
const allData = response.data || [];
const totalData = allData.length;
// Check if backend returns paginated data
if (response.paging) {
const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
// Calculate start and end index for current page
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
// Slice data for current page
const paginatedData = allData.slice(startIndex, endIndex);
// Transform response to match TableList expected structure
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: {
page: response.paging.current_page || 1,
limit: response.paging.current_limit || 10,
total: totalData,
page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
},
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) => {