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

feat: enhance device selection with code and name display, filter active devices

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-16 14:12:18 +07:00
parent c0f7b8eeb4
commit 9bb07b1224
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,10 +21,11 @@ const DetailTag = (props) => {
tag_number: '',
data_type: '',
unit: '',
device_name: '', // Read-only, auto-display dari device yang dipilih
is_active: true,
is_alarm: false,
device_id: null, // akan set ketika user select device dari dropdown
device_id: null,
device_code: '',
device_name: '',
sub_section_id: null,
};
@@ -147,6 +148,8 @@ const DetailTag = (props) => {
is_active: FormData.is_active,
is_alarm: FormData.is_alarm,
device_id: parseInt(FormData.device_id),
device_code: FormData.device_code,
device_name: FormData.device_name,
};
try {
@@ -212,7 +215,8 @@ const DetailTag = (props) => {
setFormData({
...FormData,
device_id: deviceId,
device_name: selectedDevice ? selectedDevice.device_name : '',
device_code: selectedDevice?.device_code || '',
device_name: selectedDevice?.device_name || '',
});
};
@@ -235,8 +239,14 @@ const DetailTag = (props) => {
try {
const params = new URLSearchParams({ limit: 1000 });
const response = await getAllDevice(params);
if (response && response.data && response.data.data) {
setDeviceList(response.data.data);
const devices = response.data.data;
// Filter hanya device yang active (device_status === true)
const activeDevices = devices.filter((device) => device.device_status === true);
setDeviceList(activeDevices);
}
} catch (error) {
console.error('Error loading devices:', error);
@@ -283,10 +293,11 @@ const DetailTag = (props) => {
tag_number: props.selectedData.tag_number || '',
data_type: props.selectedData.data_type || '',
unit: props.selectedData.unit || '',
device_name: props.selectedData.device_name || '',
is_active: props.selectedData.is_active ?? true,
is_alarm: props.selectedData.is_alarm ?? false,
device_id: props.selectedData.device_id || null,
device_code: props.selectedData.device_code || '',
device_name: props.selectedData.device_name || '',
sub_section_id: props.selectedData.sub_section_id || null,
};
setFormData(filteredData);
@@ -434,7 +445,9 @@ const DetailTag = (props) => {
disabled={props.readOnly}
style={{
backgroundColor:
FormData.is_alarm === true ? '#23A55A' : '#bfbfbf',
FormData.is_alarm === true
? '#23A55A'
: '#bfbfbf',
}}
checked={FormData.is_alarm === true}
onChange={handleAlarmToggle}
@@ -523,11 +536,11 @@ const DetailTag = (props) => {
</Select>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Code</Text>
<Text strong>Device</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
style={{ width: '100%' }}
placeholder="Search device code"
placeholder="Search device code or name"
value={FormData.device_id || undefined}
onChange={handleDeviceChange}
disabled={props.readOnly}
@@ -543,21 +556,11 @@ const DetailTag = (props) => {
>
{deviceList.map((device) => (
<Select.Option key={device.device_id} value={device.device_id}>
{device.device_code || ''}
{`${device.device_code || ''} - ${device.device_name || ''}`}
</Select.Option>
))}
</Select>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Name</Text>
<Input
name="device_name"
value={FormData.device_name}
placeholder="Auto-filled from selected device code"
disabled
style={{ backgroundColor: '#f5f5f5' }}
/>
</div>
{/* Device ID hidden - value dari dropdown */}
<input type="hidden" name="device_id" value={FormData.device_id || ''} />
</div>