119 lines
5.2 KiB
PHP
119 lines
5.2 KiB
PHP
@php
|
|
$selectedDatacenterId =
|
|
old('module_datacenter_id') ??
|
|
($model?->ipaddress?->host?->module_datacenter_id ?? ($model?->module_datacenter_id ?? null));
|
|
@endphp
|
|
|
|
<div class="row form-group align-items-center mb-0">
|
|
<label for="datacenter_id" class="col-md-3 text-right">Chọn Datacenter</label>
|
|
<div class="col-md-9 p-1 bg-customer">
|
|
<select class="form-control select2 single__select datacenter_id" name="module_datacenter_id"
|
|
data-selected="{{ $selectedDatacenterId }}"
|
|
data-placeholder="--- Chọn Datacenter ---">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Prevent multiple initializations using namespace
|
|
if (window.datacenterComponentInitialized) {
|
|
return;
|
|
}
|
|
window.datacenterComponentInitialized = true;
|
|
|
|
const $vcenter = $('.vcenter_id');
|
|
const $datacenter = $('.datacenter_id');
|
|
const $host = $('.host_id');
|
|
|
|
// Debounce function to prevent spam API calls
|
|
let loadDatacentersTimeout;
|
|
|
|
function debounceLoadDatacenters(vcenterId, preselect = null) {
|
|
clearTimeout(loadDatacentersTimeout);
|
|
loadDatacentersTimeout = setTimeout(() => {
|
|
loadDatacenters(vcenterId, preselect);
|
|
}, 300); // 300ms debounce
|
|
}
|
|
|
|
function loadDatacenters(vcenterId, preselect = null) {
|
|
// Check if already loading to prevent duplicate calls
|
|
if ($datacenter.prop('disabled') && $datacenter.find('option:first').text().includes('Đang tải')) {
|
|
return;
|
|
}
|
|
|
|
if (!vcenterId) {
|
|
$datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
|
|
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
|
return;
|
|
}
|
|
|
|
$datacenter.html('<option value="">Đang tải Datacenter...</option>').prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: '{{ route('api.getDatacenter') }}',
|
|
type: 'GET',
|
|
data: {
|
|
vcenter: vcenterId
|
|
},
|
|
success: function (response) {
|
|
if (!response.error && response.data.length > 0) {
|
|
let options = '<option value="">--- Chọn Datacenter ---</option>';
|
|
response.data.forEach(dc => {
|
|
const selected = preselect == dc.id ? 'selected' : '';
|
|
options +=
|
|
`<option value="${dc.id}" ${selected}>${dc.name}</option>`;
|
|
});
|
|
$datacenter.html(options).prop('disabled', false);
|
|
|
|
// If there's a preselected datacenter ID, select it
|
|
if (preselect) {
|
|
setTimeout(() => {
|
|
$datacenter.val(preselect).trigger('change');
|
|
}, 100);
|
|
}
|
|
} else {
|
|
$datacenter.html('<option value="">Không tìm thấy Datacenter</option>')
|
|
.prop('disabled', true);
|
|
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
|
}
|
|
},
|
|
error: function () {
|
|
$datacenter.html('<option value="">Lỗi tải datacenter</option>').prop('disabled', true);
|
|
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Remove existing event handlers and bind new ones with namespace
|
|
$vcenter.off('change.datacenterComponent').on('change.datacenterComponent', function () {
|
|
const vcenterId = $(this).val();
|
|
debounceLoadDatacenters(vcenterId);
|
|
});
|
|
|
|
// When datacenter changes
|
|
$datacenter.off('change.datacenterComponent').on('change.datacenterComponent', function () {
|
|
const datacenterId = $(this).val();
|
|
|
|
// Reset and disable host
|
|
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
|
|
|
// Enable host if datacenter is selected
|
|
if (datacenterId) {
|
|
$host.prop('disabled', false);
|
|
}
|
|
});
|
|
|
|
// Initial load logic
|
|
const selectedDatacenterId = $datacenter.data('selected');
|
|
if ($vcenter.val() && selectedDatacenterId) {
|
|
debounceLoadDatacenters($vcenter.val(), selectedDatacenterId);
|
|
} else if ($vcenter.val()) {
|
|
// If only vcenter is selected, load datacenters without preselection
|
|
debounceLoadDatacenters($vcenter.val());
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|