Add component
This commit is contained in:
281
src/components/Global/TableList.jsx
Normal file
281
src/components/Global/TableList.jsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import React, { memo, useState, useEffect, useRef } from 'react';
|
||||
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
FilterOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
SearchOutlined,
|
||||
FilePdfOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { setFilterData } from './DataFilter';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const defCard = {
|
||||
r1: {
|
||||
style: { fontWeight: 'bold', fontSize: 13 },
|
||||
type: 'primary',
|
||||
color: '',
|
||||
text: 'Cold Work Permit',
|
||||
name: '',
|
||||
},
|
||||
r2: {
|
||||
style: { marginLeft: 8, fontSize: 13 },
|
||||
type: 'primary',
|
||||
color: 'success',
|
||||
text: 'Pengajuan',
|
||||
name: '',
|
||||
},
|
||||
r3: {
|
||||
style: { fontSize: 12 },
|
||||
type: 'secondary',
|
||||
color: '',
|
||||
text: 'No. IVR/20250203/XXV/III',
|
||||
name: '',
|
||||
},
|
||||
r4: {
|
||||
style: { fontSize: 12 },
|
||||
type: 'primary',
|
||||
color: '',
|
||||
text: '3 Feb 2025',
|
||||
name: '',
|
||||
},
|
||||
r5: {
|
||||
style: { fontSize: 12 },
|
||||
type: 'primary',
|
||||
color: '',
|
||||
text: 'Lokasi Gudang Robang',
|
||||
name: '',
|
||||
},
|
||||
r6: {
|
||||
style: { fontSize: 12 },
|
||||
type: 'primary',
|
||||
color: '',
|
||||
text: 'maka tambahkan user tersebut dalam user_partner dengan partner baru yang ditambahkan diatas',
|
||||
name: '',
|
||||
},
|
||||
action: (e) => {},
|
||||
};
|
||||
|
||||
const TableList = memo(function TableList({
|
||||
getData,
|
||||
queryParams,
|
||||
columns,
|
||||
triger,
|
||||
mobile,
|
||||
rowSelection = null,
|
||||
}) {
|
||||
const [gridLoading, setGridLoading] = useState(false);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [pagingResponse, setPagingResponse] = useState({
|
||||
totalData: '',
|
||||
perPage: '',
|
||||
totalPage: '',
|
||||
});
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
useEffect(() => {
|
||||
filter(1, 10);
|
||||
}, [triger]);
|
||||
|
||||
const filter = async (currentPage, pageSize) => {
|
||||
setGridLoading(true);
|
||||
|
||||
const paging = {
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
};
|
||||
|
||||
const param = new URLSearchParams({ ...paging, ...queryParams });
|
||||
|
||||
const resData = await getData(param);
|
||||
if (resData) {
|
||||
setTimeout(() => {
|
||||
setGridLoading(false);
|
||||
}, 900);
|
||||
}
|
||||
|
||||
setData(resData.data.data ?? []);
|
||||
setFilterData(resData.data.data ?? []);
|
||||
|
||||
if (resData.status == 200) {
|
||||
setPagingResponse({
|
||||
totalData: resData.data.total,
|
||||
perPage: resData.data.paging.page_total,
|
||||
totalPage: resData.data.paging.limit,
|
||||
});
|
||||
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current: resData.data.paging.page,
|
||||
limit: resData.data.paging.limit,
|
||||
total: resData.data.paging.total,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaginationChange = (page, pageSize) => {
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current: page,
|
||||
pageSize,
|
||||
}));
|
||||
filter(page, pageSize);
|
||||
};
|
||||
|
||||
const screens = useBreakpoint();
|
||||
|
||||
const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isMobile && mobile ? (
|
||||
<Row gutter={24}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{data.map((item) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
title={
|
||||
(mobile.r1 || mobile.r2) && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{mobile.r1 && (
|
||||
<span style={mobile.r1.style ?? {}}>
|
||||
{item[mobile.r1.name] ?? mobile.r1.text ?? ''}
|
||||
</span>
|
||||
)}
|
||||
{mobile.r2 && (
|
||||
<Tag
|
||||
color={mobile.r2.color ?? ''}
|
||||
style={mobile.r2.style ?? {}}
|
||||
>
|
||||
{item[mobile.r2.name] ?? mobile.r2.text ?? ''}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{mobile.r3 && mobile.r4 && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
type={mobile.r3 ? mobile.r3.type ?? 'primary' : ''}
|
||||
style={mobile.r3 ? mobile.r3.style ?? {} : {}}
|
||||
>
|
||||
{item[mobile.r3 ? mobile.r3.name : ''] ?? ''}
|
||||
</Text>
|
||||
<Text style={mobile.r4 ? mobile.r4.style ?? {} : {}}>
|
||||
{item[mobile.r4 ? mobile.r4.name : ''] ?? ''}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
{mobile.r5 && (
|
||||
<Text
|
||||
type={mobile.r5 ? mobile.r5.type ?? 'secondary' : ''}
|
||||
style={mobile.r5 ? mobile.r5.style ?? {} : {}}
|
||||
>
|
||||
{item[mobile.r5 ? mobile.r5.name : ''] ?? ''}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{mobile.r6 && (
|
||||
<div>
|
||||
<Text
|
||||
type={mobile.r6 ? mobile.r6.type ?? 'primary' : ''}
|
||||
style={mobile.r6 ? mobile.r6.style ?? {} : {}}
|
||||
>
|
||||
{item[mobile.r6 ? mobile.r6.name : ''] ?? ''}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
paddingTop: 8,
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
shape="round"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={(e) => {
|
||||
mobile.action(item);
|
||||
}}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
) : (
|
||||
<Row gutter={24}>
|
||||
{/* TABLE */}
|
||||
<Table
|
||||
rowSelection={rowSelection || null}
|
||||
columns={columns}
|
||||
dataSource={data.map((item, index) => ({ ...item, key: index }))}
|
||||
pagination={false}
|
||||
loading={gridLoading}
|
||||
scroll={{
|
||||
y: 520,
|
||||
x: 1300,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* PAGINATION */}
|
||||
<Col xs={24} style={{ marginTop: '16px' }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<div>
|
||||
Menampilkan {pagingResponse.totalData} Data dari{' '}
|
||||
{pagingResponse.perPage} Halaman
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={handlePaginationChange}
|
||||
onShowSizeChange={handlePaginationChange}
|
||||
current={pagination.current}
|
||||
pageSize={pagination.pageSize}
|
||||
total={pagination.total}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default TableList;
|
||||
Reference in New Issue
Block a user