template card or table in component table list
This commit is contained in:
102
src/components/Global/CardList.jsx
Normal file
102
src/components/Global/CardList.jsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const CardList = ({
|
||||
data,
|
||||
column,
|
||||
header,
|
||||
showPreviewModal,
|
||||
showEditModal,
|
||||
showDeleteDialog,
|
||||
cardColor,
|
||||
}) => {
|
||||
const getCardStyle = () => {
|
||||
const color = cardColor ?? '#F3EDEA'; // Orange color
|
||||
return {
|
||||
border: `2px solid ${color}`,
|
||||
borderRadius: '8px',
|
||||
textAlign: 'center', // Center text
|
||||
};
|
||||
};
|
||||
|
||||
const getTitleStyle = (color) => {
|
||||
const backgroundColor = color ?? '#FCF2ED';
|
||||
return {
|
||||
backgroundColor,
|
||||
color: '#fff',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-block', // ganti inline-block → block
|
||||
width: 'fit-content', // biar lebarnya tetap menyesuaikan teks
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'left' }}>
|
||||
{data.map((item) => (
|
||||
<Col xs={24} sm={24} md={12} lg={8} key={item.device_id}>
|
||||
<Card
|
||||
title={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between', // kiri & kanan
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<span style={getTitleStyle(item.color ?? cardColor)}>
|
||||
{item[header]}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
style={getCardStyle()}
|
||||
actions={[
|
||||
<Space
|
||||
size="middle"
|
||||
style={{ display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: '#1890ff' }}
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => showPreviewModal(item)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: '#faad14' }}
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => showEditModal(item)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(item)}
|
||||
/>
|
||||
</Space>,
|
||||
]}
|
||||
>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
{column.map((itemCard) => (
|
||||
<>
|
||||
{!itemCard.hidden && !itemCard.render && (
|
||||
<p>
|
||||
<Text strong>{itemCard.title}:</Text>{' '}
|
||||
{item[itemCard.key]}
|
||||
</p>
|
||||
)}
|
||||
{itemCard.render && itemCard.render}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardList;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { memo, useState, useEffect, useRef } from 'react';
|
||||
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag } from 'antd';
|
||||
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
FilterOutlined,
|
||||
@@ -8,57 +8,15 @@ import {
|
||||
EyeOutlined,
|
||||
SearchOutlined,
|
||||
FilePdfOutlined,
|
||||
AppstoreOutlined,
|
||||
TableOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { setFilterData } from './DataFilter';
|
||||
import CardDevice from '../../pages/master/device/component/CardDevice';
|
||||
import CardList from './CardList';
|
||||
|
||||
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,
|
||||
@@ -66,6 +24,11 @@ const TableList = memo(function TableList({
|
||||
triger,
|
||||
mobile,
|
||||
rowSelection = null,
|
||||
header = 'name',
|
||||
showPreviewModal,
|
||||
showEditModal,
|
||||
showDeleteDialog,
|
||||
cardColor,
|
||||
}) {
|
||||
const [gridLoading, setGridLoading] = useState(false);
|
||||
|
||||
@@ -82,6 +45,8 @@ const TableList = memo(function TableList({
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const [viewMode, setViewMode] = useState('card');
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -110,16 +75,16 @@ const TableList = memo(function TableList({
|
||||
|
||||
if (resData.status == 200) {
|
||||
setPagingResponse({
|
||||
totalData: resData.data.total,
|
||||
perPage: resData.data.paging.page_total,
|
||||
totalPage: resData.data.paging.limit,
|
||||
totalData: resData.paging.total_limit,
|
||||
perPage: resData.paging.page_total,
|
||||
totalPage: resData.paging.total_page,
|
||||
});
|
||||
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current: resData.data.paging.page,
|
||||
limit: resData.data.paging.limit,
|
||||
total: resData.data.paging.total,
|
||||
current: resData.paging.current_page,
|
||||
limit: resData.paging.current_limit,
|
||||
total: resData.paging.total_limit,
|
||||
}));
|
||||
}
|
||||
};
|
||||
@@ -139,140 +104,55 @@ const TableList = memo(function TableList({
|
||||
|
||||
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>
|
||||
<Segmented
|
||||
options={[
|
||||
{ value: 'card', icon: <AppstoreOutlined /> },
|
||||
{ value: 'table', icon: <TableOutlined /> },
|
||||
]}
|
||||
value={viewMode}
|
||||
onChange={setViewMode}
|
||||
/>
|
||||
{(isMobile && mobile) || viewMode === 'card' ? (
|
||||
<CardList
|
||||
cardColor={cardColor}
|
||||
data={data}
|
||||
column={columns}
|
||||
header={header}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
/>
|
||||
) : (
|
||||
<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,
|
||||
}}
|
||||
scroll={{ y: 520 }}
|
||||
/>
|
||||
|
||||
{/* PAGINATION */}
|
||||
<Col xs={24} style={{ marginTop: '16px' }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<div>
|
||||
Menampilkan {pagingResponse.totalPage} 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>
|
||||
)}
|
||||
{/* PAGINATION */}
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<div>
|
||||
Menampilkan {pagingResponse.totalPage} 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>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user