ssr member
This commit is contained in:
unknown
@ -1,7 +1,7 @@
|
||||
import { DataTable } from '@/components/ui/DataTable';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { getColumns, Members, initialMember } from './Columns';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import axios from 'axios';
|
||||
import DetailMember from './blocks/DetailMember';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
@ -29,7 +29,7 @@ const ManageMembers = () => {
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [totalItems, setTotalItems] = useState(10);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const closeDialog = () => {
|
||||
setIsDialogOpen(false);
|
||||
@ -38,40 +38,129 @@ const ManageMembers = () => {
|
||||
const { getUser } = useAuthContext();
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomers();
|
||||
// fetchCustomers();
|
||||
fetchMasters();
|
||||
}, []);
|
||||
|
||||
async function fetchCustomers(): Promise<void> {
|
||||
setIsReloading(true);
|
||||
try {
|
||||
let customers = await axios.get(`${BASE_URL}/customer/list`, {
|
||||
// async function fetchCustomers(): Promise<any> {
|
||||
// setIsReloading(true);
|
||||
// try {
|
||||
// let customers = await axios.get(`${BASE_URL}/customer/list`, {
|
||||
// params: {
|
||||
// limit: pageSize,
|
||||
// page: 1 + currentPage,
|
||||
// with_deleted: false,
|
||||
// order_field: 'created_at',
|
||||
// order_direction: 'DESC'
|
||||
// }
|
||||
// });
|
||||
// let temp = 1;
|
||||
// let resMembers = customers.data.data.list.map((el: any) => {
|
||||
// el.no = temp++;
|
||||
// if (el.date_birth) {
|
||||
// const d = new Date(el.date_birth);
|
||||
// el.date_birth = d.toLocaleString('sv-SE');
|
||||
// }
|
||||
// el.name = el.fullname;
|
||||
// return el;
|
||||
// });
|
||||
// setMembers(resMembers);
|
||||
// return {
|
||||
// data: resMembers,
|
||||
// totalCount: customers.data.data.total_count,
|
||||
// }
|
||||
// } 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: 30,
|
||||
page: 1 + currentPage,
|
||||
limit: limit,
|
||||
page: page + 1, // +1 because your API uses 1-based pages
|
||||
with_deleted: false,
|
||||
order_field: 'created_at',
|
||||
order_direction: 'DESC'
|
||||
}
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(filter),
|
||||
specialFilter: true
|
||||
},
|
||||
});
|
||||
let temp = 1;
|
||||
let resMembers = customers.data.data.list.map((el: any) => {
|
||||
el.no = temp++;
|
||||
if (el.date_birth) {
|
||||
const d = new Date(el.date_birth);
|
||||
el.date_birth = d.toLocaleString('sv-SE');
|
||||
}
|
||||
el.name = el.fullname;
|
||||
return el;
|
||||
});
|
||||
setMembers(resMembers);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsReloading(false);
|
||||
}
|
||||
}
|
||||
|
||||
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> {
|
||||
setIsReloading(true);
|
||||
@ -123,9 +212,10 @@ const ManageMembers = () => {
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
const handleReload = () => {
|
||||
const handleReload = async () => {
|
||||
setIsReloading(true);
|
||||
fetchCustomers();
|
||||
await fetchCustomers(currentPage, pageSize, '','');
|
||||
setIsReloading(false);
|
||||
};
|
||||
|
||||
const handleYes = async () => {
|
||||
@ -213,7 +303,6 @@ const ManageMembers = () => {
|
||||
} finally {
|
||||
setDialogOpen(false);
|
||||
closeDialog();
|
||||
await fetchCustomers();
|
||||
// setLoading(false);
|
||||
setIsReloading(false);
|
||||
}
|
||||
@ -222,7 +311,6 @@ const ManageMembers = () => {
|
||||
function setShowAddDialog(el: any) {
|
||||
setIsDialogOpen(el);
|
||||
}
|
||||
// if (isReloading) return <DataGridLoader />;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -245,7 +333,7 @@ const ManageMembers = () => {
|
||||
handleClose={closeDialog}
|
||||
handleSubmit={handleSubmit}
|
||||
initialData={member}
|
||||
fetchCustomers={fetchCustomers}
|
||||
fetchCustomers={handleReload}
|
||||
profession={profession}
|
||||
dialogType={dialogType}
|
||||
/>
|
||||
@ -265,26 +353,22 @@ const ManageMembers = () => {
|
||||
<span className="text-sm">Manage Members</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
{/* <div className="w-full overflow-x-auto px-4"> */}
|
||||
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
|
||||
{isReloading && (
|
||||
<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>
|
||||
)}
|
||||
{!isReloading && (
|
||||
<DataGridProvider
|
||||
data={members}
|
||||
pagination={{ size: totalItems }}
|
||||
// data={members}
|
||||
pagination={{ size: pageSize }}
|
||||
columns={getColumns(handleUpdate)}
|
||||
layout={{ card: true }}
|
||||
serverSide={false}
|
||||
serverSide={true}
|
||||
// onFetchData={fetchCustomers}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
fetchCustomers(pageIndex, pageSize, sorting, columnFilters)
|
||||
}
|
||||
toolbar={
|
||||
<ListToolbar
|
||||
createMember={createMember}
|
||||
@ -298,6 +382,7 @@ const ManageMembers = () => {
|
||||
if (selectedRow) handleUpdate(selectedRow.original);
|
||||
}}
|
||||
></DataGridProvider>
|
||||
)}
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user