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 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 { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createDevice, updateDevice } from '../../../../api/master-device'; import { createDevice, updateDevice } from '../../../../api/master-device';
import { getAllBrands } from '../../../../api/master-brand'; import { getAllBrands } from '../../../../api/master-brand';
@@ -14,8 +24,6 @@ const DetailDevice = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [brands, setBrands] = useState([]); const [brands, setBrands] = useState([]);
const [loadingBrands, setLoadingBrands] = useState(false); const [loadingBrands, setLoadingBrands] = useState(false);
const dateNow = dayjs();
const [schedulerDate, setSchedulerDate] = useState(dateNow);
const defaultData = { const defaultData = {
device_id: '', device_id: '',
@@ -27,7 +35,7 @@ const DetailDevice = (props) => {
device_location: '', device_location: '',
device_description: '', device_description: '',
ip_address: '', ip_address: '',
scheduler_date: '', reminder_at: null,
listen_channel: '', listen_channel: '',
}; };
@@ -46,7 +54,6 @@ const DetailDevice = (props) => {
{ field: 'device_name', label: 'Device Name', required: true }, { field: 'device_name', label: 'Device Name', required: true },
{ field: 'ip_address', label: 'Ip Address', required: true, ip: true }, { field: 'ip_address', label: 'Ip Address', required: true, ip: true },
{ field: 'brand_id', label: 'Brand Device', required: true }, { field: 'brand_id', label: 'Brand Device', required: true },
{ field: 'scheduler_date', label: 'Tanggaln(Scheduler)', required: true },
]; ];
if ( if (
@@ -73,35 +80,36 @@ const DetailDevice = (props) => {
ip_address: formData.ip_address, ip_address: formData.ip_address,
brand_id: formData.brand_id, brand_id: formData.brand_id,
listen_channel: formData.listen_channel, 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); console.log(payload);
// const response = formData.device_id const response = formData.device_id
// ? await updateDevice(formData.device_id, payload) ? await updateDevice(formData.device_id, payload)
// : await createDevice(payload); : await createDevice(payload);
// // Check if response is successful // Check if response is successful
// if (response && (response.statusCode === 200 || response.statusCode === 201)) { if (response && (response.statusCode === 200 || response.statusCode === 201)) {
// const deviceName = response.data?.device_name || formData.device_name; const deviceName = response.data?.device_name || formData.device_name;
// NotifOk({ NotifOk({
// icon: 'success', icon: 'success',
// title: 'Berhasil', title: 'Berhasil',
// message: `Data Device "${deviceName}" berhasil ${ message: `Data Device "${deviceName}" berhasil ${
// formData.device_id ? 'diubah' : 'ditambahkan' formData.device_id ? 'diubah' : 'ditambahkan'
// }.`, }.`,
// }); });
// props.setActionMode('list'); props.setActionMode('list');
// } else { } else {
// NotifAlert({ NotifAlert({
// icon: 'error', icon: 'error',
// title: 'Gagal', title: 'Gagal',
// message: response?.message || 'Terjadi kesalahan saat menyimpan data.', message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
// }); });
// } }
} catch (error) { } catch (error) {
console.error('Save Device Error:', error); console.error('Save Device Error:', error);
NotifAlert({ NotifAlert({
@@ -185,8 +193,8 @@ const DetailDevice = (props) => {
props.actionMode === 'add' props.actionMode === 'add'
? 'Tambah' ? 'Tambah'
: props.actionMode === 'preview' : props.actionMode === 'preview'
? 'Preview' ? 'Preview'
: 'Edit' : 'Edit'
} Device`} } Device`}
open={props.showModal} open={props.showModal}
// open={true} // open={true}
@@ -234,7 +242,7 @@ const DetailDevice = (props) => {
</React.Fragment>, </React.Fragment>,
]} ]}
> >
<Divider/> <Divider />
{formData && ( {formData && (
<div> <div>
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
@@ -347,26 +355,63 @@ const DetailDevice = (props) => {
readOnly={props.readOnly} readOnly={props.readOnly}
/> />
</div> </div>
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}></div>
<Text strong>Listen Channel</Text> <div style={{ marginBottom: 12 }}></div>
<Input <div style={{ display: 'flex', gap: 16 }}>
name="listen_channel" <div style={{ flex: 1 }}>
value={formData.listen_channel} {' '}
onChange={handleInputChange} <Text strong>Channel Error</Text>
placeholder="Enter Listen Channel" <Input
readOnly={props.readOnly} 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>
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<Text strong>Scheduler Date</Text> <Text strong>Reminder At</Text>
<DatePicker <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
value={formData.scheduler_date ? dayjs(formData.scheduler_date, 'DD-MM-YYYY') : ''} <DatePicker
onChange={(date, dateString) => value={
handleDateChange("scheduler_date", dateString) formData.reminder_at
} ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
format="DD-MM-YYYY" : null
style={{ width: '100%', marginTop: '4px' }} }
/> 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>
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<Text strong>Device Description</Text> <Text strong>Device Description</Text>