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

lavoce #11

Merged
bragaz_rexita merged 8 commits from lavoce into main 2025-10-28 09:47:36 +00:00
Conversation 0 Commits 8 Files Changed 14 +137 -84
1 changed files with 137 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 259ee474aa - Show all commits

221
src/pages/master/brandDevice/component/ErrorCodeForm.jsx
View File

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