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

Refactor DetailDevice component: update form fields to include 'listen_channel_reminder' and 'reminder_at', replace 'scheduler_date' with 'reminder_at', and improve layout for input fields.

Browse Source
This commit is contained in:
Fachba
2026-04-26 13:40:10 +07:00
parent d04f078c6c
commit 0ca2169a12
1 changed files with 93 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,15 @@
import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select, DatePicker } 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';
@@ -14,8 +24,6 @@ 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: '',
@@ -27,7 +35,7 @@ const DetailDevice = (props) => {
device_location: '',
device_description: '',
ip_address: '',
scheduler_date: '',
reminder_at: null,
listen_channel: '',
};
@@ -46,7 +54,6 @@ 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 (
@@ -73,35 +80,36 @@ const DetailDevice = (props) => {
ip_address: formData.ip_address,
brand_id: formData.brand_id,
listen_channel: formData.listen_channel,
scheduler_date: toApiDateFormatter(formData.scheduler_date)
listen_channel_reminder: formData.listen_channel_reminder,
reminder_at: formData.reminder_at,
};
console.log(payload);
// const response = formData.device_id
// ? await updateDevice(formData.device_id, payload)
// : await createDevice(payload);
const response = formData.device_id
? await updateDevice(formData.device_id, payload)
: await createDevice(payload);
// // Check if response is successful
// if (response && (response.statusCode === 200 || response.statusCode === 201)) {
// const deviceName = response.data?.device_name || formData.device_name;
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const deviceName = response.data?.device_name || formData.device_name;
// NotifOk({
// icon: 'success',
// title: 'Berhasil',
// message: `Data Device "${deviceName}" berhasil ${
// formData.device_id ? 'diubah' : 'ditambahkan'
// }.`,
// });
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.',
// });
// }
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({
@@ -185,8 +193,8 @@ const DetailDevice = (props) => {
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
? 'Preview'
: 'Edit'
} Device`}
open={props.showModal}
// open={true}
@@ -234,7 +242,7 @@ const DetailDevice = (props) => {
</React.Fragment>,
]}
>
<Divider/>
<Divider />
{formData && (
<div>
<div style={{ marginBottom: 12 }}>
@@ -347,26 +355,63 @@ const DetailDevice = (props) => {
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Listen Channel</Text>
<Input
name="listen_channel"
value={formData.listen_channel}
onChange={handleInputChange}
placeholder="Enter Listen Channel"
readOnly={props.readOnly}
/>
<div style={{ marginBottom: 12 }}></div>
<div style={{ marginBottom: 12 }}></div>
<div style={{ display: 'flex', gap: 16 }}>
<div style={{ flex: 1 }}>
{' '}
<Text strong>Channel Error</Text>
<Input
name="listen_channel"
value={formData.listen_channel}
onChange={handleInputChange}
placeholder="Enter Listen Channel"
readOnly={props.readOnly}
/>
</div>
<div style={{ flex: 1 }}>
<Text strong>Channel Reminder</Text>
<Input
name="listen_channel_reminder"
value={formData.listen_channel_reminder}
onChange={handleInputChange}
placeholder="Enter Listen Channel Reminder"
readOnly={props.readOnly}
/>
</div>
</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' }}
/>
<Text strong>Reminder At</Text>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<DatePicker
value={
formData.reminder_at
? dayjs(formData.reminder_at) // ✅ langsung parse ISO
: null
}
onChange={(date) =>
handleDateChange(
'reminder_at',
date ? date.toISOString() : null
)
}
format="DD-MM-YYYY HH:mm"
showTime={{ format: 'HH:mm' }}
style={{ flex: 1 }}
/>
<Button
danger
onClick={() =>
setFormData((prev) => ({
...prev,
reminder_at: null,
}))
}
>
Clear
</Button>
</div>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Description</Text>