lavoce #11
@@ -1,4 +1,14 @@
|
||||
import { Form, Divider, Button, Switch, Input, ConfigProvider, Typography, Upload, message } from 'antd';
|
||||
import {
|
||||
Form,
|
||||
Divider,
|
||||
Button,
|
||||
Switch,
|
||||
Input,
|
||||
ConfigProvider,
|
||||
Typography,
|
||||
Upload,
|
||||
message,
|
||||
} from 'antd';
|
||||
import { PlusOutlined, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { NotifAlert } from '../../../../components/Global/ToastNotif';
|
||||
import SolutionField from './SolutionField';
|
||||
@@ -28,7 +38,7 @@ const ErrorCodeForm = ({
|
||||
errorCodes,
|
||||
errorCodeIcon,
|
||||
onErrorCodeIconUpload,
|
||||
onErrorCodeIconRemove
|
||||
onErrorCodeIconRemove,
|
||||
}) => {
|
||||
const statusValue = Form.useWatch('status', errorCodeForm);
|
||||
|
||||
@@ -49,12 +59,15 @@ const ErrorCodeForm = ({
|
||||
|
||||
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 iconPath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
|
||||
const iconPath =
|
||||
uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
|
||||
|
||||
if (iconPath) {
|
||||
// Extract folder and filename from the path
|
||||
@@ -67,7 +80,7 @@ const ErrorCodeForm = ({
|
||||
uploadPath: iconPath,
|
||||
url: getFileUrl(folder, filename), // Use the same endpoint as file uploads
|
||||
type_solution: fileType,
|
||||
solutionId: 'icon'
|
||||
solutionId: 'icon',
|
||||
});
|
||||
message.success(`${file.name} uploaded successfully!`);
|
||||
} else {
|
||||
@@ -99,7 +112,7 @@ const ErrorCodeForm = ({
|
||||
|
||||
const solutionName = values[`solution_name_${fieldId}`];
|
||||
const textSolution = values[`text_solution_${fieldId}`];
|
||||
const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
|
||||
const filesForSolution = fileList.filter((file) => file.solutionId === fieldId);
|
||||
const solutionType = values[`solution_type_${fieldId}`] || solutionTypes[fieldId];
|
||||
|
||||
if (solutionType === 'text') {
|
||||
@@ -109,11 +122,12 @@ const ErrorCodeForm = ({
|
||||
type_solution: 'text',
|
||||
text_solution: textSolution.trim(),
|
||||
path_solution: '',
|
||||
is_active: solutionStatuses[fieldId] !== false
|
||||
is_active: solutionStatuses[fieldId] !== false,
|
||||
};
|
||||
|
||||
if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
|
||||
solutionData.brand_code_solution_id = window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
solutionData.brand_code_solution_id =
|
||||
window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
}
|
||||
|
||||
solutions.push(solutionData);
|
||||
@@ -121,15 +135,22 @@ const ErrorCodeForm = ({
|
||||
} else if (solutionType === 'file') {
|
||||
filesForSolution.forEach((file) => {
|
||||
const solutionData = {
|
||||
solution_name: solutionName || file.solution_name || file.name || `Solution ${fieldId}`,
|
||||
type_solution: file.type_solution || (file.type.startsWith('image/') ? 'image' : 'pdf'),
|
||||
solution_name:
|
||||
solutionName ||
|
||||
file.solution_name ||
|
||||
file.name ||
|
||||
`Solution ${fieldId}`,
|
||||
type_solution:
|
||||
file.type_solution ||
|
||||
(file.type.startsWith('image/') ? 'image' : 'pdf'),
|
||||
text_solution: '',
|
||||
path_solution: file.uploadPath,
|
||||
is_active: solutionStatuses[fieldId] !== false
|
||||
is_active: solutionStatuses[fieldId] !== false,
|
||||
};
|
||||
|
||||
if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
|
||||
solutionData.brand_code_solution_id = window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
solutionData.brand_code_solution_id =
|
||||
window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
}
|
||||
|
||||
solutions.push(solutionData);
|
||||
@@ -141,7 +162,8 @@ const ErrorCodeForm = ({
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap error code harus memiliki minimal 1 solution (text atau file)!'
|
||||
message:
|
||||
'Setiap error code harus memiliki minimal 1 solution (text atau file)!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
@@ -154,13 +176,16 @@ const ErrorCodeForm = ({
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
status: values.status === undefined ? true : values.status,
|
||||
solution: solutions,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
|
||||
onAddErrorCode(newErrorCode);
|
||||
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!' });
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -169,14 +194,21 @@ const ErrorCodeForm = ({
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text'
|
||||
solution_type_0: 'text',
|
||||
});
|
||||
onResetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<Form.Item label="Status" style={{ margin: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
||||
@@ -203,85 +235,110 @@ const ErrorCodeForm = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddErrorCode}
|
||||
>
|
||||
<Button icon={<PlusOutlined />} onClick={handleAddErrorCode}>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Tambah Error Code'}
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Form.Item name="error_code" label="Error Code" rules={[{ required: true, message: 'Error Code wajib diisi' }]}>
|
||||
<Form.Item
|
||||
name="error_code"
|
||||
label="Error Code"
|
||||
rules={[{ required: true, message: 'Error Code wajib diisi' }]}
|
||||
>
|
||||
<Input disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="error_code_name" label="Error Code Name" rules={[{ required: true, message: 'Error Code Name wajib diisi' }]}>
|
||||
<Form.Item
|
||||
name="error_code_name"
|
||||
label="Error Code Name"
|
||||
rules={[{ required: true, message: 'Error Code Name wajib diisi' }]}
|
||||
>
|
||||
<Input disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="error_code_color" label="Error Code Color">
|
||||
<Input
|
||||
type="color"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
style={{ width: 100, height: 40 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Error Code Icon">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
{errorCodeIcon ? (
|
||||
<>
|
||||
<img
|
||||
src={errorCodeIcon.url}
|
||||
alt="Error Code Icon"
|
||||
style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
objectFit: 'cover',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
|
||||
{errorCodeIcon.name}
|
||||
<Form.Item label="Color & Icon">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Text style={{ fontSize: 14, minWidth: 40 }}>Icon:</Text>
|
||||
{errorCodeIcon ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<img
|
||||
src={errorCodeIcon.url}
|
||||
alt="Error Code Icon"
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
objectFit: 'cover',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
|
||||
{errorCodeIcon.name.length > 15
|
||||
? errorCodeIcon.name.substring(0, 15) + '...'
|
||||
: errorCodeIcon.name}
|
||||
</div>
|
||||
{!isErrorCodeFormReadOnly && (
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={handleRemoveIcon}
|
||||
style={{ height: 20, padding: '0 4px', fontSize: 10 }}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!isErrorCodeFormReadOnly && (
|
||||
<Button
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={handleRemoveIcon}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Upload
|
||||
accept="image/*"
|
||||
beforeUpload={handleIconUpload}
|
||||
showUploadList={false}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
>
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
) : (
|
||||
<Upload
|
||||
accept="image/*"
|
||||
beforeUpload={handleIconUpload}
|
||||
showUploadList={false}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
>
|
||||
Upload Icon
|
||||
</Button>
|
||||
</Upload>
|
||||
)}
|
||||
<Button
|
||||
size="small"
|
||||
icon={<UploadOutlined />}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
style={{ height: 32 }}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Text style={{ fontSize: 14, minWidth: 40 }}>Color:</Text>
|
||||
<Form.Item name="error_code_color" noStyle>
|
||||
<Input
|
||||
type="color"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
style={{
|
||||
width: 50,
|
||||
height: 32,
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||
Upload an icon image (max 2MB, JPG/PNG/GIF)
|
||||
Choose color and upload icon (max 2MB, JPG/PNG/GIF)
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="error_code_description" label="Error Code Description" rules={[{ required: true, message: 'Error Code Description wajib diisi' }]}>
|
||||
<Form.Item
|
||||
name="error_code_description"
|
||||
label="Error Code Description"
|
||||
rules={[{ required: true, message: 'Error Code Description wajib diisi' }]}
|
||||
>
|
||||
<Input.TextArea disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
@@ -295,7 +352,7 @@ const ErrorCodeForm = ({
|
||||
solutionType={solutionTypes[fieldId]}
|
||||
solutionStatus={solutionStatuses[fieldId]}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
fileList={fileList.filter(file => file.solutionId === fieldId)}
|
||||
fileList={fileList.filter((file) => file.solutionId === fieldId)}
|
||||
onRemove={() => onRemoveSolutionField(fieldId)}
|
||||
onSolutionTypeChange={(type) => onSolutionTypeChange(fieldId, type)}
|
||||
onSolutionStatusChange={(status) => onSolutionStatusChange(fieldId, status)}
|
||||
@@ -320,21 +377,17 @@ const ErrorCodeForm = ({
|
||||
|
||||
{!isErrorCodeFormReadOnly && editingErrorCodeKey && (
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
|
||||
<Button onClick={handleResetForm}>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button onClick={handleResetForm}>Kembali</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{isErrorCodeFormReadOnly && editingErrorCodeKey && (
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
|
||||
<Button onClick={handleResetForm}>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button onClick={handleResetForm}>Kembali</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorCodeForm;
|
||||
export default ErrorCodeForm;
|
||||
|
||||
Reference in New Issue
Block a user