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

feat: add custom card component for sparepart display in ListSparepart

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-11-25 16:49:46 +07:00
parent 7e5105392c
commit 309d191bce
3 changed files with 130 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Global/TableList.jsx
View File

@@ -20,6 +20,7 @@ const TableList = memo(function TableList({
fieldColor, fieldColor,
firstLoad = true, firstLoad = true,
columnDynamic = false, columnDynamic = false,
cardComponent, // New prop for custom card component
}) { }) {
const [gridLoading, setGridLoading] = useState(false); const [gridLoading, setGridLoading] = useState(false);
@@ -142,6 +143,9 @@ const TableList = memo(function TableList({
const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
// Use the custom card component if provided, otherwise default to CardList
const CardViewComponent = cardComponent || CardList;
return ( return (
<div> <div>
<Segmented <Segmented
@@ -153,7 +157,7 @@ const TableList = memo(function TableList({
onChange={setViewMode} onChange={setViewMode}
/> />
{(isMobile && mobile) || viewMode === 'card' ? ( {(isMobile && mobile) || viewMode === 'card' ? (
<CardList <CardViewComponent
cardColor={cardColor} cardColor={cardColor}
fieldColor={fieldColor} fieldColor={fieldColor}
data={data} data={data}
@@ -200,3 +204,4 @@ const TableList = memo(function TableList({
}); });
export default TableList; export default TableList;

2
src/pages/master/sparepart/component/ListSparepart.jsx
View File

@@ -13,6 +13,7 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { deleteSparepart, getAllSparepart } from '../../../../api/sparepart'; import { deleteSparepart, getAllSparepart } from '../../../../api/sparepart';
import TableList from '../../../../components/Global/TableList'; import TableList from '../../../../components/Global/TableList';
import SparepartCardList from './SparepartCardList'; // Import the new custom card component
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{ {
@@ -265,6 +266,7 @@ const ListSparepart = memo(function ListSparepart(props) {
queryParams={formDataFilter} queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)} columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter} triger={trigerFilter}
cardComponent={SparepartCardList} // Pass the custom component here
/> />
</Col> </Col>
</Row> </Row>

122
src/pages/master/sparepart/component/SparepartCardList.jsx Normal file
View File

@@ -0,0 +1,122 @@
import React from 'react';
import { Card, Button, Row, Col, Typography, Divider, Tag } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
const { Text, Title } = Typography;
const SparepartCardList = ({
data,
header,
showPreviewModal, // Keep prop in case it's needed elsewhere, but icon is removed
showEditModal,
showDeleteDialog,
fieldColor,
cardColor
}) => {
return (
<Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
{data.map((item) => (
<Col xs={24} sm={12} md={8} lg={6} key={item.sparepart_id || item.key}>
<Card
style={{
borderRadius: '8px',
overflow: 'hidden',
border: `1px solid ${fieldColor ? item[fieldColor] : cardColor || '#E0E0E0'}`,
}}
bodyStyle={{ padding: 0 }}
>
<Row>
<Col span={8}>
<div
style={{
position: 'relative',
backgroundColor: '#f0f0f0',
width: '100%',
height: '100%',
}}
>
{item.sparepart_item_type && (
<Tag
color="blue"
style={{
position: 'absolute',
top: '8px',
left: '8px',
zIndex: 1,
}}
>
{item.sparepart_item_type}
</Tag>
)}
<div style={{ paddingTop: '30px', height: '100%', boxSizing: 'border-box' }}>
<img
src={item.image_url || "https://via.placeholder.com/150"}
alt={item[header]}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/>
</div>
</div>
</Col>
<Col span={16}>
<div style={{ padding: '16px', position: 'relative', height: '100%' }}>
<div
style={{
position: 'absolute',
top: 8,
right: 8,
display: 'flex',
gap: '8px'
}}
>
{showEditModal && (
<Button
icon={<EditOutlined />}
key="edit"
onClick={() => showEditModal(item)}
size="small"
/>
)}
{showDeleteDialog && (
<Button
icon={<DeleteOutlined />}
key="delete"
onClick={() => showDeleteDialog(item)}
size="small"
danger
/>
)}
</div>
<Title level={5} style={{ margin: 0, marginBottom: '8px', paddingRight: '60px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{item[header]}
</Title>
<Text type="secondary">
Available: {item.sparepart_stok || '0'}
</Text>
<Divider style={{ margin: '8px 0' }} />
<Button
type="primary"
size="small"
style={{ marginBottom: '8px' }}
onClick={() => showEditModal(item)}
>
Update Stock
</Button>
<br />
<Text type="secondary" style={{ fontSize: '12px' }}>
Last updated: {item.updated_at || 'N/A'}
</Text>
</div>
</Col>
</Row>
</Card>
</Col>
))}
</Row>
);
};
export default SparepartCardList;