feat: implement shift management with CRUD operations and local storage integration
This commit is contained in:
@@ -1,10 +1,58 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import ListShift from './component/ListShift';
|
||||
import DetailShift from './component/DetailShift';
|
||||
import { getAllShift } from '../../../api/master-shift';
|
||||
|
||||
const IndexShift = () => {
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [shiftData, setShiftData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const localData = localStorage.getItem('shiftData');
|
||||
if (localData) {
|
||||
setShiftData(JSON.parse(localData));
|
||||
} else {
|
||||
const response = await getAllShift();
|
||||
if (response.data) {
|
||||
setShiftData(response.data.data);
|
||||
localStorage.setItem('shiftData', JSON.stringify(response.data.data));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching shift data:", error);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleAddShift = (newShift) => {
|
||||
const newData = { ...newShift, id: Date.now() }; // Simulate adding an ID
|
||||
const updatedData = [newData, ...shiftData];
|
||||
setShiftData(updatedData);
|
||||
localStorage.setItem('shiftData', JSON.stringify(updatedData));
|
||||
setActionMode('list');
|
||||
};
|
||||
|
||||
const handleUpdateShift = (updatedShift) => {
|
||||
const updatedData = shiftData.map(shift => shift.id === updatedShift.id ? updatedShift : shift);
|
||||
setShiftData(updatedData);
|
||||
localStorage.setItem('shiftData', JSON.stringify(updatedData));
|
||||
setActionMode('list');
|
||||
};
|
||||
|
||||
const handleDeleteShift = (id) => {
|
||||
const updatedData = shiftData.filter(shift => shift.id !== id);
|
||||
setShiftData(updatedData);
|
||||
localStorage.setItem('shiftData', JSON.stringify(updatedData));
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -12,6 +60,10 @@ const IndexShift = () => {
|
||||
<ListShift
|
||||
setActionMode={setActionMode}
|
||||
setSelectedData={setSelectedData}
|
||||
shiftData={shiftData}
|
||||
loading={loading}
|
||||
onDelete={handleDeleteShift}
|
||||
fetchData={fetchData}
|
||||
/>
|
||||
)}
|
||||
{(actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') && (
|
||||
@@ -20,6 +72,8 @@ const IndexShift = () => {
|
||||
selectedData={selectedData}
|
||||
setActionMode={setActionMode}
|
||||
setSelectedData={setSelectedData}
|
||||
onAdd={handleAddShift}
|
||||
onUpdate={handleUpdateShift}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -45,22 +45,23 @@ const DetailShift = (props) => {
|
||||
};
|
||||
|
||||
try {
|
||||
const response = FormData.id
|
||||
? await updateShift(FormData.id, payload)
|
||||
: await createShift(payload);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
if (FormData.id) {
|
||||
props.onUpdate(payload);
|
||||
} else {
|
||||
props.onAdd(payload);
|
||||
}
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: `Data Shift "${FormData.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
|
||||
message: `Data Shift "${payload.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.' });
|
||||
console.error('Save Shift Error:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
|
||||
});
|
||||
}
|
||||
|
||||
setConfirmLoading(false);
|
||||
@@ -89,28 +90,78 @@ const DetailShift = (props) => {
|
||||
open={props.actionMode !== 'list'}
|
||||
onCancel={handleCancel}
|
||||
footer={[
|
||||
<Button key="back" onClick={handleCancel}>Batal</Button>,
|
||||
!readOnly && (
|
||||
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave}>
|
||||
<>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorBgContainer: '#209652',
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{!readOnly && (
|
||||
<Button loading={confirmLoading} onClick={handleSave}>
|
||||
Simpan
|
||||
</Button>
|
||||
),
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</>,
|
||||
]}
|
||||
>
|
||||
{FormData && (
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<Text strong>Status</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<Switch
|
||||
disabled={readOnly}
|
||||
checked={FormData.status}
|
||||
style={{
|
||||
backgroundColor:
|
||||
FormData.status === true ? '#23A55A' : '#bfbfbf',
|
||||
}}
|
||||
checked={FormData.status === true}
|
||||
onChange={handleStatusToggle}
|
||||
/>
|
||||
<Text style={{ marginLeft: '8px' }}>{FormData.status ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Nama Shift</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Col, Row, Input, ConfigProvider, Card, Tag } from 'antd';
|
||||
import { Button, Col, Row, Input, ConfigProvider, Card, Tag, Table, Space } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
SearchOutlined,
|
||||
EyeOutlined,
|
||||
SyncOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
|
||||
import { 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();
|
||||
|
||||
@@ -26,19 +22,14 @@ const ListShift = (props) => {
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setFormDataFilter({ search: value });
|
||||
doFilter();
|
||||
// This will be handled by the parent component if server-side search is needed
|
||||
console.log('Search value:', value);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
// This will be handled by the parent component if server-side search is needed
|
||||
};
|
||||
|
||||
const showPreviewModal = (record) => {
|
||||
@@ -61,24 +52,10 @@ const ListShift = (props) => {
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi',
|
||||
message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
|
||||
onConfirm: () => handleDelete(record.id),
|
||||
onConfirm: () => props.onDelete(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',
|
||||
@@ -114,15 +91,40 @@ const ListShift = (props) => {
|
||||
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>
|
||||
<Space>
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => showPreviewModal(record)}
|
||||
style={{
|
||||
color: '#1890ff',
|
||||
borderColor: '#1890ff',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => showEditModal(record)}
|
||||
style={{
|
||||
color: '#faad14',
|
||||
borderColor: '#faad14',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => showDeleteDialog(record)}
|
||||
style={{
|
||||
borderColor: '#ff4d4f',
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const filteredData = props.shiftData.filter(item =>
|
||||
item.nama_shift.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Row justify="space-between" align="middle" gutter={[16, 16]}>
|
||||
@@ -166,11 +168,11 @@ const ListShift = (props) => {
|
||||
</Row>
|
||||
<Row style={{ marginTop: 16 }}>
|
||||
<Col span={24}>
|
||||
<TableList
|
||||
getData={getAllShift}
|
||||
queryParams={formDataFilter}
|
||||
<Table
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
dataSource={filteredData}
|
||||
loading={props.loading}
|
||||
rowKey="id"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user