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

lavoce #11

Merged
bragaz_rexita merged 8 commits from lavoce into main 2025-10-28 09:47:36 +00:00
Conversation 0 Commits 8 Files Changed 14 +829 -410
3 changed files with 829 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3738adf85a - Show all commits

10
src/api/jadwal-shift.jsx
View File

@@ -3,7 +3,7 @@ import { SendRequest } from '../components/Global/ApiRequest';
const getAllJadwalShift = async (queryParams) => { const getAllJadwalShift = async (queryParams) => {
const response = await SendRequest({ const response = await SendRequest({
method: 'get', method: 'get',
prefix: `jadwal-shift?${queryParams.toString()}`, prefix: `user-schedule?${queryParams.toString()}`,
}); });
return response.data; return response.data;
@@ -12,7 +12,7 @@ const getAllJadwalShift = async (queryParams) => {
const getJadwalShiftById = async (id) => { const getJadwalShiftById = async (id) => {
const response = await SendRequest({ const response = await SendRequest({
method: 'get', method: 'get',
prefix: `jadwal-shift/${id}`, prefix: `user-schedule/${id}`,
}); });
return response.data; return response.data;
@@ -21,7 +21,7 @@ const getJadwalShiftById = async (id) => {
const createJadwalShift = async (queryParams) => { const createJadwalShift = async (queryParams) => {
const response = await SendRequest({ const response = await SendRequest({
method: 'post', method: 'post',
prefix: `jadwal-shift`, prefix: `user-schedule`,
params: queryParams, params: queryParams,
}); });
@@ -31,7 +31,7 @@ const createJadwalShift = async (queryParams) => {
const updateJadwalShift = async (id, queryParams) => { const updateJadwalShift = async (id, queryParams) => {
const response = await SendRequest({ const response = await SendRequest({
method: 'put', method: 'put',
prefix: `jadwal-shift/${id}`, prefix: `user-schedule/${id}`,
params: queryParams, params: queryParams,
}); });
@@ -41,7 +41,7 @@ const updateJadwalShift = async (id, queryParams) => {
const deleteJadwalShift = async (id) => { const deleteJadwalShift = async (id) => {
const response = await SendRequest({ const response = await SendRequest({
method: 'delete', method: 'delete',
prefix: `jadwal-shift/${id}`, prefix: `user-schedule/${id}`,
}); });
return response.data; return response.data;
}; };

357
src/pages/jadwalShift/component/DetailJadwalShift.jsx
View File

@@ -1,173 +1,278 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { import { Modal, Select, Typography, Button, ConfigProvider } from 'antd';
Modal, import { NotifOk } from '../../../components/Global/ToastNotif';
Typography, import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
Button, import { getAllUser } from '../../../api/user';
ConfigProvider, import { getAllShift } from '../../../api/master-shift';
Form, import { validateRun } from '../../../Utils/validate';
Select,
Spin,
Input
} from 'antd';
import { NotifOk, NotifAlert } from '../../../components/Global/ToastNotif';
import { updateJadwalShift, createJadwalShift } from '../../../api/jadwal-shift.jsx';
const { Text } = Typography; const { Text } = Typography;
const { Option } = Select; const { Option } = Select;
const DetailJadwalShift = (props) => { const DetailJadwalShift = (props) => {
const [form] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [employees, setEmployees] = useState([]); const [employees, setEmployees] = useState([]);
const [loadingEmployees, setLoadingEmployees] = useState(false); const [shifts, setShifts] = useState([]);
const [loadingData, setLoadingData] = useState(false);
const isReadOnly = props.actionMode === 'preview'; const defaultData = {
id: '',
user_id: null,
shift_id: null,
schedule_id: '',
user_phone: null,
};
const [formData, setFormData] = useState(defaultData);
const handleSelectChange = (name, value) => {
const updates = { [name]: value };
if (name === 'user_id') {
const selectedEmployee = employees.find((emp) => emp.user_id === value);
updates.user_phone = selectedEmployee?.user_phone || '-';
}
setFormData({
...formData,
...updates,
});
};
const handleCancel = () => { const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list'); props.setActionMode('list');
}; };
const fetchEmployees = async () => { const fetchData = async () => {
setLoadingEmployees(true); setLoadingData(true);
try { try {
// Data dummy untuk dropdown karyawan const params = new URLSearchParams({
const dummyEmployees = [ page: 1,
{ employee_id: '101', nama_employee: 'Andi Pratama' }, limit: 100,
{ employee_id: '102', nama_employee: 'Budi Santoso' }, });
{ employee_id: '103', nama_employee: 'Citra Lestari' },
{ employee_id: '104', nama_employee: 'Dewi Anggraini' }, const [usersResponse, shiftsResponse] = await Promise.all([
{ employee_id: '105', nama_employee: 'Eko Wahyudi' }, getAllUser(params),
{ employee_id: '106', nama_employee: 'Fitriani' }, getAllShift(params),
]; ]);
setEmployees(dummyEmployees);
const userData = usersResponse?.data || usersResponse || [];
const shiftData = shiftsResponse?.data || shiftsResponse || [];
setEmployees(Array.isArray(userData) ? userData : []);
setShifts(Array.isArray(shiftData) ? shiftData : []);
} catch (error) { } catch (error) {
NotifAlert({ icon: 'error', title: 'Gagal', message: 'Gagal memuat daftar karyawan.' }); NotifOk({
icon: 'error',
title: 'Gagal',
message: 'Gagal memuat data karyawan atau shift.',
});
} finally { } finally {
setLoadingEmployees(false); setLoadingData(false);
} }
}; };
const handleSave = async () => { const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'user_id', label: 'Nama Karyawan', required: true },
{ field: 'shift_id', label: 'Shift', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
});
setConfirmLoading(false);
})
)
return;
try { try {
const values = await form.validateFields(); const payload = {
let payload; user_id: formData.user_id,
let responseMessage; shift_id: formData.shift_id,
};
setConfirmLoading(true); // Add schedule_id only if editing and it exists
if (props.actionMode === 'edit') { if (props.actionMode === 'edit' && formData.schedule_id) {
payload = { ...props.selectedData, ...values }; payload.schedule_id = formData.schedule_id;
// await updateJadwalShift(payload.schedule_id, payload);
console.log("Updating schedule with payload:", payload);
responseMessage = 'Jadwal berhasil diperbarui.';
} else { // 'add' mode
payload = {
employee_id: values.employee_id,
shift_name: props.selectedData.shift_name,
schedule_date: new Date().toISOString().split('T')[0], // Example date
};
// await createJadwalShift(payload);
console.log("Creating schedule with payload:", payload);
responseMessage = 'User berhasil ditambahkan ke jadwal.';
} }
await new Promise(resolve => setTimeout(resolve, 500)); // Simulasi API call
NotifOk({ icon: 'success', title: 'Berhasil', message: responseMessage }); const response =
props.setActionMode('list'); // Menutup modal dan memicu refresh di parent props.actionMode === 'edit'
? await updateJadwalShift(formData.id, payload)
: await createJadwalShift(payload);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Jadwal berhasil ${action}.`,
});
props.setActionMode('list');
} else {
NotifOk({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) { } catch (error) {
const message = error.response?.data?.message || 'Gagal memperbarui jadwal.'; NotifOk({
NotifAlert({ icon: 'error', title: 'Gagal', message }); icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server.',
});
} finally { } finally {
setConfirmLoading(false); setConfirmLoading(false);
} }
}; };
useEffect(() => { useEffect(() => {
// Hanya jalankan jika modal untuk 'edit' atau 'preview' terbuka
if (props.showModal) { if (props.showModal) {
fetchEmployees(); fetchData();
if (props.actionMode === 'edit' || props.actionMode === 'preview') {
form.setFieldsValue({
employee_id: props.selectedData.employee_id,
shift_name: props.selectedData.shift_name,
});
} else if (props.actionMode === 'add') {
form.setFieldsValue({
shift_name: props.selectedData.shift_name,
employee_id: null, // Reset employee selection
});
}
} }
}, [props.actionMode, props.showModal, props.selectedData, form]);
if (props.selectedData) {
setFormData({
id: props.selectedData.id || '',
user_id: props.selectedData.user_id || null,
shift_id: props.selectedData.shift_id || null,
schedule_id: props.selectedData.schedule_id || '',
user_phone: props.selectedData.whatsapp || props.selectedData.user_phone || null,
});
} else {
setFormData(defaultData);
}
}, [props.showModal, props.selectedData, props.actionMode]);
return ( return (
<Modal <Modal
title={isReadOnly ? 'Preview Jadwal' : (props.actionMode === 'edit' ? 'Edit Jadwal' : 'Tambah User')} title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Jadwal Shift`}
open={props.showModal} open={props.showModal}
onCancel={handleCancel} onCancel={handleCancel}
width={600}
footer={[ footer={[
<React.Fragment key="modal-footer"> <React.Fragment key="modal-footer">
<Button key="back" onClick={handleCancel}> <ConfigProvider
{isReadOnly ? 'Tutup' : 'Batal'} theme={{
</Button> components: {
{!isReadOnly && ( Button: {
<Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave} style={{ backgroundColor: '#23A55A' }}> defaultBg: 'white',
Simpan defaultColor: '#23A55A',
</Button> defaultBorderColor: '#23A55A',
)} },
},
}}
>
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
},
},
}}
>
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
)}
</ConfigProvider>
</React.Fragment>, </React.Fragment>,
]} ]}
> >
<Spin spinning={loadingEmployees} tip="Memuat data..."> {formData && (
<Form form={form} layout="vertical" name="shift_form"> <div>
{props.actionMode === 'add' ? ( <div style={{ marginBottom: 12 }}>
<> <Text strong>Nama Karyawan</Text>
<Form.Item <Text style={{ color: 'red' }}> *</Text>
name="shift_name" <Select
label="Shift" value={formData.user_id}
> onChange={(value) => handleSelectChange('user_id', value)}
<Input disabled /> placeholder="Pilih karyawan"
</Form.Item> disabled={props.readOnly || loadingData}
<Form.Item loading={loadingData}
name="employee_id" showSearch
label="Nama Karyawan" optionFilterProp="children"
rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]} filterOption={(input, option) =>
> option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
<Select }
placeholder="Pilih karyawan" style={{ width: '100%' }}
showSearch >
optionFilterProp="children" {employees
> .filter((emp) => emp.user_id != null)
{employees.map(emp => ( .map((emp) => (
<Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option> <Option key={`emp-${emp.user_id}`} value={emp.user_id}>
))} {emp.user_fullname || emp.user_name}
</Select> </Option>
</Form.Item> ))}
</> </Select>
) : ( </div>
<>
<Form.Item <div style={{ marginBottom: 12 }}>
name="employee_id" <Text strong>No. Telepon</Text>
label="Nama Karyawan" <div
rules={[{ required: true, message: 'Nama karyawan wajib dipilih!' }]} style={{
> padding: '8px 12px',
<Select placeholder="Pilih karyawan" disabled={isReadOnly} showSearch optionFilterProp="children"> backgroundColor: '#f5f5f5',
{employees.map(emp => ( borderRadius: '6px',
<Option key={emp.employee_id} value={emp.employee_id}>{emp.nama_employee}</Option>
))} marginTop: '4px',
</Select> color: formData.user_phone ? '#000' : '#999',
</Form.Item> }}
<Form.Item name="shift_name" label="Shift" rules={[{ required: true, message: 'Shift wajib dipilih!' }]}> >
<Select placeholder="Pilih shift" disabled={isReadOnly}> {formData.user_phone || 'Pilih karyawan terlebih dahulu'}
<Option value="PAGI">PAGI</Option> </div>
<Option value="SIANG">SIANG</Option> </div>
<Option value="MALAM">MALAM</Option>
</Select> <div style={{ marginBottom: 12 }}>
</Form.Item> <Text strong>Shift</Text>
</> <Text style={{ color: 'red' }}> *</Text>
)} <Select
</Form> value={formData.shift_id}
</Spin> onChange={(value) => handleSelectChange('shift_id', value)}
placeholder="Pilih shift"
disabled={props.readOnly || loadingData}
loading={loadingData}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
style={{ width: '100%' }}
>
{shifts
.filter((shift) => shift.shift_id != null)
.map((shift) => (
<Option key={`shift-${shift.shift_id}`} value={shift.shift_id}>
{shift.shift_name}
</Option>
))}
</Select>
</div>
</div>
)}
</Modal> </Modal>
); );
}; };

872
src/pages/jadwalShift/component/ListJadwalShift.jsx
View File

File diff suppressed because it is too large Load Diff