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

refactor: Improve code formatting and readability in SparepartForm component

Browse Source
This commit is contained in:
vinix
2025-11-18 13:09:39 +07:00
parent 3198b71f7e
commit 34e38b3969
1 changed files with 70 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,16 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Divider, Typography, Switch, Space, Card, Upload, message } from 'antd'; import {
Form,
Input,
Button,
Divider,
Typography,
Switch,
Space,
Card,
Upload,
message,
} from 'antd';
import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons'; import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
import { uploadFile } from '../../../../api/file-uploads'; import { uploadFile } from '../../../../api/file-uploads';
@@ -15,7 +26,7 @@ const SparepartForm = ({
onSparepartImageUpload, onSparepartImageUpload,
onSparepartImageRemove, onSparepartImageRemove,
sparepartImages = {}, sparepartImages = {},
isReadOnly = false isReadOnly = false,
}) => { }) => {
const [fieldStatuses, setFieldStatuses] = useState({}); const [fieldStatuses, setFieldStatuses] = useState({});
@@ -32,7 +43,7 @@ const SparepartForm = ({
useEffect(() => { useEffect(() => {
// Update field statuses when form changes // Update field statuses when form changes
const newStatuses = {}; const newStatuses = {};
sparepartFields.forEach(field => { sparepartFields.forEach((field) => {
newStatuses[field.key] = getFieldValue(field.key); newStatuses[field.key] = getFieldValue(field.key);
}); });
setFieldStatuses(newStatuses); setFieldStatuses(newStatuses);
@@ -55,21 +66,25 @@ const SparepartForm = ({
try { try {
const fileExtension = file.name.split('.').pop().toLowerCase(); const fileExtension = file.name.split('.').pop().toLowerCase();
const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension); const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
fileExtension
);
const fileType = isImageFile ? 'image' : 'pdf'; const fileType = isImageFile ? 'image' : 'pdf';
const folder = 'images'; const folder = 'images';
const uploadResponse = await uploadFile(file, folder); const uploadResponse = await uploadFile(file, folder);
const imagePath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || ''; const imagePath =
uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
if (imagePath) { if (imagePath) {
onSparepartImageUpload && onSparepartImageUpload(fieldKey, { onSparepartImageUpload &&
name: file.name, onSparepartImageUpload(fieldKey, {
uploadPath: imagePath, name: file.name,
fileExtension, uploadPath: imagePath,
isImage: isImageFile, fileExtension,
size: file.size, isImage: isImageFile,
}); size: file.size,
});
message.success(`${file.name} uploaded successfully!`); message.success(`${file.name} uploaded successfully!`);
} else { } else {
message.error(`Failed to upload ${file.name}`); message.error(`Failed to upload ${file.name}`);
@@ -106,48 +121,40 @@ const SparepartForm = ({
size="small" size="small"
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
title={ title={
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Text strong>Sparepart {index + 1}</Text> <Text strong>Sparepart {index + 1}</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle> {!isReadOnly && sparepartFields.length > 1 && (
<Switch <div style={{ textAlign: 'right' }}>
disabled={isReadOnly} <Button
size="small" type="text"
onChange={(checked) => { danger
onSparepartStatusChange && onSparepartStatusChange(field.key, checked); icon={<DeleteOutlined />}
setFieldStatuses(prev => ({ ...prev, [field.key]: checked })); onClick={() => onRemoveSparepartField(field.key)}
}} />
style={{ </div>
backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf' )}
}}
/>
</Form.Item>
<Text style={{ fontSize: 12, color: '#666' }}>
{fieldStatuses[field.key] ? 'Active' : 'Inactive'}
</Text>
</div> </div>
</div> </div>
} }
> >
<Form <Form layout="vertical" style={{ border: 'none' }}>
layout="vertical"
style={{ border: 'none' }}
>
{/* Sparepart Name */} {/* Sparepart Name */}
<Form.Item <Form.Item
name={[field.name, 'name']} name={[field.name, 'name']}
rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]} rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
> >
<Input <Input placeholder="Enter sparepart name" disabled={isReadOnly} />
placeholder="Enter sparepart name"
disabled={isReadOnly}
/>
</Form.Item> </Form.Item>
{/* Description */} {/* Description */}
<Form.Item <Form.Item name={[field.name, 'description']}>
name={[field.name, 'description']}
>
<Input.TextArea <Input.TextArea
placeholder="Enter sparepart description (optional)" placeholder="Enter sparepart description (optional)"
rows={2} rows={2}
@@ -169,14 +176,26 @@ const SparepartForm = ({
</Button> </Button>
</Upload> </Upload>
) : ( ) : (
<div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}> <div
style={{
padding: '8px 12px',
border: '1px solid #d9d9d9',
borderRadius: 4,
}}
>
<Text type="secondary">No upload allowed</Text> <Text type="secondary">No upload allowed</Text>
</div> </div>
)} )}
{sparepartImages[field.key] && ( {sparepartImages[field.key] && (
<div style={{ marginTop: 8 }}> <div style={{ marginTop: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <div
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
}}
>
<img <img
src={sparepartImages[field.key].uploadPath} src={sparepartImages[field.key].uploadPath}
alt="Sparepart Image" alt="Sparepart Image"
@@ -189,10 +208,16 @@ const SparepartForm = ({
}} }}
/> />
<div> <div>
<Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text> <Text style={{ fontSize: 12 }}>
{sparepartImages[field.key].name}
</Text>
<br /> <br />
<Text type="secondary" style={{ fontSize: 10 }}> <Text type="secondary" style={{ fontSize: 10 }}>
Size: {(sparepartImages[field.key].size / 1024).toFixed(1)} KB Size:{' '}
{(
sparepartImages[field.key].size / 1024
).toFixed(1)}{' '}
KB
</Text> </Text>
</div> </div>
{!isReadOnly && ( {!isReadOnly && (
@@ -209,24 +234,6 @@ const SparepartForm = ({
</div> </div>
)} )}
</Form.Item> </Form.Item>
{/* Delete Button */}
{!isReadOnly && sparepartFields.length > 1 && (
<div style={{ textAlign: 'right' }}>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => onRemoveSparepartField(field.key)}
style={{
borderColor: '#ff4d4f',
color: '#ff4d4f'
}}
>
Remove
</Button>
</div>
)}
</Form> </Form>
</Card> </Card>
))} ))}
@@ -243,17 +250,9 @@ const SparepartForm = ({
</Button> </Button>
</Form.Item> </Form.Item>
)} )}
{!isReadOnly && (
<div style={{ marginTop: 16 }}>
<Text type="secondary">
* Add at least one sparepart for this error code.
</Text>
</div>
)}
</Form> </Form>
</div> </div>
); );
}; };
export default SparepartForm; export default SparepartForm;