update: add description field
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
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 { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
|
||||
import { getAllDevice } from '../../../../api/master-device';
|
||||
@@ -34,6 +34,7 @@ const DetailTag = (props) => {
|
||||
lim_high: '',
|
||||
lim_high_crash: '',
|
||||
device_id: null,
|
||||
description: '',
|
||||
|
||||
sub_section_id: null,
|
||||
};
|
||||
@@ -147,10 +148,8 @@ const DetailTag = (props) => {
|
||||
payload.unit = formData.unit.trim();
|
||||
}
|
||||
|
||||
// Add device_id only if it's selected
|
||||
if (formData.device_id) {
|
||||
payload.device_id = parseInt(formData.device_id);
|
||||
}
|
||||
// Add device_id - backend requires this field even if null
|
||||
payload.device_id = formData.device_id ? parseInt(formData.device_id) : null;
|
||||
|
||||
// Add limit fields only if they have values
|
||||
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);
|
||||
}
|
||||
|
||||
// Add sub_section_id only if it's selected
|
||||
if (formData.sub_section_id) {
|
||||
payload.sub_section_id = parseInt(formData.sub_section_id);
|
||||
}
|
||||
// Add sub_section_id - backend requires this field even if null
|
||||
payload.sub_section_id = formData.sub_section_id ? parseInt(formData.sub_section_id) : null;
|
||||
|
||||
try {
|
||||
const response =
|
||||
@@ -234,24 +231,24 @@ const DetailTag = (props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAlarmToggle = (checked) => {
|
||||
const handleAlarmToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_alarm: checked,
|
||||
is_alarm: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
const handleReportToggle = (checked) => {
|
||||
const handleReportToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_report: checked,
|
||||
is_report: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
const handleHistoryToggle = (checked) => {
|
||||
const handleHistoryToggle = (e) => {
|
||||
setformData({
|
||||
...formData,
|
||||
is_history: checked,
|
||||
is_history: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -336,7 +333,7 @@ const DetailTag = (props) => {
|
||||
} Tag`}
|
||||
open={props.showModal}
|
||||
onCancel={handleCancel}
|
||||
width={800}
|
||||
width={1000}
|
||||
footer={[
|
||||
<React.Fragment key="modal-footer">
|
||||
<ConfigProvider
|
||||
@@ -403,127 +400,66 @@ const DetailTag = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Alarm, Report, dan History dalam satu baris */}
|
||||
{/* Tag Code dan Alarm, Report dan History */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '16px',
|
||||
gap: '20px',
|
||||
}}
|
||||
>
|
||||
{/* Alarm Toggle */}
|
||||
{/* Tag Code - Auto Increment & Read Only */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div>
|
||||
<Text strong>Alarm</Text>
|
||||
<Text style={{ color: 'red' }}> *</Text>
|
||||
</div>
|
||||
<div
|
||||
<Text strong>Tag Code</Text>
|
||||
<Input
|
||||
name="tag_code"
|
||||
value={formData.tag_code || ''}
|
||||
placeholder={'Tag Code Auto Fill'}
|
||||
disabled
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: '8px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: formData.tag_code ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
{/* 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 Toggle */}
|
||||
{/* Report Checkbox */}
|
||||
<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>
|
||||
<Text strong>Report</Text>
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<Checkbox
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_report === true}
|
||||
onChange={handleReportToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* History Toggle */}
|
||||
{/* History Checkbox */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text strong>History</Text>
|
||||
<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>
|
||||
<Checkbox
|
||||
disabled={props.readOnly}
|
||||
checked={formData.is_history === true}
|
||||
onChange={handleHistoryToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* Tag Code - Auto Increment & Read Only */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Text strong>Tag Code</Text>
|
||||
<Input
|
||||
name="tag_code"
|
||||
value={formData.tag_code || ''}
|
||||
placeholder={'Tag Code Auto Fill'}
|
||||
disabled
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed',
|
||||
color: formData.tag_code ? '#000000' : '#bfbfbf',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* Tag Number dan Tag Name dalam satu baris */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
@@ -685,13 +621,13 @@ const DetailTag = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Limit Low Crash dan Limit Low dalam satu baris */}
|
||||
{/* Semua Limit dalam satu baris */}
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '16px',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
{/* Limit Low Crash */}
|
||||
@@ -720,17 +656,6 @@ const DetailTag = (props) => {
|
||||
step="any"
|
||||
/>
|
||||
</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 */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text strong>Limit High</Text>
|
||||
@@ -759,6 +684,18 @@ const DetailTag = (props) => {
|
||||
</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>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -44,12 +44,14 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
dataIndex: 'data_type',
|
||||
key: 'data_type',
|
||||
width: '10%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Unit',
|
||||
dataIndex: 'unit',
|
||||
key: 'unit',
|
||||
width: '8%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Sub Section',
|
||||
@@ -63,6 +65,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
dataIndex: 'device_name',
|
||||
key: 'device_name',
|
||||
width: '12%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
|
||||
Reference in New Issue
Block a user