add status management with list and detail views, including routing and mock data
This commit is contained in:
167
src/pages/master/status/IndexStatus.jsx
Normal file
167
src/pages/master/status/IndexStatus.jsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
import ListStatus from './component/ListStatus';
|
||||
import DetailStatus from './component/DetailStatus';
|
||||
|
||||
import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
// Mock Data
|
||||
const initialData = [
|
||||
{
|
||||
key: '3',
|
||||
statusCode: 3,
|
||||
statusName: 'Done',
|
||||
description: 'Indicates that the process is complete.',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
statusCode: 1,
|
||||
statusName: 'Warning',
|
||||
description: 'Indicates a warning condition.',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
statusCode: 2,
|
||||
statusName: 'Alarm',
|
||||
description: 'Indicates an alarm condition.',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
statusCode: 4,
|
||||
statusName: 'Critical',
|
||||
description: 'Indicates a critical condition.',
|
||||
},
|
||||
];
|
||||
|
||||
const IndexStatus = memo(function IndexStatus() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
|
||||
const [data, setData] = useState(initialData);
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [readOnly, setReadOnly] = useState(false);
|
||||
|
||||
// Mock API function
|
||||
const getAllStatus = async (params) => {
|
||||
const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
|
||||
|
||||
let filteredData = data;
|
||||
if (search) {
|
||||
filteredData = data.filter(item =>
|
||||
item.statusName.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);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>Status</Text> }
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
|
||||
setIsModalVisible(true);
|
||||
setReadOnly(actionMode === 'preview');
|
||||
} else {
|
||||
setIsModalVisible(false);
|
||||
}
|
||||
}, [actionMode]);
|
||||
|
||||
const handleDataSaved = (values) => {
|
||||
let newData = [...data];
|
||||
if (values.key) { // Editing
|
||||
const index = newData.findIndex((item) => values.key === item.key);
|
||||
if (index > -1) {
|
||||
newData.splice(index, 1, values);
|
||||
}
|
||||
} else { // Adding
|
||||
const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
|
||||
newData = [{ key: newKey, ...values }, ...newData];
|
||||
}
|
||||
setData(newData);
|
||||
};
|
||||
|
||||
const handleEdit = (record) => {
|
||||
setSelectedData(record);
|
||||
setActionMode('edit');
|
||||
};
|
||||
|
||||
const handlePreview = (record) => {
|
||||
setSelectedData(record);
|
||||
setActionMode('preview');
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi',
|
||||
message: `Apakah anda yakin ingin menghapus status "${record.statusName}"?`,
|
||||
onConfirm: () => {
|
||||
const newData = data.filter((item) => item.key !== record.key);
|
||||
setData(newData);
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Status "${record.statusName}" berhasil dihapus.`,
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListStatus
|
||||
setActionMode={setActionMode}
|
||||
handleEdit={handleEdit}
|
||||
handleDelete={handleDelete}
|
||||
handlePreview={handlePreview}
|
||||
getAllStatus={getAllStatus}
|
||||
data={data}
|
||||
/>
|
||||
<DetailStatus
|
||||
showModal={isModalVisible}
|
||||
setActionMode={setActionMode}
|
||||
selectedData={selectedData}
|
||||
readOnly={readOnly}
|
||||
onDataSaved={handleDataSaved}
|
||||
setSelectedData={setSelectedData}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default IndexStatus;
|
||||
160
src/pages/master/status/component/DetailStatus.jsx
Normal file
160
src/pages/master/status/component/DetailStatus.jsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Form } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const DetailStatus = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
|
||||
const defaultData = {
|
||||
key: '',
|
||||
statusCode: '',
|
||||
statusName: '',
|
||||
description: '',
|
||||
};
|
||||
|
||||
const [FormData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setConfirmLoading(true);
|
||||
|
||||
const payload = {
|
||||
key: FormData.key,
|
||||
...values,
|
||||
};
|
||||
|
||||
props.onDataSaved(payload);
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Status "${payload.statusName}" berhasil ${
|
||||
payload.key ? 'diubah' : 'ditambahkan'
|
||||
}.`,
|
||||
});
|
||||
|
||||
setConfirmLoading(false);
|
||||
props.setActionMode('list');
|
||||
form.resetFields();
|
||||
} catch (errorInfo) {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
form.setFieldsValue(props.selectedData);
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
form.resetFields();
|
||||
}
|
||||
}, [props.showModal, props.selectedData, form]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Text style={{ fontSize: '18px' }}>
|
||||
{props.actionMode === 'add'
|
||||
? 'Tambah Data'
|
||||
: props.actionMode === 'preview'
|
||||
? 'Preview Status'
|
||||
: 'Edit Status'}
|
||||
</Text>
|
||||
}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
footer={
|
||||
!props.readOnly && (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorPrimary: '#23A55A' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: 'white',
|
||||
defaultHoverBg: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorPrimary: '#23A55A' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23A55A',
|
||||
defaultColor: 'white',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: 'white',
|
||||
defaultHoverBg: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="primary" loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Divider />
|
||||
<Form form={form} layout="vertical" name="detailStatusForm">
|
||||
<Form.Item
|
||||
name="statusCode"
|
||||
label={<Text strong>Status Code</Text>}
|
||||
rules={[{ required: true, message: 'Silakan masukkan kode status!' }]}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="Masukan code status"
|
||||
readOnly={props.readOnly}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="statusName"
|
||||
label={<Text strong>Status Name</Text>}
|
||||
rules={[{ required: true, message: 'Silakan masukkan nama status!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Masukan nama status"
|
||||
readOnly={props.readOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="description"
|
||||
label={<Text strong>Description</Text>}
|
||||
rules={[{ required: true, message: 'Silakan masukkan deskripsi!' }]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="Masukan deskripsi"
|
||||
readOnly={props.readOnly}
|
||||
rows={4}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailStatus;
|
||||
114
src/pages/master/status/component/ListStatus.jsx
Normal file
114
src/pages/master/status/component/ListStatus.jsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import { Card, Button, Row, Col, Typography, Space, ConfigProvider } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const ListStatus = ({
|
||||
setActionMode,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handlePreview,
|
||||
data,
|
||||
}) => {
|
||||
|
||||
const getCardStyle = (statusName) => {
|
||||
let color;
|
||||
switch (statusName.toLowerCase()) {
|
||||
case 'done':
|
||||
color = '#52c41a'; // green
|
||||
break;
|
||||
case 'warning':
|
||||
color = '#faad14'; // orange
|
||||
break;
|
||||
case 'alarm':
|
||||
color = '#f5222d'; // red
|
||||
break;
|
||||
case 'critical':
|
||||
color = '#000000'; // black
|
||||
break;
|
||||
default:
|
||||
color = '#d9d9d9'; // default antd border color
|
||||
}
|
||||
return { border: `2px solid ${color}` };
|
||||
};
|
||||
|
||||
const getTitleStyle = (statusName) => {
|
||||
let backgroundColor;
|
||||
switch (statusName.toLowerCase()) {
|
||||
case 'done':
|
||||
backgroundColor = '#52c41a'; // green
|
||||
break;
|
||||
case 'warning':
|
||||
backgroundColor = '#faad14'; // orange
|
||||
break;
|
||||
case 'alarm':
|
||||
backgroundColor = '#f5222d'; // red
|
||||
break;
|
||||
case 'critical':
|
||||
backgroundColor = '#000000'; // black
|
||||
break;
|
||||
default:
|
||||
backgroundColor = 'transparent';
|
||||
}
|
||||
return {
|
||||
backgroundColor,
|
||||
color: '#fff',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-block'
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24, minHeight: 360 }}>
|
||||
<Row justify="end" style={{ marginBottom: 16 }}>
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setActionMode('add')}
|
||||
>
|
||||
Tambah Data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, 16]}>
|
||||
{data.map(item => (
|
||||
<Col xs={24} sm={12} md={8} lg={6} key={item.key}>
|
||||
<Card
|
||||
title={<span style={getTitleStyle(item.statusName)}>{item.statusName}</span>}
|
||||
style={getCardStyle(item.statusName)}
|
||||
actions={[
|
||||
<Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Button style={{ border: '1px solid #1890ff', color: '#1890ff', borderRadius: '6px', padding: '4px 8px' }} icon={<EyeOutlined />} onClick={() => handlePreview(item)} />
|
||||
<Button style={{ border: '1px solid #faad14', color: '#faad14', borderRadius: '6px', padding: '4px 8px' }} icon={<EditOutlined />} onClick={() => handleEdit(item)} />
|
||||
<Button danger style={{ border: '1px solid red', borderRadius: '6px', padding: '4px 8px' }} icon={<DeleteOutlined />} onClick={() => handleDelete(item)} />
|
||||
</Space>
|
||||
]}
|
||||
>
|
||||
<p><Text strong>Code:</Text> {item.statusCode}</p>
|
||||
<p><Text strong>Description:</Text> {item.description}</p>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListStatus;
|
||||
Reference in New Issue
Block a user