316 lines
14 KiB
JavaScript
316 lines
14 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { Form, Input, Button, Switch, Radio, Upload, Typography } from 'antd';
|
|
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons';
|
|
import { uploadFile, getFolderFromFileType } from '../../../../api/file-uploads';
|
|
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const SolutionField = ({
|
|
fieldId,
|
|
index,
|
|
solutionStatus,
|
|
isReadOnly,
|
|
fileList,
|
|
onRemove,
|
|
onSolutionTypeChange,
|
|
onSolutionStatusChange,
|
|
onFileUpload,
|
|
currentSolutionData,
|
|
onFileView,
|
|
errorCodeForm,
|
|
}) => {
|
|
// Watch the solution status from the form
|
|
const watchedStatus = Form.useWatch(`solution_status_${fieldId}`, errorCodeForm);
|
|
useEffect(() => {
|
|
if (currentSolutionData && errorCodeForm) {
|
|
if (currentSolutionData.solution_name) {
|
|
errorCodeForm.setFieldValue(
|
|
`solution_name_${fieldId}`,
|
|
currentSolutionData.solution_name
|
|
);
|
|
}
|
|
|
|
if (currentSolutionData.type_solution === 'text' && currentSolutionData.text_solution) {
|
|
errorCodeForm.setFieldValue(
|
|
`text_solution_${fieldId}`,
|
|
currentSolutionData.text_solution
|
|
);
|
|
}
|
|
|
|
if (currentSolutionData.type_solution) {
|
|
const formValue =
|
|
currentSolutionData.type_solution === 'image' ||
|
|
currentSolutionData.type_solution === 'pdf'
|
|
? 'file'
|
|
: currentSolutionData.type_solution;
|
|
errorCodeForm.setFieldValue(`solution_type_${fieldId}`, formValue);
|
|
}
|
|
|
|
// Only set status if it's not already set to prevent overwriting user changes
|
|
const currentStatus = errorCodeForm.getFieldValue(`solution_status_${fieldId}`);
|
|
if (currentSolutionData.is_active !== undefined && currentStatus === undefined) {
|
|
errorCodeForm.setFieldValue(
|
|
`solution_status_${fieldId}`,
|
|
currentSolutionData.is_active
|
|
);
|
|
}
|
|
}
|
|
}, [currentSolutionData, fieldId, errorCodeForm]);
|
|
|
|
const handleBeforeUpload = async (file) => {
|
|
const isAllowedType = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'].includes(
|
|
file.type
|
|
);
|
|
if (!isAllowedType) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
|
|
});
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
|
|
try {
|
|
// Upload file immediately to get path
|
|
const fileExtension = file.name.split('.').pop().toLowerCase();
|
|
const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
|
|
const fileType = isImage ? 'image' : 'pdf';
|
|
const folder = getFolderFromFileType(fileType);
|
|
|
|
const uploadResponse = await uploadFile(file, folder);
|
|
|
|
const actualPath = uploadResponse.data?.path_solution || '';
|
|
|
|
if (actualPath) {
|
|
file.uploadPath = actualPath;
|
|
file.solution_name = file.name;
|
|
file.solutionId = fieldId;
|
|
file.type_solution = fileType;
|
|
onFileUpload(file);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: `${file.name} berhasil diupload!`,
|
|
});
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: `Gagal mengupload ${file.name}`,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error uploading file:', error);
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
|
|
});
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
data-solution-id={fieldId}
|
|
style={{
|
|
marginBottom: 24,
|
|
padding: 16,
|
|
border: '1px solid #d9d9d9',
|
|
borderRadius: 8,
|
|
transition: 'all 0.3s ease',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Text strong>Solution {index + 1}</Text>
|
|
<Button
|
|
type="text"
|
|
danger
|
|
size="small"
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => onRemove(fieldId)}
|
|
disabled={isReadOnly}
|
|
style={{
|
|
borderColor: '#ff4d4f',
|
|
color: '#ff4d4f'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<Form.Item name={`solution_name_${fieldId}`} label="Solution Name">
|
|
<Input placeholder="Enter solution name" disabled={isReadOnly} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Status">
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<Form.Item name={`solution_status_${fieldId}`} valuePropName="checked" noStyle>
|
|
<Switch
|
|
disabled={isReadOnly}
|
|
onChange={(checked) => {
|
|
onSolutionStatusChange(fieldId, checked);
|
|
}}
|
|
style={{
|
|
backgroundColor: (watchedStatus ?? true) ? '#23A55A' : '#bfbfbf',
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
<Text style={{ marginLeft: 8 }}>
|
|
{(watchedStatus ?? true) ? 'Active' : 'Inactive'}
|
|
</Text>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Solution Type">
|
|
<Form.Item name={`solution_type_${fieldId}`} noStyle>
|
|
<Radio.Group
|
|
onChange={(e) => {
|
|
onSolutionTypeChange(fieldId, e.target.value);
|
|
}}
|
|
disabled={isReadOnly}
|
|
>
|
|
<Radio value="text">Text Solution</Radio>
|
|
<Radio value="file">File Upload</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
shouldUpdate={(prevValues, currentValues) =>
|
|
prevValues[`solution_type_${fieldId}`] !==
|
|
currentValues[`solution_type_${fieldId}`]
|
|
}
|
|
noStyle
|
|
>
|
|
{({ getFieldValue }) => {
|
|
const currentType = getFieldValue(`solution_type_${fieldId}`) || 'text';
|
|
const displayType =
|
|
currentType === 'file' && currentSolutionData
|
|
? currentSolutionData.type_solution === 'image'
|
|
? 'image'
|
|
: currentSolutionData.type_solution === 'pdf'
|
|
? 'pdf'
|
|
: 'file'
|
|
: currentType;
|
|
|
|
return displayType === 'text' ? (
|
|
<Form.Item name={`text_solution_${fieldId}`} label="Text Solution">
|
|
<Input.TextArea
|
|
placeholder="Enter text solution"
|
|
disabled={isReadOnly}
|
|
rows={4}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
<>
|
|
{/* Show existing file info for both preview and edit mode */}
|
|
{currentSolutionData &&
|
|
currentSolutionData.type_solution !== 'text' &&
|
|
currentSolutionData.path_solution && (
|
|
<Form.Item label="Current Document">
|
|
{(() => {
|
|
const solution = currentSolutionData;
|
|
const fileName =
|
|
solution.file_upload_name ||
|
|
solution.path_solution?.split('/')[1] ||
|
|
'File';
|
|
const fileType = solution.type_solution;
|
|
|
|
if (fileType !== 'text' && solution.path_solution) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '8px',
|
|
}}
|
|
>
|
|
<Text>
|
|
{fileType === 'image'
|
|
? '[Image]'
|
|
: '[Document]'}{' '}
|
|
{fileName}
|
|
</Text>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
onClick={() =>
|
|
onFileView(
|
|
solution.path_solution,
|
|
solution.type_solution
|
|
)
|
|
}
|
|
style={{
|
|
padding: 0,
|
|
height: 'auto',
|
|
fontSize: '12px',
|
|
}}
|
|
>
|
|
View Document
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
</Form.Item>
|
|
)}
|
|
|
|
<Form.Item label="Upload File">
|
|
<Upload
|
|
multiple={true}
|
|
accept=".pdf,.jpg,.jpeg,.png,.gif"
|
|
disabled={isReadOnly}
|
|
fileList={[
|
|
...fileList.filter((file) => file.solutionId === fieldId),
|
|
// Add existing file to fileList if it exists
|
|
...(currentSolutionData &&
|
|
currentSolutionData.type_solution !== 'text' &&
|
|
currentSolutionData.path_solution
|
|
? [
|
|
{
|
|
uid: `existing-${fieldId}`,
|
|
name:
|
|
currentSolutionData.file_upload_name ||
|
|
currentSolutionData.path_solution?.split(
|
|
'/'
|
|
)[1] ||
|
|
'File',
|
|
status: 'done',
|
|
url: null, // We'll use the path_solution for viewing
|
|
solutionId: fieldId,
|
|
type_solution:
|
|
currentSolutionData.type_solution,
|
|
uploadPath: currentSolutionData.path_solution,
|
|
existingFile: true,
|
|
},
|
|
]
|
|
: []),
|
|
]}
|
|
onRemove={(file) => {}}
|
|
beforeUpload={handleBeforeUpload}
|
|
>
|
|
<Button icon={<UploadOutlined />} disabled={isReadOnly}>
|
|
Click to Upload (File or Image)
|
|
</Button>
|
|
</Upload>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SolutionField;
|