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

lavoce #2

Merged
yogiedigital merged 118 commits from lavoce into main 2025-10-20 04:06:02 +00:00
Conversation 0 Commits 118 Files Changed 81 +149 -150
3 changed files with 149 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 577d8c8585 - Show all commits

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

@@ -6,108 +6,29 @@ import { Form, Typography } from 'antd';
import ListPlantSection from './component/ListPlantSection';
import DetailPlantSection from './component/DetailPlantSection';
import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
import { NotifConfirmDialog, NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { getAllPlantSection, createPlantSection, updatePlantSection, deletePlantSection } from '../../../api/master-plant-section';
const { Text } = Typography;
// Mock Data
const initialData = [
{
key: '1',
kode_plant: 'PL-001',
nama_plant: 'Seksi Produksi A',
lokasi_plant: 'Gedung 1, Lantai 2',
deskripsi: 'Seksi yang bertanggung jawab untuk lini produksi A.',
},
{
key: '2',
kode_plant: 'PL-002',
nama_plant: 'Seksi Pengepakan',
lokasi_plant: 'Gedung 1, Lantai 1',
deskripsi: 'Area pengepakan dan persiapan pengiriman.',
},
{
key: '3',
kode_plant: 'PL-003',
nama_plant: 'Gudang Bahan Baku',
lokasi_plant: 'Gudang A',
deskripsi: 'Penyimpanan bahan baku utama.',
},
{
key: '4',
kode_plant: 'PL-004',
nama_plant: 'Seksi Kualitas',
lokasi_plant: 'Laboratorium QC',
deskripsi: 'Pemeriksaan dan kontrol kualitas produk.',
},
{
key: '5',
kode_plant: 'PL-005',
nama_plant: 'Seksi Perawatan',
lokasi_plant: 'Workshop',
deskripsi: 'Perawatan dan perbaikan mesin produksi.',
},
{
key: '6',
kode_plant: 'PL-006',
nama_plant: 'Gudang Jadi',
lokasi_plant: 'Gudang B',
deskripsi: 'Penyimpanan produk yang siap dikirim.',
},
];
const IndexPlantSection = memo(function IndexPlantSection() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [form] = Form.useForm();
const [data, setData] = useState(initialData);
const [actionMode, setActionMode] = useState('list');
const [editingKey, setEditingKey] = useState('');
const [editingRecord, setEditingRecord] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [readOnly, setReadOnly] = useState(false);
// Mock API function
const getAllPlantSection = async (params) => {
const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
let filteredData = data;
if (search) {
filteredData = data.filter(item =>
item.nama_plant.toLowerCase().includes(search.toLowerCase()) ||
item.kode_plant.toLowerCase().includes(search.toLowerCase()) ||
item.lokasi_plant.toLowerCase().includes(search.toLowerCase())
);
}
const start = (page - 1) * limit;
const end = start + limit;
const paginatedData = filteredData.slice(start, end);
return new Promise(resolve => {
setTimeout(() => {
resolve({
status: 200,
data: {
data: paginatedData,
total: filteredData.length,
paging: {
page: parseInt(page),
limit: parseInt(limit),
total: filteredData.length,
},
},
});
}, 500);
});
};
const [refreshList, setRefreshList] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
{ title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
{ title: <Text strong style={{ fontSize: '14px' }}>Plant Sub Section</Text> }
]);
} else {
navigate('/signin');
@@ -126,51 +47,79 @@ const IndexPlantSection = memo(function IndexPlantSection() {
const handleCancel = () => {
setActionMode('list');
setEditingKey('');
setEditingRecord(null);
form.resetFields();
};
const handleOk = () => {
const handleOk = async () => {
if (readOnly) {
handleCancel();
return;
}
form.validateFields()
.then((values) => {
let newData = [...data];
if (editingKey) {
// Editing existing data
const index = newData.findIndex((item) => editingKey === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...values });
}
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 {
// Adding new data
const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
newData = [{ key: newKey, ...values }, ...newData];
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response.message || 'Gagal mengupdate data Sub Section.',
});
}
setData(newData);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: 'Data Plant Section berhasil disimpan.',
});
handleCancel();
})
.catch((info) => {
console.log('Validate Failed:', info);
} 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.key);
setEditingKey(record.sub_section_id || record.key);
setEditingRecord(record);
setActionMode('edit');
};
const handlePreview = (record) => {
form.setFieldsValue(record);
setEditingKey(record.key);
setEditingKey(record.sub_section_id || record.key);
setEditingRecord(record);
setActionMode('preview');
};
@@ -178,15 +127,33 @@ const IndexPlantSection = memo(function IndexPlantSection() {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi',
message: `Apakah anda yakin ingin menghapus plant section "${record.nama_plant}"?`,
onConfirm: () => {
const newData = data.filter((item) => item.key !== record.key);
setData(newData);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Plant section "${record.nama_plant}" berhasil dihapus.`,
});
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.',
});
}
},
});
};
@@ -199,6 +166,7 @@ const IndexPlantSection = memo(function IndexPlantSection() {
handleDelete={handleDelete}
handlePreview={handlePreview}
getAllPlantSection={getAllPlantSection}
refreshList={refreshList}
/>
<DetailPlantSection
visible={isModalVisible}

29
src/pages/master/plantSection/component/DetailPlantSection.jsx
View File

@@ -4,7 +4,11 @@ import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
const { Text } = Typography;
const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
const modalTitle = readOnly ? 'Preview Plant Section' : (editingKey ? 'Edit Plant Section' : 'Tambah Plant Section');
const modalTitle = readOnly
? 'Preview Sub Section'
: editingKey
? 'Edit Sub Section'
: 'Tambah Sub Section';
return (
<Modal
@@ -45,11 +49,7 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
},
}}
>
{!readOnly && (
<Button onClick={onOk}>
Simpan
</Button>
)}
{!readOnly && <Button onClick={onOk}>Simpan</Button>}
</ConfigProvider>
</React.Fragment>,
]}
@@ -57,11 +57,11 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
>
<Form form={form} layout="vertical" name="form_in_modal">
<div style={{ marginBottom: 12 }}>
<Text strong>Kode Plant</Text>
<Text strong>Nama Sub Section</Text>
<Text style={{ color: 'red' }}> *</Text>
<Form.Item
name="kode_plant"
rules={[{ required: true, message: 'Silakan masukkan kode plant!' }]}
name="sub_section_name"
rules={[{ required: true, message: 'Silakan masukkan nama sub section!' }]}
style={{ marginBottom: 0 }}
>
<Input readOnly={readOnly} placeholder="Masukkan Kode Plant" />
@@ -91,11 +91,12 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Deskripsi</Text>
<Form.Item
name="deskripsi"
style={{ marginBottom: 0 }}
>
<Input.TextArea readOnly={readOnly} placeholder="Masukkan Deskripsi (Opsional)" rows={4} />
<Form.Item name="deskripsi" style={{ marginBottom: 0 }}>
<Input.TextArea
readOnly={readOnly}
placeholder="Masukkan Deskripsi (Opsional)"
rows={4}
/>
</Form.Item>
</div>
</Form>

54
src/pages/master/plantSection/component/ListPlantSection.jsx
View File

@@ -1,6 +1,12 @@
import React, { useState } from 'react';
import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
EyeOutlined,
} from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';
const ListPlantSection = ({
@@ -8,20 +14,26 @@ const ListPlantSection = ({
handleEdit,
handleDelete,
handlePreview,
getAllPlantSection
getAllPlantSection,
refreshList,
}) => {
const [searchValue, setSearchValue] = useState('');
const [formDataFilter, setFormDataFilter] = useState({ search: '' });
const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
const [trigerFilter, setTrigerFilter] = useState(false);
const columns = [
{
title: 'No',
dataIndex: 'key',
key: 'key',
width: '5%',
dataIndex: 'sub_section_id',
key: 'sub_section_id',
width: '10%',
render: (text, record, index) => index + 1,
},
{
title: 'Nama Sub Section',
dataIndex: 'sub_section_name',
key: 'sub_section_name',
},
{
title: 'Kode Plant',
dataIndex: 'kode_plant',
@@ -45,24 +57,41 @@ const ListPlantSection = ({
{
title: 'Aksi',
key: 'action',
width: '15%',
render: (_, record) => (
<Space size="middle">
<Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
<Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
<Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
<Button
type="text"
style={{ borderColor: '#1890ff' }}
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
onClick={() => handlePreview(record)}
/>
<Button
type="text"
style={{ borderColor: '#faad14' }}
icon={<EditOutlined style={{ color: '#faad14' }} />}
onClick={() => handleEdit(record)}
/>
<Button
type="text"
danger
style={{ borderColor: 'red' }}
icon={<DeleteOutlined />}
onClick={() => handleDelete(record)}
/>
</Space>
),
},
];
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ search: '' });
setFormDataFilter({ criteria: '' });
setTrigerFilter((prev) => !prev);
};
@@ -71,7 +100,7 @@ const ListPlantSection = ({
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Cari berdasarkan kode, nama, atau lokasi..."
placeholder="Cari berdasarkan nama sub section..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
@@ -130,6 +159,7 @@ const ListPlantSection = ({
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}
refreshList={refreshList}
/>
</Col>
</Card>