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

Add Checkbox and Input Scheduler Date

Browse Source
This commit is contained in:
Bragas Rexita Ecos Fernanda
2026-04-23 22:26:34 +07:00
parent 0a8a767261
commit 8d03a0a52e
4 changed files with 197 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/master/device/component/DetailDevice.jsx
View File

@@ -1,9 +1,11 @@
import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select, DatePicker } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createDevice, updateDevice } from '../../../../api/master-device';
import { getAllBrands } from '../../../../api/master-brand';
import { validateRun } from '../../../../Utils/validate';
import { toApiDateFormatter } from '../../../../components/Global/Formatter';
import dayjs from 'dayjs';
const { Text } = Typography;
const { TextArea } = Input;
@@ -12,6 +14,8 @@ const DetailDevice = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [brands, setBrands] = useState([]);
const [loadingBrands, setLoadingBrands] = useState(false);
const dateNow = dayjs();
const [schedulerDate, setSchedulerDate] = useState(dateNow);
const defaultData = {
device_id: '',
@@ -23,6 +27,7 @@ const DetailDevice = (props) => {
device_location: '',
device_description: '',
ip_address: '',
scheduler_date: '',
listen_channel: '',
};
@@ -41,6 +46,7 @@ const DetailDevice = (props) => {
{ field: 'device_name', label: 'Device Name', required: true },
{ field: 'ip_address', label: 'Ip Address', required: true, ip: true },
{ field: 'brand_id', label: 'Brand Device', required: true },
{ field: 'scheduler_date', label: 'Tanggaln(Scheduler)', required: true },
];
if (
@@ -67,32 +73,35 @@ const DetailDevice = (props) => {
ip_address: formData.ip_address,
brand_id: formData.brand_id,
listen_channel: formData.listen_channel,
scheduler_date: toApiDateFormatter(formData.scheduler_date)
};
const response = formData.device_id
? await updateDevice(formData.device_id, payload)
: await createDevice(payload);
console.log(payload);
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const deviceName = response.data?.device_name || formData.device_name;
// const response = formData.device_id
// ? await updateDevice(formData.device_id, payload)
// : await createDevice(payload);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Device "${deviceName}" berhasil ${
formData.device_id ? 'diubah' : 'ditambahkan'
}.`,
});
// // Check if response is successful
// if (response && (response.statusCode === 200 || response.statusCode === 201)) {
// const deviceName = response.data?.device_name || formData.device_name;
props.setActionMode('list');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
// NotifOk({
// icon: 'success',
// title: 'Berhasil',
// message: `Data Device "${deviceName}" berhasil ${
// formData.device_id ? 'diubah' : 'ditambahkan'
// }.`,
// });
// props.setActionMode('list');
// } else {
// NotifAlert({
// icon: 'error',
// title: 'Gagal',
// message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
// });
// }
} catch (error) {
console.error('Save Device Error:', error);
NotifAlert({
@@ -128,6 +137,13 @@ const DetailDevice = (props) => {
});
};
const handleDateChange = (field, value) => {
setFormData({
...formData,
[field]: value,
});
};
// Fungsi untuk mengambil daftar brand
const fetchBrands = async () => {
setLoadingBrands(true);
@@ -218,9 +234,10 @@ const DetailDevice = (props) => {
</React.Fragment>,
]}
>
<Divider/>
{formData && (
<div>
<div>
<div style={{ marginBottom: 12 }}>
<div>
<Text strong>Device Status</Text>
</div>
@@ -247,7 +264,7 @@ const DetailDevice = (props) => {
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
{/* <Divider style={{ margin: '12px 0' }} /> */}
<div hidden>
<Text strong>Device ID</Text>
<Input
@@ -340,6 +357,17 @@ const DetailDevice = (props) => {
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Scheduler Date</Text>
<DatePicker
value={formData.scheduler_date ? dayjs(formData.scheduler_date, 'DD-MM-YYYY') : ''}
onChange={(date, dateString) =>
handleDateChange("scheduler_date", dateString)
}
format="DD-MM-YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Description</Text>
<TextArea