add plant section management with list and detail views
This commit is contained in:
106
src/pages/master/plantSection/component/DetailPlantSection.jsx
Normal file
106
src/pages/master/plantSection/component/DetailPlantSection.jsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import React from 'react';
|
||||
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');
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={onCancel}>Batal</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorBgContainer: '#209652',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!readOnly && (
|
||||
<Button onClick={onOk}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</React.Fragment>,
|
||||
]}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form form={form} layout="vertical" name="form_in_modal">
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Kode Plant</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Form.Item
|
||||
name="kode_plant"
|
||||
rules={[{ required: true, message: 'Silakan masukkan kode plant!' }]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Input readOnly={readOnly} placeholder="Masukkan Kode Plant" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Plant</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Form.Item
|
||||
name="nama_plant"
|
||||
rules={[{ required: true, message: 'Silakan masukkan nama plant!' }]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Input readOnly={readOnly} placeholder="Masukkan Nama Plant" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Lokasi Plant</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Form.Item
|
||||
name="lokasi_plant"
|
||||
rules={[{ required: true, message: 'Silakan masukkan lokasi plant!' }]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<Input readOnly={readOnly} placeholder="Masukkan Lokasi Plant" />
|
||||
</Form.Item>
|
||||
</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>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailPlantSection;
|
||||
Reference in New Issue
Block a user