clean code master plant sub section and master device
This commit is contained in:
@@ -1,15 +1,8 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Modal,
|
||||
Input,
|
||||
Typography,
|
||||
Switch,
|
||||
Button,
|
||||
ConfigProvider,
|
||||
Divider,
|
||||
} from 'antd';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createPlantSection, updatePlantSection, getAllPlantSection } from '../../../../api/master-plant-section';
|
||||
import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
|
||||
import { validateRun } from '../../../../Utils/validate';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
@@ -23,13 +16,12 @@ const DetailPlantSection = (props) => {
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
const [FormData, setFormData] = useState(defaultData);
|
||||
const [nextPlantSectionCode, setNextPlantSectionCode] = useState('Auto-fill');
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({
|
||||
...FormData,
|
||||
...formData,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
@@ -42,52 +34,53 @@ const DetailPlantSection = (props) => {
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
if (!FormData.sub_section_name) {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: 'Kolom Plant Sub Section Name Tidak Boleh Kosong',
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
// Daftar aturan validasi
|
||||
const validationRules = [
|
||||
{ field: 'sub_section_name', label: 'Plant Sub Section Name', required: true },
|
||||
];
|
||||
|
||||
if (
|
||||
validateRun(formData, validationRules, (errorMessages) => {
|
||||
NotifOk({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: errorMessages,
|
||||
});
|
||||
setConfirmLoading(false);
|
||||
})
|
||||
)
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let response;
|
||||
let payload;
|
||||
const payload = {
|
||||
is_active: formData.is_active,
|
||||
sub_section_name: formData.sub_section_name,
|
||||
};
|
||||
|
||||
if (props.actionMode === 'edit') {
|
||||
payload = {
|
||||
is_active: FormData.is_active,
|
||||
sub_section_name: FormData.sub_section_name
|
||||
};
|
||||
response = await updatePlantSection(FormData.sub_section_id, payload);
|
||||
} else {
|
||||
// Backend generates the code, so we only send the name and status
|
||||
payload = {
|
||||
sub_section_name: FormData.sub_section_name,
|
||||
is_active: FormData.is_active,
|
||||
}
|
||||
response = await createPlantSection(payload);
|
||||
}
|
||||
const response =
|
||||
props.actionMode === 'edit'
|
||||
? await updatePlantSection(formData.sub_section_id, payload)
|
||||
: await createPlantSection(payload);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Plant Section berhasil ${action}.`,
|
||||
});
|
||||
|
||||
props.setActionMode('list');
|
||||
} else {
|
||||
NotifAlert({
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
NotifOk({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server.',
|
||||
@@ -96,58 +89,15 @@ const DetailPlantSection = (props) => {
|
||||
setConfirmLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({
|
||||
...FormData,
|
||||
...formData,
|
||||
is_active: checked,
|
||||
});
|
||||
};
|
||||
|
||||
const generateNextPlantSectionCode = async () => {
|
||||
try {
|
||||
const params = new URLSearchParams({ limit: 10000 });
|
||||
const response = await getAllPlantSection(params);
|
||||
|
||||
if (response && response.data && response.data.data) {
|
||||
const sections = response.data.data;
|
||||
|
||||
if (sections.length === 0) {
|
||||
setNextPlantSectionCode('SUB001');
|
||||
return;
|
||||
}
|
||||
|
||||
// Extract numeric part from plant section codes and find the maximum
|
||||
const sectionNumbers = sections
|
||||
.map((section) => {
|
||||
const match = section.sub_section_code?.match(/sub(\d+)/i);
|
||||
return match ? parseInt(match[1], 10) : 0;
|
||||
})
|
||||
.filter((num) => !isNaN(num));
|
||||
|
||||
const maxNumber = sectionNumbers.length > 0 ? Math.max(...sectionNumbers) : 0;
|
||||
const nextNumber = maxNumber + 1;
|
||||
|
||||
// Format with leading zeros (SUB001, SUB002, etc.)
|
||||
const nextCode = `SUB${String(nextNumber).padStart(3, '0')}`;
|
||||
setNextPlantSectionCode(nextCode);
|
||||
} else {
|
||||
setNextPlantSectionCode('SUB001');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error generating next plant section code:', error);
|
||||
setNextPlantSectionCode('Auto-fill');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.showModal) {
|
||||
// Generate next plant section code only for add mode
|
||||
if (props.actionMode === 'add' && !props.selectedData) {
|
||||
generateNextPlantSectionCode();
|
||||
}
|
||||
}
|
||||
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
} else {
|
||||
@@ -157,7 +107,7 @@ const DetailPlantSection = (props) => {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${
|
||||
title={`${
|
||||
props.actionMode === 'add'
|
||||
? 'Tambah'
|
||||
: props.actionMode === 'preview'
|
||||
@@ -201,7 +151,7 @@ const DetailPlantSection = (props) => {
|
||||
</React.Fragment>,
|
||||
]}
|
||||
>
|
||||
{FormData && (
|
||||
{formData && (
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
@@ -212,16 +162,14 @@ const DetailPlantSection = (props) => {
|
||||
<Switch
|
||||
disabled={props.readOnly}
|
||||
style={{
|
||||
backgroundColor: FormData.is_active ? '#23A55A' : '#bfbfbf',
|
||||
backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
|
||||
}}
|
||||
checked={FormData.is_active}
|
||||
checked={formData.is_active}
|
||||
onChange={handleStatusToggle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text>
|
||||
{FormData.is_active ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
<Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,13 +180,13 @@ const DetailPlantSection = (props) => {
|
||||
<Text strong>Plant Section Code</Text>
|
||||
<Input
|
||||
name="sub_section_code"
|
||||
value={FormData.sub_section_code || nextPlantSectionCode}
|
||||
placeholder={nextPlantSectionCode}
|
||||
value={formData.sub_section_code || ''}
|
||||
placeholder={'Plant Sub Section Code Auto Fill'}
|
||||
disabled
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: FormData.sub_section_code ? '#000000' : '#bfbfbf'
|
||||
color: formData.sub_section_code ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -248,7 +196,7 @@ const DetailPlantSection = (props) => {
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="sub_section_name"
|
||||
value={FormData.sub_section_name}
|
||||
value={formData.sub_section_name}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Plant Sub Section Name"
|
||||
readOnly={props.readOnly}
|
||||
@@ -260,4 +208,4 @@ const DetailPlantSection = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailPlantSection;
|
||||
export default DetailPlantSection;
|
||||
|
||||
Reference in New Issue
Block a user