72 lines
2.6 KiB
JavaScript
72 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const DetailRole = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
|
|
const modalTitle = editingKey ? (readOnly ? 'Preview Role' : 'Edit Role') : 'Tambah Role';
|
|
|
|
return (
|
|
<Modal
|
|
title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
|
|
open={visible}
|
|
onCancel={onCancel}
|
|
onOk={onOk}
|
|
okText="Simpan"
|
|
cancelText="Batal"
|
|
okButtonProps={{ disabled: readOnly }}
|
|
destroyOnClose
|
|
|
|
>
|
|
<Divider />
|
|
<Form form={form} layout="vertical" name="role_form">
|
|
<Form.Item
|
|
name="is_active"
|
|
label={<Text strong>Status</Text>}
|
|
valuePropName="checked"
|
|
initialValue={true}
|
|
>
|
|
<Switch disabled={readOnly} />
|
|
</Form.Item>
|
|
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name="role_name"
|
|
label={<Text strong>Nama Role</Text>}
|
|
rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
|
|
>
|
|
<Input placeholder="Masukan nama role" readOnly={readOnly} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name="role_level"
|
|
label={<Text strong>Level</Text>}
|
|
rules={[{ required: true, message: 'Level wajib diisi!' }]}
|
|
>
|
|
<InputNumber
|
|
placeholder="Masukan level role"
|
|
readOnly={readOnly}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Form.Item
|
|
name="role_description"
|
|
label={<Text strong>Deskripsi Role</Text>}
|
|
>
|
|
<Input.TextArea
|
|
rows={4}
|
|
placeholder="Masukan deskripsi (opsional)"
|
|
readOnly={readOnly}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DetailRole; |