379 lines
13 KiB
JavaScript
379 lines
13 KiB
JavaScript
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';
|
|
import dayjs from 'dayjs';
|
|
import utc from 'dayjs/plugin/utc';
|
|
|
|
dayjs.extend(utc);
|
|
|
|
const { Text } = Typography;
|
|
|
|
const DetailShift = (props) => {
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
|
|
const defaultData = {
|
|
shift_id: '',
|
|
shift_name: '',
|
|
start_time: '',
|
|
end_time: '',
|
|
is_active: true,
|
|
};
|
|
|
|
const [FormData, setFormData] = useState(defaultData);
|
|
|
|
const handleCancel = () => {
|
|
props.setSelectedData(null);
|
|
props.setActionMode('list');
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setConfirmLoading(true);
|
|
|
|
// Validasi required fields
|
|
if (!FormData.shift_name || FormData.shift_name.trim() === '') {
|
|
NotifOk({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
message: 'Kolom Nama Shift Tidak Boleh Kosong',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
if (!FormData.start_time || FormData.start_time.trim() === '') {
|
|
NotifOk({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
message: 'Kolom Jam Mulai Tidak Boleh Kosong',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
if (!FormData.end_time || FormData.end_time.trim() === '') {
|
|
NotifOk({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
message: 'Kolom Jam Selesai Tidak Boleh Kosong',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Validate time format
|
|
const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
|
|
if (!timePattern.test(FormData.start_time)) {
|
|
NotifOk({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
message:
|
|
'Format Jam Mulai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 08:00)',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
if (!timePattern.test(FormData.end_time)) {
|
|
NotifOk({
|
|
icon: 'warning',
|
|
title: 'Peringatan',
|
|
message:
|
|
'Format Jam Selesai tidak valid. Gunakan format HH:mm atau HH:mm:ss (contoh: 17:00)',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (FormData.shift_id) {
|
|
// Update existing shift
|
|
const payload = {
|
|
shift_name: FormData.shift_name,
|
|
start_time: FormData.start_time,
|
|
end_time: FormData.end_time,
|
|
is_active: FormData.is_active,
|
|
};
|
|
|
|
const response = await updateShift(FormData.shift_id, payload);
|
|
console.log('updateShift response:', response);
|
|
|
|
if (response.statusCode === 200) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: `Data Shift "${FormData.shift_name}" berhasil diubah.`,
|
|
});
|
|
props.setActionMode('list');
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: response.message || 'Gagal mengubah data Shift.',
|
|
});
|
|
}
|
|
} else {
|
|
// Create new shift
|
|
const payload = {
|
|
shift_name: FormData.shift_name,
|
|
start_time: FormData.start_time,
|
|
end_time: FormData.end_time,
|
|
is_active: FormData.is_active,
|
|
};
|
|
|
|
const response = await createShift(payload);
|
|
console.log('createShift response:', response);
|
|
|
|
if (response.statusCode === 200 || response.statusCode === 201) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: `Data Shift "${FormData.shift_name}" berhasil ditambahkan.`,
|
|
});
|
|
props.setActionMode('list');
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: response.message || 'Gagal menambahkan data Shift.',
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Save Shift Error:', error);
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: error.message || 'Terjadi kesalahan saat menyimpan data.',
|
|
});
|
|
}
|
|
|
|
setConfirmLoading(false);
|
|
};
|
|
|
|
// Helper function to format time input
|
|
const formatTimeInput = (value) => {
|
|
if (!value) return value;
|
|
|
|
// Remove any whitespace
|
|
value = value.trim();
|
|
|
|
// If user inputs single digit hour like "8:00", convert to "08:00"
|
|
const timeRegex = /^(\d{1,2}):(\d{2})(:\d{2})?$/;
|
|
const match = value.match(timeRegex);
|
|
|
|
if (match) {
|
|
const hours = match[1].padStart(2, '0');
|
|
const minutes = match[2];
|
|
const seconds = match[3] || '';
|
|
return `${hours}:${minutes}${seconds}`;
|
|
}
|
|
|
|
return value;
|
|
};
|
|
|
|
const handleInputChange = (e) => {
|
|
const { name, value } = e.target;
|
|
|
|
// Just set the value without formatting during typing
|
|
setFormData({
|
|
...FormData,
|
|
[name]: value,
|
|
});
|
|
};
|
|
|
|
// Format time when user leaves the input field (onBlur)
|
|
const handleTimeBlur = (e) => {
|
|
const { name, value } = e.target;
|
|
|
|
if (name === 'start_time' || name === 'end_time') {
|
|
const formattedValue = formatTimeInput(value);
|
|
setFormData({
|
|
...FormData,
|
|
[name]: formattedValue,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleStatusToggle = (isChecked) => {
|
|
setFormData({
|
|
...FormData,
|
|
is_active: isChecked,
|
|
});
|
|
};
|
|
|
|
// Helper function to extract time from ISO timestamp using dayjs
|
|
const extractTime = (timeString) => {
|
|
if (!timeString) return '';
|
|
|
|
// If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
|
|
if (timeString.includes('T')) {
|
|
return dayjs.utc(timeString).format('HH:mm');
|
|
}
|
|
|
|
// If it's already in HH:mm:ss format, remove seconds
|
|
if (timeString.includes(':')) {
|
|
const parts = timeString.split(':');
|
|
return `${parts[0]}:${parts[1]}`;
|
|
}
|
|
|
|
return timeString;
|
|
};
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
if (props.selectedData != null) {
|
|
// Only set fields that are in defaultData
|
|
const filteredData = {
|
|
shift_id: props.selectedData.shift_id || '',
|
|
shift_name: props.selectedData.shift_name || '',
|
|
start_time: extractTime(props.selectedData.start_time) || '',
|
|
end_time: extractTime(props.selectedData.end_time) || '',
|
|
is_active: props.selectedData.is_active ?? true,
|
|
};
|
|
setFormData(filteredData);
|
|
} else {
|
|
setFormData(defaultData);
|
|
}
|
|
}
|
|
}, [props.showModal]);
|
|
|
|
return (
|
|
<Modal
|
|
title={`${
|
|
props.actionMode === 'add'
|
|
? 'Tambah'
|
|
: props.actionMode === 'preview'
|
|
? 'Preview'
|
|
: 'Edit'
|
|
} Shift`}
|
|
open={props.showModal}
|
|
onCancel={handleCancel}
|
|
footer={[
|
|
<>
|
|
<ConfigProvider
|
|
theme={{
|
|
token: { colorBgContainer: '#E9F6EF' },
|
|
components: {
|
|
Button: {
|
|
defaultBg: 'white',
|
|
defaultColor: '#23A55A',
|
|
defaultBorderColor: '#23A55A',
|
|
defaultHoverColor: '#23A55A',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Button onClick={handleCancel}>Batal</Button>
|
|
</ConfigProvider>
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
colorBgContainer: '#209652',
|
|
},
|
|
components: {
|
|
Button: {
|
|
defaultBg: '#23a55a',
|
|
defaultColor: '#FFFFFF',
|
|
defaultBorderColor: '#23a55a',
|
|
defaultHoverColor: '#FFFFFF',
|
|
defaultHoverBorderColor: '#23a55a',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{!props.readOnly && (
|
|
<Button loading={confirmLoading} onClick={handleSave}>
|
|
Simpan
|
|
</Button>
|
|
)}
|
|
</ConfigProvider>
|
|
</>,
|
|
]}
|
|
>
|
|
{FormData && (
|
|
<div>
|
|
{/* Status Toggle */}
|
|
<div style={{ marginBottom: 12 }}>
|
|
<div>
|
|
<Text strong>Status</Text>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginTop: '8px',
|
|
}}
|
|
>
|
|
<div style={{ marginRight: '8px' }}>
|
|
<Switch
|
|
disabled={props.readOnly}
|
|
style={{
|
|
backgroundColor:
|
|
FormData.is_active === true ? '#23A55A' : '#bfbfbf',
|
|
}}
|
|
checked={FormData.is_active === true}
|
|
onChange={handleStatusToggle}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Nama Shift</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Input
|
|
name="shift_name"
|
|
value={FormData.shift_name}
|
|
onChange={handleInputChange}
|
|
placeholder="Masukkan Nama Shift"
|
|
readOnly={props.readOnly}
|
|
/>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Jam Mulai</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Input
|
|
name="start_time"
|
|
value={FormData.start_time}
|
|
onChange={handleInputChange}
|
|
placeholder="Masukkan Jam Mulai"
|
|
readOnly={props.readOnly}
|
|
maxLength={8}
|
|
/>
|
|
<Text
|
|
type="secondary"
|
|
style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
|
|
>
|
|
Contoh: 08:00 atau 08:00:00
|
|
</Text>
|
|
</div>
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text strong>Jam Selesai</Text>
|
|
<Text style={{ color: 'red' }}> *</Text>
|
|
<Input
|
|
name="end_time"
|
|
value={FormData.end_time}
|
|
onChange={handleInputChange}
|
|
placeholder="Masukkan Jam Selesai"
|
|
readOnly={props.readOnly}
|
|
maxLength={8}
|
|
/>
|
|
<Text
|
|
type="secondary"
|
|
style={{ fontSize: '12px', display: 'block', marginTop: '4px' }}
|
|
>
|
|
Contoh: 17:00 atau 17:00:00
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DetailShift;
|