117 lines
5.0 KiB
JavaScript
117 lines
5.0 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const DetailBrandDevice = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
|
|
const modalTitle = readOnly ? 'Preview Brand' : (editingKey ? 'Edit Brand' : 'Tambah Brand');
|
|
|
|
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 Brand</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Form.Item
|
|
name="brandCode"
|
|
rules={[{ required: true, message: 'Please input the brand code!' }]}
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input readOnly={readOnly} placeholder="Enter Brand Code" />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Brand Name</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Form.Item
|
|
name="brandName"
|
|
rules={[{ required: true, message: 'Please input the brand name!' }]}
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input readOnly={readOnly} placeholder="Enter Brand Name" />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Brand Type</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Form.Item
|
|
name="brandType"
|
|
rules={[{ required: true, message: 'Please input the brand type!' }]}
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input readOnly={readOnly} placeholder="Enter Brand Type" />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Device Name</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Form.Item
|
|
name="deviceName"
|
|
rules={[{ required: true, message: 'Please input the device name!' }]}
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input readOnly={readOnly} placeholder="Enter Device Name" />
|
|
</Form.Item>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Description</Text>
|
|
<Form.Item
|
|
name="description"
|
|
style={{ marginBottom: 0 }}
|
|
>
|
|
<Input.TextArea readOnly={readOnly} placeholder="Enter Description (Optional)" rows={4} />
|
|
</Form.Item>
|
|
</div>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DetailBrandDevice; |