Refactor: shift management API and UI components
This commit is contained in:
@@ -10,68 +10,42 @@ import {
|
||||
import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
|
||||
// --- DUMMY DATA (Initial State) --- //
|
||||
const initialDummyData = [
|
||||
{
|
||||
id: 1,
|
||||
nama_shift: 'Shift Pagi',
|
||||
jam_masuk: '07:00',
|
||||
jam_pulang: '15:00',
|
||||
username: 'd.sanjaya',
|
||||
nama_employee: 'Dede Sanjaya',
|
||||
whatsapp: '081234567890'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_shift: 'Shift Siang',
|
||||
jam_masuk: '15:00',
|
||||
jam_pulang: '23:00',
|
||||
username: 'a.wijaya',
|
||||
nama_employee: 'Andi Wijaya',
|
||||
whatsapp: '081234567891'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_shift: 'Shift Malam',
|
||||
jam_masuk: '23:00',
|
||||
jam_pulang: '07:00',
|
||||
username: 'b.cahya',
|
||||
nama_employee: 'Budi Cahya',
|
||||
whatsapp: '081234567892'
|
||||
},
|
||||
];
|
||||
import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
|
||||
|
||||
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
{
|
||||
title: 'Nama Karyawan',
|
||||
dataIndex: 'nama_employee',
|
||||
key: 'nama_employee',
|
||||
},
|
||||
{
|
||||
title: 'Username',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
title: 'Tanggal Jadwal',
|
||||
dataIndex: 'schedule_date',
|
||||
key: 'schedule_date',
|
||||
render: (date) => date ? new Date(date).toLocaleDateString('id-ID') : '-',
|
||||
},
|
||||
{
|
||||
title: 'Nama Shift',
|
||||
dataIndex: 'nama_shift',
|
||||
key: 'nama_shift',
|
||||
dataIndex: 'shift_name',
|
||||
key: 'shift_name',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Jam Masuk',
|
||||
dataIndex: 'jam_masuk',
|
||||
key: 'jam_masuk',
|
||||
dataIndex: 'start_time',
|
||||
key: 'start_time',
|
||||
render: (time) => time || '-',
|
||||
},
|
||||
{
|
||||
title: 'Jam Pulang',
|
||||
dataIndex: 'jam_pulang',
|
||||
key: 'jam_pulang',
|
||||
dataIndex: 'end_time',
|
||||
key: 'end_time',
|
||||
render: (time) => time || '-',
|
||||
},
|
||||
{
|
||||
title: 'Whatsapp',
|
||||
dataIndex: 'whatsapp',
|
||||
key: 'whatsapp',
|
||||
title: 'Status',
|
||||
dataIndex: 'is_active',
|
||||
key: 'is_active',
|
||||
render: (isActive) => (
|
||||
<Tag color={isActive ? 'green' : 'red'}>
|
||||
{isActive ? 'Aktif' : 'Tidak Aktif'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Aksi',
|
||||
@@ -101,39 +75,42 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
];
|
||||
|
||||
const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
const [dataSource, setDataSource] = useState(initialDummyData);
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
// --- DUMMY API --- //
|
||||
const getDummyData = (queryParams) => {
|
||||
return new Promise((resolve) => {
|
||||
const { criteria } = queryParams;
|
||||
let data = dataSource;
|
||||
if (criteria) {
|
||||
data = dataSource.filter(item =>
|
||||
item.nama_employee.toLowerCase().includes(criteria.toLowerCase()) ||
|
||||
item.username.toLowerCase().includes(criteria.toLowerCase())
|
||||
);
|
||||
}
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
status: 200,
|
||||
data: {
|
||||
data: data,
|
||||
paging: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: data.length,
|
||||
page_total: 1
|
||||
}
|
||||
const getData = async (queryParams) => {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: queryParams.page || 1,
|
||||
limit: queryParams.limit || 10,
|
||||
criteria: queryParams.criteria || ''
|
||||
});
|
||||
|
||||
const response = await getAllJadwalShift(params);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Error fetching jadwal shift:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Gagal mengambil data jadwal shift.',
|
||||
});
|
||||
return {
|
||||
status: 500,
|
||||
data: {
|
||||
data: [],
|
||||
paging: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
page_total: 0
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -146,7 +123,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode, dataSource]); // Added dataSource to dependency array
|
||||
}, [props.actionMode]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
@@ -179,23 +156,41 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
};
|
||||
|
||||
const showDeleteDialog = (param) => {
|
||||
const dateStr = param.schedule_date ? new Date(param.schedule_date).toLocaleDateString('id-ID') : 'tanggal tidak diketahui';
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: `Jadwal shift untuk "${param.nama_employee}" akan dihapus?`,
|
||||
onConfirm: () => handleDelete(param.id),
|
||||
message: `Jadwal shift tanggal ${dateStr} akan dihapus?`,
|
||||
onConfirm: () => handleDelete(param.schedule_id),
|
||||
onCancel: () => props.setSelectedData(null),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setDataSource(prevData => prevData.filter(item => item.id !== id));
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data Jadwal Shift berhasil dihapus.',
|
||||
});
|
||||
doFilter(); // Trigger a re-fetch from the new state
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
const response = await deleteJadwalShift(id);
|
||||
if (response.statusCode === 200) {
|
||||
NotifAlert({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Data Jadwal Shift berhasil dihapus.',
|
||||
});
|
||||
doFilter();
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: response.message || 'Gagal menghapus data jadwal shift.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting jadwal shift:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Terjadi kesalahan saat menghapus data.',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -206,7 +201,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Cari berdasarkan nama atau username..."
|
||||
placeholder="Cari jadwal shift..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -263,11 +258,11 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'nama_employee'}
|
||||
header={'schedule_date'}
|
||||
showPreviewModal={showPreviewModal}
|
||||
showEditModal={showEditModal}
|
||||
showDeleteDialog={showDeleteDialog}
|
||||
getData={getDummyData}
|
||||
getData={getData}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
|
||||
triger={trigerFilter}
|
||||
|
||||
Reference in New Issue
Block a user