113 lines
4.5 KiB
PHP
113 lines
4.5 KiB
PHP
@php
|
|
// Fix: Get os_group_id from the relationship correctly
|
|
$selectedOsGroupId = old('os_group_id') ?? ($model?->os?->os_group_id ?? null);
|
|
@endphp
|
|
|
|
|
|
<div class="row form-group align-items-center mb-0">
|
|
<label for="os_group_id" class="col-md-3 text-right">Os Family</label>
|
|
<div class="col-md-9 p-1 bg-customer">
|
|
<select class="form-control os_group_id select2 single__select" name="os_group_id"
|
|
data-selected="{{ $selectedOsGroupId }}" data-placeholder="--- Chọn OS Group ---">
|
|
@if ($selectedOsGroupId && $lists)
|
|
@foreach ($lists->all() as $item)
|
|
@if ($item->id == $selectedOsGroupId)
|
|
<option value="{{ $item->id }}" selected>{{ $item->name }}</option>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Prevent multiple initializations using namespace
|
|
if (window.osComponentInitialized) {
|
|
return;
|
|
}
|
|
window.osComponentInitialized = true;
|
|
|
|
// Initialize Select2
|
|
initSelect2();
|
|
|
|
const $host = $('.host_id');
|
|
const $osGroup = $('.os_group_id');
|
|
|
|
// Debounce function to prevent spam API calls
|
|
let loadOsGroupsTimeout;
|
|
|
|
function debounceLoadOsGroups(hostId, preselect = null) {
|
|
clearTimeout(loadOsGroupsTimeout);
|
|
loadOsGroupsTimeout = setTimeout(() => {
|
|
loadOsGroups(hostId, preselect);
|
|
}, 300); // 300ms debounce
|
|
}
|
|
|
|
function loadOsGroups(hostId, preselect = null) {
|
|
// Check if already loading to prevent duplicate calls
|
|
if ($osGroup.prop('disabled') && $osGroup.find('option:first').text().includes('Đang tải')) {
|
|
return;
|
|
}
|
|
|
|
if (!hostId) {
|
|
$osGroup.html('<option value="">--- Chọn OS Group ---</option>').prop('disabled', true);
|
|
return;
|
|
}
|
|
|
|
$osGroup.html('<option value="">Đang tải OS Group...</option>').prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: '{{ route('api.getOsGroup') }}',
|
|
type: 'GET',
|
|
data: {
|
|
host: hostId
|
|
},
|
|
success: function(response) {
|
|
if (!response.error && response.data.length > 0) {
|
|
let options = '<option value="">--- Chọn OS Group ---</option>';
|
|
response.data.forEach(os => {
|
|
const selected = preselect == os.id ? 'selected' : '';
|
|
options +=
|
|
`<option value="${os.id}" ${selected}>${os.name}</option>`;
|
|
});
|
|
$osGroup.html(options).prop('disabled', false);
|
|
|
|
if (preselect) {
|
|
setTimeout(() => {
|
|
$osGroup.val(preselect).trigger('change');
|
|
}, 100);
|
|
}
|
|
} else {
|
|
$osGroup.html('<option value="">Không tìm thấy OS Group</option>').prop(
|
|
'disabled', true);
|
|
}
|
|
},
|
|
error: function() {
|
|
$osGroup.html('<option value="">Lỗi tải OS Group</option>').prop('disabled',
|
|
true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Remove existing event handlers and bind new ones with namespace
|
|
$host.off('change.osComponent').on('change.osComponent', function() {
|
|
const hostId = $(this).val();
|
|
const selectedOsGroupId = $osGroup.data('selected');
|
|
debounceLoadOsGroups(hostId, selectedOsGroupId);
|
|
});
|
|
|
|
// Initial load logic
|
|
const selectedOsGroupId = $osGroup.data('selected');
|
|
if ($host.val()) {
|
|
debounceLoadOsGroups($host.val(), selectedOsGroupId);
|
|
} else {
|
|
// Nếu chưa có host, disable OS group
|
|
$osGroup.prop('disabled', true).html('<option value="">--- Chọn OS Group ---</option>');
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|