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 { 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 { uploadFile } from '../../../../api/file-uploads';
@@ -15,7 +26,7 @@ const SparepartForm = ({
onSparepartImageUpload,
onSparepartImageRemove,
sparepartImages = {},
isReadOnly = false
isReadOnly = false,
}) => {
const [fieldStatuses, setFieldStatuses] = useState({});
@@ -32,7 +43,7 @@ const SparepartForm = ({
useEffect(() => {
// Update field statuses when form changes
const newStatuses = {};
sparepartFields.forEach(field => {
sparepartFields.forEach((field) => {
newStatuses[field.key] = getFieldValue(field.key);
});
setFieldStatuses(newStatuses);
@@ -55,21 +66,25 @@ const SparepartForm = ({
try {
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 folder = 'images';
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) {
onSparepartImageUpload && onSparepartImageUpload(fieldKey, {
name: file.name,
uploadPath: imagePath,
fileExtension,
isImage: isImageFile,
size: file.size,
});
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}`);
@@ -106,48 +121,40 @@ const SparepartForm = ({
size="small"
style={{ marginBottom: 16 }}
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>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle>
<Switch
disabled={isReadOnly}
size="small"
onChange={(checked) => {
onSparepartStatusChange && onSparepartStatusChange(field.key, checked);
setFieldStatuses(prev => ({ ...prev, [field.key]: checked }));
}}
style={{
backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf'
}}
/>
</Form.Item>
<Text style={{ fontSize: 12, color: '#666' }}>
{fieldStatuses[field.key] ? 'Active' : 'Inactive'}
</Text>
{!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' }}
>
<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}
/>
<Input placeholder="Enter sparepart name" disabled={isReadOnly} />
</Form.Item>
{/* Description */}
<Form.Item
name={[field.name, 'description']}
>
<Form.Item name={[field.name, 'description']}>
<Input.TextArea
placeholder="Enter sparepart description (optional)"
rows={2}
@@ -169,14 +176,26 @@ const SparepartForm = ({
</Button>
</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>
</div>
)}
{sparepartImages[field.key] && (
<div style={{ marginTop: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
}}
>
<img
src={sparepartImages[field.key].uploadPath}
alt="Sparepart Image"
@@ -189,10 +208,16 @@ const SparepartForm = ({
}}
/>
<div>
<Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text>
<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
Size:{' '}
{(
sparepartImages[field.key].size / 1024
).toFixed(1)}{' '}
KB
</Text>
</div>
{!isReadOnly && (
@@ -209,24 +234,6 @@ const SparepartForm = ({
</div>
)}
</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>
</Card>
))}
@@ -243,17 +250,9 @@ const SparepartForm = ({
</Button>
</Form.Item>
)}
{!isReadOnly && (
<div style={{ marginTop: 16 }}>
<Text type="secondary">
* Add at least one sparepart for this error code.
</Text>
</div>
)}
</Form>
</div>
);
};
export default SparepartForm;
export default SparepartForm;