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

update: add description field

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-23 15:15:01 +07:00
parent 9ac2942ace
commit 1c3f80bc26
2 changed files with 68 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/pages/master/tag/component/DetailTag.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd'; import { Modal, Input, Typography, Switch, Button, ConfigProvider, Select, Checkbox } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif'; import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createTag, updateTag, getAllTag } from '../../../../api/master-tag'; import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
import { getAllDevice } from '../../../../api/master-device'; import { getAllDevice } from '../../../../api/master-device';
@@ -34,6 +34,7 @@ const DetailTag = (props) => {
lim_high: '', lim_high: '',
lim_high_crash: '', lim_high_crash: '',
device_id: null, device_id: null,
description: '',
sub_section_id: null, sub_section_id: null,
}; };
@@ -147,10 +148,8 @@ const DetailTag = (props) => {
payload.unit = formData.unit.trim(); payload.unit = formData.unit.trim();
} }
// Add device_id only if it's selected // Add device_id - backend requires this field even if null
if (formData.device_id) { payload.device_id = formData.device_id ? parseInt(formData.device_id) : null;
payload.device_id = parseInt(formData.device_id);
}
// Add limit fields only if they have values // Add limit fields only if they have values
if (formData.lim_low_crash !== '' && formData.lim_low_crash !== null) { if (formData.lim_low_crash !== '' && formData.lim_low_crash !== null) {
@@ -166,10 +165,8 @@ const DetailTag = (props) => {
payload.lim_high_crash = parseFloat(formData.lim_high_crash); payload.lim_high_crash = parseFloat(formData.lim_high_crash);
} }
// Add sub_section_id only if it's selected // Add sub_section_id - backend requires this field even if null
if (formData.sub_section_id) { payload.sub_section_id = formData.sub_section_id ? parseInt(formData.sub_section_id) : null;
payload.sub_section_id = parseInt(formData.sub_section_id);
}
try { try {
const response = const response =
@@ -234,24 +231,24 @@ const DetailTag = (props) => {
}); });
}; };
const handleAlarmToggle = (checked) => { const handleAlarmToggle = (e) => {
setformData({ setformData({
...formData, ...formData,
is_alarm: checked, is_alarm: e.target.checked,
}); });
}; };
const handleReportToggle = (checked) => { const handleReportToggle = (e) => {
setformData({ setformData({
...formData, ...formData,
is_report: checked, is_report: e.target.checked,
}); });
}; };
const handleHistoryToggle = (checked) => { const handleHistoryToggle = (e) => {
setformData({ setformData({
...formData, ...formData,
is_history: checked, is_history: e.target.checked,
}); });
}; };
@@ -336,7 +333,7 @@ const DetailTag = (props) => {
} Tag`} } Tag`}
open={props.showModal} open={props.showModal}
onCancel={handleCancel} onCancel={handleCancel}
width={800} width={1000}
footer={[ footer={[
<React.Fragment key="modal-footer"> <React.Fragment key="modal-footer">
<ConfigProvider <ConfigProvider
@@ -403,114 +400,17 @@ const DetailTag = (props) => {
</div> </div>
</div> </div>
</div> </div>
{/* Alarm, Report, dan History dalam satu baris */} {/* Tag Code dan Alarm, Report dan History */}
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
gap: '16px', gap: '20px',
}} }}
> >
{/* Alarm Toggle */}
<div style={{ flex: 1 }}>
<div>
<Text strong>Alarm</Text>
<Text style={{ color: 'red' }}> *</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
formData.is_alarm === true
? '#23A55A'
: '#bfbfbf',
}}
checked={formData.is_alarm === true}
onChange={handleAlarmToggle}
/>
</div>
<div>
<Text>{formData.is_alarm === true ? 'Yes' : 'No'}</Text>
</div>
</div>
</div>
{/* Report Toggle */}
<div style={{ flex: 1 }}>
<div>
<Text strong>Report</Text>
<Text style={{ color: 'red' }}> *</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
formData.is_report === true
? '#23A55A'
: '#bfbfbf',
}}
checked={formData.is_report === true}
onChange={handleReportToggle}
/>
</div>
<div>
<Text>{formData.is_report === true ? 'Yes' : 'No'}</Text>
</div>
</div>
</div>
{/* History Toggle */}
<div style={{ flex: 1 }}>
<div>
<Text strong>History</Text>
<Text style={{ color: 'red' }}> *</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
formData.is_history === true
? '#23A55A'
: '#bfbfbf',
}}
checked={formData.is_history === true}
onChange={handleHistoryToggle}
/>
</div>
<div>
<Text>{formData.is_history === true ? 'Yes' : 'No'}</Text>
</div>
</div>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
{/* Tag Code - Auto Increment & Read Only */} {/* Tag Code - Auto Increment & Read Only */}
<div style={{ marginBottom: 12 }}> <div style={{ flex: 1 }}>
<Text strong>Tag Code</Text> <Text strong>Tag Code</Text>
<Input <Input
name="tag_code" name="tag_code"
@@ -524,6 +424,42 @@ const DetailTag = (props) => {
}} }}
/> />
</div> </div>
{/* Alarm Checkbox */}
<div style={{ flex: 1 }}>
<Text strong>Alarm</Text>
<div style={{ marginTop: '8px' }}>
<Checkbox
disabled={props.readOnly}
checked={formData.is_alarm === true}
onChange={handleAlarmToggle}
/>
</div>
</div>
{/* Report Checkbox */}
<div style={{ flex: 1 }}>
<Text strong>Report</Text>
<div style={{ marginTop: '8px' }}>
<Checkbox
disabled={props.readOnly}
checked={formData.is_report === true}
onChange={handleReportToggle}
/>
</div>
</div>
{/* History Checkbox */}
<div style={{ flex: 1 }}>
<Text strong>History</Text>
<div>
<Checkbox
disabled={props.readOnly}
checked={formData.is_history === true}
onChange={handleHistoryToggle}
/>
</div>
</div>
</div>
</div>
{/* Tag Number dan Tag Name dalam satu baris */} {/* Tag Number dan Tag Name dalam satu baris */}
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<div <div
@@ -685,13 +621,13 @@ const DetailTag = (props) => {
</div> </div>
</div> </div>
</div> </div>
{/* Limit Low Crash dan Limit Low dalam satu baris */} {/* Semua Limit dalam satu baris */}
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
gap: '16px', gap: '12px',
}} }}
> >
{/* Limit Low Crash */} {/* Limit Low Crash */}
@@ -720,17 +656,6 @@ const DetailTag = (props) => {
step="any" step="any"
/> />
</div> </div>
</div>
</div>
{/* Limit High dan Limit High Crash dalam satu baris */}
<div style={{ marginBottom: 12 }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
gap: '16px',
}}
>
{/* Limit High */} {/* Limit High */}
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Text strong>Limit High</Text> <Text strong>Limit High</Text>
@@ -759,6 +684,18 @@ const DetailTag = (props) => {
</div> </div>
</div> </div>
</div> </div>
{/* Description */}
<div style={{ marginBottom: 12 }}>
<Text strong>Description</Text>
<Input.TextArea
name="description"
value={formData.description}
onChange={handleInputChange}
placeholder="Enter Description (Optional)"
readOnly={props.readOnly}
rows={4}
/>
</div>
</div> </div>
)} )}
</Modal> </Modal>

3
src/pages/master/tag/component/ListTag.jsx
View File

@@ -44,12 +44,14 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
dataIndex: 'data_type', dataIndex: 'data_type',
key: 'data_type', key: 'data_type',
width: '10%', width: '10%',
render: (text) => text || '-',
}, },
{ {
title: 'Unit', title: 'Unit',
dataIndex: 'unit', dataIndex: 'unit',
key: 'unit', key: 'unit',
width: '8%', width: '8%',
render: (text) => text || '-',
}, },
{ {
title: 'Sub Section', title: 'Sub Section',
@@ -63,6 +65,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
dataIndex: 'device_name', dataIndex: 'device_name',
key: 'device_name', key: 'device_name',
width: '12%', width: '12%',
render: (text) => text || '-',
}, },
{ {
title: 'Status', title: 'Status',