Merge pull request 'lavoce' (#22) from lavoce into main
Reviewed-on: #22
This commit is contained in:
35
src/App.jsx
35
src/App.jsx
@@ -10,11 +10,13 @@ import Home from './pages/home/Home';
|
||||
import Blank from './pages/blank/Blank';
|
||||
|
||||
// Master
|
||||
import IndexDevice from './pages/master/device/IndexDevice';
|
||||
import IndexTag from './pages/master/tag/IndexTag';
|
||||
import IndexUnit from './pages/master/unit/IndexUnit';
|
||||
import IndexPlantSubSection from './pages/master/plantSubSection/IndexPlantSubSection';
|
||||
import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
|
||||
import IndexDevice from './pages/master/device/IndexDevice';
|
||||
import IndexUnit from './pages/master/unit/IndexUnit';
|
||||
import IndexTag from './pages/master/tag/IndexTag';
|
||||
import IndexStatus from './pages/master/status/IndexStatus';
|
||||
import IndexSparepart from './pages/master/sparepart/IndexSparepart';
|
||||
import IndexShift from './pages/master/shift/IndexShift';
|
||||
// Brand device
|
||||
import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice';
|
||||
@@ -34,6 +36,8 @@ import IndexNotification from './pages/notification/IndexNotification';
|
||||
import IndexRole from './pages/role/IndexRole';
|
||||
import IndexUser from './pages/user/IndexUser';
|
||||
import IndexContact from './pages/contact/IndexContact';
|
||||
import DetailNotificationTab from './pages/detailNotification/IndexDetailNotification';
|
||||
import IndexVerificationSparepart from './pages/verificationSparepart/IndexVerificationSparepart';
|
||||
|
||||
import SvgTest from './pages/home/SvgTest';
|
||||
import SvgOverviewCompressor from './pages/home/SvgOverviewCompressor';
|
||||
@@ -46,7 +50,6 @@ import SvgAirDryerB from './pages/home/SvgAirDryerB';
|
||||
import SvgAirDryerC from './pages/home/SvgAirDryerC';
|
||||
import IndexHistoryAlarm from './pages/history/alarm/IndexHistoryAlarm';
|
||||
import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
|
||||
import IndexPlantSubSection from './pages/master/plantSubSection/IndexPlantSubSection';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@@ -57,6 +60,14 @@ const App = () => {
|
||||
<Route path="/signin" element={<SignIn />} />
|
||||
<Route path="/signup" element={<SignUp />} />
|
||||
<Route path="/svg" element={<SvgTest />} />
|
||||
<Route
|
||||
path="/detail-notification/:notificationId"
|
||||
element={<DetailNotificationTab />}
|
||||
/>
|
||||
<Route
|
||||
path="/verification-sparepart/:notificationId"
|
||||
element={<IndexVerificationSparepart />}
|
||||
/>
|
||||
|
||||
{/* Protected Routes */}
|
||||
<Route path="/dashboard" element={<ProtectedRoute />}>
|
||||
@@ -79,13 +90,23 @@ const App = () => {
|
||||
<Route path="device" element={<IndexDevice />} />
|
||||
<Route path="tag" element={<IndexTag />} />
|
||||
<Route path="unit" element={<IndexUnit />} />
|
||||
<Route path="sparepart" element={<IndexSparepart />} />
|
||||
<Route path="brand-device" element={<IndexBrandDevice />} />
|
||||
<Route path="brand-device/add" element={<AddBrandDevice />} />
|
||||
<Route path="brand-device/edit/:id" element={<EditBrandDevice />} />
|
||||
<Route path="brand-device/view/:id" element={<ViewBrandDevice />} />
|
||||
<Route path="brand-device/edit/:id/files/:fileType/:fileName" element={<ViewFilePage />} />
|
||||
<Route path="brand-device/view/:id/files/:fileType/:fileName" element={<ViewFilePage />} />
|
||||
<Route path="brand-device/view/temp/files/:fileName" element={<ViewFilePage />} />
|
||||
<Route
|
||||
path="brand-device/edit/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="brand-device/view/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="brand-device/view/temp/files/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route path="plant-sub-section" element={<IndexPlantSubSection />} />
|
||||
<Route path="shift" element={<IndexShift />} />
|
||||
<Route path="status" element={<IndexStatus />} />
|
||||
|
||||
50
src/api/sparepart.jsx
Normal file
50
src/api/sparepart.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { SendRequest } from '../components/Global/ApiRequest';
|
||||
|
||||
const getAllSparepart = async (queryParams) => {
|
||||
const response = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: `sparepart?${queryParams.toString()}`,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const getSparepartById = async (id) => {
|
||||
const response = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: `sparepart/${id}`,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const createSparepart = async (queryParams) => {
|
||||
const response = await SendRequest({
|
||||
method: 'post',
|
||||
prefix: `sparepart`,
|
||||
params: queryParams,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const updateSparepart = async (id, queryParams) => {
|
||||
const response = await SendRequest({
|
||||
method: 'put',
|
||||
prefix: `sparepart/${id}`,
|
||||
params: queryParams,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const deleteSparepart = async (id) => {
|
||||
const response = await SendRequest({
|
||||
method: 'delete',
|
||||
prefix: `sparepart/${id}`,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export { getAllSparepart, getSparepartById, createSparepart, updateSparepart, deleteSparepart };
|
||||
@@ -85,7 +85,7 @@ const CardList = ({
|
||||
<React.Fragment key={index}>
|
||||
{!itemCard.hidden &&
|
||||
itemCard.title !== 'No' &&
|
||||
itemCard.title !== 'Aksi' && (
|
||||
itemCard.title !== 'Action' && (
|
||||
<p style={{ margin: '8px 0' }}>
|
||||
<Text strong>{itemCard.title}:</Text>{' '}
|
||||
{itemCard.render
|
||||
|
||||
@@ -32,6 +32,7 @@ import {
|
||||
SlidersOutlined,
|
||||
SnippetsOutlined,
|
||||
ContactsOutlined,
|
||||
ToolOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Text } = Typography;
|
||||
@@ -142,6 +143,11 @@ const allItems = [
|
||||
icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
|
||||
label: <Link to="/master/status">Status</Link>,
|
||||
},
|
||||
{
|
||||
key: 'master-sparepart',
|
||||
icon: <ToolOutlined style={{ fontSize: '19px' }} />,
|
||||
label: <Link to="/master/sparepart">sparepart</Link>,
|
||||
},
|
||||
// {
|
||||
// key: 'master-shift',
|
||||
// icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
|
||||
@@ -259,6 +265,7 @@ const LayoutMenu = () => {
|
||||
unit: 'master-unit',
|
||||
tag: 'master-tag',
|
||||
status: 'master-status',
|
||||
sparepart: 'master-sparepart',
|
||||
shift: 'master-shift',
|
||||
};
|
||||
return masterKeyMap[subPath] || `master-${subPath}`;
|
||||
|
||||
@@ -14,34 +14,22 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
name: '',
|
||||
phone: '',
|
||||
is_active: true,
|
||||
contact_type: 'operator',
|
||||
contact_type: '',
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
let name, value;
|
||||
|
||||
if (e && e.target) {
|
||||
name = e.target.name;
|
||||
value = e.target.value;
|
||||
} else if (e && e.type === 'change') {
|
||||
name = e.name || e.target?.name;
|
||||
value = e.value !== undefined ? e.value : e.checked;
|
||||
} else if (typeof e === 'string' || typeof e === 'number') {
|
||||
// Handle Select onChange
|
||||
value = e;
|
||||
name = 'contact_type';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
const { name, value } = e.target;
|
||||
|
||||
// Validasi untuk field phone - hanya angka yang diperbolehkan
|
||||
if (name === 'phone') {
|
||||
value = value.replace(/[^0-9+\-\s()]/g, '');
|
||||
}
|
||||
|
||||
if (name) {
|
||||
const cleanedValue = value.replace(/[^0-9+\-\s()]/g, '');
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: cleanedValue,
|
||||
}));
|
||||
} else {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
@@ -49,6 +37,13 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleContactTypeChange = (value) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
contact_type: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
@@ -59,6 +54,21 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
// Validation rules
|
||||
const validationRules = [
|
||||
{ field: 'name', label: 'Contact Name', required: true },
|
||||
{ field: 'phone', label: 'Phone', required: true },
|
||||
{ field: 'contact_type', label: 'Contact Type', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
return;
|
||||
|
||||
// Custom validation untuk name - minimal 3 karakter
|
||||
if (formData.name && formData.name.length < 3) {
|
||||
NotifOk({
|
||||
@@ -82,21 +92,6 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation rules
|
||||
const validationRules = [
|
||||
{ field: 'name', label: 'Contact Name', required: true },
|
||||
{ field: 'phone', label: 'Phone', required: true },
|
||||
{ field: 'contact_type', label: 'Contact Type', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
return;
|
||||
|
||||
try {
|
||||
const contactData = {
|
||||
contact_name: formData.name,
|
||||
@@ -107,7 +102,10 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
|
||||
let response;
|
||||
if (props.actionMode === 'edit') {
|
||||
response = await updateContact(props.selectedData.contact_id || props.selectedData.id, contactData);
|
||||
response = await updateContact(
|
||||
props.selectedData.contact_id || props.selectedData.id,
|
||||
contactData
|
||||
);
|
||||
} else {
|
||||
response = await createContact(contactData);
|
||||
}
|
||||
@@ -115,7 +113,7 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Contact berhasil ${
|
||||
message: `Data Contact "${formData.name}" berhasil ${
|
||||
props.actionMode === 'add' ? 'ditambahkan' : 'diperbarui'
|
||||
}.`,
|
||||
});
|
||||
@@ -145,15 +143,16 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
setFormData({
|
||||
name: props.selectedData.contact_name || props.selectedData.name,
|
||||
phone: props.selectedData.contact_phone || props.selectedData.phone,
|
||||
is_active: props.selectedData.is_active || props.selectedData.status === 'active',
|
||||
contact_type: props.selectedData.contact_type || props.contactType || 'operator',
|
||||
is_active:
|
||||
props.selectedData.is_active || props.selectedData.status === 'active',
|
||||
contact_type: props.selectedData.contact_type || props.contactType || '',
|
||||
});
|
||||
} else if (props.actionMode === 'add') {
|
||||
setFormData({
|
||||
name: '',
|
||||
phone: '',
|
||||
is_active: true,
|
||||
contact_type: props.contactType === 'all' ? 'operator' : props.contactType || 'operator',
|
||||
contact_type: props.contactType === 'all' ? '' : props.contactType || '',
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -256,8 +255,8 @@ const DetailContact = memo(function DetailContact(props) {
|
||||
<Text strong>Contact Type</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Select
|
||||
value={formData.contact_type}
|
||||
onChange={handleInputChange}
|
||||
value={formData.contact_type || undefined}
|
||||
onChange={handleContactTypeChange}
|
||||
placeholder="Select Contact Type"
|
||||
disabled={props.readOnly}
|
||||
style={{ width: '100%' }}
|
||||
|
||||
357
src/pages/detailNotification/IndexDetailNotification.jsx
Normal file
357
src/pages/detailNotification/IndexDetailNotification.jsx
Normal file
@@ -0,0 +1,357 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Layout,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Typography,
|
||||
Space,
|
||||
Button,
|
||||
Spin,
|
||||
Result,
|
||||
Input,
|
||||
} from 'antd';
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
CloseCircleFilled,
|
||||
WarningFilled,
|
||||
CheckCircleFilled,
|
||||
InfoCircleFilled,
|
||||
CloseOutlined,
|
||||
BookOutlined,
|
||||
ToolOutlined,
|
||||
HistoryOutlined,
|
||||
FilePdfOutlined,
|
||||
PlusOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
// Path disesuaikan karena lokasi file berubah
|
||||
// import { getNotificationById } from '../../api/notification'; // Dihapus karena belum ada di file API
|
||||
import UserHistoryModal from '../notification/component/UserHistoryModal';
|
||||
import LogHistoryModal from '../notification/component/LogHistoryModal';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Text, Paragraph, Link } = Typography;
|
||||
|
||||
// Menggunakan kembali fungsi transform dari ListNotification untuk konsistensi data
|
||||
const transformNotificationData = (item) => ({
|
||||
id: `notification-${item.notification_error_id || 'dummy'}-0`,
|
||||
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
|
||||
title: item.device_name || 'Unknown Device',
|
||||
issue: item.error_code_name || 'Unknown Error',
|
||||
description: `${item.error_code} - ${item.error_code_name}`,
|
||||
timestamp: new Date(item.created_at || Date.now()).toLocaleString('id-ID'),
|
||||
location: item.device_location || 'Location not specified',
|
||||
details: item.message_error_issue || 'No details available',
|
||||
link: '#',
|
||||
subsection: item.solution_name || 'N/A',
|
||||
isRead: item.is_read || false,
|
||||
status: item.is_read ? 'Resolved' : item.is_delivered ? 'Delivered' : 'Pending',
|
||||
tag: item.error_code,
|
||||
plc: item.plc || 'N/A',
|
||||
});
|
||||
|
||||
const getDummyNotificationById = (id) => {
|
||||
console.log("Fetching dummy data for ID:", id);
|
||||
// Data mentah dummy, seolah-olah dari API
|
||||
const rawDummyData = { device_name: 'Compressor C-101', error_code_name: 'High Temperature', error_code: 'TEMP-H-303', device_location: 'Gudang Produksi A', message_error_issue: 'Suhu kompresor terdeteksi melebihi ambang batas aman.', is_delivered: true, plc: 'PLC-UTL-01' };
|
||||
// Mengolah data mentah dummy menggunakan transform function
|
||||
return transformNotificationData(rawDummyData);
|
||||
};
|
||||
|
||||
const getIconAndColor = (type) => {
|
||||
switch (type) {
|
||||
case 'critical':
|
||||
return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' };
|
||||
case 'warning':
|
||||
return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' };
|
||||
case 'resolved':
|
||||
return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' };
|
||||
default:
|
||||
return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' };
|
||||
}
|
||||
};
|
||||
|
||||
const DetailNotificationTab = () => {
|
||||
const { notificationId } = useParams(); // Mungkin perlu disesuaikan jika route berbeda
|
||||
const navigate = useNavigate();
|
||||
const [notification, setNotification] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [modalContent, setModalContent] = useState(null); // 'user', 'log', atau null
|
||||
const [isAddingLog, setIsAddingLog] = useState(false);
|
||||
|
||||
const logHistoryData = [
|
||||
{
|
||||
id: 1,
|
||||
timestamp: '04-11-2025 11:55 WIB',
|
||||
addedBy: {
|
||||
name: 'Budi Santoso',
|
||||
phone: '081122334455',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
timestamp: '04-11-2025 11:45 WIB',
|
||||
addedBy: {
|
||||
name: 'John Doe',
|
||||
phone: '081234567890',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
timestamp: '04-11-2025 11:40 WIB',
|
||||
addedBy: {
|
||||
name: 'Jane Smith',
|
||||
phone: '087654321098',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Ganti dengan fungsi API asli Anda
|
||||
// const response = await getNotificationById(notificationId);
|
||||
// setNotification(response.data);
|
||||
|
||||
// Menggunakan data dummy untuk sekarang
|
||||
const dummyData = getDummyNotificationById(notificationId);
|
||||
if (dummyData) {
|
||||
setNotification(dummyData);
|
||||
} else {
|
||||
throw new Error('Notification not found');
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDetail();
|
||||
}, [notificationId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Spin size="large" />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !notification) {
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Result
|
||||
status="404"
|
||||
title="404"
|
||||
subTitle="Sorry, the notification you visited does not exist."
|
||||
extra={<Button type="primary" onClick={() => navigate('/notification')}>Back to List</Button>}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const { color } = getIconAndColor(notification.type);
|
||||
|
||||
return (
|
||||
<Layout style={{ padding: '24px', backgroundColor: '#f0f2f5' }}>
|
||||
<Content>
|
||||
<Card>
|
||||
<div style={{ borderBottom: '1px solid #f0f0f0', paddingBottom: '16px', marginBottom: '24px' }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/notification')}
|
||||
style={{ paddingLeft: 0 }}
|
||||
>
|
||||
Back to notification list
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
icon={<UserOutlined />}
|
||||
onClick={() => setModalContent('user')}
|
||||
>
|
||||
User History
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '4px', padding: '8px 16px', textAlign: 'center', marginTop: '16px' }}>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
|
||||
Error Notification Detail
|
||||
</Typography.Title>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<Row gutter={[24, 24]}>
|
||||
{/* Kolom Kiri: Data Kompresor */}
|
||||
<Col xs={24} lg={12}>
|
||||
<Card size="small" style={{ height: '100%', borderColor: '#d4380d' }} bodyStyle={{ padding: '16px' }}>
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<Row gutter={16} align="middle">
|
||||
<Col>
|
||||
<div style={{ width: '32px', height: '32px', borderRadius: '50%', backgroundColor: '#d4380d', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ffffff', fontSize: '18px' }}><CloseOutlined /></div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Text>{notification.title}</Text>
|
||||
<div style={{ marginTop: '2px' }}><Text strong style={{ fontSize: '16px' }}>{notification.issue}</Text></div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div>
|
||||
<Text strong>Plant Subsection</Text>
|
||||
<div>{notification.subsection}</div>
|
||||
<Text strong style={{ display: 'block', marginTop: '8px' }}>Time</Text>
|
||||
<div>{notification.timestamp}</div>
|
||||
</div>
|
||||
<div style={{ border: '1px solid #d4380d', borderRadius: '4px', padding: '8px', background: 'linear-gradient(to right, #ffe7e6, #ffffff)' }}>
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col><Text style={{ fontSize: '12px', color: color }}>Value</Text><div style={{ fontWeight: 'bold', fontSize: '16px', color: color }}>N/A</div></Col>
|
||||
<Col><Text type="secondary" style={{ fontSize: '12px' }}>Treshold</Text><div style={{ fontWeight: 500 }}>N/A</div></Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Kolom Kanan: Informasi Teknis */}
|
||||
<Col xs={24} lg={12}>
|
||||
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
|
||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||
<div><Text strong>PLC</Text><div>{notification.plc || 'N/A'}</div></div>
|
||||
<div><Text strong>Status</Text><div style={{ color: '#faad14', fontWeight: 500 }}>{notification.status}</div></div>
|
||||
<div><Text strong>Tag</Text><div style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '4px', display: 'inline-block' }}>{notification.tag}</div></div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={8}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Handling Guideline</Text></Space></Card></Col>
|
||||
<Col xs={24} md={8}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Spare Part</Text></Space></Card></Col>
|
||||
<Col xs={24} md={8} onClick={() => setModalContent('log')} style={{ cursor: 'pointer' }}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><HistoryOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Log Activity</Text></Space></Card></Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={8}>
|
||||
<Card size="small" title="Guideline Documents" style={{ height: '100%' }}>
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<Card size="small" hoverable>
|
||||
<Text><FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf</Text>
|
||||
<Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link>
|
||||
</Card>
|
||||
<Card size="small" hoverable>
|
||||
<Text><FilePdfOutlined style={{ marginRight: '8px' }} /> SOP Kompresor.pdf</Text>
|
||||
<Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link>
|
||||
</Card>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} md={8}>
|
||||
<Card size="small" title="Required Spare Parts" style={{ height: '100%' }}>
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<Card size="small">
|
||||
<Row gutter={16} align="top">
|
||||
<Col span={7} style={{ textAlign: 'center' }}>
|
||||
<div style={{ width: '100%', height: '60px', backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px', marginBottom: '8px' }}>
|
||||
<ToolOutlined style={{ fontSize: '24px', color: '#bfbfbf' }} />
|
||||
</div>
|
||||
<Text style={{ fontSize: '12px', color: '#52c41a', fontWeight: 500 }}>Available</Text>
|
||||
</Col>
|
||||
<Col span={17}>
|
||||
<Text strong>Air Filter</Text>
|
||||
<Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>Filters incoming air to remove dust.</Paragraph>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card size="small" style={{ height: '100%' }}>
|
||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
||||
<Card
|
||||
size="small"
|
||||
bodyStyle={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
|
||||
}}
|
||||
>
|
||||
<Space
|
||||
direction="vertical"
|
||||
style={{ width: '100%' }}
|
||||
size="small"
|
||||
>
|
||||
{isAddingLog && (
|
||||
<>
|
||||
<Text strong style={{ fontSize: '12px' }}>
|
||||
Add New Log / Update Progress
|
||||
</Text>
|
||||
<Input.TextArea
|
||||
rows={2}
|
||||
placeholder="Tuliskan update penanganan di sini..."
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
type={isAddingLog ? 'primary' : 'dashed'}
|
||||
size="small"
|
||||
block
|
||||
icon={!isAddingLog && <PlusOutlined />}
|
||||
onClick={() => setIsAddingLog(!isAddingLog)}
|
||||
>
|
||||
{isAddingLog ? 'Submit Log' : 'Add Log'}
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
{logHistoryData.map((log) => (
|
||||
<Card
|
||||
key={log.id}
|
||||
size="small"
|
||||
bodyStyle={{ padding: '8px 12px' }}
|
||||
>
|
||||
<Paragraph
|
||||
style={{ fontSize: '12px', margin: 0 }}
|
||||
ellipsis={{ rows: 2 }}
|
||||
>
|
||||
<Text strong>{log.addedBy.name}:</Text>{' '}
|
||||
{log.description}
|
||||
</Paragraph>
|
||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||||
{log.timestamp}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
</Card>
|
||||
</Content>
|
||||
|
||||
<UserHistoryModal
|
||||
visible={modalContent === 'user'}
|
||||
onCancel={() => setModalContent(null)}
|
||||
notificationData={notification}
|
||||
/>
|
||||
<LogHistoryModal
|
||||
visible={modalContent === 'log'}
|
||||
onCancel={() => setModalContent(null)}
|
||||
notificationData={notification}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailNotificationTab;
|
||||
@@ -1,20 +1,32 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Divider, Typography, Button, Steps, Form, Row, Col, Card, ConfigProvider } from 'antd';
|
||||
import {
|
||||
Divider,
|
||||
Typography,
|
||||
Button,
|
||||
Steps,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
ConfigProvider,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { createBrand } from '../../../api/master-brand';
|
||||
import BrandForm from './component/BrandForm';
|
||||
import ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import ErrorCodeTable from './component/ListErrorCode';
|
||||
import ErrorCodeListModal from './component/ErrorCodeListModal';
|
||||
import FormActions from './component/FormActions';
|
||||
import SparepartForm from './component/SparepartForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import SparepartForm from './component/SparepartForm';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -44,8 +56,6 @@ const AddBrandDevice = () => {
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [sparepartImages, setSparepartImages] = useState({});
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
@@ -67,31 +77,16 @@ const AddBrandDevice = () => {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
sparepartsToDelete,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
setSparepartsForExistingRecord,
|
||||
} = useSparepartLogic(sparepartForm);
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages(prev => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages(prev => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbItems([
|
||||
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> },
|
||||
@@ -160,13 +155,14 @@ const AddBrandDevice = () => {
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
// Note: Sparepart data is collected but not sent to backend yet
|
||||
// sparepart: (ec.sparepart || []).map((sp) => ({
|
||||
// type: sp.type || 'required',
|
||||
// name: sp.name || '',
|
||||
// quantity: sp.quantity || 1,
|
||||
// is_active: sp.is_active !== false,
|
||||
// })),
|
||||
...(ec.sparepart && ec.sparepart.length > 0 && {
|
||||
sparepart: ec.sparepart.map((sp) => ({
|
||||
sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
|
||||
brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.sparepart_description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
path_foto: sp.path_foto || '',
|
||||
})),
|
||||
}),
|
||||
}));
|
||||
|
||||
const finalFormData = {
|
||||
@@ -226,7 +222,7 @@ const AddBrandDevice = () => {
|
||||
}
|
||||
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -258,17 +254,6 @@ const AddBrandDevice = () => {
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
// Reset sparepart fields first
|
||||
resetSparepartFields();
|
||||
// Then load new spareparts
|
||||
setTimeout(() => {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
}, 0);
|
||||
} else {
|
||||
resetSparepartFields();
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
@@ -297,9 +282,7 @@ const AddBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get sparepart data (optional, no backend yet)
|
||||
const spareparts = getSparepartData() || [];
|
||||
|
||||
const sparepartData = getSparepartData();
|
||||
const newErrorCode = {
|
||||
key: Date.now(),
|
||||
error_code: formValues.error_code,
|
||||
@@ -310,7 +293,7 @@ const AddBrandDevice = () => {
|
||||
status: formValues.status !== false,
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
solution: solutions,
|
||||
sparepart: spareparts,
|
||||
...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }), // Only add sparepart if there are spareparts
|
||||
};
|
||||
|
||||
if (editingErrorCodeKey) {
|
||||
@@ -336,7 +319,6 @@ const AddBrandDevice = () => {
|
||||
// Reset all forms
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
} catch (error) {
|
||||
console.error('Error adding error code:', error);
|
||||
NotifAlert({
|
||||
@@ -357,6 +339,7 @@ const AddBrandDevice = () => {
|
||||
setFileList([]);
|
||||
setErrorCodeIcon(null);
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
@@ -542,7 +525,6 @@ const AddBrandDevice = () => {
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
<SparepartForm
|
||||
@@ -550,59 +532,111 @@ const AddBrandDevice = () => {
|
||||
sparepartFields={sparepartFields}
|
||||
onAddSparepartField={handleAddSparepartField}
|
||||
onRemoveSparepartField={handleRemoveSparepartField}
|
||||
onSparepartTypeChange={handleSparepartTypeChange}
|
||||
onSparepartStatusChange={handleSparepartStatusChange}
|
||||
onSparepartImageUpload={handleSparepartImageUpload}
|
||||
onSparepartImageRemove={handleSparepartImageRemove}
|
||||
sparepartImages={sparepartImages}
|
||||
isReadOnly={false}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
<Row justify="center">
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#23a55ade' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
{/* Error Codes Table Column */}
|
||||
<Col span={24} style={{ marginTop: 16 }}>
|
||||
<Card size="small" title={`Error Codes (${errorCodes.length})`}>
|
||||
<Table
|
||||
dataSource={errorCodes}
|
||||
columns={[
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'error_code',
|
||||
key: 'error_code',
|
||||
width: '25%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
{
|
||||
title: 'Sol',
|
||||
key: 'Sol',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const solutionCount = record.solution
|
||||
? record.solution.length
|
||||
: 0;
|
||||
return (
|
||||
<Tag
|
||||
color={solutionCount > 0 ? 'green' : 'red'}
|
||||
>
|
||||
{solutionCount} Sol
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: '20%',
|
||||
align: 'center',
|
||||
render: (_, { status }) => (
|
||||
<Tag color={status ? 'green' : 'red'}>
|
||||
{status ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setShowErrorCodeModal(true)}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
View All Error Codes ({errorCodes.length})
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EyeOutlined
|
||||
style={{ color: '#1890ff' }}
|
||||
/>
|
||||
}
|
||||
onClick={() =>
|
||||
handlePreviewErrorCode(record)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EditOutlined
|
||||
style={{ color: '#faad14' }}
|
||||
/>
|
||||
}
|
||||
onClick={() => handleEditErrorCode(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() =>
|
||||
handleDeleteErrorCode(record.key)
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
rowKey="key"
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
hideOnSinglePage: true,
|
||||
}}
|
||||
size="small"
|
||||
scroll={{ y: 300 }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Modal */}
|
||||
<ErrorCodeListModal
|
||||
visible={showErrorCodeModal}
|
||||
onClose={() => setShowErrorCodeModal(false)}
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onAddNew={handleCreateNewErrorCode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -616,7 +650,7 @@ const AddBrandDevice = () => {
|
||||
</Title>
|
||||
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
||||
<Step title="Brand Device Details" />
|
||||
<Step title="Error Codes, Solutions & Spareparts" />
|
||||
<Step title="Error Codes & Solutions" />
|
||||
</Steps>
|
||||
<div style={{ marginTop: 24 }}>{renderStepContent()}</div>
|
||||
<Divider />
|
||||
|
||||
@@ -12,6 +12,9 @@ import {
|
||||
Spin,
|
||||
Modal,
|
||||
ConfigProvider,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
@@ -26,6 +29,7 @@ import FormActions from './component/FormActions';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -55,8 +59,6 @@ const EditBrandDevice = () => {
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [sparepartImages, setSparepartImages] = useState({});
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
|
||||
@@ -82,31 +84,16 @@ const EditBrandDevice = () => {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
sparepartsToDelete,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
setSparepartsForExistingRecord,
|
||||
} = useSparepartLogic(sparepartForm);
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages((prev) => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages((prev) => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBrandData = async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
@@ -169,6 +156,7 @@ const EditBrandDevice = () => {
|
||||
path_icon: ec.path_icon || '',
|
||||
status: ec.is_active,
|
||||
solution: ec.solution || [],
|
||||
sparepart: ec.sparepart || [],
|
||||
errorCodeIcon: ec.path_icon
|
||||
? {
|
||||
name: 'icon',
|
||||
@@ -230,9 +218,8 @@ const EditBrandDevice = () => {
|
||||
const handleFinish = async () => {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
// Get current solution and sparepart data from forms
|
||||
// Get current solution data from forms
|
||||
const currentSolutionData = getSolutionData();
|
||||
const currentSparepartData = getSparepartData();
|
||||
|
||||
const finalFormData = {
|
||||
brand_name: formData.brand_name,
|
||||
@@ -257,11 +244,11 @@ const EditBrandDevice = () => {
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: currentSparepartData.map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
sparepart: (ec.sparepart || []).map((sp) => ({
|
||||
sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
|
||||
brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.brand_sparepart_description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sparepartImages[sp.key || sp.id] || null,
|
||||
path_foto: sp.path_foto || '',
|
||||
})),
|
||||
};
|
||||
}
|
||||
@@ -281,12 +268,14 @@ const EditBrandDevice = () => {
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: (ec.sparepart || []).map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
...(ec.sparepart && ec.sparepart.length > 0 && {
|
||||
sparepart: ec.sparepart.map((sp) => ({
|
||||
sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
|
||||
brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.brand_sparepart_description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sp.sparepart_image || null,
|
||||
path_foto: sp.path_foto || '',
|
||||
})),
|
||||
}),
|
||||
};
|
||||
}),
|
||||
};
|
||||
@@ -340,19 +329,9 @@ const EditBrandDevice = () => {
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
});
|
||||
setSparepartImages(newSparepartImages);
|
||||
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
|
||||
} else {
|
||||
resetSparepartFields();
|
||||
setSparepartImages({});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -375,16 +354,7 @@ const EditBrandDevice = () => {
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
});
|
||||
setSparepartImages(newSparepartImages);
|
||||
setSparepartsForExistingRecord(record.sparepart, sparepartForm);
|
||||
}
|
||||
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
@@ -401,9 +371,6 @@ const EditBrandDevice = () => {
|
||||
// Get solution data from solution form
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Get sparepart data from sparepart form
|
||||
const sparepartData = getSparepartData();
|
||||
|
||||
if (solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
@@ -413,6 +380,9 @@ const EditBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get sparepart data from sparepart form
|
||||
const sparepartData = getSparepartData();
|
||||
|
||||
// Create complete error code object
|
||||
const newErrorCode = {
|
||||
error_code: errorCodeValues.error_code,
|
||||
@@ -422,7 +392,7 @@ const EditBrandDevice = () => {
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
||||
solution: solutionData,
|
||||
sparepart: sparepartData,
|
||||
...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }),
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
@@ -480,6 +450,7 @@ const EditBrandDevice = () => {
|
||||
setFileList([]);
|
||||
setErrorCodeIcon(null);
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
@@ -508,7 +479,6 @@ const EditBrandDevice = () => {
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setErrorCodeIcon(null);
|
||||
setSparepartImages({});
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
@@ -586,7 +556,7 @@ const EditBrandDevice = () => {
|
||||
: 'Error Code Form'
|
||||
: editingErrorCodeKey
|
||||
? 'Edit Error Code'
|
||||
: 'Tambah Error Code'}
|
||||
: 'Error Code'}
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
@@ -656,7 +626,6 @@ const EditBrandDevice = () => {
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
<SparepartForm
|
||||
@@ -664,59 +633,109 @@ const EditBrandDevice = () => {
|
||||
sparepartFields={sparepartFields}
|
||||
onAddSparepartField={handleAddSparepartField}
|
||||
onRemoveSparepartField={handleRemoveSparepartField}
|
||||
onSparepartTypeChange={handleSparepartTypeChange}
|
||||
onSparepartStatusChange={handleSparepartStatusChange}
|
||||
onSparepartImageUpload={handleSparepartImageUpload}
|
||||
onSparepartImageRemove={handleSparepartImageRemove}
|
||||
sparepartImages={sparepartImages}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
<Row justify="center">
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#23a55ade' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
<Col span={24} style={{ marginTop: 16 }}>
|
||||
<Card size="small" title={`Error Codes (${errorCodes.length})`}>
|
||||
<Table
|
||||
dataSource={errorCodes}
|
||||
columns={[
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'error_code',
|
||||
key: 'error_code',
|
||||
width: '25%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
{
|
||||
title: 'Sol',
|
||||
key: 'Sol',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const solutionCount = record.solution
|
||||
? record.solution.length
|
||||
: 0;
|
||||
return (
|
||||
<Tag
|
||||
color={solutionCount > 0 ? 'green' : 'red'}
|
||||
>
|
||||
{solutionCount} Sol
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: '20%',
|
||||
align: 'center',
|
||||
render: (_, { status }) => (
|
||||
<Tag color={status ? 'green' : 'red'}>
|
||||
{status ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setShowErrorCodeModal(true)}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
View All Error Codes ({errorCodes.length})
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EyeOutlined
|
||||
style={{ color: '#1890ff' }}
|
||||
/>
|
||||
}
|
||||
onClick={() =>
|
||||
handlePreviewErrorCode(record)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EditOutlined
|
||||
style={{ color: '#faad14' }}
|
||||
/>
|
||||
}
|
||||
onClick={() => handleEditErrorCode(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() =>
|
||||
handleDeleteErrorCode(record.key)
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
rowKey="key"
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
hideOnSinglePage: true,
|
||||
}}
|
||||
size="small"
|
||||
scroll={{ y: 300 }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Modal */}
|
||||
<ErrorCodeListModal
|
||||
visible={showErrorCodeModal}
|
||||
onClose={() => setShowErrorCodeModal(false)}
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onAddNew={handleCreateNewErrorCode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -730,7 +749,7 @@ const EditBrandDevice = () => {
|
||||
</Title>
|
||||
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
||||
<Step title="Brand Device Details" />
|
||||
<Step title="Error Codes" />
|
||||
<Step title="Error Codes & Solutions" />
|
||||
</Steps>
|
||||
<div style={{ position: 'relative' }}>
|
||||
{loading && (
|
||||
|
||||
@@ -1,394 +0,0 @@
|
||||
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';
|
||||
import { uploadFile, getFileUrl } from '../../../../api/file-uploads';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const ErrorCodeForm = ({
|
||||
errorCodeForm,
|
||||
isErrorCodeFormReadOnly,
|
||||
editingErrorCodeKey,
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
fileList,
|
||||
solutionsToDelete,
|
||||
firstSolutionValid,
|
||||
onAddErrorCode,
|
||||
onAddSolutionField,
|
||||
onRemoveSolutionField,
|
||||
onSolutionTypeChange,
|
||||
onSolutionStatusChange,
|
||||
onSolutionFileUpload,
|
||||
onFileView,
|
||||
onCreateNewErrorCode,
|
||||
onResetForm,
|
||||
errorCodes,
|
||||
errorCodeIcon,
|
||||
onErrorCodeIconUpload,
|
||||
onErrorCodeIconRemove,
|
||||
}) => {
|
||||
const statusValue = Form.useWatch('status', errorCodeForm);
|
||||
|
||||
const handleIconUpload = async (file) => {
|
||||
// Check if file is an image
|
||||
const isImage = file.type.startsWith('image/');
|
||||
if (!isImage) {
|
||||
message.error('You can only upload image files!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
// Check file size (max 2MB)
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must be smaller than 2MB!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
try {
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
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 || '';
|
||||
|
||||
if (iconPath) {
|
||||
// Extract folder and filename from the path
|
||||
const pathParts = iconPath.split('/');
|
||||
const folder = pathParts[0];
|
||||
const filename = pathParts.slice(1).join('/');
|
||||
|
||||
onErrorCodeIconUpload({
|
||||
name: file.name,
|
||||
uploadPath: iconPath,
|
||||
url: getFileUrl(folder, filename), // Use the same endpoint as file uploads
|
||||
type_solution: fileType,
|
||||
solutionId: 'icon',
|
||||
});
|
||||
message.success(`${file.name} uploaded successfully!`);
|
||||
} else {
|
||||
message.error('Failed to upload icon');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error uploading icon:', error);
|
||||
message.error('Failed to upload icon');
|
||||
}
|
||||
|
||||
return false; // Prevent default upload behavior
|
||||
};
|
||||
|
||||
const handleRemoveIcon = () => {
|
||||
onErrorCodeIconRemove();
|
||||
message.success('Icon removed');
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
try {
|
||||
const values = await errorCodeForm.validateFields();
|
||||
|
||||
const solutions = [];
|
||||
|
||||
solutionFields.forEach((fieldId) => {
|
||||
if (solutionsToDelete && solutionsToDelete.has(fieldId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const solutionName = values[`solution_name_${fieldId}`];
|
||||
const textSolution = values[`text_solution_${fieldId}`];
|
||||
const solutionStatus = values[`solution_status_${fieldId}`];
|
||||
const filesForSolution = fileList.filter((file) => file.solutionId === fieldId);
|
||||
const solutionType = values[`solution_type_${fieldId}`] || solutionTypes[fieldId];
|
||||
|
||||
if (solutionType === 'text') {
|
||||
if (textSolution && textSolution.trim()) {
|
||||
const solutionData = {
|
||||
solution_name: solutionName || `Solution ${fieldId}`,
|
||||
type_solution: 'text',
|
||||
text_solution: textSolution.trim(),
|
||||
path_solution: '',
|
||||
is_active: solutionStatus !== undefined ? solutionStatus : true,
|
||||
};
|
||||
|
||||
if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
|
||||
solutionData.brand_code_solution_id =
|
||||
window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
}
|
||||
|
||||
solutions.push(solutionData);
|
||||
}
|
||||
} 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'),
|
||||
text_solution: '',
|
||||
path_solution: file.uploadPath,
|
||||
is_active: solutionStatus !== undefined ? solutionStatus : true,
|
||||
};
|
||||
|
||||
if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
|
||||
solutionData.brand_code_solution_id =
|
||||
window.currentSolutionData[fieldId].brand_code_solution_id;
|
||||
}
|
||||
|
||||
solutions.push(solutionData);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (solutions.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message:
|
||||
'Setiap error code harus memiliki minimal 1 solution (text atau file)!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newErrorCode = {
|
||||
error_code: values.error_code,
|
||||
error_code_name: values.error_code_name,
|
||||
error_code_description: values.error_code_description,
|
||||
error_code_color: values.error_code_color || '#000000',
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
status: values.status === undefined ? true : values.status,
|
||||
solution: solutions,
|
||||
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)!',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text',
|
||||
});
|
||||
onResetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<Switch
|
||||
style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>{statusValue ? 'Running' : 'Offline'}</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
{!isErrorCodeFormReadOnly && (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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' }]}
|
||||
>
|
||||
<Input disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
) : (
|
||||
<Upload
|
||||
accept="image/*"
|
||||
beforeUpload={handleIconUpload}
|
||||
showUploadList={false}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
>
|
||||
<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 }}>
|
||||
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' }]}
|
||||
>
|
||||
<Input.TextArea disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
<Divider>Solutions</Divider>
|
||||
|
||||
{solutionFields.map((fieldId, index) => (
|
||||
<SolutionField
|
||||
key={fieldId}
|
||||
fieldId={fieldId}
|
||||
index={index}
|
||||
solutionType={solutionTypes[fieldId]}
|
||||
solutionStatus={solutionStatuses[fieldId]}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
fileList={fileList.filter((file) => file.solutionId === fieldId)}
|
||||
onRemove={() => onRemoveSolutionField(fieldId)}
|
||||
onSolutionTypeChange={(type) => onSolutionTypeChange(fieldId, type)}
|
||||
onSolutionStatusChange={(status) => onSolutionStatusChange(fieldId, status)}
|
||||
onFileUpload={onSolutionFileUpload}
|
||||
currentSolutionData={window.currentSolutionData?.[fieldId] || null}
|
||||
onFileView={onFileView}
|
||||
errorCodeForm={errorCodeForm}
|
||||
/>
|
||||
))}
|
||||
|
||||
{!isErrorCodeFormReadOnly && (
|
||||
<Form.Item style={{ textAlign: 'center' }}>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={onAddSolutionField}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Add More Solution
|
||||
</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{!isErrorCodeFormReadOnly && editingErrorCodeKey && (
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
|
||||
<Button onClick={handleResetForm}>Kembali</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{isErrorCodeFormReadOnly && editingErrorCodeKey && (
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
|
||||
<Button onClick={handleResetForm}>Kembali</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorCodeForm;
|
||||
@@ -33,14 +33,14 @@ const ErrorCodeListModal = ({
|
||||
title: 'Error Name',
|
||||
dataIndex: 'error_code_name',
|
||||
key: 'error_code_name',
|
||||
width: '25%',
|
||||
width: '30%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'error_code_description',
|
||||
key: 'error_code_description',
|
||||
width: '30%',
|
||||
width: '25%',
|
||||
render: (text) => text || '-',
|
||||
ellipsis: true,
|
||||
},
|
||||
@@ -54,18 +54,6 @@ const ErrorCodeListModal = ({
|
||||
return <Tag color={solutionCount > 0 ? 'green' : 'red'}>{solutionCount} Sol</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spareparts',
|
||||
key: 'spareparts',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const sparepartCount = record.sparepart ? record.sparepart.length : 0;
|
||||
return (
|
||||
<Tag color={sparepartCount > 0 ? 'blue' : 'default'}>{sparepartCount} SP</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Switch,
|
||||
Upload,
|
||||
Button,
|
||||
Typography,
|
||||
message,
|
||||
ConfigProvider,
|
||||
} from 'antd';
|
||||
import { Form, Input, Switch, Upload, Button, Typography, message, ConfigProvider } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { uploadFile } from '../../../../api/file-uploads';
|
||||
|
||||
@@ -47,7 +38,8 @@ const ErrorCodeSimpleForm = ({
|
||||
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) {
|
||||
onErrorCodeIconUpload({
|
||||
@@ -82,9 +74,7 @@ const ErrorCodeSimpleForm = ({
|
||||
style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{statusValue ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
<Text style={{ marginLeft: 8 }}>{statusValue ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
@@ -94,10 +84,7 @@ const ErrorCodeSimpleForm = ({
|
||||
name="error_code"
|
||||
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter error code"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
<Input placeholder="Enter error code" disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
{/* Error Name */}
|
||||
@@ -106,17 +93,11 @@ const ErrorCodeSimpleForm = ({
|
||||
name="error_code_name"
|
||||
rules={[{ required: true, message: 'Error name wajib diisi!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter error name"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
<Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
{/* Error Description */}
|
||||
<Form.Item
|
||||
label="Description"
|
||||
name="error_code_description"
|
||||
>
|
||||
<Form.Item label="Description" name="error_code_description">
|
||||
<Input.TextArea
|
||||
placeholder="Enter error description"
|
||||
rows={3}
|
||||
@@ -127,14 +108,16 @@ const ErrorCodeSimpleForm = ({
|
||||
{/* Color and Icon in same row */}
|
||||
<Form.Item label="Color & Icon">
|
||||
<Input.Group compact>
|
||||
<Form.Item
|
||||
name="error_code_color"
|
||||
noStyle
|
||||
>
|
||||
<Form.Item name="error_code_color" noStyle>
|
||||
<input
|
||||
type="color"
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
style={{ width: '30%', height: '40px', border: '1px solid #d9d9d9', borderRadius: 4 }}
|
||||
style={{
|
||||
width: '30%',
|
||||
height: '40px',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
defaultValue="#000000"
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -152,7 +135,13 @@ const ErrorCodeSimpleForm = ({
|
||||
</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>
|
||||
)}
|
||||
@@ -181,12 +170,7 @@ const ErrorCodeSimpleForm = ({
|
||||
</Text>
|
||||
</div>
|
||||
{!isErrorCodeFormReadOnly && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
onClick={handleIconRemove}
|
||||
>
|
||||
<Button type="text" danger size="small" onClick={handleIconRemove}>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
@@ -221,7 +205,7 @@ const ErrorCodeSimpleForm = ({
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
+ Add Error Code
|
||||
Simpan Error Code
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Form.Item>
|
||||
|
||||
@@ -262,7 +262,7 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'tag_name'}
|
||||
header={'brand_name'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
|
||||
@@ -1,94 +1,79 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Form, Input, Button, Switch, Radio, Upload, Typography } from 'antd';
|
||||
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Switch, Radio, Upload, Typography, Space } from 'antd';
|
||||
import { DeleteOutlined, UploadOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { uploadFile, getFolderFromFileType } from '../../../../api/file-uploads';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { NotifAlert } from '../../../../components/Global/ToastNotif';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const SolutionField = ({
|
||||
fieldId,
|
||||
const SolutionFieldNew = ({
|
||||
fieldKey,
|
||||
fieldName,
|
||||
index,
|
||||
solutionType,
|
||||
solutionStatus,
|
||||
isReadOnly,
|
||||
fileList,
|
||||
isReadOnly = false,
|
||||
canRemove = true,
|
||||
onTypeChange,
|
||||
onStatusChange,
|
||||
onRemove,
|
||||
onSolutionTypeChange,
|
||||
onSolutionStatusChange,
|
||||
onFileUpload,
|
||||
currentSolutionData,
|
||||
onFileView,
|
||||
errorCodeForm,
|
||||
fileList = []
|
||||
}) => {
|
||||
// Watch the solution status from the form
|
||||
const watchedStatus = Form.useWatch(`solution_status_${fieldId}`, errorCodeForm);
|
||||
const [currentStatus, setCurrentStatus] = useState(solutionStatus ?? true);
|
||||
|
||||
// Watch form values
|
||||
const getFieldValue = () => {
|
||||
try {
|
||||
const form = document.querySelector(`[data-field="${fieldName}"]`)?.form;
|
||||
if (form) {
|
||||
const formData = new FormData(form);
|
||||
return formData.get(`${fieldName}.status`) === 'on';
|
||||
}
|
||||
return currentStatus;
|
||||
} catch {
|
||||
return currentStatus;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (currentSolutionData && errorCodeForm) {
|
||||
if (currentSolutionData.solution_name) {
|
||||
errorCodeForm.setFieldValue(
|
||||
`solution_name_${fieldId}`,
|
||||
currentSolutionData.solution_name
|
||||
);
|
||||
}
|
||||
setCurrentStatus(solutionStatus ?? true);
|
||||
}, [solutionStatus]);
|
||||
const handleFileUpload = async (file) => {
|
||||
try {
|
||||
const isAllowedType = [
|
||||
'application/pdf',
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
].includes(file.type);
|
||||
|
||||
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;
|
||||
return;
|
||||
}
|
||||
|
||||
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) {
|
||||
// Store the file info with the solution field
|
||||
file.uploadPath = actualPath;
|
||||
file.solution_name = file.name;
|
||||
file.solutionId = fieldId;
|
||||
file.solutionId = fieldKey;
|
||||
file.type_solution = fileType;
|
||||
onFileUpload(file);
|
||||
NotifOk({
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `${file.name} berhasil diupload!`,
|
||||
@@ -108,208 +93,151 @@ const SolutionField = ({
|
||||
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const renderSolutionContent = () => {
|
||||
if (solutionType === 'text') {
|
||||
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
|
||||
name={[fieldName, 'text']}
|
||||
rules={[{ required: true, message: 'Text solution wajib diisi!' }]}
|
||||
>
|
||||
{({ 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"
|
||||
<TextArea
|
||||
placeholder="Enter solution text"
|
||||
rows={3}
|
||||
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">
|
||||
if (solutionType === 'file') {
|
||||
const currentFiles = fileList.filter(file => file.solutionId === fieldKey);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
name={[fieldName, 'file']}
|
||||
rules={[{ required: true, message: 'File solution wajib diupload!' }]}
|
||||
>
|
||||
<Upload
|
||||
multiple={true}
|
||||
beforeUpload={handleFileUpload}
|
||||
showUploadList={false}
|
||||
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
|
||||
icon={<UploadOutlined />}
|
||||
disabled={isReadOnly}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Upload File (PDF/Image)
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
</>
|
||||
|
||||
{currentFiles.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{currentFiles.map((file, index) => (
|
||||
<div key={index} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '4px 8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
marginBottom: 4
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Text style={{ fontSize: 12 }}>{file.name}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 10 }}>
|
||||
({(file.size / 1024).toFixed(1)} KB)
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => onFileView(file.uploadPath, file.type_solution)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Text strong>Solution #{index + 1}</Text>
|
||||
<Space>
|
||||
<Form.Item
|
||||
name={[fieldName, 'name']}
|
||||
rules={[{ required: true, message: 'Solution name wajib diisi!' }]}
|
||||
style={{ margin: 0, width: 200 }}
|
||||
>
|
||||
<Input
|
||||
placeholder="Solution name"
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Form.Item name={[fieldName, 'status']} valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isReadOnly}
|
||||
onChange={(checked) => {
|
||||
onStatusChange(fieldKey, checked);
|
||||
setCurrentStatus(checked);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: currentStatus ? '#23A55A' : '#bfbfbf'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ fontSize: 12, color: '#666' }}>
|
||||
{currentStatus ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{canRemove && !isReadOnly && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={onRemove}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name={[fieldName, 'type']}
|
||||
rules={[{ required: true, message: 'Solution type wajib diisi!' }]}
|
||||
>
|
||||
<Radio.Group
|
||||
onChange={(e) => onTypeChange(fieldKey, e.target.value)}
|
||||
disabled={isReadOnly}
|
||||
>
|
||||
<Radio value="text">Text Solution</Radio>
|
||||
<Radio value="file">File Solution</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{renderSolutionContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SolutionField;
|
||||
export default SolutionFieldNew;
|
||||
@@ -1,243 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Switch, Radio, Upload, Typography, Space } from 'antd';
|
||||
import { DeleteOutlined, UploadOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { uploadFile, getFolderFromFileType } from '../../../../api/file-uploads';
|
||||
import { NotifAlert } from '../../../../components/Global/ToastNotif';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const SolutionFieldNew = ({
|
||||
fieldKey,
|
||||
fieldName,
|
||||
index,
|
||||
solutionType,
|
||||
solutionStatus,
|
||||
isReadOnly = false,
|
||||
canRemove = true,
|
||||
onTypeChange,
|
||||
onStatusChange,
|
||||
onRemove,
|
||||
onFileUpload,
|
||||
onFileView,
|
||||
fileList = []
|
||||
}) => {
|
||||
const [currentStatus, setCurrentStatus] = useState(solutionStatus ?? true);
|
||||
|
||||
// Watch form values
|
||||
const getFieldValue = () => {
|
||||
try {
|
||||
const form = document.querySelector(`[data-field="${fieldName}"]`)?.form;
|
||||
if (form) {
|
||||
const formData = new FormData(form);
|
||||
return formData.get(`${fieldName}.status`) === 'on';
|
||||
}
|
||||
return currentStatus;
|
||||
} catch {
|
||||
return currentStatus;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentStatus(solutionStatus ?? true);
|
||||
}, [solutionStatus]);
|
||||
const handleFileUpload = async (file) => {
|
||||
try {
|
||||
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;
|
||||
}
|
||||
|
||||
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) {
|
||||
// Store the file info with the solution field
|
||||
file.uploadPath = actualPath;
|
||||
file.solutionId = fieldKey;
|
||||
file.type_solution = fileType;
|
||||
onFileUpload(file);
|
||||
NotifAlert({
|
||||
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.`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderSolutionContent = () => {
|
||||
if (solutionType === 'text') {
|
||||
return (
|
||||
<Form.Item
|
||||
name={[fieldName, 'text']}
|
||||
rules={[{ required: true, message: 'Text solution wajib diisi!' }]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="Enter solution text"
|
||||
rows={3}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
||||
if (solutionType === 'file') {
|
||||
const currentFiles = fileList.filter(file => file.solutionId === fieldKey);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form.Item
|
||||
name={[fieldName, 'file']}
|
||||
rules={[{ required: true, message: 'File solution wajib diupload!' }]}
|
||||
>
|
||||
<Upload
|
||||
beforeUpload={handleFileUpload}
|
||||
showUploadList={false}
|
||||
accept=".pdf,.jpg,.jpeg,.png,.gif"
|
||||
disabled={isReadOnly}
|
||||
>
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
disabled={isReadOnly}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Upload File (PDF/Image)
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
|
||||
{currentFiles.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{currentFiles.map((file, index) => (
|
||||
<div key={index} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '4px 8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
marginBottom: 4
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Text style={{ fontSize: 12 }}>{file.name}</Text>
|
||||
<Text type="secondary" style={{ fontSize: 10 }}>
|
||||
({(file.size / 1024).toFixed(1)} KB)
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => onFileView(file.uploadPath, file.type_solution)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Text strong>Solution #{index + 1}</Text>
|
||||
<Space>
|
||||
<Form.Item
|
||||
name={[fieldName, 'name']}
|
||||
rules={[{ required: true, message: 'Solution name wajib diisi!' }]}
|
||||
style={{ margin: 0, width: 200 }}
|
||||
>
|
||||
<Input
|
||||
placeholder="Solution name"
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Form.Item name={[fieldName, 'status']} valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isReadOnly}
|
||||
onChange={(checked) => {
|
||||
onStatusChange(fieldKey, checked);
|
||||
setCurrentStatus(checked);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: currentStatus ? '#23A55A' : '#bfbfbf'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ fontSize: 12, color: '#666' }}>
|
||||
{currentStatus ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{canRemove && !isReadOnly && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={onRemove}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name={[fieldName, 'type']}
|
||||
rules={[{ required: true, message: 'Solution type wajib diisi!' }]}
|
||||
>
|
||||
<Radio.Group
|
||||
onChange={(e) => onTypeChange(fieldKey, e.target.value)}
|
||||
disabled={isReadOnly}
|
||||
>
|
||||
<Radio value="text">Text Solution</Radio>
|
||||
<Radio value="file">File Solution</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{renderSolutionContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SolutionFieldNew;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Form, Card, Typography, Divider, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import SolutionFieldNew from './SolutionFieldNew';
|
||||
import SolutionFieldNew from './SolutionField';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -20,7 +20,7 @@ const SolutionForm = ({
|
||||
onSolutionFileUpload,
|
||||
onFileView,
|
||||
isReadOnly = false,
|
||||
onAddSolution
|
||||
onAddSolution,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
152
src/pages/master/brandDevice/component/SparepartField.jsx
Normal file
152
src/pages/master/brandDevice/component/SparepartField.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Select, Button, Switch, Typography, Space, Input, message } from 'antd';
|
||||
import { DeleteOutlined } from '@ant-design/icons';
|
||||
import { getAllSparepart } from '../../../../api/sparepart';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const SparepartField = ({
|
||||
fieldKey,
|
||||
fieldName,
|
||||
index,
|
||||
sparepartType,
|
||||
sparepartStatus,
|
||||
isReadOnly = false,
|
||||
canRemove = true,
|
||||
onRemove,
|
||||
spareparts = [],
|
||||
onSparepartChange
|
||||
}) => {
|
||||
const [currentStatus, setCurrentStatus] = useState(sparepartStatus ?? true);
|
||||
const [sparepartList, setSparepartList] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentStatus(sparepartStatus ?? true);
|
||||
loadSpareparts();
|
||||
}, [sparepartStatus]);
|
||||
|
||||
const loadSpareparts = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Get all spareparts from the API
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', '100'); // Get all spareparts
|
||||
|
||||
const response = await getAllSparepart(params);
|
||||
// Response structure should have { data: [...], statusCode: 200 }
|
||||
if (response && (response.statusCode === 200 || response.data)) {
|
||||
// If response has data array directly
|
||||
const sparepartData = response.data?.data || response.data || [];
|
||||
setSparepartList(sparepartData);
|
||||
if (onSparepartChange) {
|
||||
onSparepartChange(sparepartData);
|
||||
}
|
||||
} else {
|
||||
// For demo purposes, use mock data if API fails
|
||||
setSparepartList([
|
||||
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
|
||||
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
|
||||
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
|
||||
]);
|
||||
if (onSparepartChange) {
|
||||
onSparepartChange([
|
||||
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
|
||||
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
|
||||
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
|
||||
]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading spareparts:', error);
|
||||
// Default mock data
|
||||
const mockSpareparts = [
|
||||
{ brand_sparepart_id: 1, sparepart_name: 'Compressor Oil Filter', brand_sparepart_description: 'Oil filter for compressor' },
|
||||
{ brand_sparepart_id: 2, sparepart_name: 'Air Intake Filter', brand_sparepart_description: 'Air intake filter' },
|
||||
{ brand_sparepart_id: 3, sparepart_name: 'Cooling Fan Motor', brand_sparepart_description: 'Motor for cooling fan' },
|
||||
];
|
||||
setSparepartList(mockSpareparts);
|
||||
if (onSparepartChange) {
|
||||
onSparepartChange(mockSpareparts);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sparepartOptions = sparepartList.map(sparepart => ({
|
||||
label: sparepart.sparepart_name || sparepart.sparepart_name || `Sparepart ${sparepart.sparepart_id || sparepart.brand_sparepart_id}`,
|
||||
value: sparepart.sparepart_id || sparepart.brand_sparepart_id,
|
||||
description: sparepart.sparepart_description
|
||||
}));
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<Text strong>Sparepart #{index + 1}</Text>
|
||||
<Space>
|
||||
<Form.Item
|
||||
name={[fieldName, 'sparepart_id']}
|
||||
rules={[{ required: false, message: 'Sparepart wajib dipilih!' }]} /* Making it optional since sparepart is optional */
|
||||
style={{ margin: 0, width: 200 }}
|
||||
>
|
||||
<Select
|
||||
placeholder="Pilih sparepart"
|
||||
loading={loading}
|
||||
disabled={isReadOnly}
|
||||
options={sparepartOptions}
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Form.Item name={[fieldName, 'status']} valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isReadOnly}
|
||||
onChange={(checked) => {
|
||||
setCurrentStatus(checked);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: currentStatus ? '#23A55A' : '#bfbfbf'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ fontSize: 12, color: '#666' }}>
|
||||
{currentStatus ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{canRemove && !isReadOnly && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={onRemove}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* Sparepart Description */}
|
||||
<Form.Item
|
||||
name={[fieldName, 'description']}
|
||||
label="Deskripsi"
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder="Deskripsi sparepart"
|
||||
rows={2}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SparepartField;
|
||||
@@ -1,18 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
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';
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Card, Typography, Divider, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import SparepartField from './SparepartField';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -21,234 +10,63 @@ const SparepartForm = ({
|
||||
sparepartFields,
|
||||
onAddSparepartField,
|
||||
onRemoveSparepartField,
|
||||
onSparepartTypeChange,
|
||||
onSparepartStatusChange,
|
||||
onSparepartImageUpload,
|
||||
onSparepartImageRemove,
|
||||
sparepartImages = {},
|
||||
isReadOnly = false,
|
||||
spareparts = [],
|
||||
onSparepartChange
|
||||
}) => {
|
||||
const [fieldStatuses, setFieldStatuses] = useState({});
|
||||
const [sparepartList, setSparepartList] = useState([]);
|
||||
|
||||
// Watch form values for each field
|
||||
const getFieldValue = (fieldName) => {
|
||||
try {
|
||||
const values = sparepartForm?.getFieldsValue();
|
||||
return values?.sparepart_items?.[fieldName]?.status ?? true;
|
||||
} catch {
|
||||
return true;
|
||||
const handleSparepartChange = (list) => {
|
||||
setSparepartList(list);
|
||||
if (onSparepartChange) {
|
||||
onSparepartChange(list);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Update field statuses when form changes
|
||||
const newStatuses = {};
|
||||
sparepartFields.forEach((field) => {
|
||||
newStatuses[field.key] = getFieldValue(field.key);
|
||||
});
|
||||
setFieldStatuses(newStatuses);
|
||||
}, [sparepartFields, sparepartForm]);
|
||||
|
||||
const handleImageUpload = async (fieldKey, file) => {
|
||||
// Check if file is an image
|
||||
const isImage = file.type.startsWith('image/');
|
||||
if (!isImage) {
|
||||
message.error('You can only upload image files!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
// Check file size (max 2MB)
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must be smaller than 2MB!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
try {
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
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 || '';
|
||||
|
||||
if (imagePath) {
|
||||
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}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error uploading image:', error);
|
||||
message.error(`Failed to upload ${file.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageRemove = (fieldKey) => {
|
||||
onSparepartImageRemove && onSparepartImageRemove(fieldKey);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Text strong style={{ marginBottom: 16, display: 'block' }}>
|
||||
{isReadOnly ? 'Sparepart Details' : 'Tambah Sparepart'}
|
||||
</Text>
|
||||
|
||||
<Form
|
||||
form={sparepartForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
{/* Dynamic Sparepart Fields */}
|
||||
<Divider orientation="left">Sparepart Items</Divider>
|
||||
|
||||
{sparepartFields.map((field, index) => (
|
||||
<Card
|
||||
<SparepartField
|
||||
key={field.key}
|
||||
size="small"
|
||||
style={{ marginBottom: 16 }}
|
||||
title={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text strong>Sparepart {index + 1}</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
{!isReadOnly && sparepartFields.length > 1 && (
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => onRemoveSparepartField(field.key)}
|
||||
fieldKey={field.key}
|
||||
fieldName={field.name}
|
||||
index={index}
|
||||
sparepartStatus={field.status}
|
||||
onRemove={() => onRemoveSparepartField(field.key)}
|
||||
isReadOnly={isReadOnly}
|
||||
canRemove={sparepartFields.length > 1}
|
||||
spareparts={sparepartList}
|
||||
onSparepartChange={handleSparepartChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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} />
|
||||
</Form.Item>
|
||||
|
||||
{/* Description */}
|
||||
<Form.Item name={[field.name, 'description']}>
|
||||
<Input.TextArea
|
||||
placeholder="Enter sparepart description (optional)"
|
||||
rows={2}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* Image Upload */}
|
||||
<Form.Item label="Sparepart Image">
|
||||
{!isReadOnly ? (
|
||||
<Upload
|
||||
beforeUpload={(file) => handleImageUpload(field.key, file)}
|
||||
showUploadList={false}
|
||||
accept="image/*"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} style={{ width: '100%' }}>
|
||||
Upload Sparepart Image
|
||||
</Button>
|
||||
</Upload>
|
||||
) : (
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={sparepartImages[field.key].uploadPath}
|
||||
alt="Sparepart Image"
|
||||
style={{
|
||||
width: 50,
|
||||
height: 50,
|
||||
objectFit: 'cover',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<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
|
||||
</Text>
|
||||
</div>
|
||||
{!isReadOnly && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
onClick={() => handleImageRemove(field.key)}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{!isReadOnly && (
|
||||
<>
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => onAddSparepartField()}
|
||||
onClick={onAddSparepartField}
|
||||
icon={<PlusOutlined />}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
+ Add Sparepart
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text type="secondary">
|
||||
* Sparepart is optional and can be added for each error code if needed.
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
@@ -1,115 +1,141 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
export const useSparepartLogic = (sparepartForm) => {
|
||||
const [sparepartFields, setSparepartFields] = useState([
|
||||
{ name: ['sparepart_items', 0], key: 0 }
|
||||
]);
|
||||
const [sparepartTypes, setSparepartTypes] = useState({ 0: 'required' });
|
||||
const [sparepartStatuses, setSparepartStatuses] = useState({ 0: true });
|
||||
|
||||
const handleAddSparepartField = () => {
|
||||
const newKey = Date.now(); // Use timestamp for unique key
|
||||
const newField = { name: ['sparepart_items', newKey], key: newKey };
|
||||
const [sparepartFields, setSparepartFields] = useState([]);
|
||||
const [sparepartTypes, setSparepartTypes] = useState({});
|
||||
const [sparepartStatuses, setSparepartStatuses] = useState({});
|
||||
const [sparepartsToDelete, setSparepartsToDelete] = useState(new Set());
|
||||
|
||||
const handleAddSparepartField = useCallback(() => {
|
||||
const newKey = Date.now();
|
||||
const newField = {
|
||||
key: newKey,
|
||||
name: sparepartFields.length,
|
||||
isCreated: true,
|
||||
};
|
||||
setSparepartFields(prev => [...prev, newField]);
|
||||
setSparepartTypes(prev => ({ ...prev, [newKey]: 'required' }));
|
||||
setSparepartStatuses(prev => ({ ...prev, [newKey]: true }));
|
||||
setSparepartTypes(prev => ({
|
||||
...prev,
|
||||
[newKey]: 'required'
|
||||
}));
|
||||
setSparepartStatuses(prev => ({
|
||||
...prev,
|
||||
[newKey]: true
|
||||
}));
|
||||
}, [sparepartFields.length]);
|
||||
|
||||
// Set default values for the new field
|
||||
setTimeout(() => {
|
||||
sparepartForm.setFieldValue(['sparepart_items', newKey, 'type'], 'required');
|
||||
sparepartForm.setFieldValue(['sparepart_items', newKey, 'quantity'], 1);
|
||||
}, 0);
|
||||
const handleRemoveSparepartField = useCallback((key) => {
|
||||
setSparepartFields(prev => prev.filter(field => field.key !== key));
|
||||
setSparepartTypes(prev => {
|
||||
const newTypes = { ...prev };
|
||||
delete newTypes[key];
|
||||
return newTypes;
|
||||
});
|
||||
setSparepartStatuses(prev => {
|
||||
const newStatuses = { ...prev };
|
||||
delete newStatuses[key];
|
||||
return newStatuses;
|
||||
});
|
||||
|
||||
// Add to delete list if it's not a new field
|
||||
setSparepartsToDelete(prev => new Set([...prev, key]));
|
||||
}, []);
|
||||
|
||||
const handleSparepartTypeChange = useCallback((key, type) => {
|
||||
setSparepartTypes(prev => ({
|
||||
...prev,
|
||||
[key]: type
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const handleSparepartStatusChange = useCallback((key, status) => {
|
||||
setSparepartStatuses(prev => ({
|
||||
...prev,
|
||||
[key]: status
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const resetSparepartFields = useCallback(() => {
|
||||
setSparepartFields([]);
|
||||
setSparepartTypes({});
|
||||
setSparepartStatuses({});
|
||||
setSparepartsToDelete(new Set());
|
||||
}, []);
|
||||
|
||||
const getSparepartData = useCallback(() => {
|
||||
if (!sparepartForm) return [];
|
||||
|
||||
const values = sparepartForm.getFieldsValue();
|
||||
const data = [];
|
||||
|
||||
sparepartFields.forEach((field, index) => {
|
||||
const fieldData = {
|
||||
sparepart_id: values[`sparepart_id_${field.name}`],
|
||||
sparepart_name: values[`sparepart_name_${field.name}`],
|
||||
sparepart_description: values[`sparepart_description_${field.name}`],
|
||||
status: values[`sparepart_status_${field.name}`],
|
||||
type: sparepartTypes[field.key] || 'required',
|
||||
};
|
||||
|
||||
const handleRemoveSparepartField = (key) => {
|
||||
if (sparepartFields.length <= 1) {
|
||||
return; // Keep at least one sparepart field
|
||||
// Only add if required fields are filled
|
||||
if (fieldData.sparepart_id) {
|
||||
data.push(fieldData);
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
}, [sparepartForm, sparepartFields, sparepartTypes]);
|
||||
|
||||
const setSparepartsForExistingRecord = useCallback((sparepartData, form) => {
|
||||
resetSparepartFields();
|
||||
|
||||
if (!sparepartData || !Array.isArray(sparepartData)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSparepartFields(prev => prev.filter(field => field.key !== key));
|
||||
|
||||
// Clean up type and status
|
||||
const newTypes = { ...sparepartTypes };
|
||||
const newStatuses = { ...sparepartStatuses };
|
||||
delete newTypes[key];
|
||||
delete newStatuses[key];
|
||||
|
||||
setSparepartTypes(newTypes);
|
||||
setSparepartStatuses(newStatuses);
|
||||
};
|
||||
|
||||
const handleSparepartTypeChange = (key, value) => {
|
||||
setSparepartTypes(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleSparepartStatusChange = (key, value) => {
|
||||
setSparepartStatuses(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const resetSparepartFields = () => {
|
||||
setSparepartFields([{ name: ['sparepart_items', 0], key: 0 }]);
|
||||
setSparepartTypes({ 0: 'required' });
|
||||
setSparepartStatuses({ 0: true });
|
||||
|
||||
// Reset form values
|
||||
sparepartForm.resetFields();
|
||||
sparepartForm.setFieldsValue({
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
});
|
||||
};
|
||||
|
||||
const getSparepartData = () => {
|
||||
const values = sparepartForm.getFieldsValue();
|
||||
return sparepartFields.map(field => {
|
||||
const key = field.key;
|
||||
const sparepartPath = field.name.join(',');
|
||||
const sparepart = values[sparepartPath];
|
||||
|
||||
return sparepart && sparepart.name && sparepart.name.trim() !== '' ? {
|
||||
name: sparepart.name || '',
|
||||
description: sparepart.description || '',
|
||||
is_active: sparepart.status !== false,
|
||||
} : null;
|
||||
}).filter(Boolean);
|
||||
};
|
||||
|
||||
const setSparepartForExistingRecord = (spareparts, form) => {
|
||||
if (!spareparts || spareparts.length === 0) return;
|
||||
|
||||
const newFields = spareparts.map((sparepart, index) => ({
|
||||
name: ['sparepart_items', sparepart.id || index],
|
||||
key: sparepart.id || index
|
||||
const newFields = sparepartData.map((sp, index) => ({
|
||||
key: sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`,
|
||||
name: index,
|
||||
isCreated: false,
|
||||
}));
|
||||
|
||||
setSparepartFields(newFields);
|
||||
|
||||
// Set sparepart values
|
||||
// Set form values for existing spareparts
|
||||
setTimeout(() => {
|
||||
const formValues = {};
|
||||
Object.keys(spareparts).forEach(index => {
|
||||
const key = spareparts[index].id || index;
|
||||
const sparepart = spareparts[index];
|
||||
formValues[`sparepart_items,${key}`] = {
|
||||
name: sparepart.name || '',
|
||||
description: sparepart.description || '',
|
||||
status: sparepart.is_active !== false,
|
||||
};
|
||||
sparepartData.forEach((sp, index) => {
|
||||
const sparepartId = sp.brand_sparepart_id || sp.sparepart_id || sp.sparepart_name;
|
||||
formValues[`sparepart_id_${index}`] = sparepartId;
|
||||
formValues[`sparepart_status_${index}`] = sp.is_active ?? sp.status ?? true;
|
||||
formValues[`sparepart_description_${index}`] = sp.brand_sparepart_description || sp.description || sp.sparepart_name;
|
||||
|
||||
setSparepartTypes(prev => ({
|
||||
...prev,
|
||||
[sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`]: sp.type || sp.sparepart_type || 'required'
|
||||
}));
|
||||
|
||||
setSparepartStatuses(prev => ({
|
||||
...prev,
|
||||
[sp.brand_sparepart_id || sp.sparepart_id || `existing-${index}`]: sp.is_active ?? sp.status ?? true
|
||||
}));
|
||||
});
|
||||
|
||||
form.setFieldsValue(formValues);
|
||||
};
|
||||
}, 0);
|
||||
}, [resetSparepartFields]);
|
||||
|
||||
return {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
sparepartsToDelete,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
setSparepartsForExistingRecord,
|
||||
};
|
||||
};
|
||||
@@ -237,7 +237,7 @@ const ListPlantSubSection = memo(function ListPlantSubSection(props) {
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'sub_section_name'}
|
||||
header={'plant_sub_section_name'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
|
||||
75
src/pages/master/sparepart/IndexSparepart.jsx
Normal file
75
src/pages/master/sparepart/IndexSparepart.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
import ListSparepart from './component/ListSparepart';
|
||||
import DetailSparepart from './component/DetailSparepart';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexSparepart = memo(function IndexSparepart() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [readOnly, setReadOnly] = useState(false);
|
||||
const [showModal, setShowmodal] = useState(false);
|
||||
|
||||
const setMode = (param) => {
|
||||
setShowmodal(true);
|
||||
switch (param) {
|
||||
case 'add':
|
||||
setReadOnly(false);
|
||||
break;
|
||||
|
||||
case 'edit':
|
||||
setReadOnly(false);
|
||||
break;
|
||||
|
||||
case 'preview':
|
||||
setReadOnly(true);
|
||||
break;
|
||||
|
||||
default:
|
||||
setShowmodal(false);
|
||||
break;
|
||||
}
|
||||
setActionMode(param);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>Sparepart</Text> }
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListSparepart
|
||||
actionMode={actionMode}
|
||||
setActionMode={setMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
<DetailSparepart
|
||||
setActionMode={setMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
readOnly={readOnly}
|
||||
showModal={showModal}
|
||||
permitDefault={false}
|
||||
actionMode={actionMode}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexSparepart;
|
||||
289
src/pages/master/sparepart/component/DetailSparepart.jsx
Normal file
289
src/pages/master/sparepart/component/DetailSparepart.jsx
Normal file
@@ -0,0 +1,289 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, message } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createSparepart, updateSparepart } from '../../../../api/sparepart';
|
||||
import { validateRun } from '../../../../Utils/validate';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const DetailSparepart = (props) => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
sparepart_id: '',
|
||||
sparepart_name: '',
|
||||
sparepart_description: '',
|
||||
sparepart_model: '',
|
||||
sparepart_item_type: '',
|
||||
sparepart_unit: '',
|
||||
sparepart_merk: '',
|
||||
sparepart_stok: '',
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
// Daftar aturan validasi
|
||||
const validationRules = [
|
||||
{ field: 'sparepart_name', label: 'Sparepart Name', required: true },
|
||||
{ field: 'sparepart_model', label: 'Sparepart Model', required: true },
|
||||
{ field: 'sparepart_unit', label: 'Sparepart Unit', required: true },
|
||||
{ field: 'sparepart_merk', label: 'Sparepart Merk', required: true },
|
||||
{ field: 'sparepart_stok', label: 'Sparepart Stok', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: errorMessages,
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
return;
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
sparepart_name: formData.sparepart_name,
|
||||
sparepart_description: formData.sparepart_description,
|
||||
sparepart_model: formData.sparepart_model,
|
||||
sparepart_item_type: formData.sparepart_item_type,
|
||||
sparepart_unit: formData.sparepart_unit,
|
||||
sparepart_merk: formData.sparepart_merk,
|
||||
sparepart_stok: formData.sparepart_stok,
|
||||
};
|
||||
|
||||
const response = formData.sparepart_id
|
||||
? await updateSparepart(formData.sparepart_id, payload)
|
||||
: await createSparepart(payload);
|
||||
|
||||
// Check if response is successful
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
const sparepartName = response.data?.sparepart_name || formData.sparepart_name;
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Sparepart "${sparepartName}" berhasil ${
|
||||
formData.sparepart_id ? 'diubah' : 'ditambahkan'
|
||||
}.`,
|
||||
});
|
||||
|
||||
props.setActionMode('list');
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Save Sparepart Error:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
|
||||
});
|
||||
}
|
||||
|
||||
setConfirmLoading(false);
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleFieldChange = (name, value) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleStatusToggle = (event) => {
|
||||
const isChecked = event;
|
||||
setFormData({
|
||||
...formData,
|
||||
is_active: isChecked ? true : false,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
}
|
||||
}, [props.showModal, props.selectedData, props.actionMode]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${
|
||||
props.actionMode === 'add'
|
||||
? 'Tambah'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview'
|
||||
: 'Edit'
|
||||
} Sparepart`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorBgContainer: '#209652',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!props.readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</React.Fragment>,
|
||||
]}
|
||||
>
|
||||
{formData && (
|
||||
<div>
|
||||
<div hidden>
|
||||
<Text strong>Sparepart ID</Text>
|
||||
<Input
|
||||
name="sparepart_id"
|
||||
value={formData.sparepart_id}
|
||||
onChange={handleInputChange}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Name</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sparepart_name"
|
||||
value={formData.sparepart_name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Name"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Description</Text>
|
||||
<TextArea
|
||||
name="sparepart_description"
|
||||
value={formData.sparepart_description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Description (Optional)"
|
||||
readOnly={props.readOnly}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Model</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sparepart_model"
|
||||
value={formData.sparepart_model}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Model"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Item Type</Text>
|
||||
<Input
|
||||
name="sparepart_item_type"
|
||||
value={formData.sparepart_item_type}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Item Type"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Unit</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sparepart_unit"
|
||||
value={formData.sparepart_unit}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Unit"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Merk</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sparepart_merk"
|
||||
value={formData.sparepart_merk}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Merk"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Sparepart Stok</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sparepart_stok"
|
||||
value={formData.sparepart_stok}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Sparepart Stok"
|
||||
readOnly={props.readOnly}
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailSparepart;
|
||||
276
src/pages/master/sparepart/component/ListSparepart.jsx
Normal file
276
src/pages/master/sparepart/component/ListSparepart.jsx
Normal file
@@ -0,0 +1,276 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Segmented } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
SearchOutlined,
|
||||
AppstoreOutlined,
|
||||
TableOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { deleteSparepart, getAllSparepart } from '../../../../api/sparepart';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'sparepart_id',
|
||||
key: 'sparepart_id',
|
||||
width: '5%',
|
||||
hidden: 'true',
|
||||
},
|
||||
{
|
||||
title: 'Sparepart Name',
|
||||
dataIndex: 'sparepart_name',
|
||||
key: 'sparepart_name',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'sparepart_description',
|
||||
key: 'sparepart_description',
|
||||
width: '20%',
|
||||
render: (sparepart_description) => sparepart_description || '-'
|
||||
},
|
||||
{
|
||||
title: 'Model',
|
||||
dataIndex: 'sparepart_model',
|
||||
key: 'sparepart_model',
|
||||
width: '10%',
|
||||
render: (sparepart_model) => sparepart_model || '-'
|
||||
},
|
||||
{
|
||||
title: 'Item Type',
|
||||
dataIndex: 'sparepart_item_type',
|
||||
key: 'sparepart_item_type',
|
||||
width: '10%',
|
||||
render: (sparepart_item_type) => sparepart_item_type || '-'
|
||||
},
|
||||
{
|
||||
title: 'Unit',
|
||||
dataIndex: 'sparepart_unit',
|
||||
key: 'sparepart_unit',
|
||||
width: '8%',
|
||||
render: (sparepart_unit) => sparepart_unit || '-'
|
||||
},
|
||||
{
|
||||
title: 'Merk',
|
||||
dataIndex: 'sparepart_merk',
|
||||
key: 'sparepart_merk',
|
||||
width: '12%',
|
||||
render: (sparepart_merk) => sparepart_merk || '-'
|
||||
},
|
||||
{
|
||||
title: 'Stock',
|
||||
dataIndex: 'sparepart_stok',
|
||||
key: 'sparepart_stok',
|
||||
width: '8%',
|
||||
render: (sparepart_stok) => sparepart_stok || '0'
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'aksi',
|
||||
align: 'center',
|
||||
width: '12%',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
|
||||
onClick={() => showPreviewModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
icon={<EditOutlined style={{ color: '#faad14' }} />}
|
||||
onClick={() => showEditModal(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(record)}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const ListSparepart = memo(function ListSparepart(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode === 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ criteria: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const showPreviewModal = (param) => {
|
||||
props.setSelectedData(param);
|
||||
props.setActionMode('preview');
|
||||
};
|
||||
|
||||
const showEditModal = (param = null) => {
|
||||
props.setSelectedData(param);
|
||||
props.setActionMode('edit');
|
||||
};
|
||||
|
||||
const showAddModal = (param = null) => {
|
||||
props.setSelectedData(param);
|
||||
props.setActionMode('add');
|
||||
};
|
||||
|
||||
const showDeleteDialog = (param) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: 'Sparepart "' + param.sparepart_name + '" akan dihapus?',
|
||||
onConfirm: () => handleDelete(param.sparepart_id),
|
||||
onCancel: () => props.setSelectedData(null),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (sparepart_id) => {
|
||||
const response = await deleteSparepart(sparepart_id);
|
||||
|
||||
if (response.statusCode === 200 && response.data === true) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: response.message || 'Data Sparepart berhasil dihapus.',
|
||||
});
|
||||
doFilter();
|
||||
} else {
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Gagal Menghapus Data Sparepart',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search sparepart by name, model, or merk..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => showAddModal()}
|
||||
size="large"
|
||||
>
|
||||
Add data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'sparepart_name'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
getData={getAllSparepart}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListSparepart;
|
||||
@@ -84,12 +84,32 @@ const DetailTag = (props) => {
|
||||
const params = new URLSearchParams({ limit: 10000 });
|
||||
const response = await getAllTag(params);
|
||||
|
||||
if (response && response.data && response.data.data) {
|
||||
const existingTags = response.data.data;
|
||||
// Handle different response structures
|
||||
let existingTags = [];
|
||||
if (response) {
|
||||
if (Array.isArray(response)) {
|
||||
existingTags = response;
|
||||
} else if (response.data && Array.isArray(response.data)) {
|
||||
existingTags = response.data;
|
||||
} else if (response.data && response.data.data && Array.isArray(response.data.data)) {
|
||||
existingTags = response.data.data;
|
||||
}
|
||||
}
|
||||
|
||||
if (existingTags.length > 0) {
|
||||
const isDuplicate = existingTags.some((tag) => {
|
||||
const isSameNumber = Number(tag.tag_number) === tagNumberInt;
|
||||
const isDifferentTag = formData.tag_id ? tag.tag_id !== formData.tag_id : true;
|
||||
// Handle both string and number tag_number
|
||||
const existingTagNumber = Number(tag.tag_number);
|
||||
const currentTagNumber = Number(formData.tag_number);
|
||||
|
||||
// Check if numbers are valid and equal
|
||||
const isSameNumber = !isNaN(existingTagNumber) && !isNaN(currentTagNumber) &&
|
||||
existingTagNumber === currentTagNumber;
|
||||
|
||||
// For edit mode, exclude the current tag from duplicate check
|
||||
const isDifferentTag = formData.tag_id ?
|
||||
String(tag.tag_id) !== String(formData.tag_id) : true;
|
||||
|
||||
return isSameNumber && isDifferentTag;
|
||||
});
|
||||
|
||||
@@ -97,7 +117,7 @@ const DetailTag = (props) => {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: `Tag Number ${tagNumberInt} sudah digunakan. Silakan gunakan nomor yang berbeda.`,
|
||||
message: `Tag Number ${formData.tag_number} sudah digunakan. Silakan gunakan nomor yang berbeda.`,
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
return;
|
||||
|
||||
@@ -63,7 +63,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Sub Section',
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'plant_sub_section_name',
|
||||
key: 'plant_sub_section_name',
|
||||
width: '10%',
|
||||
|
||||
@@ -12,6 +12,8 @@ import {
|
||||
Modal,
|
||||
Tag,
|
||||
message,
|
||||
Spin,
|
||||
Pagination,
|
||||
} from 'antd';
|
||||
import {
|
||||
CloseCircleFilled,
|
||||
@@ -33,11 +35,12 @@ import {
|
||||
FilePdfOutlined,
|
||||
PlusOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, Link as RouterLink } from 'react-router-dom';
|
||||
import { getAllNotification } from '../../../api/notification';
|
||||
|
||||
const { Text, Paragraph, Link } = Typography;
|
||||
const { Text, Paragraph, Link: AntdLink } = Typography;
|
||||
|
||||
// Transform API response to component format
|
||||
const transformNotificationData = (apiData) => {
|
||||
@@ -57,7 +60,7 @@ const transformNotificationData = (apiData) => {
|
||||
}) + ' WIB',
|
||||
location: item.device_location || 'Location not specified',
|
||||
details: item.message_error_issue || 'No details available',
|
||||
link: '#', // Will be updated when API provides link
|
||||
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
|
||||
subsection: item.solution_name || 'N/A',
|
||||
isRead: item.is_read,
|
||||
status: item.is_read ? 'Resolved' : item.is_delivered ? 'Delivered' : 'Pending',
|
||||
@@ -129,25 +132,61 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
const [notifications, setNotifications] = useState([]);
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
|
||||
const [isAddingLog, setIsAddingLog] = useState(false);
|
||||
const [selectedNotification, setSelectedNotification] = useState(null);
|
||||
const [pagination, setPagination] = useState({
|
||||
current_page: 1,
|
||||
current_limit: 10,
|
||||
total_limit: 0,
|
||||
total_page: 1,
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Fetch notifications from API
|
||||
const fetchNotifications = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await getAllNotification();
|
||||
if (response && response.data) {
|
||||
const transformedData = transformNotificationData(response.data);
|
||||
setNotifications(transformedData);
|
||||
|
||||
// Update pagination with mock data (since API doesn't provide pagination info)
|
||||
const totalItems = transformedData.length;
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
total_limit: totalItems,
|
||||
total_page: Math.ceil(totalItems / prev.current_limit),
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching notifications:', error);
|
||||
setNotifications([]);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaginationChange = (page, pageSize) => {
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
current_page: page,
|
||||
current_limit: pageSize,
|
||||
}));
|
||||
};
|
||||
|
||||
// Get paginated notifications
|
||||
const getPaginatedNotifications = () => {
|
||||
const startIndex = (pagination.current_page - 1) * pagination.current_limit;
|
||||
const endIndex = startIndex + pagination.current_limit;
|
||||
return filteredNotifications.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
@@ -200,6 +239,15 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setSearchTerm(searchValue);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const filteredNotifications = notifications
|
||||
.filter((n) => {
|
||||
const matchesTab =
|
||||
@@ -210,8 +258,8 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
})
|
||||
.filter((n) => {
|
||||
if (!searchTerm) return true;
|
||||
const searchableText =
|
||||
`${n.title} ${n.issue} ${n.description} ${n.location} ${n.details}`.toLowerCase();
|
||||
// Search by title and error code name
|
||||
const searchableText = `${n.title} ${n.issue}`.toLowerCase();
|
||||
return searchableText.includes(searchTerm.toLowerCase());
|
||||
});
|
||||
|
||||
@@ -230,14 +278,17 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
transition: 'all 0.3s',
|
||||
});
|
||||
|
||||
const renderDeviceNotifications = () => (
|
||||
const renderDeviceNotifications = () => {
|
||||
const paginatedNotifications = getPaginatedNotifications();
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
||||
{filteredNotifications.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px 0', color: '#8c8c8c' }}>
|
||||
Tidak ada notifikasi
|
||||
</div>
|
||||
) : (
|
||||
filteredNotifications.map((notification) => {
|
||||
paginatedNotifications.map((notification) => {
|
||||
const { IconComponent, color, bgColor } = getIconAndColor(notification.type);
|
||||
return (
|
||||
<Card
|
||||
@@ -333,9 +384,12 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</Space>
|
||||
<Space>
|
||||
<LinkOutlined />
|
||||
<Link href={notification.link} target="_blank">
|
||||
<AntdLink
|
||||
href={notification.link}
|
||||
target="_blank"
|
||||
>
|
||||
{notification.link}
|
||||
</Link>
|
||||
</AntdLink>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<SendOutlined />}
|
||||
@@ -380,22 +434,28 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
setModalContent('user');
|
||||
}}
|
||||
/>
|
||||
<RouterLink
|
||||
to={`/detail-notification/${
|
||||
notification.id.split('-')[1]
|
||||
}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={
|
||||
<EyeOutlined style={{ color: '#1890ff' }} />
|
||||
<EyeOutlined
|
||||
style={{ color: '#1890ff' }}
|
||||
/>
|
||||
}
|
||||
title="Details"
|
||||
style={{
|
||||
border: '1px solid #1890ff',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setModalContent('details');
|
||||
setSelectedNotification(notification);
|
||||
}}
|
||||
/>
|
||||
</RouterLink>
|
||||
<Button
|
||||
type="text"
|
||||
icon={
|
||||
@@ -424,6 +484,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
const renderUserHistory = () => (
|
||||
<>
|
||||
@@ -635,9 +696,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
Treshold
|
||||
</Text>
|
||||
<div style={{ fontWeight: 500 }}>
|
||||
N/A
|
||||
</div>
|
||||
<div style={{ fontWeight: 500 }}>N/A</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
@@ -1041,10 +1100,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
{logHistoryData.slice(0, 2).map(
|
||||
(
|
||||
log // Menampilkan 2 log terbaru sebagai pratinjau
|
||||
) => (
|
||||
{logHistoryData.map((log) => (
|
||||
<Card
|
||||
key={log.id}
|
||||
size="small"
|
||||
@@ -1061,17 +1117,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
{log.timestamp}
|
||||
</Text>
|
||||
</Card>
|
||||
)
|
||||
)}
|
||||
<div style={{ textAlign: 'center', paddingTop: '8px' }}>
|
||||
<Button
|
||||
type="link"
|
||||
style={{ padding: 0 }}
|
||||
onClick={() => setModalContent('log')}
|
||||
>
|
||||
View All Log History
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
@@ -1100,17 +1146,35 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
Riwayat notifikasi yang dikirim ke engineer
|
||||
</p>
|
||||
|
||||
<Row
|
||||
justify="space-between"
|
||||
align="middle"
|
||||
style={{ marginBottom: '24px' }}
|
||||
>
|
||||
<Col>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search notifications..."
|
||||
onSearch={setSearchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ width: 300 }}
|
||||
placeholder="Search by notification name or error code name..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
handleSearchClear();
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -1148,7 +1212,29 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spin spinning={loading}>
|
||||
{renderDeviceNotifications()}
|
||||
</Spin>
|
||||
|
||||
{/* PAGINATION */}
|
||||
<Row justify="space-between" align="middle" style={{ marginTop: '16px' }}>
|
||||
<Col>
|
||||
<div>
|
||||
Menampilkan {pagination.current_limit} data halaman{' '}
|
||||
{pagination.current_page} dari total {pagination.total_limit} data
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={handlePaginationChange}
|
||||
onShowSizeChange={handlePaginationChange}
|
||||
current={pagination.current_page}
|
||||
pageSize={pagination.current_limit}
|
||||
total={pagination.total_limit}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
@@ -229,7 +229,7 @@ const ListRole = memo(function ListRole(props) {
|
||||
onClick={() => showAddModal()}
|
||||
size="large"
|
||||
>
|
||||
Add Data
|
||||
Add Role
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { Layout, Card, Row, Col, Typography, Button, Input } from 'antd';
|
||||
import { ArrowLeftOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { Search } = Input;
|
||||
|
||||
const IndexVerificationSparepart = () => {
|
||||
const navigate = useNavigate();
|
||||
const { notification_error_id } = useParams();
|
||||
|
||||
return (
|
||||
<Layout style={{ padding: '24px', backgroundColor: '#f0f2f5' }}>
|
||||
<Content>
|
||||
<Card>
|
||||
<div style={{ borderBottom: '1px solid #f0f0f0', paddingBottom: '16px', marginBottom: '24px' }}>
|
||||
<Row justify="space-between" align="middle">
|
||||
<Col>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/notification')}
|
||||
style={{ paddingLeft: 0 }}
|
||||
>
|
||||
Kembali ke daftar notifikasi
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '4px 4px 0 0', padding: '8px 16px', marginTop: '16px' }}>
|
||||
<Row justify="center" align="middle">
|
||||
<Col>
|
||||
<Title level={4} style={{ margin: 0, color: '#262626' }}>
|
||||
List Available Sparepart
|
||||
</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Paragraph style={{ margin: '4px 0 0', color: '#595959', textAlign: 'center' }}>
|
||||
Select items from inventory to save changes
|
||||
</Paragraph>
|
||||
</div>
|
||||
<div style={{ border: '1px solid #91d5ff', borderTop: 'none', backgroundColor: '#e6f7ff', padding: '12px 16px', borderRadius: '0 0 4px 4px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ExclamationCircleOutlined style={{ color: '#1890ff', fontSize: '20px', marginRight: '12px' }} />
|
||||
<Paragraph style={{ margin: 0 }}>
|
||||
<strong>Important Notice:</strong> All items listed are currently in stock and available for immediate use. Please verify part numbers before installation. Selected items will be marked for inventory tracking.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Row justify="space-between" align="middle" style={{ marginBottom: '24px' }}>
|
||||
<Col>
|
||||
<Title level={5} style={{ margin: 0 }}>• Inventory</Title>
|
||||
</Col>
|
||||
<Col>
|
||||
<Search
|
||||
placeholder="Search in inventory"
|
||||
onSearch={value => console.log(value)}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Konten untuk verifikasi spare part akan ditambahkan di sini */}
|
||||
<div style={{ textAlign: 'center', padding: '40px 0' }}>
|
||||
<Title level={5}>ID Notifikasi: {notification_error_id}</Title>
|
||||
<p>Halaman ini dalam pengembangan. Di sini akan ditampilkan detail spare part yang perlu diverifikasi.</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexVerificationSparepart;
|
||||
Reference in New Issue
Block a user