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

refactor: streamline IndexPlantSection and DetailPlantSection components, enhance ListPlantSection with improved search and action handling

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-16 23:05:26 +07:00
parent 7538c18624
commit 956730135e
3 changed files with 345 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/pages/master/plantSection/IndexPlantSection.jsx
View File

@@ -1,183 +1,79 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Form, Typography } from 'antd';
import ListPlantSection from './component/ListPlantSection';
import DetailPlantSection from './component/DetailPlantSection';
import { NotifConfirmDialog, NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { getAllPlantSection, createPlantSection, updatePlantSection, deletePlantSection } from '../../../api/master-plant-section';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
const { Text } = Typography;
const IndexPlantSection = memo(function IndexPlantSection() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [form] = Form.useForm();
const [activeTab, setActiveTab] = useState('plantSection');
const [actionMode, setActionMode] = useState('list');
const [editingKey, setEditingKey] = useState('');
const [editingRecord, setEditingRecord] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [selectedData, setSelectedData] = useState(null);
const [readOnly, setReadOnly] = useState(false);
const [refreshList, setRefreshList] = useState(false);
const [showModal, setShowmodal] = useState(false);
const setMode = (param) => {
setActionMode(param);
switch (param) {
case 'add':
setReadOnly(false);
setShowmodal(true);
break;
case 'edit':
setReadOnly(false);
setShowmodal(true);
break;
case 'preview':
setReadOnly(true);
setShowmodal(true);
break;
default:
setShowmodal(false);
break;
}
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
{ title: <Text strong style={{ fontSize: '14px' }}>Plant Sub Section</Text> }
{ title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
useEffect(() => {
if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
setIsModalVisible(true);
setReadOnly(actionMode === 'preview');
} else {
setIsModalVisible(false);
}
}, [actionMode]);
const handleCancel = () => {
setActionMode('list');
setEditingKey('');
setEditingRecord(null);
form.resetFields();
};
const handleOk = async () => {
if (readOnly) {
handleCancel();
return;
}
try {
const values = await form.validateFields();
if (editingKey && editingRecord) {
// Update existing plant section
const response = await updatePlantSection(editingRecord.sub_section_id, values);
if (response.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || 'Data Sub Section berhasil diupdate.',
});
setRefreshList(!refreshList);
handleCancel();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response.message || 'Gagal mengupdate data Sub Section.',
});
}
} else {
// Create new plant section
const response = await createPlantSection(values);
if (response.statusCode === 200 || response.statusCode === 201) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || 'Data Sub Section berhasil ditambahkan.',
});
setRefreshList(!refreshList);
handleCancel();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response.message || 'Gagal menambahkan data Sub Section.',
});
}
}
} catch (error) {
console.error('Validate Failed:', error);
NotifAlert({
icon: 'error',
title: 'Validasi Gagal',
message: 'Mohon lengkapi semua field yang wajib diisi.',
});
}
};
const handleEdit = (record) => {
form.setFieldsValue(record);
setEditingKey(record.sub_section_id || record.key);
setEditingRecord(record);
setActionMode('edit');
};
const handlePreview = (record) => {
form.setFieldsValue(record);
setEditingKey(record.sub_section_id || record.key);
setEditingRecord(record);
setActionMode('preview');
};
const handleDelete = (record) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi',
message: `Apakah anda yakin ingin menghapus sub section "${record.sub_section_name}"?`,
onConfirm: async () => {
try {
const response = await deletePlantSection(record.sub_section_id);
if (response.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || `Sub section "${record.sub_section_name}" berhasil dihapus.`,
});
setRefreshList(!refreshList);
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response.message || 'Gagal menghapus data Sub Section.',
});
}
} catch (error) {
console.error('Delete error:', error);
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Terjadi kesalahan saat menghapus data.',
});
}
},
});
};
}, []);
return (
<React.Fragment>
<ListPlantSection
setActionMode={setActionMode}
handleEdit={handleEdit}
handleDelete={handleDelete}
handlePreview={handlePreview}
getAllPlantSection={getAllPlantSection}
refreshList={refreshList}
actionMode={actionMode}
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
activeTab={activeTab}
setActiveTab={setActiveTab}
/>
<DetailPlantSection
visible={isModalVisible}
onCancel={handleCancel}
onOk={handleOk}
form={form}
editingKey={editingKey}
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
showModal={showModal}
actionMode={actionMode}
/>
</React.Fragment>
);
});
export default IndexPlantSection;
export default IndexPlantSection;