yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: shift management API and UI components

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-20 13:49:42 +07:00
parent 4a9b6c9d01
commit d2c755c03d
5 changed files with 760 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
src/pages/master/shift/component/DetailShift.jsx
View File

@@ -7,13 +7,13 @@ 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
shift_id: '',
shift_name: '',
start_time: '',
end_time: '',
is_active: true,
};
const [FormData, setFormData] = useState(defaultData);
@@ -26,68 +26,228 @@ const DetailShift = (props) => {
const handleSave = async () => {
setConfirmLoading(true);
if (!FormData.nama_shift) {
NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Nama Shift Tidak Boleh Kosong' });
// 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.jam_shift) {
NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Jam Shift Tidak Boleh Kosong' });
if (!FormData.start_time || FormData.start_time.trim() === '') {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Jam Mulai Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
const payload = {
nama_shift: FormData.nama_shift,
jam_shift: FormData.jam_shift,
status: FormData.status,
};
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.id) {
props.onUpdate(payload);
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 {
props.onAdd(payload);
// 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.',
});
}
}
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Shift "${payload.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
});
} catch (error) {
console.error('Save Shift Error:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
message: error.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
setConfirmLoading(false);
};
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...FormData, [name]: value });
// 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 handleStatusToggle = (checked) => {
setFormData({ ...FormData, status: checked });
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
const extractTime = (timeString) => {
if (!timeString) return '';
// If it's ISO timestamp like "1970-01-01T08:00:00.000Z"
if (timeString.includes('T')) {
const date = new Date(timeString);
const hours = String(date.getUTCHours()).padStart(2, '0');
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
// 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(() => {
if (props.selectedData) {
setFormData(props.selectedData);
} else {
setFormData(defaultData);
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.actionMode, props.selectedData]);
}, [props.showModal]);
return (
<Modal
title={`${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`}
open={props.actionMode !== 'list'}
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Shift`}
open={props.showModal}
onCancel={handleCancel}
footer={[
<>
@@ -100,7 +260,6 @@ const DetailShift = (props) => {
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
@@ -123,7 +282,7 @@ const DetailShift = (props) => {
},
}}
>
{!readOnly && (
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
@@ -134,7 +293,8 @@ const DetailShift = (props) => {
>
{FormData && (
<div>
<div>
{/* Status Toggle */}
<div style={{ marginBottom: 12 }}>
<div>
<Text strong>Status</Text>
</div>
@@ -147,42 +307,66 @@ const DetailShift = (props) => {
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={readOnly}
disabled={props.readOnly}
style={{
backgroundColor:
FormData.status === true ? '#23A55A' : '#bfbfbf',
FormData.is_active === true ? '#23A55A' : '#bfbfbf',
}}
checked={FormData.status === true}
checked={FormData.is_active === true}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
<Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
<div style={{ marginBottom: 12 }}>
<Text strong>Nama Shift</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="nama_shift"
value={FormData.nama_shift}
name="shift_name"
value={FormData.shift_name}
onChange={handleInputChange}
placeholder="Masukkan Nama Shift"
readOnly={readOnly}
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Jam Shift</Text>
<Text strong>Jam Mulai</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="jam_shift"
value={FormData.jam_shift}
name="start_time"
value={FormData.start_time}
onChange={handleInputChange}
placeholder="Contoh: 08:00 - 17:00"
readOnly={readOnly}
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>
)}
@@ -190,4 +374,4 @@ const DetailShift = (props) => {
);
};
export default DetailShift;
export default DetailShift;