lavoce #27
279
src/pages/master/brandDevice/component/ErrorCodeForm.jsx
Normal file
279
src/pages/master/brandDevice/component/ErrorCodeForm.jsx
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Form, Input, Switch, Typography, ConfigProvider, Card, Button } from 'antd';
|
||||||
|
import { FileOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||||
|
import FileUploadHandler from './FileUploadHandler';
|
||||||
|
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||||
|
import { getFileUrl, getFolderFromFileType } from '../../../../api/file-uploads';
|
||||||
|
|
||||||
|
const { Text } = Typography;
|
||||||
|
|
||||||
|
const ErrorCodeForm = ({
|
||||||
|
errorCodeForm,
|
||||||
|
isErrorCodeFormReadOnly = false,
|
||||||
|
errorCodeIcon,
|
||||||
|
onErrorCodeIconUpload,
|
||||||
|
onErrorCodeIconRemove,
|
||||||
|
isEdit = false,
|
||||||
|
}) => {
|
||||||
|
const [statusValue, setStatusValue] = useState(true);
|
||||||
|
const [currentIcon, setCurrentIcon] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (errorCodeIcon && typeof errorCodeIcon === 'object' && Object.keys(errorCodeIcon).length > 0) {
|
||||||
|
setCurrentIcon(errorCodeIcon);
|
||||||
|
} else {
|
||||||
|
setCurrentIcon(null);
|
||||||
|
}
|
||||||
|
}, [errorCodeIcon]);
|
||||||
|
|
||||||
|
const handleIconRemove = () => {
|
||||||
|
setCurrentIcon(null);
|
||||||
|
onErrorCodeIconRemove();
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderIconUpload = () => {
|
||||||
|
if (currentIcon) {
|
||||||
|
const displayFileName = currentIcon.name || currentIcon.uploadPath?.split('/').pop() || currentIcon.url?.split('/').pop() || 'Icon File';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
marginTop: 8,
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||||
|
border: '1px solid #e8e8e8'
|
||||||
|
}}
|
||||||
|
styles={{ body: { padding: '16px' } }}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
borderRadius: 8,
|
||||||
|
backgroundColor: '#f0f5ff',
|
||||||
|
flexShrink: 0
|
||||||
|
}}>
|
||||||
|
<FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: '#262626',
|
||||||
|
marginBottom: 4,
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
}}>
|
||||||
|
{displayFileName}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#8c8c8c' }}>
|
||||||
|
{currentIcon.size ? `${(currentIcon.size / 1024).toFixed(1)} KB` : 'Icon uploaded'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
size="middle"
|
||||||
|
icon={<EyeOutlined />}
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
try {
|
||||||
|
let iconUrl = '';
|
||||||
|
let actualFileName = '';
|
||||||
|
|
||||||
|
const filePath = currentIcon.uploadPath || currentIcon.url || currentIcon.path || '';
|
||||||
|
const iconDisplayName = currentIcon.name || '';
|
||||||
|
|
||||||
|
if (iconDisplayName) {
|
||||||
|
actualFileName = iconDisplayName;
|
||||||
|
} else if (filePath) {
|
||||||
|
actualFileName = filePath.split('/').pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (actualFileName) {
|
||||||
|
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
|
||||||
|
const folder = getFolderFromFileType(fileExtension);
|
||||||
|
iconUrl = getFileUrl(folder, actualFileName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!iconUrl && filePath) {
|
||||||
|
iconUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (iconUrl && actualFileName) {
|
||||||
|
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
|
||||||
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||||
|
const pdfExtensions = ['pdf'];
|
||||||
|
|
||||||
|
if (imageExtensions.includes(fileExtension) || pdfExtensions.includes(fileExtension)) {
|
||||||
|
const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
|
||||||
|
window.open(viewerUrl, '_blank', 'noopener,noreferrer');
|
||||||
|
} else {
|
||||||
|
window.open(iconUrl, '_blank', 'noopener,noreferrer');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: `File URL not found. FileName: ${actualFileName}, FilePath: ${filePath}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: `Failed to open file preview: ${error.message}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
danger
|
||||||
|
size="middle"
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
onClick={handleIconRemove}
|
||||||
|
disabled={isErrorCodeFormReadOnly}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<FileUploadHandler
|
||||||
|
type="error_code"
|
||||||
|
existingFile={null}
|
||||||
|
accept="image/*"
|
||||||
|
onFileUpload={(fileData) => {
|
||||||
|
setCurrentIcon(fileData);
|
||||||
|
onErrorCodeIconUpload(fileData);
|
||||||
|
}}
|
||||||
|
onFileRemove={handleIconRemove}
|
||||||
|
buttonText="Upload Icon"
|
||||||
|
buttonStyle={{
|
||||||
|
width: '100%',
|
||||||
|
borderColor: '#23A55A',
|
||||||
|
color: '#23A55A',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: '8px'
|
||||||
|
}}
|
||||||
|
uploadText="Upload error code icon"
|
||||||
|
disabled={isErrorCodeFormReadOnly}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Switch: {
|
||||||
|
colorPrimary: '#23A55A',
|
||||||
|
colorPrimaryHover: '#23A55A',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={errorCodeForm}
|
||||||
|
layout="vertical"
|
||||||
|
initialValues={{
|
||||||
|
status: true,
|
||||||
|
error_code_color: '#000000'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label="Status"
|
||||||
|
name="status"
|
||||||
|
valuePropName="checked"
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Switch
|
||||||
|
defaultChecked={true}
|
||||||
|
onChange={(checked) => {
|
||||||
|
setStatusValue(checked);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text style={{ marginLeft: 8 }}>
|
||||||
|
{statusValue ? 'Active' : 'Inactive'}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="Error Code"
|
||||||
|
name="error_code"
|
||||||
|
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="Enter error code"
|
||||||
|
disabled={isErrorCodeFormReadOnly}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label="Error Name"
|
||||||
|
name="error_code_name"
|
||||||
|
rules={[{ required: true, message: 'Error name wajib diisi!' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="Enter error name" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item label="Description" name="error_code_description">
|
||||||
|
<Input.TextArea
|
||||||
|
placeholder="Enter error description"
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item label="Color & Icon">
|
||||||
|
<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
|
||||||
|
<Form.Item
|
||||||
|
name="error_code_color"
|
||||||
|
noStyle
|
||||||
|
style={{ flex: '0 0 auto' }}
|
||||||
|
getValueFromEvent={(e) => e.target.value}
|
||||||
|
getValueProps={(value) => ({ value: value || '#000000' })}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
style={{
|
||||||
|
width: '120px',
|
||||||
|
height: '40px',
|
||||||
|
border: '1px solid #d9d9d9',
|
||||||
|
borderRadius: 4,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item noStyle style={{ flex: '1 1 auto' }}>
|
||||||
|
{renderIconUpload()}
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorCodeForm;
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Form, Input, Switch, Typography, ConfigProvider } from 'antd';
|
|
||||||
import FileUploadHandler from './FileUploadHandler';
|
|
||||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
|
||||||
|
|
||||||
const { Text } = Typography;
|
|
||||||
|
|
||||||
const ErrorCodeSimpleForm = ({
|
|
||||||
errorCodeForm,
|
|
||||||
isErrorCodeFormReadOnly = false,
|
|
||||||
errorCodeIcon,
|
|
||||||
onErrorCodeIconUpload,
|
|
||||||
onErrorCodeIconRemove,
|
|
||||||
onAddErrorCode,
|
|
||||||
isEdit = false, // Add isEdit prop to check if we're in edit mode
|
|
||||||
}) => {
|
|
||||||
const statusValue = Form.useWatch('status', errorCodeForm);
|
|
||||||
|
|
||||||
const handleIconRemove = () => {
|
|
||||||
onErrorCodeIconRemove();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Status Switch */}
|
|
||||||
<Form.Item label="Status" name="status">
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
||||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
|
||||||
<Switch
|
|
||||||
style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Text style={{ marginLeft: 8 }}>{statusValue ? 'Active' : 'Inactive'}</Text>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
{/* Error Code */}
|
|
||||||
<Form.Item
|
|
||||||
label="Error Code"
|
|
||||||
name="error_code"
|
|
||||||
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
placeholder="Enter error code"
|
|
||||||
disabled={isErrorCodeFormReadOnly}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
{/* Error Name */}
|
|
||||||
<Form.Item
|
|
||||||
label="Error Name"
|
|
||||||
name="error_code_name"
|
|
||||||
rules={[{ required: true, message: 'Error name wajib diisi!' }]}
|
|
||||||
>
|
|
||||||
<Input placeholder="Enter error name" />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
{/* Error Description */}
|
|
||||||
<Form.Item label="Description" name="error_code_description">
|
|
||||||
<Input.TextArea
|
|
||||||
placeholder="Enter error description"
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
{/* Color and Icon */}
|
|
||||||
<Form.Item label="Color & Icon">
|
|
||||||
<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
|
|
||||||
<Form.Item name="error_code_color" noStyle style={{ flex: '0 0 auto' }}>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
style={{
|
|
||||||
width: '120px',
|
|
||||||
height: '40px',
|
|
||||||
border: '1px solid #d9d9d9',
|
|
||||||
borderRadius: 4,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item noStyle style={{ flex: '1 1 auto' }}>
|
|
||||||
<FileUploadHandler
|
|
||||||
type="error_code"
|
|
||||||
existingFile={errorCodeIcon}
|
|
||||||
accept="image/*"
|
|
||||||
onFileUpload={onErrorCodeIconUpload}
|
|
||||||
onFileRemove={handleIconRemove}
|
|
||||||
buttonText="Upload Icon"
|
|
||||||
buttonStyle={{
|
|
||||||
width: '100%',
|
|
||||||
borderColor: '#23A55A',
|
|
||||||
color: '#23A55A',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '8px'
|
|
||||||
}}
|
|
||||||
uploadText="Upload error code icon"
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Form.Item>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ErrorCodeSimpleForm;
|
|
||||||
307
src/pages/master/brandDevice/component/ListErrorCode.jsx
Normal file
307
src/pages/master/brandDevice/component/ListErrorCode.jsx
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
|
import { Card, Input, Button, Row, Col, Empty } from 'antd';
|
||||||
|
import { PlusOutlined, SearchOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||||
|
import { getErrorCodesByBrandId, deleteErrorCode } from '../../../../api/master-brand';
|
||||||
|
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
|
||||||
|
|
||||||
|
const ListErrorCode = ({
|
||||||
|
brandId,
|
||||||
|
selectedErrorCode,
|
||||||
|
onErrorCodeSelect,
|
||||||
|
onAddNew,
|
||||||
|
tempErrorCodes = [],
|
||||||
|
trigerFilter,
|
||||||
|
searchText,
|
||||||
|
onSearchChange,
|
||||||
|
onSearch,
|
||||||
|
onSearchClear
|
||||||
|
}) => {
|
||||||
|
const [errorCodes, setErrorCodes] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
current_page: 1,
|
||||||
|
current_limit: 15,
|
||||||
|
total_limit: 0,
|
||||||
|
total_page: 0,
|
||||||
|
});
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const pageSize = 15; // Fixed limit 15 items per page
|
||||||
|
|
||||||
|
const queryParams = useMemo(() => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
params.set('page', currentPage.toString());
|
||||||
|
params.set('limit', pageSize.toString());
|
||||||
|
if (searchText) {
|
||||||
|
params.set('criteria', searchText);
|
||||||
|
}
|
||||||
|
return params;
|
||||||
|
}, [searchText, currentPage, pageSize]);
|
||||||
|
|
||||||
|
const fetchErrorCodes = async () => {
|
||||||
|
if (!brandId) {
|
||||||
|
setErrorCodes([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await getErrorCodesByBrandId(brandId, queryParams);
|
||||||
|
|
||||||
|
if (response && response.statusCode === 200) {
|
||||||
|
const apiErrorData = response.data || [];
|
||||||
|
const allErrorCodes = [
|
||||||
|
...apiErrorData.map(ec => ({
|
||||||
|
...ec,
|
||||||
|
tempId: `existing_${ec.error_code_id}`,
|
||||||
|
status: 'existing'
|
||||||
|
})),
|
||||||
|
...tempErrorCodes.filter(ec => ec.status !== 'deleted')
|
||||||
|
];
|
||||||
|
|
||||||
|
setErrorCodes(allErrorCodes);
|
||||||
|
|
||||||
|
if (response.paging) {
|
||||||
|
setPagination({
|
||||||
|
current_page: response.paging.current_page || 1,
|
||||||
|
current_limit: response.paging.current_limit || 15,
|
||||||
|
total_limit: response.paging.total_limit || 0,
|
||||||
|
total_page: response.paging.total_page || 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setErrorCodes([]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setErrorCodes([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchErrorCodes();
|
||||||
|
}, [brandId, queryParams, tempErrorCodes, trigerFilter]);
|
||||||
|
|
||||||
|
const handlePrevious = () => {
|
||||||
|
if (pagination.current_page > 1) {
|
||||||
|
setCurrentPage(pagination.current_page - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (pagination.current_page < pagination.total_page) {
|
||||||
|
setCurrentPage(pagination.current_page + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
setCurrentPage(1);
|
||||||
|
if (onSearch) {
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearchClear = () => {
|
||||||
|
setCurrentPage(1);
|
||||||
|
if (onSearchClear) {
|
||||||
|
onSearchClear();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (item, e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (item.status === 'existing' && item.error_code_id) {
|
||||||
|
NotifConfirmDialog({
|
||||||
|
icon: 'warning',
|
||||||
|
title: 'Hapus Error Code',
|
||||||
|
message: `Apakah Anda yakin ingin menghapus error code ${item.error_code}?`,
|
||||||
|
onConfirm: () => performDelete(item),
|
||||||
|
onCancel: () => {},
|
||||||
|
confirmButtonText: 'Hapus'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const performDelete = async (item) => {
|
||||||
|
try {
|
||||||
|
// Additional validation
|
||||||
|
if (!item.error_code_id || item.error_code_id === 'undefined') {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Error code ID tidak valid'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!item.brand_id || item.brand_id === 'undefined') {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Brand ID tidak valid'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await deleteErrorCode(item.brand_id, item.error_code_id);
|
||||||
|
|
||||||
|
if (response && response.statusCode === 200) {
|
||||||
|
NotifOk({
|
||||||
|
icon: 'success',
|
||||||
|
title: 'Berhasil',
|
||||||
|
message: 'Error code berhasil dihapus'
|
||||||
|
});
|
||||||
|
fetchErrorCodes();
|
||||||
|
} else {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Gagal',
|
||||||
|
message: 'Gagal menghapus error code'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Terjadi kesalahan saat menghapus error code'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
title="Daftar Error Code"
|
||||||
|
style={{ width: '100%', minWidth: '472px' }}
|
||||||
|
styles={{ body: { padding: '12px' } }}
|
||||||
|
>
|
||||||
|
<Input.Search
|
||||||
|
placeholder="Cari error code..."
|
||||||
|
value={searchText}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (onSearchChange) {
|
||||||
|
onSearchChange(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
allowClear
|
||||||
|
enterButton={
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
onClick={handleSearch}
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#23A55A',
|
||||||
|
borderColor: '#23A55A',
|
||||||
|
height: '32px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
size="default"
|
||||||
|
style={{
|
||||||
|
marginBottom: 12,
|
||||||
|
height: '32px',
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '300px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
height: '90vh',
|
||||||
|
border: '1px solid #d9d9d9',
|
||||||
|
borderRadius: '6px',
|
||||||
|
overflow: 'auto',
|
||||||
|
marginBottom: 12,
|
||||||
|
backgroundColor: '#fafafa'
|
||||||
|
}}>
|
||||||
|
{errorCodes.length === 0 ? (
|
||||||
|
<Empty
|
||||||
|
description="Belum ada error code"
|
||||||
|
style={{ marginTop: 50 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: '8px' }}>
|
||||||
|
{errorCodes.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.tempId || item.error_code_id}
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '8px 12px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
marginBottom: '4px',
|
||||||
|
border: selectedErrorCode?.tempId === item.tempId ? '2px solid #23A55A' : '1px solid #d9d9d9',
|
||||||
|
backgroundColor: selectedErrorCode?.tempId === item.tempId ? '#f6ffed' : '#fff',
|
||||||
|
transition: 'all 0.2s ease'
|
||||||
|
}}
|
||||||
|
onClick={() => onErrorCodeSelect(item)}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ fontWeight: 'bold', fontSize: '12px' }}>
|
||||||
|
{item.error_code}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '11px', color: '#666' }}>
|
||||||
|
{item.error_code_name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{item.status === 'existing' && (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
danger
|
||||||
|
size="small"
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
onClick={(e) => handleDelete(item, e)}
|
||||||
|
style={{
|
||||||
|
padding: '2px 6px',
|
||||||
|
height: '24px',
|
||||||
|
fontSize: '11px',
|
||||||
|
border: '1px solid #ff4d4f'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{pagination.total_limit > 0 && (
|
||||||
|
<Row justify="space-between" align="middle" gutter={16}>
|
||||||
|
<Col flex="auto">
|
||||||
|
<span style={{ fontSize: '12px', color: '#666' }}>
|
||||||
|
Menampilkan {pagination.current_limit} data halaman{' '}
|
||||||
|
{pagination.current_page} dari total {pagination.total_limit} data
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
<Col flex="none">
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||||
|
<Button
|
||||||
|
icon={<LeftOutlined />}
|
||||||
|
onClick={handlePrevious}
|
||||||
|
disabled={pagination.current_page <= 1}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
<span style={{ fontSize: '12px', color: '#666', minWidth: '60px', textAlign: 'center' }}>
|
||||||
|
{pagination.current_page} / {pagination.total_page}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
icon={<RightOutlined />}
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={pagination.current_page >= pagination.total_page}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListErrorCode;
|
||||||
@@ -194,7 +194,6 @@ export const useErrorCodeLogic = (errorCodeForm, fileList) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSolutionStatusChange = (fieldId, status) => {
|
const handleSolutionStatusChange = (fieldId, status) => {
|
||||||
// Only update local state - form is already updated by Form.Item
|
|
||||||
setSolutionStatuses(prev => ({
|
setSolutionStatuses(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
[fieldId]: status
|
[fieldId]: status
|
||||||
@@ -213,8 +212,7 @@ export const useErrorCodeLogic = (errorCodeForm, fileList) => {
|
|||||||
newSolutionTypes[fieldId] = solution.type_solution || 'text';
|
newSolutionTypes[fieldId] = solution.type_solution || 'text';
|
||||||
newSolutionStatuses[fieldId] = solution.is_active !== false;
|
newSolutionStatuses[fieldId] = solution.is_active !== false;
|
||||||
newSolutionData[fieldId] = {
|
newSolutionData[fieldId] = {
|
||||||
...solution,
|
...solution
|
||||||
brand_code_solution_id: solution.brand_code_solution_id
|
|
||||||
};
|
};
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user