repair: sparepart brand-device

2025-12-12 12:43:14 +07:00
parent 13255f9713
commit 9e8191f8f8
4 changed files with 249 additions and 494 deletions
--- a/src/pages/master/brandDevice/component/SparepartSelect.jsx
+++ b/src/pages/master/brandDevice/component/SparepartSelect.jsx
@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import { Select, Typography, Tag, Spin, Empty, Button, Row, Col } from 'antd';
+import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { getAllSparepart } from '../../../../api/sparepart';
+import CustomSparepartCard from './CustomSparepartCard';
+
+const { Text, Title } = Typography;
+const { Option } = Select;
+
+const SparepartSelect = ({
+    selectedSparepartIds = [],
+    onSparepartChange,
+    isReadOnly = false
+}) => {
+    const [spareparts, setSpareparts] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedSpareparts, setSelectedSpareparts] = useState([]);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+
+    useEffect(() => {
+        fetchSpareparts();
+    }, []);
+
+    useEffect(() => {
+        if (selectedSparepartIds && selectedSparepartIds.length > 0) {
+            const fullSelectedSpareparts = spareparts.filter(sp =>
+                selectedSparepartIds.includes(sp.sparepart_id)
+            );
+            setSelectedSpareparts(fullSelectedSpareparts);
+        } else {
+            setSelectedSpareparts([]);
+        }
+    }, [selectedSparepartIds, spareparts]);
+
+    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([]);
+            }
+        } catch (error) {
+            setSpareparts([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSparepartSelect = (sparepartId) => {
+        const selectedSparepart = spareparts.find(sp => sp.sparepart_id === sparepartId);
+
+        if (selectedSparepart) {
+            const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepartId);
+
+            if (!isAlreadySelected) {
+                const newSelectedSpareparts = [...selectedSpareparts, selectedSparepart];
+                setSelectedSpareparts(newSelectedSpareparts);
+
+                const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
+                onSparepartChange(newSelectedIds);
+            }
+        }
+        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);
+
+        const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
+        onSparepartChange(newSelectedIds);
+    };
+
+    const renderSparepartCard = (sparepart, isSelected = false) => {
+        const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
+
+        return (
+            <Col xs={24} sm={24} md={12} lg={12} key={sparepart.sparepart_id}>
+                <CustomSparepartCard
+                    sparepart={sparepart}
+                    isSelected={isSelected}
+                    isReadOnly={isReadOnly}
+                    showPreview={true}
+                    showDelete={isAlreadySelected && !isReadOnly}
+                    onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
+                    onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
+                    style={{
+                        border: isAlreadySelected ? '2px solid #52c41a' : undefined,
+                    }}
+                />
+            </Col>
+        );
+    };
+
+    return (
+        <>
+            {/* 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>
+                                        <Text type="secondary" style={{ marginLeft: 8 }}>
+                                            ({sparepart.sparepart_code || 'No code'})
+                                        </Text>
+                                    </div>
+                                </Option>
+                            ))}
+                    </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 SparepartSelect;