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

feat: integrate sparepart management into AddBrandDevice and EditBrandDevice components

Browse Source
This commit is contained in:
vinix
2025-11-24 21:25:24 +07:00
parent b05e3fe5d9
commit 3e384f89b1
5 changed files with 440 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/master/brandDevice/AddBrandDevice.jsx
View File

@@ -22,7 +22,9 @@ import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
import ErrorCodeListModal from './component/ErrorCodeListModal'; import ErrorCodeListModal from './component/ErrorCodeListModal';
import FormActions from './component/FormActions'; import FormActions from './component/FormActions';
import SolutionForm from './component/SolutionForm'; import SolutionForm from './component/SolutionForm';
import SparepartForm from './component/SparepartForm';
import { useSolutionLogic } from './hooks/solution'; import { useSolutionLogic } from './hooks/solution';
import { useSparepartLogic } from './hooks/sparepart';
import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads'; import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'; import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
@@ -44,6 +46,7 @@ const AddBrandDevice = () => {
const [brandForm] = Form.useForm(); const [brandForm] = Form.useForm();
const [errorCodeForm] = Form.useForm(); const [errorCodeForm] = Form.useForm();
const [solutionForm] = Form.useForm(); const [solutionForm] = Form.useForm();
const [sparepartForm] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [currentStep, setCurrentStep] = useState(0); const [currentStep, setCurrentStep] = useState(0);
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
@@ -70,6 +73,20 @@ const AddBrandDevice = () => {
setSolutionsForExistingRecord, setSolutionsForExistingRecord,
} = useSolutionLogic(solutionForm); } = useSolutionLogic(solutionForm);
const {
sparepartFields,
sparepartTypes,
sparepartStatuses,
sparepartsToDelete,
handleAddSparepartField,
handleRemoveSparepartField,
handleSparepartTypeChange,
handleSparepartStatusChange,
resetSparepartFields,
getSparepartData,
setSparepartsForExistingRecord,
} = useSparepartLogic(sparepartForm);
useEffect(() => { useEffect(() => {
setBreadcrumbItems([ setBreadcrumbItems([
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> }, { title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> },
@@ -138,13 +155,14 @@ const AddBrandDevice = () => {
path_solution: sol.path_solution || '', path_solution: sol.path_solution || '',
is_active: sol.is_active !== false, is_active: sol.is_active !== false,
})), })),
// Note: Sparepart data is collected but not sent to backend yet ...(ec.sparepart && ec.sparepart.length > 0 && {
// sparepart: (ec.sparepart || []).map((sp) => ({ sparepart: ec.sparepart.map((sp) => ({
// type: sp.type || 'required', sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
// name: sp.name || '', brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.sparepart_description || '',
// quantity: sp.quantity || 1, is_active: sp.is_active !== false,
// is_active: sp.is_active !== false, path_foto: sp.path_foto || '',
// })), })),
}),
})); }));
const finalFormData = { const finalFormData = {
@@ -202,6 +220,10 @@ const AddBrandDevice = () => {
if (record.solution && record.solution.length > 0) { if (record.solution && record.solution.length > 0) {
setSolutionsForExistingRecord(record.solution, solutionForm); setSolutionsForExistingRecord(record.solution, solutionForm);
} }
if (record.sparepart && record.sparepart.length > 0) {
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
}
}; };
const handleEditErrorCode = (record) => { const handleEditErrorCode = (record) => {
@@ -260,6 +282,7 @@ const AddBrandDevice = () => {
return; return;
} }
const sparepartData = getSparepartData();
const newErrorCode = { const newErrorCode = {
key: Date.now(), key: Date.now(),
error_code: formValues.error_code, error_code: formValues.error_code,
@@ -270,6 +293,7 @@ const AddBrandDevice = () => {
status: formValues.status !== false, status: formValues.status !== false,
errorCodeIcon: errorCodeIcon, errorCodeIcon: errorCodeIcon,
solution: solutions, solution: solutions,
...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }), // Only add sparepart if there are spareparts
}; };
if (editingErrorCodeKey) { if (editingErrorCodeKey) {
@@ -315,6 +339,7 @@ const AddBrandDevice = () => {
setFileList([]); setFileList([]);
setErrorCodeIcon(null); setErrorCodeIcon(null);
resetSolutionFields(); resetSolutionFields();
resetSparepartFields();
setIsErrorCodeFormReadOnly(false); setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(null); setEditingErrorCodeKey(null);
}; };
@@ -439,7 +464,7 @@ const AddBrandDevice = () => {
<> <>
<Row gutter={16} style={{ marginBottom: 24 }}> <Row gutter={16} style={{ marginBottom: 24 }}>
{/* Error Code Form Column */} {/* Error Code Form Column */}
<Col span={6}> <Col span={8}>
<Card size="small" title="Error Code"> <Card size="small" title="Error Code">
<Form <Form
form={errorCodeForm} form={errorCodeForm}
@@ -492,8 +517,29 @@ const AddBrandDevice = () => {
</Card> </Card>
</Col> </Col>
{/* Sparepart Form Column */}
<Col span={8}>
<Card size="small" title="Spareparts">
<Form
form={sparepartForm}
layout="vertical"
initialValues={{
sparepart_status_0: true,
}}
>
<SparepartForm
sparepartForm={sparepartForm}
sparepartFields={sparepartFields}
onAddSparepartField={handleAddSparepartField}
onRemoveSparepartField={handleRemoveSparepartField}
isReadOnly={isErrorCodeFormReadOnly}
/>
</Form>
</Card>
</Col>
{/* Error Codes Table Column */} {/* Error Codes Table Column */}
<Col span={10}> <Col span={24} style={{ marginTop: 16 }}>
<Card size="small" title={`Error Codes (${errorCodes.length})`}> <Card size="small" title={`Error Codes (${errorCodes.length})`}>
<Table <Table
dataSource={errorCodes} dataSource={errorCodes}

80
src/pages/master/brandDevice/EditBrandDevice.jsx
View File

@@ -23,10 +23,12 @@ import { getFileUrl } from '../../../api/file-uploads';
import BrandForm from './component/BrandForm'; import BrandForm from './component/BrandForm';
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm'; import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
import SolutionForm from './component/SolutionForm'; import SolutionForm from './component/SolutionForm';
import SparepartForm from './component/SparepartForm';
import ErrorCodeListModal from './component/ErrorCodeListModal'; import ErrorCodeListModal from './component/ErrorCodeListModal';
import FormActions from './component/FormActions'; import FormActions from './component/FormActions';
import { useErrorCodeLogic } from './hooks/errorCode'; import { useErrorCodeLogic } from './hooks/errorCode';
import { useSolutionLogic } from './hooks/solution'; import { useSolutionLogic } from './hooks/solution';
import { useSparepartLogic } from './hooks/sparepart';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'; import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
const { Title } = Typography; const { Title } = Typography;
@@ -58,6 +60,7 @@ const EditBrandDevice = () => {
const [errorCodes, setErrorCodes] = useState([]); const [errorCodes, setErrorCodes] = useState([]);
const [errorCodeIcon, setErrorCodeIcon] = useState(null); const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [solutionForm] = Form.useForm(); const [solutionForm] = Form.useForm();
const [sparepartForm] = Form.useForm();
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic( const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
errorCodeForm, errorCodeForm,
@@ -77,6 +80,20 @@ const EditBrandDevice = () => {
setSolutionsForExistingRecord, setSolutionsForExistingRecord,
} = useSolutionLogic(solutionForm); } = useSolutionLogic(solutionForm);
const {
sparepartFields,
sparepartTypes,
sparepartStatuses,
sparepartsToDelete,
handleAddSparepartField,
handleRemoveSparepartField,
handleSparepartTypeChange,
handleSparepartStatusChange,
resetSparepartFields,
getSparepartData,
setSparepartsForExistingRecord,
} = useSparepartLogic(sparepartForm);
useEffect(() => { useEffect(() => {
const fetchBrandData = async () => { const fetchBrandData = async () => {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
@@ -139,6 +156,7 @@ const EditBrandDevice = () => {
path_icon: ec.path_icon || '', path_icon: ec.path_icon || '',
status: ec.is_active, status: ec.is_active,
solution: ec.solution || [], solution: ec.solution || [],
sparepart: ec.sparepart || [],
errorCodeIcon: ec.path_icon errorCodeIcon: ec.path_icon
? { ? {
name: 'icon', name: 'icon',
@@ -226,6 +244,12 @@ const EditBrandDevice = () => {
path_solution: sol.path_solution || '', path_solution: sol.path_solution || '',
is_active: sol.is_active !== false, is_active: sol.is_active !== false,
})), })),
sparepart: (ec.sparepart || []).map((sp) => ({
sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.brand_sparepart_description || '',
is_active: sp.is_active !== false,
path_foto: sp.path_foto || '',
})),
}; };
} }
@@ -244,6 +268,14 @@ const EditBrandDevice = () => {
path_solution: sol.path_solution || '', path_solution: sol.path_solution || '',
is_active: sol.is_active !== false, is_active: sol.is_active !== false,
})), })),
...(ec.sparepart && ec.sparepart.length > 0 && {
sparepart: ec.sparepart.map((sp) => ({
sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.brand_sparepart_description || '',
is_active: sp.is_active !== false,
path_foto: sp.path_foto || '',
})),
}),
}; };
}), }),
}; };
@@ -294,6 +326,13 @@ const EditBrandDevice = () => {
} else { } else {
resetSolutionFields(); resetSolutionFields();
} }
// Load spareparts to sparepart form
if (record.sparepart && record.sparepart.length > 0) {
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
} else {
resetSparepartFields();
}
}; };
const handleEditErrorCode = (record) => { const handleEditErrorCode = (record) => {
@@ -313,6 +352,11 @@ const EditBrandDevice = () => {
setSolutionsForExistingRecord(record.solution, solutionForm); setSolutionsForExistingRecord(record.solution, solutionForm);
} }
// Load spareparts to sparepart form
if (record.sparepart && record.sparepart.length > 0) {
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
}
const formElement = document.querySelector('.ant-form'); const formElement = document.querySelector('.ant-form');
if (formElement) { if (formElement) {
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -336,6 +380,9 @@ const EditBrandDevice = () => {
return; return;
} }
// Get sparepart data from sparepart form
const sparepartData = getSparepartData();
// Create complete error code object // Create complete error code object
const newErrorCode = { const newErrorCode = {
error_code: errorCodeValues.error_code, error_code: errorCodeValues.error_code,
@@ -345,6 +392,7 @@ const EditBrandDevice = () => {
path_icon: errorCodeIcon?.uploadPath || '', path_icon: errorCodeIcon?.uploadPath || '',
status: errorCodeValues.status === undefined ? true : errorCodeValues.status, status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
solution: solutionData, solution: solutionData,
...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }),
errorCodeIcon: errorCodeIcon, errorCodeIcon: errorCodeIcon,
key: editingErrorCodeKey || `temp-${Date.now()}`, key: editingErrorCodeKey || `temp-${Date.now()}`,
}; };
@@ -402,6 +450,7 @@ const EditBrandDevice = () => {
setFileList([]); setFileList([]);
setErrorCodeIcon(null); setErrorCodeIcon(null);
resetSolutionFields(); resetSolutionFields();
resetSparepartFields();
setIsErrorCodeFormReadOnly(false); setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(null); setEditingErrorCodeKey(null);
}; };
@@ -428,6 +477,7 @@ const EditBrandDevice = () => {
const handleCreateNewErrorCode = () => { const handleCreateNewErrorCode = () => {
resetErrorCodeForm(); resetErrorCodeForm();
resetSolutionFields(); resetSolutionFields();
resetSparepartFields();
setErrorCodeIcon(null); setErrorCodeIcon(null);
setIsErrorCodeFormReadOnly(false); setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(null); setEditingErrorCodeKey(null);
@@ -496,7 +546,7 @@ const EditBrandDevice = () => {
return ( return (
<> <>
<Row gutter={24}> <Row gutter={24}>
<Col span={6}> <Col span={8}>
<Card <Card
title={ title={
<Title level={5} style={{ margin: 0 }}> <Title level={5} style={{ margin: 0 }}>
@@ -562,7 +612,33 @@ const EditBrandDevice = () => {
</Form> </Form>
</Card> </Card>
</Col> </Col>
<Col span={10}> <Col span={8}>
<Card
title={
<Title level={5} style={{ margin: 0 }}>
Spareparts
</Title>
}
size="small"
>
<Form
form={sparepartForm}
layout="vertical"
initialValues={{
sparepart_status_0: true,
}}
>
<SparepartForm
sparepartForm={sparepartForm}
sparepartFields={sparepartFields}
onAddSparepartField={handleAddSparepartField}
onRemoveSparepartField={handleRemoveSparepartField}
isReadOnly={isErrorCodeFormReadOnly}
/>
</Form>
</Card>
</Col>
<Col span={24} style={{ marginTop: 16 }}>
<Card size="small" title={`Error Codes (${errorCodes.length})`}> <Card size="small" title={`Error Codes (${errorCodes.length})`}>
<Table <Table
dataSource={errorCodes} dataSource={errorCodes}

152
src/pages/master/brandDevice/component/SparepartField.jsx Normal file
View File

@@ -0,0 +1,152 @@
import React, { useState, useEffect } from 'react';
import { Form, Select, Button, Switch, Typography, Space, Input, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { getAllSparepart } from '../../../../api/sparepart';
const { Text } = Typography;
const SparepartField = ({
fieldKey,
fieldName,
index,
sparepartType,
sparepartStatus,
isReadOnly = false,
canRemove = true,
onRemove,
spareparts = [],
onSparepartChange
}) => {
const [currentStatus, setCurrentStatus] = useState(sparepartStatus ?? true);
const [sparepartList, setSparepartList] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setCurrentStatus(sparepartStatus ?? true);
loadSpareparts();
}, [sparepartStatus]);
const loadSpareparts = async () => {
setLoading(true);
try {
// Get all spareparts from the API
const params = new URLSearchParams();
params.set('limit', '100'); // Get all spareparts
const response = await getAllSparepart(params);
// Response structure should have { data: [...], statusCode: 200 }
if (response && (response.statusCode === 200 || response.data)) {
// If response has data array directly
const sparepartData = response.data?.data || response.data || [];
setSparepartList(sparepartData);
if (onSparepartChange) {
onSparepartChange(sparepartData);
}
} else {
// For demo purposes, use mock data if API fails
setSparepartList([
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
]);
if (onSparepartChange) {
onSparepartChange([
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
]);
}
}
} catch (error) {
console.error('Error loading spareparts:', error);
// Default mock data
const mockSpareparts = [
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
];
setSparepartList(mockSpareparts);
if (onSparepartChange) {
onSparepartChange(mockSpareparts);
}
} finally {
setLoading(false);
}
};
const sparepartOptions = sparepartList.map(sparepart => ({
label: sparepart.sparepart_name || sparepart.sparepart_name || `Sparepart ${sparepart.sparepart_id || sparepart.brand_sparepart_id}`,
value: sparepart.sparepart_id || sparepart.brand_sparepart_id,
description: sparepart.sparepart_description
}));
return (
<div style={{
border: '1px solid #d9d9d9',
borderRadius: 8,
padding: 16,
marginBottom: 16,
backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
<Text strong>Sparepart #{index + 1}</Text>
<Space>
<Form.Item
name={[fieldName, 'sparepart_id']}
rules={[{ required: false, message: 'Sparepart wajib dipilih!' }]} /* Making it optional since sparepart is optional */
style={{ margin: 0, width: 200 }}
>
<Select
placeholder="Pilih sparepart"
loading={loading}
disabled={isReadOnly}
options={sparepartOptions}
showSearch
optionFilterProp="label"
/>
</Form.Item>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Form.Item name={[fieldName, 'status']} valuePropName="checked" noStyle>
<Switch
disabled={isReadOnly}
onChange={(checked) => {
setCurrentStatus(checked);
}}
style={{
backgroundColor: currentStatus ? '#23A55A' : '#bfbfbf'
}}
/>
</Form.Item>
<Text style={{ fontSize: 12, color: '#666' }}>
{currentStatus ? 'Active' : 'Inactive'}
</Text>
</div>
{canRemove && !isReadOnly && (
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={onRemove}
/>
)}
</Space>
</div>
{/* Sparepart Description */}
<Form.Item
name={[fieldName, 'description']}
label="Deskripsi"
>
<Input.TextArea
placeholder="Deskripsi sparepart"
rows={2}
disabled={isReadOnly}
/>
</Form.Item>
</div>
);
};
export default SparepartField;

262
src/pages/master/brandDevice/component/SparepartForm.jsx
View File

@@ -1,18 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { import { Form, Card, Typography, Divider, Button } from 'antd';
Form, import { PlusOutlined } from '@ant-design/icons';
Input, import SparepartField from './SparepartField';
Button,
Divider,
Typography,
Switch,
Space,
Card,
Upload,
message,
} from 'antd';
import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { uploadFile } from '../../../../api/file-uploads';
const { Text } = Typography; const { Text } = Typography;
@@ -21,238 +10,67 @@ const SparepartForm = ({
sparepartFields, sparepartFields,
onAddSparepartField, onAddSparepartField,
onRemoveSparepartField, onRemoveSparepartField,
onSparepartTypeChange,
onSparepartStatusChange,
onSparepartImageUpload,
onSparepartImageRemove,
sparepartImages = {},
isReadOnly = false, isReadOnly = false,
spareparts = [],
onSparepartChange
}) => { }) => {
const [fieldStatuses, setFieldStatuses] = useState({}); const [sparepartList, setSparepartList] = useState([]);
// Watch form values for each field const handleSparepartChange = (list) => {
const getFieldValue = (fieldName) => { setSparepartList(list);
try { if (onSparepartChange) {
const values = sparepartForm?.getFieldsValue(); onSparepartChange(list);
return values?.sparepart_items?.[fieldName]?.status ?? true;
} catch {
return true;
} }
}; };
useEffect(() => {
// Update field statuses when form changes
const newStatuses = {};
sparepartFields.forEach((field) => {
newStatuses[field.key] = getFieldValue(field.key);
});
setFieldStatuses(newStatuses);
}, [sparepartFields, sparepartForm]);
const handleImageUpload = async (fieldKey, file) => {
// Check if file is an image
const isImage = file.type.startsWith('image/');
if (!isImage) {
message.error('You can only upload image files!');
return Upload.LIST_IGNORE;
}
// Check file size (max 2MB)
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must be smaller than 2MB!');
return Upload.LIST_IGNORE;
}
try {
const fileExtension = file.name.split('.').pop().toLowerCase();
const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
fileExtension
);
const fileType = isImageFile ? 'image' : 'pdf';
const folder = 'images';
const uploadResponse = await uploadFile(file, folder);
const imagePath =
uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
if (imagePath) {
onSparepartImageUpload &&
onSparepartImageUpload(fieldKey, {
name: file.name,
uploadPath: imagePath,
fileExtension,
isImage: isImageFile,
size: file.size,
});
message.success(`${file.name} uploaded successfully!`);
} else {
message.error(`Failed to upload ${file.name}`);
}
} catch (error) {
console.error('Error uploading image:', error);
message.error(`Failed to upload ${file.name}`);
}
};
const handleImageRemove = (fieldKey) => {
onSparepartImageRemove && onSparepartImageRemove(fieldKey);
};
return ( return (
<div> <div>
<Text strong style={{ marginBottom: 16, display: 'block' }}>
{isReadOnly ? 'Sparepart Details' : 'Tambah Sparepart'}
</Text>
<Form <Form
form={sparepartForm} form={sparepartForm}
layout="vertical" layout="vertical"
initialValues={{ initialValues={{
sparepart_status_0: true, sparepart_status_0: true,
sparepart_type_0: 'required',
}} }}
> >
{/* Dynamic Sparepart Fields */}
<Divider orientation="left">Sparepart Items</Divider> <Divider orientation="left">Sparepart Items</Divider>
{sparepartFields.map((field, index) => ( {sparepartFields.map((field, index) => (
<Card <SparepartField
key={field.key} key={field.key}
size="small" fieldKey={field.key}
style={{ marginBottom: 16 }} fieldName={field.name}
title={ index={index}
<div sparepartStatus={field.status}
style={{ onRemove={() => onRemoveSparepartField(field.key)}
display: 'flex', isReadOnly={isReadOnly}
justifyContent: 'space-between', canRemove={sparepartFields.length > 1}
alignItems: 'center', spareparts={sparepartList}
}} onSparepartChange={handleSparepartChange}
> />
<Text strong>Sparepart {index + 1}</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
{!isReadOnly && sparepartFields.length > 1 && (
<div style={{ textAlign: 'right' }}>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => onRemoveSparepartField(field.key)}
/>
</div>
)}
</div>
</div>
}
>
<Form layout="vertical" style={{ border: 'none' }}>
{/* Sparepart Name */}
<Form.Item
name={[field.name, 'name']}
rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
>
<Input placeholder="Enter sparepart name" disabled={isReadOnly} />
</Form.Item>
{/* Description */}
<Form.Item name={[field.name, 'description']}>
<Input.TextArea
placeholder="Enter sparepart description (optional)"
rows={2}
disabled={isReadOnly}
/>
</Form.Item>
{/* Image Upload */}
<Form.Item label="Sparepart Image">
{!isReadOnly ? (
<Upload
beforeUpload={(file) => handleImageUpload(field.key, file)}
showUploadList={false}
accept="image/*"
style={{ width: '100%' }}
>
<Button icon={<UploadOutlined />} style={{ width: '100%' }}>
Upload Sparepart Image
</Button>
</Upload>
) : (
<div
style={{
padding: '8px 12px',
border: '1px solid #d9d9d9',
borderRadius: 4,
}}
>
<Text type="secondary">No upload allowed</Text>
</div>
)}
{sparepartImages[field.key] && (
<div style={{ marginTop: 8 }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
}}
>
<img
src={sparepartImages[field.key].uploadPath}
alt="Sparepart Image"
style={{
width: 50,
height: 50,
objectFit: 'cover',
border: '1px solid #d9d9d9',
borderRadius: 4,
}}
/>
<div>
<Text style={{ fontSize: 12 }}>
{sparepartImages[field.key].name}
</Text>
<br />
<Text type="secondary" style={{ fontSize: 10 }}>
Size:{' '}
{(
sparepartImages[field.key].size / 1024
).toFixed(1)}{' '}
KB
</Text>
</div>
{!isReadOnly && (
<Button
type="text"
danger
size="small"
onClick={() => handleImageRemove(field.key)}
>
Remove
</Button>
)}
</div>
</div>
)}
</Form.Item>
</Form>
</Card>
))} ))}
{!isReadOnly && ( {!isReadOnly && (
<Form.Item> <>
<Button <Form.Item>
type="dashed" <Button
onClick={() => onAddSparepartField()} type="dashed"
icon={<PlusOutlined />} onClick={onAddSparepartField}
style={{ width: '100%' }} icon={<PlusOutlined />}
> style={{ width: '100%' }}
+ Add Sparepart >
</Button> + Add Sparepart
</Form.Item> </Button>
</Form.Item>
<div style={{ marginTop: 16 }}>
<Text type="secondary">
* Sparepart is optional and can be added for each error code if needed.
</Text>
</div>
</>
)} )}
</Form> </Form>
</div> </div>
); );
}; };
export default SparepartForm; export default SparepartForm;

204
src/pages/master/brandDevice/hooks/sparepart.js
View File

@@ -1,115 +1,141 @@
import { useState } from 'react'; import { useState, useCallback } from 'react';
export const useSparepartLogic = (sparepartForm) => { export const useSparepartLogic = (sparepartForm) => {
const [sparepartFields, setSparepartFields] = useState([ const [sparepartFields, setSparepartFields] = useState([]);
{ name: ['sparepart_items', 0], key: 0 } const [sparepartTypes, setSparepartTypes] = useState({});
]); const [sparepartStatuses, setSparepartStatuses] = useState({});
const [sparepartTypes, setSparepartTypes] = useState({ 0: 'required' }); const [sparepartsToDelete, setSparepartsToDelete] = useState(new Set());
const [sparepartStatuses, setSparepartStatuses] = useState({ 0: true });
const handleAddSparepartField = () => {
const newKey = Date.now(); // Use timestamp for unique key
const newField = { name: ['sparepart_items', newKey], key: newKey };
const handleAddSparepartField = useCallback(() => {
const newKey = Date.now();
const newField = {
key: newKey,
name: sparepartFields.length,
isCreated: true,
};
setSparepartFields(prev => [...prev, newField]); setSparepartFields(prev => [...prev, newField]);
setSparepartTypes(prev => ({ ...prev, [newKey]: 'required' })); setSparepartTypes(prev => ({
setSparepartStatuses(prev => ({ ...prev, [newKey]: true })); ...prev,
[newKey]: 'required'
}));
setSparepartStatuses(prev => ({
...prev,
[newKey]: true
}));
}, [sparepartFields.length]);
// Set default values for the new field const handleRemoveSparepartField = useCallback((key) => {
setTimeout(() => { setSparepartFields(prev => prev.filter(field => field.key !== key));
sparepartForm.setFieldValue(['sparepart_items', newKey, 'type'], 'required'); setSparepartTypes(prev => {
sparepartForm.setFieldValue(['sparepart_items', newKey, 'quantity'], 1); const newTypes = { ...prev };
}, 0); delete newTypes[key];
}; return newTypes;
});
setSparepartStatuses(prev => {
const newStatuses = { ...prev };
delete newStatuses[key];
return newStatuses;
});
// Add to delete list if it's not a new field
setSparepartsToDelete(prev => new Set([...prev, key]));
}, []);
const handleRemoveSparepartField = (key) => { const handleSparepartTypeChange = useCallback((key, type) => {
if (sparepartFields.length <= 1) { setSparepartTypes(prev => ({
return; // Keep at least one sparepart field ...prev,
[key]: type
}));
}, []);
const handleSparepartStatusChange = useCallback((key, status) => {
setSparepartStatuses(prev => ({
...prev,
[key]: status
}));
}, []);
const resetSparepartFields = useCallback(() => {
setSparepartFields([]);
setSparepartTypes({});
setSparepartStatuses({});
setSparepartsToDelete(new Set());
}, []);
const getSparepartData = useCallback(() => {
if (!sparepartForm) return [];
const values = sparepartForm.getFieldsValue();
const data = [];
sparepartFields.forEach((field, index) => {
const fieldData = {
sparepart_id: values[`sparepart_id_${field.name}`],
sparepart_name: values[`sparepart_name_${field.name}`],
sparepart_description: values[`sparepart_description_${field.name}`],
status: values[`sparepart_status_${field.name}`],
type: sparepartTypes[field.key] || 'required',
};
// Only add if required fields are filled
if (fieldData.sparepart_id) {
data.push(fieldData);
}
});
return data;
}, [sparepartForm, sparepartFields, sparepartTypes]);
const setSparepartsForExistingRecord = useCallback((sparepartData, form) => {
resetSparepartFields();
if (!sparepartData || !Array.isArray(sparepartData)) {
return;
} }
setSparepartFields(prev => prev.filter(field => field.key !== key)); const newFields = sparepartData.map((sp, index) => ({
key: sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`,
// Clean up type and status name: index,
const newTypes = { ...sparepartTypes }; isCreated: false,
const newStatuses = { ...sparepartStatuses };
delete newTypes[key];
delete newStatuses[key];
setSparepartTypes(newTypes);
setSparepartStatuses(newStatuses);
};
const handleSparepartTypeChange = (key, value) => {
setSparepartTypes(prev => ({ ...prev, [key]: value }));
};
const handleSparepartStatusChange = (key, value) => {
setSparepartStatuses(prev => ({ ...prev, [key]: value }));
};
const resetSparepartFields = () => {
setSparepartFields([{ name: ['sparepart_items', 0], key: 0 }]);
setSparepartTypes({ 0: 'required' });
setSparepartStatuses({ 0: true });
// Reset form values
sparepartForm.resetFields();
sparepartForm.setFieldsValue({
sparepart_status_0: true,
sparepart_type_0: 'required',
});
};
const getSparepartData = () => {
const values = sparepartForm.getFieldsValue();
return sparepartFields.map(field => {
const key = field.key;
const sparepartPath = field.name.join(',');
const sparepart = values[sparepartPath];
return sparepart && sparepart.name && sparepart.name.trim() !== '' ? {
name: sparepart.name || '',
description: sparepart.description || '',
is_active: sparepart.status !== false,
} : null;
}).filter(Boolean);
};
const setSparepartForExistingRecord = (spareparts, form) => {
if (!spareparts || spareparts.length === 0) return;
const newFields = spareparts.map((sparepart, index) => ({
name: ['sparepart_items', sparepart.id || index],
key: sparepart.id || index
})); }));
setSparepartFields(newFields); setSparepartFields(newFields);
// Set sparepart values // Set form values for existing spareparts
const formValues = {}; setTimeout(() => {
Object.keys(spareparts).forEach(index => { const formValues = {};
const key = spareparts[index].id || index; sparepartData.forEach((sp, index) => {
const sparepart = spareparts[index]; const sparepartId = sp.brand_sparepart_id || sp.sparepart_id || sp.sparepart_name;
formValues[`sparepart_items,${key}`] = { formValues[`sparepart_id_${index}`] = sparepartId;
name: sparepart.name || '', formValues[`sparepart_status_${index}`] = sp.is_active ?? sp.status ?? true;
description: sparepart.description || '', formValues[`sparepart_description_${index}`] = sp.brand_sparepart_description || sp.description || sp.sparepart_name;
status: sparepart.is_active !== false,
};
});
form.setFieldsValue(formValues); setSparepartTypes(prev => ({
}; ...prev,
[sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`]: sp.type || sp.sparepart_type || 'required'
}));
setSparepartStatuses(prev => ({
...prev,
[sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`]: sp.is_active ?? sp.status ?? true
}));
});
form.setFieldsValue(formValues);
}, 0);
}, [resetSparepartFields]);
return { return {
sparepartFields, sparepartFields,
sparepartTypes, sparepartTypes,
sparepartStatuses, sparepartStatuses,
sparepartsToDelete,
handleAddSparepartField, handleAddSparepartField,
handleRemoveSparepartField, handleRemoveSparepartField,
handleSparepartTypeChange, handleSparepartTypeChange,
handleSparepartStatusChange, handleSparepartStatusChange,
resetSparepartFields, resetSparepartFields,
getSparepartData, getSparepartData,
setSparepartForExistingRecord, setSparepartsForExistingRecord,
}; };
}; };