feat: add shift management functionality with CRUD operations and UI components
This commit is contained in:
29
src/pages/master/shift/IndexShift.jsx
Normal file
29
src/pages/master/shift/IndexShift.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { useState } from 'react';
|
||||
import ListShift from './component/ListShift';
|
||||
import DetailShift from './component/DetailShift';
|
||||
|
||||
const IndexShift = () => {
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{actionMode === 'list' && (
|
||||
<ListShift
|
||||
setActionMode={setActionMode}
|
||||
setSelectedData={setSelectedData}
|
||||
/>
|
||||
)}
|
||||
{(actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') && (
|
||||
<DetailShift
|
||||
actionMode={actionMode}
|
||||
selectedData={selectedData}
|
||||
setActionMode={setActionMode}
|
||||
setSelectedData={setSelectedData}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexShift;
|
||||
142
src/pages/master/shift/component/DetailShift.jsx
Normal file
142
src/pages/master/shift/component/DetailShift.jsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import { createShift, updateShift } from '../../../../api/master-shift';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const DetailShift = (props) => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const readOnly = props.actionMode === 'preview';
|
||||
|
||||
const defaultData = {
|
||||
id: '',
|
||||
nama_shift: '',
|
||||
jam_shift: '',
|
||||
status: true, // default to active
|
||||
};
|
||||
|
||||
const [FormData, setFormData] = useState(defaultData);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('list');
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setConfirmLoading(true);
|
||||
|
||||
if (!FormData.nama_shift) {
|
||||
NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Nama Shift Tidak Boleh Kosong' });
|
||||
setConfirmLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!FormData.jam_shift) {
|
||||
NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Jam Shift Tidak Boleh Kosong' });
|
||||
setConfirmLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
nama_shift: FormData.nama_shift,
|
||||
jam_shift: FormData.jam_shift,
|
||||
status: FormData.status,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = FormData.id
|
||||
? await updateShift(FormData.id, payload)
|
||||
: await createShift(payload);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Shift "${FormData.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
|
||||
});
|
||||
props.setActionMode('list');
|
||||
} else {
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message: response?.message || 'Terjadi kesalahan saat menyimpan data.' });
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan pada server.' });
|
||||
}
|
||||
|
||||
setConfirmLoading(false);
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...FormData, [name]: value });
|
||||
};
|
||||
|
||||
const handleStatusToggle = (checked) => {
|
||||
setFormData({ ...FormData, status: checked });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedData) {
|
||||
setFormData(props.selectedData);
|
||||
} else {
|
||||
setFormData(defaultData);
|
||||
}
|
||||
}, [props.actionMode, props.selectedData]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`}
|
||||
open={props.actionMode !== 'list'}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<Button key="back" onClick={handleCancel}>Batal</Button>,
|
||||
!readOnly && (
|
||||
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
),
|
||||
]}
|
||||
>
|
||||
{FormData && (
|
||||
<div>
|
||||
<div>
|
||||
<Text strong>Status</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
|
||||
<Switch
|
||||
disabled={readOnly}
|
||||
checked={FormData.status}
|
||||
onChange={handleStatusToggle}
|
||||
/>
|
||||
<Text style={{ marginLeft: '8px' }}>{FormData.status ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Shift</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="nama_shift"
|
||||
value={FormData.nama_shift}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan Nama Shift"
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Jam Shift</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
<Input
|
||||
name="jam_shift"
|
||||
value={FormData.jam_shift}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Contoh: 08:00 - 17:00"
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailShift;
|
||||
181
src/pages/master/shift/component/ListShift.jsx
Normal file
181
src/pages/master/shift/component/ListShift.jsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Col, Row, Input, ConfigProvider, Card, Tag } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
SearchOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
import { getAllShift, deleteShift } from '../../../../api/master-shift';
|
||||
|
||||
const ListShift = (props) => {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setFormDataFilter({ search: value });
|
||||
doFilter();
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
};
|
||||
|
||||
const showPreviewModal = (record) => {
|
||||
props.setSelectedData(record);
|
||||
props.setActionMode('preview');
|
||||
};
|
||||
|
||||
const showEditModal = (record) => {
|
||||
props.setSelectedData(record);
|
||||
props.setActionMode('edit');
|
||||
};
|
||||
|
||||
const showAddModal = () => {
|
||||
props.setSelectedData(null);
|
||||
props.setActionMode('add');
|
||||
};
|
||||
|
||||
const showDeleteDialog = (record) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi',
|
||||
message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
|
||||
onConfirm: () => handleDelete(record.id),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
const response = await deleteShift(id);
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus' });
|
||||
doFilter();
|
||||
} else {
|
||||
NotifAlert({ icon: 'error', title: 'Gagal', message: response.message });
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({ icon: 'error', title: 'Error', message: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Nama Shift',
|
||||
dataIndex: 'nama_shift',
|
||||
key: 'nama_shift',
|
||||
},
|
||||
{
|
||||
title: 'Jam Shift',
|
||||
dataIndex: 'jam_shift',
|
||||
key: 'jam_shift',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
render: (status) => (
|
||||
<Tag color={status ? 'green' : 'red'}>
|
||||
{status ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Aksi',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (_, record) => (
|
||||
<ConfigProvider theme={{ token: { colorBgContainer: 'transparent' } }}>
|
||||
<Button icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} />
|
||||
<Button icon={<EditOutlined />} onClick={() => showEditModal(record)} />
|
||||
<Button icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} danger />
|
||||
</ConfigProvider>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Row justify="space-between" align="middle" gutter={[16, 16]}>
|
||||
<Col xs={24} sm={12} md={10} lg={8}>
|
||||
<Input.Search
|
||||
placeholder="Cari nama shift..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>x</span>,
|
||||
}}
|
||||
enterButton={<Button type="primary" icon={<SearchOutlined />} style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}>Cari</Button>}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={showAddModal}
|
||||
size="large"
|
||||
>
|
||||
Tambah Shift
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: 16 }}>
|
||||
<Col span={24}>
|
||||
<TableList
|
||||
getData={getAllShift}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ListShift);
|
||||
Reference in New Issue
Block a user