repair: sparepart brand-device
This commit is contained in:
@@ -20,7 +20,6 @@ const CustomSparepartCard = ({
|
||||
}) => {
|
||||
const [previewModalVisible, setPreviewModalVisible] = useState(false);
|
||||
|
||||
// Construct image source with proper fallback
|
||||
const getImageSrc = () => {
|
||||
if (sparepart.sparepart_foto) {
|
||||
if (sparepart.sparepart_foto.startsWith('http')) {
|
||||
@@ -56,7 +55,6 @@ const CustomSparepartCard = ({
|
||||
const getCardActions = () => {
|
||||
const actions = [];
|
||||
|
||||
// Preview button
|
||||
if (showPreview) {
|
||||
actions.push(
|
||||
<Button
|
||||
@@ -73,7 +71,6 @@ const CustomSparepartCard = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Delete button without confirmation
|
||||
if (showDelete && !isReadOnly) {
|
||||
actions.push(
|
||||
<Button
|
||||
@@ -93,7 +90,6 @@ const CustomSparepartCard = ({
|
||||
return actions;
|
||||
};
|
||||
|
||||
// Get card styling based on size
|
||||
const getCardStyle = () => {
|
||||
const baseStyle = {
|
||||
borderRadius: '12px',
|
||||
@@ -132,11 +128,13 @@ const CustomSparepartCard = ({
|
||||
<Card
|
||||
hoverable={!!onCardClick && !isReadOnly}
|
||||
style={getCardStyle()}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 'calc(100% - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: 'calc(100% - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
}}
|
||||
actions={getCardActions()}
|
||||
onClick={handleCardClick}
|
||||
@@ -244,55 +242,65 @@ const CustomSparepartCard = ({
|
||||
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{size !== 'small' && (
|
||||
<>
|
||||
<Text
|
||||
type="secondary"
|
||||
{/* Stock and Quantity Information */}
|
||||
<div style={{ marginBottom: size === 'small' ? '6px' : '8px' }}>
|
||||
{/* Stock Status Tag */}
|
||||
<div style={{ marginBottom: '4px' }}>
|
||||
<Tag
|
||||
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
fontSize: size === 'small' ? '9px' : '10px',
|
||||
padding: '0 4px',
|
||||
margin: 0,
|
||||
height: 'auto'
|
||||
}}
|
||||
>
|
||||
Stock: {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'} {sparepart.sparepart_unit || 'pcs'}
|
||||
{sparepart.sparepart_stok || 'Not Available'}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
{/* Quantity */}
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
fontWeight: 500,
|
||||
color: '#262626',
|
||||
marginRight: '4px'
|
||||
}}
|
||||
>
|
||||
qty:
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
color: sparepart.sparepart_qty > 0 ? '#52c41a' : '#ff4d4f',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_qty || 0}
|
||||
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ''}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '6px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{size === 'small' && (
|
||||
<div style={{ marginBottom: size === 'small' ? '4px' : '6px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
display: 'block',
|
||||
marginBottom: '4px'
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(sparepart.sparepart_merk || sparepart.sparepart_model) && (
|
||||
<div style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
fontSize: size === 'small' ? '9px' : '10px',
|
||||
color: '#666',
|
||||
lineHeight: '1.4',
|
||||
marginBottom: '4px'
|
||||
@@ -332,23 +340,24 @@ const CustomSparepartCard = ({
|
||||
Close
|
||||
</Button>
|
||||
]}
|
||||
width={700}
|
||||
width={800}
|
||||
centered
|
||||
bodyStyle={{ padding: '24px' }}
|
||||
styles={{ body: { padding: '24px' } }}
|
||||
>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col span={8}>
|
||||
<Col span={10}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
width: '220px',
|
||||
height: '220px',
|
||||
margin: '0 auto 16px',
|
||||
position: 'relative',
|
||||
borderRadius: '8px',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #E0E0E0',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@@ -360,116 +369,138 @@ const CustomSparepartCard = ({
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
|
||||
e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Item Type Tag */}
|
||||
{sparepart.sparepart_item_type && (
|
||||
<Tag color="blue" style={{ marginTop: '12px' }}>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={16}>
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Code:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_code || 'N/A'}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Status:
|
||||
</Text>
|
||||
<Tag
|
||||
color={sparepart.is_active ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '14px' }}
|
||||
>
|
||||
{sparepart.is_active ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{sparepart.sparepart_description && (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Description:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_description}
|
||||
</Text>
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Stock:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_stock || sparepart.sparepart_stok || '0'}
|
||||
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ' units'}
|
||||
</Text>
|
||||
{/* Stock Status and Quantity */}
|
||||
<div style={{
|
||||
textAlign: 'left',
|
||||
background: '#f8f9fa',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
marginTop: '25px'
|
||||
}}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
|
||||
<Tag
|
||||
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '12px' }}
|
||||
>
|
||||
{sparepart.sparepart_stok || 'Not Available'}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
|
||||
{sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={14}>
|
||||
<div>
|
||||
{/* Sparepart Name */}
|
||||
<Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
|
||||
{sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{/* Basic Information */}
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<Row gutter={[16, 12]}>
|
||||
<Col span={24}>
|
||||
<div style={{
|
||||
padding: '12px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #f0f0f0'
|
||||
}}>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_code || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_merk || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_unit || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
{sparepart.sparepart_model && (
|
||||
<Col span={24}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
|
||||
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
|
||||
{sparepart.sparepart_model}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{sparepart.sparepart_description && (
|
||||
<Col span={24}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
|
||||
<div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
|
||||
{sparepart.sparepart_description}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_merk && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Brand:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_merk}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_model && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Model:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_model}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_unit && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Unit:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_unit}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{sparepart.updated_at && (
|
||||
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
|
||||
<Text type="secondary" style={{ fontSize: '14px' }}>
|
||||
Last updated: {dayjs(sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
|
||||
</Text>
|
||||
{/* Timeline Information */}
|
||||
{sparepart.created_at && (
|
||||
<div>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
|
||||
<div style={{ fontSize: '13px', marginTop: '2px' }}>
|
||||
{dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
|
||||
<div style={{ fontSize: '13px', marginTop: '2px' }}>
|
||||
{dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,249 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { getAllSparepart } from '../../../../api/sparepart';
|
||||
import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand';
|
||||
import CustomSparepartCard from './CustomSparepartCard';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
const SparepartCardSelect = ({
|
||||
selectedSparepartIds = [],
|
||||
onSparepartChange,
|
||||
isLoading: externalLoading = false,
|
||||
isReadOnly = false,
|
||||
brandId = null
|
||||
}) => {
|
||||
const [spareparts, setSpareparts] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
loadSpareparts();
|
||||
}, []);
|
||||
|
||||
const loadSpareparts = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', '1000'); // Get all spareparts
|
||||
|
||||
const response = await getAllSparepart(params);
|
||||
if (response && (response.statusCode === 200 || response.data)) {
|
||||
const sparepartData = response.data?.data || response.data || [];
|
||||
setSpareparts(sparepartData);
|
||||
} else {
|
||||
// For demo purposes, use mock data if API fails
|
||||
setSpareparts([
|
||||
{
|
||||
sparepart_id: 1,
|
||||
sparepart_name: 'Compressor Oil Filter',
|
||||
sparepart_description: 'Oil filter for compressor',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-001',
|
||||
sparepart_merk: 'Brand A',
|
||||
sparepart_model: 'Model X'
|
||||
},
|
||||
{
|
||||
sparepart_id: 2,
|
||||
sparepart_name: 'Air Intake Filter',
|
||||
sparepart_description: 'Air intake filter',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-002',
|
||||
sparepart_merk: 'Brand B',
|
||||
sparepart_model: 'Model Y'
|
||||
},
|
||||
{
|
||||
sparepart_id: 3,
|
||||
sparepart_name: 'Cooling Fan Motor',
|
||||
sparepart_description: 'Motor for cooling fan',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-003',
|
||||
sparepart_merk: 'Brand C',
|
||||
sparepart_model: 'Model Z'
|
||||
},
|
||||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
// Default mock data
|
||||
setSpareparts([
|
||||
{
|
||||
sparepart_id: 1,
|
||||
sparepart_name: 'Compressor Oil Filter',
|
||||
sparepart_description: 'Oil filter for compressor',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-001',
|
||||
sparepart_merk: 'Brand A',
|
||||
sparepart_model: 'Model X'
|
||||
},
|
||||
{
|
||||
sparepart_id: 2,
|
||||
sparepart_name: 'Air Intake Filter',
|
||||
sparepart_description: 'Air intake filter',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-002',
|
||||
sparepart_merk: 'Brand B',
|
||||
sparepart_model: 'Model Y'
|
||||
},
|
||||
{
|
||||
sparepart_id: 3,
|
||||
sparepart_name: 'Cooling Fan Motor',
|
||||
sparepart_description: 'Motor for cooling fan',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-003',
|
||||
sparepart_merk: 'Brand C',
|
||||
sparepart_model: 'Model Z'
|
||||
},
|
||||
]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredSpareparts = spareparts.filter(sp =>
|
||||
sp.sparepart_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
sp.sparepart_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
sp.sparepart_merk?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
sp.sparepart_model?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const handleSparepartToggle = async (sparepartId) => {
|
||||
if (isReadOnly) return;
|
||||
|
||||
const isCurrentlySelected = selectedSparepartIds.includes(sparepartId);
|
||||
|
||||
// If brandId is provided, save immediately to database
|
||||
if (brandId) {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (isCurrentlySelected) {
|
||||
// Remove from database
|
||||
await removeSparepartFromBrand(brandId, sparepartId);
|
||||
message.success('Sparepart removed from brand successfully');
|
||||
} else {
|
||||
// Add to database
|
||||
await addSparepartToBrand(brandId, sparepartId);
|
||||
message.success('Sparepart added to brand successfully');
|
||||
}
|
||||
|
||||
// Update local state
|
||||
const newSelectedIds = isCurrentlySelected
|
||||
? selectedSparepartIds.filter(id => id !== sparepartId)
|
||||
: [...selectedSparepartIds, sparepartId];
|
||||
|
||||
onSparepartChange(newSelectedIds);
|
||||
} catch (error) {
|
||||
message.error(error.message || 'Failed to update sparepart');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
// If no brandId (add mode), just update local state
|
||||
const newSelectedIds = isCurrentlySelected
|
||||
? selectedSparepartIds.filter(id => id !== sparepartId)
|
||||
: [...selectedSparepartIds, sparepartId];
|
||||
|
||||
onSparepartChange(newSelectedIds);
|
||||
}
|
||||
};
|
||||
|
||||
const isSelected = (sparepartId) => selectedSparepartIds.includes(sparepartId);
|
||||
|
||||
const combinedLoading = loading || externalLoading;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Space style={{ width: '100%', justifyContent: 'space-between' }}>
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Select Spareparts
|
||||
</Title>
|
||||
<div style={{ position: 'relative', width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search spareparts..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{
|
||||
padding: '8px 30px 8px 12px',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: '6px',
|
||||
width: '100%'
|
||||
}}
|
||||
/>
|
||||
<SearchOutlined
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
color: '#bfbfbf'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{combinedLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : filteredSpareparts.length === 0 ? (
|
||||
<Empty
|
||||
description="No spareparts found"
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
/>
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{filteredSpareparts.map(sparepart => (
|
||||
<Col xs={24} sm={12} md={12} lg={12} key={sparepart.sparepart_id}>
|
||||
<CustomSparepartCard
|
||||
sparepart={sparepart}
|
||||
isSelected={isSelected(sparepart.sparepart_id)}
|
||||
isReadOnly={isReadOnly}
|
||||
showPreview={true}
|
||||
showDelete={true}
|
||||
onCardClick={() => handleSparepartToggle(sparepart.sparepart_id)}
|
||||
onDelete={() => {
|
||||
// When delete button is clicked, remove from selection
|
||||
const newSelectedIds = selectedSparepartIds.filter(id => id !== sparepart.sparepart_id);
|
||||
onSparepartChange(newSelectedIds);
|
||||
|
||||
// Also remove from database if brandId exists
|
||||
if (brandId) {
|
||||
removeSparepartFromBrand(brandId, sparepart.sparepart_id)
|
||||
.then(() => message.success('Sparepart removed successfully'))
|
||||
.catch(error => message.error(error.message || 'Failed to remove sparepart'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{selectedSparepartIds.length > 0 && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text strong>Selected Spareparts: </Text>
|
||||
<Space wrap>
|
||||
{selectedSparepartIds.map(id => {
|
||||
const sparepart = spareparts.find(sp => sp.sparepart_id === id);
|
||||
return sparepart ? (
|
||||
<Tag key={id} color="green">
|
||||
{sparepart.sparepart_name} (ID: {id})
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag key={id} color="green">
|
||||
Sparepart ID: {id}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SparepartCardSelect;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Divider, Typography } from 'antd';
|
||||
import SparepartCardSelect from './SparepartCardSelect';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const SparepartForm = ({
|
||||
sparepartForm,
|
||||
selectedSparepartIds,
|
||||
onSparepartChange,
|
||||
isReadOnly = false
|
||||
}) => {
|
||||
return (
|
||||
<div style={{ minHeight: '400px' }}>
|
||||
<Card title="Spareparts" style={{ minHeight: '100%' }}>
|
||||
<SparepartCardSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={onSparepartChange}
|
||||
isReadOnly={isReadOnly}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SparepartForm;
|
||||
@@ -7,7 +7,7 @@ import CustomSparepartCard from './CustomSparepartCard';
|
||||
const { Text, Title } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
const SingleSparepartSelect = ({
|
||||
const SparepartSelect = ({
|
||||
selectedSparepartIds = [],
|
||||
onSparepartChange,
|
||||
isReadOnly = false
|
||||
@@ -32,45 +32,25 @@ const SingleSparepartSelect = ({
|
||||
}
|
||||
}, [selectedSparepartIds, spareparts]);
|
||||
|
||||
const fetchSpareparts = async () => {
|
||||
const fetchSpareparts = async (searchQuery = '') => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', '1000');
|
||||
|
||||
if (searchQuery && searchQuery.trim() !== '') {
|
||||
params.set('criteria', searchQuery.trim());
|
||||
}
|
||||
|
||||
const response = await getAllSparepart(params);
|
||||
if (response && (response.statusCode === 200 || response.data)) {
|
||||
const sparepartData = response.data?.data || response.data || [];
|
||||
setSpareparts(sparepartData);
|
||||
} else {
|
||||
setSpareparts([
|
||||
{
|
||||
sparepart_id: 1,
|
||||
sparepart_name: 'Compressor Oil Filter',
|
||||
sparepart_description: 'Oil filter for compressor',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-001',
|
||||
sparepart_merk: 'Brand A',
|
||||
sparepart_model: 'Model X',
|
||||
is_active: true,
|
||||
stock_quantity: 50
|
||||
}
|
||||
]);
|
||||
setSpareparts([]);
|
||||
}
|
||||
} catch (error) {
|
||||
setSpareparts([
|
||||
{
|
||||
sparepart_id: 1,
|
||||
sparepart_name: 'Compressor Oil Filter',
|
||||
sparepart_description: 'Oil filter for compressor',
|
||||
sparepart_foto: null,
|
||||
sparepart_code: 'SP-001',
|
||||
sparepart_merk: 'Brand A',
|
||||
sparepart_model: 'Model X',
|
||||
is_active: true,
|
||||
stock_quantity: 50
|
||||
}
|
||||
]);
|
||||
setSpareparts([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -93,6 +73,17 @@ const SingleSparepartSelect = ({
|
||||
setDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleSearch = (value) => {
|
||||
fetchSpareparts(value);
|
||||
};
|
||||
|
||||
const onDropdownOpenChange = (open) => {
|
||||
setDropdownOpen(open);
|
||||
if (open) {
|
||||
fetchSpareparts();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveSparepart = (sparepartId) => {
|
||||
const newSelectedSpareparts = selectedSpareparts.filter(sp => sp.sparepart_id !== sparepartId);
|
||||
setSelectedSpareparts(newSelectedSpareparts);
|
||||
@@ -111,7 +102,7 @@ const SingleSparepartSelect = ({
|
||||
isSelected={isSelected}
|
||||
isReadOnly={isReadOnly}
|
||||
showPreview={true}
|
||||
showDelete={isAlreadySelected && !isReadOnly} // Show delete only for already selected items
|
||||
showDelete={isAlreadySelected && !isReadOnly}
|
||||
onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
|
||||
onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
|
||||
style={{
|
||||
@@ -124,26 +115,34 @@ const SingleSparepartSelect = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{!isReadOnly && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Select
|
||||
placeholder="Search and select sparepart..."
|
||||
style={{ width: '100%' }}
|
||||
loading={loading}
|
||||
onSelect={handleSparepartSelect}
|
||||
value={null}
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
open={dropdownOpen}
|
||||
onDropdownVisibleChange={setDropdownOpen}
|
||||
suffixIcon={<PlusOutlined />}
|
||||
>
|
||||
{spareparts
|
||||
.filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
|
||||
.map((sparepart) => (
|
||||
{/* Fixed Search Section */}
|
||||
{!isReadOnly && (
|
||||
<div style={{
|
||||
marginBottom: 16,
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'white',
|
||||
padding: '8px 0',
|
||||
borderBottom: '1px solid #f0f0f0'
|
||||
}}>
|
||||
<Select
|
||||
placeholder="search and select sparepart"
|
||||
style={{ width: '100%' }}
|
||||
loading={loading}
|
||||
onSelect={handleSparepartSelect}
|
||||
value={null}
|
||||
showSearch
|
||||
onSearch={handleSearch}
|
||||
filterOption={false}
|
||||
open={dropdownOpen}
|
||||
onOpenChange={onDropdownOpenChange}
|
||||
suffixIcon={<PlusOutlined />}
|
||||
>
|
||||
{spareparts
|
||||
.filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
|
||||
.slice(0, 5)
|
||||
.map((sparepart) => (
|
||||
<Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
|
||||
<div>
|
||||
<Text strong>{sparepart.sparepart_name || sparepart.name || 'Unnamed'}</Text>
|
||||
@@ -153,31 +152,31 @@ const SingleSparepartSelect = ({
|
||||
</div>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
{selectedSpareparts.length > 0 ? (
|
||||
<div>
|
||||
<Title level={5} style={{ marginBottom: 16 }}>
|
||||
Selected Spareparts ({selectedSpareparts.length})
|
||||
</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
|
||||
</Row>
|
||||
</div>
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description="No spareparts selected"
|
||||
style={{ margin: '20px 0' }}
|
||||
/>
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scrollable Selected Items Section */}
|
||||
<div>
|
||||
{selectedSpareparts.length > 0 ? (
|
||||
<div>
|
||||
<Title level={5} style={{ marginBottom: 16 }}>
|
||||
Selected Spareparts ({selectedSpareparts.length})
|
||||
</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
|
||||
</Row>
|
||||
</div>
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description="No spareparts selected"
|
||||
style={{ margin: '20px 0' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleSparepartSelect;
|
||||
export default SparepartSelect;
|
||||
Reference in New Issue
Block a user