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

feat: enhance DetailShift and ListShift components with improved validation and UI updates

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-22 14:24:52 +07:00
parent 85afb9d332
commit 988dcda0e2
4 changed files with 268 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/pages/role/component/DetailRole.jsx
View File

@@ -1,98 +1,72 @@
import React, { memo } from 'react';
import { Modal, Form, Input, Select, Row, Col } from 'antd';
import React from 'react';
import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';
const { TextArea } = Input;
const { Option } = Select;
const { Text } = Typography;
const DetailRole = memo(function DetailRole({
visible,
onCancel,
onOk,
form,
editingKey,
readOnly,
}) {
const getModalTitle = () => {
if (readOnly) return 'Detail Role';
if (editingKey) return 'Edit Role';
return 'Tambah Role';
};
const DetailRole = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
const modalTitle = editingKey ? (readOnly ? 'Preview Role' : 'Edit Role') : 'Tambah Role';
return (
<Modal
title={getModalTitle()}
title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
open={visible}
onCancel={onCancel}
onOk={onOk}
okText={readOnly ? 'Tutup' : editingKey ? 'Simpan' : 'Tambah'}
okText="Simpan"
cancelText="Batal"
width={600}
cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
okButtonProps={{ disabled: readOnly }}
destroyOnClose
>
<Form form={form} layout="vertical" name="roleForm" disabled={readOnly}>
<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={24}>
<Col span={12}>
<Form.Item
name="role_name"
label="Nama Role"
rules={[
{
required: true,
message: 'Nama role tidak boleh kosong!',
},
]}
label={<Text strong>Nama Role</Text>}
rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
>
<Input placeholder="Masukkan nama role" />
<Input placeholder="Masukan nama role" readOnly={readOnly} />
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Col span={12}>
<Form.Item
name="role_level"
label="Level"
rules={[
{
required: true,
message: 'Level tidak boleh kosong!',
},
]}
label={<Text strong>Level</Text>}
rules={[{ required: true, message: 'Level wajib diisi!' }]}
>
<Select placeholder="Pilih level">
<Option value={1}>Level 1</Option>
<Option value={2}>Level 2</Option>
<Option value={3}>Level 3</Option>
<Option value={4}>Level 4</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="role_description"
label="Deskripsi"
rules={[
{
required: true,
message: 'Deskripsi tidak boleh kosong!',
},
]}
>
<TextArea
rows={4}
placeholder="Masukkan deskripsi role"
maxLength={200}
showCount
<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;
export default DetailRole;