update logic call
This commit is contained in:
pbao9
@@ -1,118 +1,130 @@
|
||||
@php
|
||||
$selectedDatacenterId =
|
||||
old('module_datacenter_id') ??
|
||||
($model?->ipaddress?->host?->module_datacenter_id ?? ($model?->module_datacenter_id ?? null));
|
||||
$selectedDatacenterId = old('module_datacenter_id');
|
||||
|
||||
if (!$selectedDatacenterId && $model) {
|
||||
if ($model instanceof \App\Models\ModuleDatacenter) {
|
||||
$selectedDatacenterId = $model->id;
|
||||
} elseif ($model instanceof \App\Models\ModuleHost || $model instanceof \App\Models\ModuleFolder) {
|
||||
$selectedDatacenterId = $model->module_datacenter_id;
|
||||
} elseif ($model instanceof \App\Models\ModuleDatastore || $model instanceof \App\Models\ModuleNetwork) {
|
||||
$selectedDatacenterId = $model->host?->module_datacenter_id;
|
||||
} elseif ($model instanceof \App\Models\ModuleIpAddress) {
|
||||
$selectedDatacenterId = $model->host?->module_datacenter_id;
|
||||
} elseif (isset($model->module_datacenter_id)) {
|
||||
$selectedDatacenterId = $model->module_datacenter_id;
|
||||
} elseif (method_exists($model, 'host') && $model->host) {
|
||||
$selectedDatacenterId = $model->host->module_datacenter_id;
|
||||
}
|
||||
}
|
||||
@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 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>
|
||||
</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')) {
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Prevent multiple initializations using namespace
|
||||
if (window.datacenterComponentInitialized) {
|
||||
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;
|
||||
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
|
||||
}
|
||||
|
||||
$datacenter.html('<option value="">Đang tải Datacenter...</option>').prop('disabled', true);
|
||||
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;
|
||||
}
|
||||
|
||||
$.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 (!vcenterId) {
|
||||
$datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
|
||||
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// If there's a preselected datacenter ID, select it
|
||||
if (preselect) {
|
||||
setTimeout(() => {
|
||||
$datacenter.val(preselect).trigger('change');
|
||||
}, 100);
|
||||
$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);
|
||||
}
|
||||
} else {
|
||||
$datacenter.html('<option value="">Không tìm thấy Datacenter</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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 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());
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user