TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ssr member

Browse Source
This commit is contained in:
unknown
2025-05-16 14:32:08 +07:00
parent 732ec89ba0
commit 45bdfe7896
1 changed files with 136 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -1,7 +1,7 @@
import { DataTable } from '@/components/ui/DataTable'; import { DataTable } from '@/components/ui/DataTable';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { getColumns, Members, initialMember } from './Columns'; import { getColumns, Members, initialMember } from './Columns';
import { useState, useEffect } from 'react'; import { useState, useEffect, useCallback } from 'react';
import axios from 'axios'; import axios from 'axios';
import DetailMember from './blocks/DetailMember'; import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
@ -29,7 +29,7 @@ const ManageMembers = () => {
const [groups, setGroups] = useState([]); const [groups, setGroups] = useState([]);
const [isReloading, setIsReloading] = useState(false); const [isReloading, setIsReloading] = useState(false);
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
const [totalItems, setTotalItems] = useState(10); const [pageSize, setPageSize] = useState(10);
const closeDialog = () => { const closeDialog = () => {
setIsDialogOpen(false); setIsDialogOpen(false);
@ -38,40 +38,129 @@ const ManageMembers = () => {
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => { useEffect(() => {
fetchCustomers(); // fetchCustomers();
fetchMasters(); fetchMasters();
}, []); }, []);
async function fetchCustomers(): Promise<void> { // async function fetchCustomers(): Promise<any> {
setIsReloading(true); // setIsReloading(true);
try { // try {
let customers = await axios.get(`${BASE_URL}/customer/list`, { // let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { // params: {
limit: 30, // limit: pageSize,
page: 1 + currentPage, // page: 1 + currentPage,
with_deleted: false, // with_deleted: false,
order_field: 'created_at', // order_field: 'created_at',
order_direction: 'DESC' // order_direction: 'DESC'
} // }
}); // });
let temp = 1; // let temp = 1;
let resMembers = customers.data.data.list.map((el: any) => { // let resMembers = customers.data.data.list.map((el: any) => {
el.no = temp++; // el.no = temp++;
if (el.date_birth) { // if (el.date_birth) {
const d = new Date(el.date_birth); // const d = new Date(el.date_birth);
el.date_birth = d.toLocaleString('sv-SE'); // el.date_birth = d.toLocaleString('sv-SE');
} // }
el.name = el.fullname; // el.name = el.fullname;
return el; // return el;
}); // });
setMembers(resMembers); // setMembers(resMembers);
} catch (error: any) { // return {
toast.error(error.message); // data: resMembers,
console.log(error); // totalCount: customers.data.data.total_count,
} finally { // }
setIsReloading(false); // } catch (error: any) {
} // toast.error(error.message);
} // console.log(error);
// } finally {
// setIsReloading(false);
// }
// }
// const fetchCustomers = useCallback(
// async ({ pageIndex, pageSize }:any) => {
// setIsReloading(true);
// try {
// const res = await axios.get(`${BASE_URL}/customer/list`, {
// params: {
// limit: pageSize,
// page: pageIndex + 1, // +1 because your API uses 1-based pages
// with_deleted: false,
// order_field: 'created_at',
// order_direction: 'DESC',
// },
// });
// const customers = res.data.data.list.map((el: any, index: number) => ({
// ...el,
// no: pageIndex * pageSize + index + 1,
// date_birth: el.date_birth
// ? new Date(el.date_birth).toLocaleString('sv-SE')
// : null,
// name: el.fullname,
// }));
// return {
// data: customers,
// totalCount: res.data.data.total_count,
// };
// } catch (error: any) {
// toast.error(error.message);
// console.error(error);
// return { data: [], totalCount: 0 };
// } finally {
// setIsReloading(false);
// }
// },
// []
// );
const fetchCustomers = async (
page: number,
limit: number,
sorting: any,
filter: any
) => {
// [ SAMPLE
// {
// "id": "username",
// "value": "d"
// },
// {
// "id": "group_name",
// "value": "Bank"
// },
// {
// "id": "msisdn",
// "value": "88"
// }
// ]
sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
// filter = filter.length ? { any: filter[0].value?.toLowerCase() } : {};
filter = filter.length ? filter : {};
const res = await axios.get(`${BASE_URL}/customer/list`, {
params: {
limit: limit,
page: page + 1, // +1 because your API uses 1-based pages
with_deleted: false,
order_field: 'created_at',
order_direction: 'DESC',
filter: JSON.stringify(filter),
specialFilter: true
},
});
const customers = res.data.data.list.map((el: any, index: number) => ({
...el,
no: page * pageSize + index + 1,
date_birth: el.date_birth
? new Date(el.date_birth).toLocaleString('sv-SE')
: null,
name: el.fullname,
}));
return { data: customers, totalCount: res?.data.data.total_count };
};
async function fetchMasters(): Promise<void> { async function fetchMasters(): Promise<void> {
setIsReloading(true); setIsReloading(true);
@ -123,9 +212,10 @@ const ManageMembers = () => {
setDialogOpen(true); setDialogOpen(true);
} }
const handleReload = () => { const handleReload = async () => {
setIsReloading(true); setIsReloading(true);
fetchCustomers(); await fetchCustomers(currentPage, pageSize, '','');
setIsReloading(false);
}; };
const handleYes = async () => { const handleYes = async () => {
@ -213,7 +303,6 @@ const ManageMembers = () => {
} finally { } finally {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();
await fetchCustomers();
// setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
@ -222,7 +311,6 @@ const ManageMembers = () => {
function setShowAddDialog(el: any) { function setShowAddDialog(el: any) {
setIsDialogOpen(el); setIsDialogOpen(el);
} }
// if (isReloading) return <DataGridLoader />;
return ( return (
<> <>
@ -245,7 +333,7 @@ const ManageMembers = () => {
handleClose={closeDialog} handleClose={closeDialog}
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
initialData={member} initialData={member}
fetchCustomers={fetchCustomers} fetchCustomers={handleReload}
profession={profession} profession={profession}
dialogType={dialogType} dialogType={dialogType}
/> />
@ -265,26 +353,22 @@ const ManageMembers = () => {
<span className="text-sm">Manage Members</span> <span className="text-sm">Manage Members</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
{/* <div className="w-full overflow-x-auto px-4"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<DataGridLoader /> <DataGridLoader />
// <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
// <div className="bg-card flex items-center border shadow-sm rounded-md">
// <div className="flex flex-col items-center">
// <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
// <span className="text-slate-500 font-medium">Refreshing data...</span>
// </div>
// </div>
// </div>
)} )}
<DataGridProvider {!isReloading && (
data={members} <DataGridProvider
pagination={{ size: totalItems }} // data={members}
pagination={{ size: pageSize }}
columns={getColumns(handleUpdate)} columns={getColumns(handleUpdate)}
layout={{ card: true }} layout={{ card: true }}
serverSide={false} serverSide={true}
// onFetchData={fetchCustomers}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
fetchCustomers(pageIndex, pageSize, sorting, columnFilters)
}
toolbar={ toolbar={
<ListToolbar <ListToolbar
createMember={createMember} createMember={createMember}
@ -298,6 +382,7 @@ const ManageMembers = () => {
if (selectedRow) handleUpdate(selectedRow.original); if (selectedRow) handleUpdate(selectedRow.original);
}} }}
></DataGridProvider> ></DataGridProvider>
)}
</div> </div>
{/* </div> */} {/* </div> */}
</Container> </Container>