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

feat: add alarm toggle functionality in DetailTag component

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-15 22:19:16 +07:00
parent 1bde2a0fd0
commit 23db974695
1 changed files with 70 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@ const DetailTag = (props) => {
unit: '', unit: '',
device_name: '', // Read-only, auto-display dari device yang dipilih device_name: '', // Read-only, auto-display dari device yang dipilih
is_active: true, is_active: true,
alarm: false,
device_id: null, // akan set ketika user select device dari dropdown device_id: null, // akan set ketika user select device dari dropdown
sub_section_id: null, sub_section_id: null,
}; };
@@ -144,6 +145,7 @@ const DetailTag = (props) => {
data_type: FormData.data_type, data_type: FormData.data_type,
unit: FormData.unit, unit: FormData.unit,
is_active: FormData.is_active, is_active: FormData.is_active,
alarm: FormData.alarm,
device_id: parseInt(FormData.device_id), device_id: parseInt(FormData.device_id),
}; };
@@ -221,6 +223,13 @@ const DetailTag = (props) => {
}); });
}; };
const handleAlarmToggle = (isChecked) => {
setFormData({
...FormData,
alarm: isChecked,
});
};
const loadDevices = async () => { const loadDevices = async () => {
setLoadingDevices(true); setLoadingDevices(true);
try { try {
@@ -276,6 +285,7 @@ const DetailTag = (props) => {
unit: props.selectedData.unit || '', unit: props.selectedData.unit || '',
device_name: props.selectedData.device_name || '', device_name: props.selectedData.device_name || '',
is_active: props.selectedData.is_active ?? true, is_active: props.selectedData.is_active ?? true,
alarm: props.selectedData.alarm ?? false,
device_id: props.selectedData.device_id || null, device_id: props.selectedData.device_id || null,
sub_section_id: props.selectedData.sub_section_id || null, sub_section_id: props.selectedData.sub_section_id || null,
}; };
@@ -365,31 +375,75 @@ const DetailTag = (props) => {
/> />
</div> </div>
)} )}
{/* Status dipindah ke atas Tag Name */} {/* Status dan Alarm dalam satu baris */}
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<div>
<Text strong>Status</Text>
</div>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', justifyContent: 'space-between',
marginTop: '8px', gap: '16px',
}} }}
> >
<div style={{ marginRight: '8px' }}> {/* Status Toggle */}
<Switch <div style={{ flex: 1 }}>
disabled={props.readOnly} <div>
<Text strong>Status</Text>
</div>
<div
style={{ style={{
backgroundColor: display: 'flex',
FormData.is_active === true ? '#23A55A' : '#bfbfbf', alignItems: 'center',
marginTop: '8px',
}} }}
checked={FormData.is_active === true} >
onChange={handleStatusToggle} <div style={{ marginRight: '8px' }}>
/> <Switch
disabled={props.readOnly}
style={{
backgroundColor:
FormData.is_active === true
? '#23A55A'
: '#bfbfbf',
}}
checked={FormData.is_active === true}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>
{FormData.is_active === true ? 'Active' : 'Inactive'}
</Text>
</div>
</div>
</div> </div>
<div> {/* Alarm Toggle */}
<Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text> <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.alarm === true ? '#23A55A' : '#bfbfbf',
}}
checked={FormData.alarm === true}
onChange={handleAlarmToggle}
/>
</div>
<div>
<Text>{FormData.alarm === true ? 'Yes' : 'No'}</Text>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>