refactor: Update front-end assets by removing Select2 integration from various forms and adjusting the build configuration.

This commit is contained in:
pbao9
2026-02-28 21:29:13 +07:00
parent 5c97768707
commit 6b18c3ff12
36 changed files with 79 additions and 493 deletions
+1
View File
@@ -0,0 +1 @@
http://[::1]:5174
-300
View File
@@ -1,300 +0,0 @@
/**
* MicroModal Global Utilities
* Provides helper functions for MicroModal management
*/
class ModalManager {
constructor() {
this.initialized = false;
this.modals = new Map();
this.init();
}
/**
* Initialize MicroModal with default settings
*/
init() {
if (typeof MicroModal === 'undefined') {
console.warn('MicroModal is not loaded');
return;
}
if (this.initialized) {
return;
}
MicroModal.init({
onShow: (modal) => {
this.onModalShow(modal);
},
onClose: (modal) => {
this.onModalClose(modal);
},
openTrigger: 'data-micromodal-trigger',
closeTrigger: 'data-micromodal-close',
openClass: 'is-open',
disableScroll: true,
disableFocus: false,
awaitOpenAnimation: false,
awaitCloseAnimation: false,
debugMode: false
});
this.initialized = true;
console.log('MicroModal initialized');
}
/**
* Called when modal is shown
*/
onModalShow(modal) {
// Re-initialize Lucide icons when modal opens
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Add body class to prevent scrolling
document.body.classList.add('modal-open');
// Execute custom show callback if exists
if (modal && this.modals.has(modal.id)) {
const config = this.modals.get(modal.id);
if (config.onShow && typeof config.onShow === 'function') {
config.onShow(modal);
}
}
}
/**
* Called when modal is closed
*/
onModalClose(modal) {
// Remove body class
document.body.classList.remove('modal-open');
// Execute custom close callback if exists
if (modal && this.modals.has(modal.id)) {
const config = this.modals.get(modal.id);
if (config.onClose && typeof config.onClose === 'function') {
config.onClose(modal);
}
}
}
/**
* Show modal with optional data
*/
show(modalId, data = {}) {
if (typeof MicroModal === 'undefined') {
console.error('MicroModal is not available');
return;
}
// Update modal content if data is provided
if (Object.keys(data).length > 0) {
this.updateModalContent(modalId, data);
}
MicroModal.show(modalId);
}
/**
* Close modal
*/
close(modalId) {
if (typeof MicroModal === 'undefined') {
console.error('MicroModal is not available');
return;
}
MicroModal.close(modalId);
}
/**
* Register a modal with custom configuration
*/
register(modalId, config = {}) {
this.modals.set(modalId, config);
}
/**
* Update modal content dynamically
*/
updateModalContent(modalId, data) {
const modal = document.getElementById(modalId);
if (!modal) {
console.error(`Modal ${modalId} not found`);
return;
}
// Update text content for elements with data-modal-* attributes
Object.keys(data).forEach(key => {
const element = modal.querySelector(`[data-modal-${key}]`);
if (element) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.value = data[key];
} else {
element.textContent = data[key];
}
}
// Also support getElementById for backward compatibility
const elementById = modal.querySelector(`#${key}`);
if (elementById) {
if (elementById.tagName === 'INPUT' || elementById.tagName === 'TEXTAREA') {
elementById.value = data[key];
} else {
elementById.textContent = data[key];
}
}
});
// Update form action if provided
if (data.formAction) {
const form = modal.querySelector('form');
if (form) {
form.action = data.formAction;
}
}
}
/**
* Create a confirmation modal dynamically
*/
showConfirmation(options = {}) {
const defaults = {
modalId: 'confirmationModal',
title: 'Confirm Action',
message: 'Are you sure?',
confirmText: 'Confirm',
cancelText: 'Cancel',
confirmClass: 'btn btn-primary btn-sm',
cancelClass: 'btn btn-outline-secondary btn-sm',
onConfirm: null,
onCancel: null
};
const config = { ...defaults, ...options };
// Create modal HTML if it doesn't exist
let modal = document.getElementById(config.modalId);
if (!modal) {
modal = this.createConfirmationModal(config);
document.body.appendChild(modal);
} else {
// Update existing modal
this.updateConfirmationModal(modal, config);
}
// Register callbacks
this.register(config.modalId, {
onShow: () => {
const confirmBtn = modal.querySelector('.modal__confirm');
const cancelBtn = modal.querySelector('.modal__cancel');
// Remove existing event listeners
confirmBtn.replaceWith(confirmBtn.cloneNode(true));
cancelBtn.replaceWith(cancelBtn.cloneNode(true));
// Add new event listeners
modal.querySelector('.modal__confirm').addEventListener('click', (e) => {
if (config.onConfirm && typeof config.onConfirm === 'function') {
config.onConfirm(e);
}
this.close(config.modalId);
});
modal.querySelector('.modal__cancel').addEventListener('click', (e) => {
if (config.onCancel && typeof config.onCancel === 'function') {
config.onCancel(e);
}
this.close(config.modalId);
});
}
});
this.show(config.modalId);
}
/**
* Create confirmation modal HTML
*/
createConfirmationModal(config) {
const modalHtml = `
<div class="modal micromodal-slide" id="${config.modalId}" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container modal--sm" role="dialog" aria-modal="true">
<header class="modal__header bg-primary text-white">
<h6 class="modal__title">${config.title}</h6>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
<i data-lucide="x"></i>
</button>
</header>
<main class="modal__content">
<div class="text-center">
<p class="mb-0">${config.message}</p>
</div>
</main>
<footer class="modal__footer justify-content-center">
<button type="button" class="modal__cancel ${config.cancelClass}" data-micromodal-close>
${config.cancelText}
</button>
<button type="button" class="modal__confirm ${config.confirmClass}">
${config.confirmText}
</button>
</footer>
</div>
</div>
</div>
`;
const div = document.createElement('div');
div.innerHTML = modalHtml;
return div.firstElementChild;
}
/**
* Update existing confirmation modal
*/
updateConfirmationModal(modal, config) {
modal.querySelector('.modal__title').textContent = config.title;
modal.querySelector('.modal__content p').textContent = config.message;
modal.querySelector('.modal__confirm').textContent = config.confirmText;
modal.querySelector('.modal__cancel').textContent = config.cancelText;
// Update button classes
modal.querySelector('.modal__confirm').className = `modal__confirm ${config.confirmClass}`;
modal.querySelector('.modal__cancel').className = `modal__cancel ${config.cancelClass}`;
}
}
// Global instance
window.ModalManager = new ModalManager();
// Helper functions for backward compatibility
window.showModal = (modalId, data = {}) => {
window.ModalManager.show(modalId, data);
};
window.closeModal = (modalId) => {
window.ModalManager.close(modalId);
};
window.showConfirmation = (options) => {
window.ModalManager.showConfirmation(options);
};
// Auto-initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
// Initialize Lucide icons
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
console.log('Modal utilities loaded');
});
// Export for ES modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = ModalManager;
}
@@ -73,26 +73,7 @@
@stack('plugin-scripts')
<!-- end plugin js -->
<!-- Global Select2 initialization -->
<script>
window.initSelect2 = function() {
$(".select2").each(function () {
if (!$(this).hasClass('select2-hidden-accessible')) {
var placeholder = $(this).data('placeholder') || 'Select an option';
$(this).select2({
allowClear: true,
width: "100%",
placeholder: placeholder,
});
}
});
};
$(document).ready(function () {
window.initSelect2();
});
// Global ModalManager initialization
<!-- Global ModalManager initialization -->
document.addEventListener('DOMContentLoaded', function() {
if (typeof ModalManager !== 'undefined') {
ModalManager.init();
@@ -1,96 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Administrator">
<title>Administrator</title>
<!-- color-modes:js -->
@vite(['resources/js/pages/color-modes.js'])
<script>
(function () {
const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-bs-theme', theme);
})();
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- End fonts -->
<!-- CSRF Token -->
<meta name="_token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">
<!-- Splash Screen -->
<link href="{{ asset('splash-screen.css') }}" rel="stylesheet" />
<!-- plugin css -->
<link href="{{ asset('build/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
@stack('plugin-styles')
<!-- CSS for LTR layout-->
@vite(['resources/sass/app.scss', 'resources/css/custom.css'])
<!-- CSS for RTL layout-->
<!-- @vite(['resources/rtl-css/app-rtl.css', 'resources/rtl-css/custom-rtl.css']) -->
@stack('style')
</head>
<body data-base-url="{{url('/')}}">
<script>
// Create splash screen container
var splash = document.createElement("div");
splash.innerHTML = `
<div class="splash-screen">
<div class="logo"></div>
<div class="spinner"></div>
</div>`;
// Insert splash screen as the first child of the body
document.body.insertBefore(splash, document.body.firstChild);
// Add 'loaded' class to body once DOM is fully loaded
document.addEventListener("DOMContentLoaded", function () {
document.body.classList.add("loaded");
});
</script>
<div class="main-wrapper" id="app">
<div class="page-wrapper full-page">
<div class="page-content container-xxl d-flex align-items-center justify-content-center">
<div id="fui-toast"></div>
@yield('content')
</div>
</div>
</div>
<!-- base js -->
@vite(['resources/js/app-vite.js'])
<script src="{{ asset('build/plugins/lucide/lucide.min.js') }}"></script>
<!-- end base js -->
<!-- plugin js -->
@stack('plugin-scripts')
<!-- end plugin js -->
<!-- common js -->
@vite(['resources/js/pages/template.js'])
<!-- end common js -->
@include('administrator.layout.partials.toast')
@stack('custom-scripts')
</body>
</html>
@@ -40,7 +40,7 @@
<div class="col-md-6">
<div class="form-group">
<label for="type">Type <span class="text-danger">*</span></label>
<select name="type" id="type" class="form-control select2">
<select name="type" id="type" class="form-control">
@foreach (AddonType::getOptions() as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
@@ -126,7 +126,7 @@
<div class="col-md-6">
<div class="form-group">
<label for="input_type">Input Type</label>
<select name="input_type" id="input_type" class="form-control select2">
<select name="input_type" id="input_type" class="form-control">
@foreach (AddonInputType::getOptions() as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
@@ -147,7 +147,7 @@
<div class="card-body">
<div class="form-group mb-3">
<label for="status">Status</label>
<select name="status" id="status" class="form-control select2">
<select name="status" id="status" class="form-control">
@foreach (Status::getOptions() as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
@@ -40,7 +40,7 @@
<div class="col-md-6">
<div class="form-group">
<label for="type">Type <span class="text-danger">*</span></label>
<select name="type" id="type" class="form-control select2">
<select name="type" id="type" class="form-control">
@foreach (AddonType::getOptions() as $value => $label)
<option value="{{ $value }}"
{{ $addon->type == $value ? 'selected' : '' }}>
@@ -135,7 +135,7 @@
<div class="col-md-6">
<div class="form-group">
<label for="input_type">Input Type</label>
<select name="input_type" id="input_type" class="form-control select2">
<select name="input_type" id="input_type" class="form-control">
@foreach (AddonInputType::getOptions() as $value => $label)
<option value="{{ $value }}"
{{ $addon->input_type == $value ? 'selected' : '' }}>
@@ -159,7 +159,7 @@
<div class="card-body">
<div class="form-group mb-3">
<label for="status">Status</label>
<select name="status" id="status" class="form-control select2">
<select name="status" id="status" class="form-control">
@foreach (Status::getOptions() as $value => $label)
<option value="{{ $value }}" {{ $addon->status == $value ? 'selected' : '' }}>
{{ $label }}
@@ -24,7 +24,7 @@ $breadcrumbItems = [
<div class="card-body">
<div class="form-group mb-3">
<label for="customer_id">Client User</label>
<select class="form-control select2" name="customer_id" id="customer_id" data-placeholder="Select Customer">
<select class="form-control" name="customer_id" id="customer_id" data-placeholder="Select Customer">
<option value=""></option>
@if($customer->count())
@foreach($customer->all() as $item)
@@ -38,7 +38,7 @@ $breadcrumbItems = [
<div class="form-group mb-3">
<label for="payment_id">Payment Method</label>
<select class="form-control select2" name="payment_id" id="payment_id" data-placeholder="Select Payment">
<select class="form-control" name="payment_id" id="payment_id" data-placeholder="Select Payment">
<option value=""></option>
@if($payment->count())
@foreach($payment->all() as $item)
@@ -66,7 +66,7 @@
<span class="input-group-text bg-light border-end-0">
<i data-lucide="activity" width="18" height="18"></i>
</span>
<select class="form-control select2 single__select border-start-0 ps-3" name="status"
<select class="form-control single__select border-start-0 ps-3" name="status"
id="status" style="width: 100%;">
@foreach(App\Enums\Status::getOptions() as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@@ -68,7 +68,7 @@
<span class="input-group-text bg-light border-end-0">
<i data-lucide="activity" width="18" height="18"></i>
</span>
<select class="form-control select2 single__select border-start-0 ps-0" name="status"
<select class="form-control single__select border-start-0 ps-0" name="status"
id="status" style="width: 100%;">
@foreach(App\Enums\Status::getOptions() as $value => $label)
<option value="{{ $value }}" {{ $server->status === $value ? 'selected' : '' }}>{{ $label }}
@@ -119,7 +119,7 @@
<span class="input-group-text bg-light border-end-0">
<i data-lucide="activity" width="18" height="18"></i>
</span>
<select class="form-control select2 single__select border-start-0 ps-3" name="status"
<select class="form-control single__select border-start-0 ps-3" name="status"
id="status" style="width: 100%;">
@foreach(App\Enums\Status::getOptions() as $value => $label)
<option value="{{ $value }}" {{ $value ? 'selected' : '' }}>{{ $label }}
@@ -94,7 +94,7 @@ $breadcrumbItems = [
<span class="input-group-text bg-light border-end-0">
<i data-lucide="activity" width="18" height="18"></i>
</span>
<select class="form-control select2 single__select border-start-0 ps-3" name="status" id="status"
<select class="form-control single__select border-start-0 ps-3" name="status" id="status"
style="width: 100%;">
@foreach(App\Enums\Status::getOptions() as $value => $label)
<option value="{{ $value }}" {{ $server->status === $value ? 'selected' : '' }}>{{ $label }}
@@ -36,7 +36,7 @@ $breadcrumbItems = [
<div class="tab-pane fade active show" id="detail" role="tabpanel" aria-labelledby="detail">
<div class="form-group mb-3">
<label for="customer_id">Client User</label>
<select class="form-control select2" name="customer_id" id="customer_id" data-placeholder="Select Customer">
<select class="form-control" name="customer_id" id="customer_id" data-placeholder="Select Customer">
<option value=""></option>
@if($customer->count())
@foreach($customer->all() as $item)
@@ -50,7 +50,7 @@ $breadcrumbItems = [
<div class="form-group mb-3">
<label for="payment_id">Payment Method</label>
<select class="form-control select2" name="payment_id" id="payment_id" data-placeholder="Select Payment">
<select class="form-control" name="payment_id" id="payment_id" data-placeholder="Select Payment">
<option value=""></option>
@if($payment->count())
@foreach($payment->all() as $item)
@@ -62,7 +62,7 @@ $breadcrumbItems = [
<div class="form-group mb-3">
<label for="discount_id">Promotion Code</label>
<select class="form-control select2" name="discount_id" id="discount_id" data-placeholder="Select Discount">
<select class="form-control" name="discount_id" id="discount_id" data-placeholder="Select Discount">
<option value=""></option>
@if($discount->count())
@foreach($discount->all() as $item)
@@ -74,7 +74,7 @@ $breadcrumbItems = [
<div class="form-group mb-3">
<label for="status">Orders Status</label>
<select class="form-control select2" name="status" id="status">
<select class="form-control" name="status" id="status">
<option value="0">Pending</option>
<option value="1">Active</option>
</select>
@@ -97,7 +97,7 @@ $breadcrumbItems = [
<div class="row">
<div class="col-md-6 mb-3">
<label>Product Type (*)</label>
<select class="form-control select2 order_product_type"
<select class="form-control order_product_type"
data-append="product[0][product_id]" name="product[0][type]" id="product_type">
<option value="">-----------</option>
@foreach(ProductTypeEnums::cases() as $type)
@@ -107,7 +107,7 @@ $breadcrumbItems = [
</div>
<div class="col-md-6 mb-3">
<label>Product (*)</label>
<select class="form-control select2 product_id" name="product[0][product_id]"
<select class="form-control product_id" name="product[0][product_id]"
id="product_id">
<option value="">-----------</option>
</select>
@@ -118,7 +118,7 @@ $breadcrumbItems = [
</div>
<div class="col-md-6 mb-3">
<label>Billing Cycle (*)</label>
<select class="form-control select2" name="product[0][billing]">
<select class="form-control" name="product[0][billing]">
<option value="0">Free</option>
<option value="1">One Time</option>
<option value="2" selected>Monthly</option>
@@ -22,7 +22,7 @@
@csrf
@method('put')
<div class="card-body">
<x-module.v-center :model="$datacenter" />
<x-module.v-center :model="$datacenter->vCenter" />
{{--Name--}}
<div class="row form-group align-items-center mb-0">
<label for="name" class="col-md-3 text-right">Name</label>
@@ -57,7 +57,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 p-1 bg-customer">
<select class="form-control select2 single__select" name="status" id="status">
<select class="form-control single__select" name="status" id="status">
<option value="1" selected>✓ Active</option>
<option value="0">✗ Inactive</option>
</select>
@@ -6,12 +6,12 @@
@endpush
@section('breadcrumb')
@php
$breadcrumbItems = [
['label' => 'Modules'],
['label' => 'Package vCenter'],
['label' => 'Datastore', 'url' => route('package.datastore.index')],
['label' => 'Edit Datastore', 'active' => true],
];
$breadcrumbItems = [
['label' => 'Modules'],
['label' => 'Package vCenter'],
['label' => 'Datastore', 'url' => route('package.datastore.index')],
['label' => 'Edit Datastore', 'active' => true],
];
@endphp
<x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection
@@ -22,7 +22,7 @@
@csrf
@method('put')
<div class="card-body">
<x-module.v-center :model="$datastore" />
<x-module.v-center :model="$datastore->host->datacenter->vCenter" />
<x-module.datacenter :model="$datastore->host" />
<x-module.host :model="$datastore" />
{{--Name--}}
@@ -60,7 +60,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 p-1 bg-customer">
<select class="form-control select2 single__select" name="status" id="status">
<select class="form-control single__select" name="status" id="status">
<option value="1" @selected($datastore->status === 1)>✓ Active</option>
<option value="0" @selected($datastore->status === 0)>✗ Inactive</option>
</select>
@@ -23,7 +23,7 @@
@method('put')
<div class="card-body">
<x-module.v-center :model="$folder->datacenter" />
<x-module.v-center :model="$folder->datacenter->vCenter" />
<x-module.datacenter :model="$folder" />
{{--Name--}}
<div class="row form-group align-items-center mb-0">
@@ -49,7 +49,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 bg-customer p-1">
<select class="custom-select select2" id="status" name="status">
<select class="custom-select" id="status" name="status">
@foreach (Status::getOptions() as $value => $label)
<option value="{{ $value }}">
{{ $label }}
@@ -43,14 +43,14 @@
{{-- Thumbnail using component --}}
<x-image-picker name="thumbnail" label="Thumbnail" :value="$group->thumbnail" />
<x-module.v-center :model="$group->host?->datacenter" />
<x-module.v-center :model="$group->host?->datacenter?->vCenter" />
<x-module.datacenter :model="$group->host" />
<x-module.host :model="$group" />
{{-- Status --}}
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 bg-customer p-1">
<select class="form-control select2" id="status" name="status">
<select class="form-control" id="status" name="status">
@foreach(Status::getOptions() as $value => $label)
<option value="{{ $value }}" @selected($group->status === $value)>
{{ $label }}
@@ -22,7 +22,7 @@
@csrf
@method('put')
<div class="card-body">
<x-module.v-center :model="$host->datacenter" />
<x-module.v-center :model="$host->datacenter->vCenter" />
<x-module.datacenter :model="$host" />
{{--Name--}}
@@ -59,7 +59,7 @@ $breadcrumbItems = [
<div class="row form-group align-items-center mb-0">
<label for="option_selected" class="col-md-3 text-right">Tuỳ chọn</label>
<div class="col-md-9 p-1 bg-customer">
<select class="custom-select select2" id="option_selected" name="option_selected">
<select class="custom-select" id="option_selected" name="option_selected">
<option value="0">Mặc định (From - To)</option>
<option value="1">Nhập ngẫu nhiên</option>
</select>
@@ -25,7 +25,7 @@
<div class="row">
<div class="col-md-12">
<x-module.v-center :model="$ipaddress->host->datacenter" />
<x-module.v-center :model="$ipaddress->host->datacenter->vCenter" />
<x-module.datacenter :model="$ipaddress->host" />
@@ -60,7 +60,7 @@
<div class="row form-group align-items-center mb-0">
<label for="option_selected" class="col-md-3 text-right">Tuỳ chọn</label>
<div class="col-md-9 p-1 bg-customer">
<select class="custom-select select2" id="option_selected" name="option_selected">
<select class="custom-select" id="option_selected" name="option_selected">
<option value="0">Mặc định (From - To)</option>
<option value="1" selected>Nhập ngẫu nhiên</option>
</select>
@@ -77,7 +77,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 p-1 bg-customer">
<select class="custom-select select2" id="status" name="status">
<select class="custom-select" id="status" name="status">
<option value="0" @selected($ipaddress->status === 0)>Free</option>
<option value="1" @selected($ipaddress->status === 1)>Assigned</option>
</select>
@@ -24,7 +24,7 @@
@method('put')
<div class="card-body">
<x-module.v-center :model="$network->host->datacenter" />
<x-module.v-center :model="$network->host->datacenter->vCenter" />
<x-module.datacenter :model="$network->host->datacenter" />
<x-module.host :model="$network->host" />
{{--Name--}}
@@ -55,7 +55,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 bg-customer p-1">
<select class="custom-select select2 single__select" id="status" name="status">
<select class="custom-select single__select" id="status" name="status">
@foreach (Status::getOptions() as $value => $label)
<option value="{{ $value }}" @selected(old('status') == $value)>
{{ $label }}
@@ -41,7 +41,7 @@
</div>
</div>
<x-module.v-center :model="$version->osGroup->host->datacenter ?? null" />
<x-module.v-center :model="$version->osGroup->host->datacenter->vCenter ?? null" />
<x-module.datacenter :model="$version->osGroup->host" />
<x-module.host :model="$version->osGroup" />
<x-module.os :model="$version" />
@@ -56,7 +56,7 @@
<div class="row form-group align-items-center mb-0">
<label for="status" class="col-md-3 text-right">Status</label>
<div class="col-md-9 bg-customer p-1">
<select class="custom-select select2" id="status" name="status">
<select class="custom-select" id="status" name="status">
@foreach (Status::getOptions() as $value => $label)
<option value="{{ $value }}" @selected($version->status == $value)>
{{ $label }}
@@ -82,7 +82,7 @@
<div class="form-group mb-3">
<label for=" is_active">Status</label>
<select name="is_active" id="is_active" class="form-control select2">
<select name="is_active" id="is_active" class="form-control">
@foreach (\App\Enums\Status::cases() as $status)
<option value="{{ $status->value }}"
{{ old('is_active', \App\Enums\Status::ACTIVE->value) == $status->value ? 'selected' : '' }}>
@@ -83,7 +83,7 @@
<div class="card-body">
<div class="form-group mb-3">
<label for="is_active">Status</label>
<select name="is_active" id="is_active" class="form-control select2">
<select name="is_active" id="is_active" class="form-control">
@foreach(\App\Enums\Status::cases() as $status)
<option value="{{ $status->value }}" {{ old('is_active', $category->is_active) == $status->value ? 'selected' : '' }}>
{{ $status->label() }}
@@ -78,7 +78,7 @@
<div class="col-md-4">
<div class="form-group">
<label for="currency">Currency</label>
<select name="currency" id="currency" class="form-control select2">
<select name="currency" id="currency" class="form-control">
<option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD
</option>
<option value="VND" {{ old('currency') == 'VND' ? 'selected' : '' }}>VND
@@ -240,7 +240,7 @@
{{-- Operating System (for VPS) --}}
<div class="form-group mb-3" id="os-section">
<label for="os_ids" class="mb-2">Operating System</label>
<select class="form-control select2" name="os_ids[]" id="os_ids" multiple
<select class="form-control" name="os_ids[]" id="os_ids" multiple
data-placeholder="-- Select OS versions --">
@foreach ($osVersions as $osVersion)
<option value="{{ $osVersion->id }}"
@@ -255,7 +255,7 @@
{{-- Control Panels (for Hosting) --}}
<div class="form-group mb-3" id="control-panel-section">
<label for="control_panel_ids" class="mb-2">Control Panels</label>
<select class="form-control select2" name="control_panel_ids[]" id="control_panel_ids"
<select class="form-control" name="control_panel_ids[]" id="control_panel_ids"
multiple data-placeholder="-- Select Control Panels --">
@foreach ($controlPanels as $panel)
<option value="{{ $panel->id }}"
@@ -60,7 +60,7 @@ $breadcrumbItems = [
<div class="col-md-4">
<div class="form-group">
<label for="currency">Currency</label>
<select name="currency" id="currency" class="form-control select2">
<select name="currency" id="currency" class="form-control">
<option value="USD"
{{ old('currency', $product->currency ?? 'USD') == 'USD' ? 'selected' : '' }}>
USD</option>
@@ -221,7 +221,7 @@ $breadcrumbItems = [
@php
$selectedOsIds = old('os_ids', $product->osVersions->pluck('id')->toArray());
@endphp
<select class="form-control select2" name="os_ids[]" id="os_ids" multiple
<select class="form-control" name="os_ids[]" id="os_ids" multiple
data-placeholder="-- Select OS versions --">
@foreach ($osVersions as $osVersion)
<option value="{{ $osVersion->id }}"
@@ -247,7 +247,7 @@ $breadcrumbItems = [
$product->controlPanels->where('pivot.is_default', true)->first()?->id
);
@endphp
<select class="form-control select2" name="control_panel_ids[]" id="control_panel_ids" multiple data-placeholder="-- Select Control Panels --">
<select class="form-control" name="control_panel_ids[]" id="control_panel_ids" multiple data-placeholder="-- Select Control Panels --">
@foreach ($controlPanels as $panel)
<option value="{{ $panel->id }}" {{ in_array($panel->id, $selectedPanelIds) ? 'selected' : '' }}>
{{ $panel->name }}
@@ -288,7 +288,7 @@ $breadcrumbItems = [
{{-- Product Type --}}
<div class="form-group mb-3">
<label for="product_type" class="mb-2">Product Type</label>
<select class="form-control select2" name="product_type" id="product_type">
<select class="form-control" name="product_type" id="product_type">
<option value="">-- Select Type --</option>
@foreach (\App\Enums\Product\ProductTypeEnums::cases() as $type)
<option value="{{ $type->value }}"
@@ -302,7 +302,7 @@ $breadcrumbItems = [
{{-- Status --}}
<div class="form-group mb-3">
<label for="is_active" class="mb-2">Status</label>
<select class="form-control select2" name="is_active" id="is_active">
<select class="form-control" name="is_active" id="is_active">
@foreach (\App\Enums\Status::cases() as $status)
<option value="{{ $status->value }}"
{{ old('is_active', $product->is_active ? 1 : 0) == $status->value ? 'selected' : '' }}>
@@ -22,7 +22,7 @@ if (!$selectedDatacenterId && $model) {
<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"
<select class="form-control datacenter_id" name="module_datacenter_id"
data-selected="{{ $selectedDatacenterId }}" data-placeholder="--- Chọn Datacenter ---">
</select>
</div>
@@ -116,6 +116,10 @@ if (!$selectedDatacenterId && $model) {
// Enable host if datacenter is selected
if (datacenterId) {
$host.prop('disabled', false);
// Trigger host load
if ($host.is('select')) {
$host.trigger('change.hostComponent');
}
}
});
@@ -127,6 +131,11 @@ if (!$selectedDatacenterId && $model) {
// If only vcenter is selected, load datacenters without preselection
debounceLoadDatacenters($vcenter.val());
}
// Also trigger host load when datacenter is already selected on page load
if ($datacenter.val()) {
$datacenter.trigger('change.datacenterComponent');
}
});
</script>
@endpush
@@ -7,7 +7,7 @@ $selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?-
<div class="row form-group align-items-center mb-0">
<label for="host_id" class="col-md-3 text-right">Chọn Host</label>
<div class="col-md-9 p-1 bg-customer">
<select class="form-control select2 single__select host_id" name="module_host_id"
<select class="form-control host_id" name="module_host_id"
data-selected="{{ $selectedHostId }}"
data-placeholder="--- Chọn Host ---">
</select>
@@ -22,11 +22,6 @@ $selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?-
}
window.hostComponentInitialized = true;
// Initialize Select2 using global function
if (typeof window.initSelect2 === 'function') {
window.initSelect2();
}
const $datacenter = $('.datacenter_id');
const $host = $('.host_id');
@@ -1,7 +1,7 @@
<div class="row form-group align-items-center mb-0">
<label for="network_id" class="col-md-3 text-right">Network</label>
<div class="col-md-9 p-1 bg-customer">
<select class="custom-select select2 network_id" id="network_id" data-route="{{ route('api.getNetwork') }}"
<select class="custom-select network_id" id="network_id" data-route="{{ route('module-vcenter.getNetwork') }}"
name="module_network_id" style="width: 100%;">
<option value="0">---------</option>
@if($networks)
@@ -12,7 +12,7 @@ if ($model && $model->osGroup) {
<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"
<select class="form-control os_group_id single__select" name="os_group_id"
data-selected="{{ $selectedOsGroupId }}" data-placeholder="--- Chọn OS Group ---">
@if ($selectedOsGroupId && $lists)
@foreach ($lists->all() as $item)
@@ -1,16 +1,17 @@
@php
$selectedVcenterId = old('vcenter_id') ??
($model?->host?->datacenter?->vcenter_id ?? (
$model?->datacenter?->vcenter_id ??
($model?->ipaddress?->host?->datacenter?->vcenter?->id ??
$model?->vcenter_id ?? null)
));
$selectedVcenterId = old('vcenter_id') ??
($model instanceof \App\Models\vCenter ? $model->id : (
$model?->host?->datacenter?->vcenter_id ??
($model?->datacenter?->vcenter_id ??
($model?->ipaddress?->host?->datacenter?->vcenter?->id ?? null)
)
));
@endphp
<div class="row form-group align-items-center mb-0">
<label for="vcenter_id" class="col-md-3 text-right">Chọn vCenter</label>
<div class="col-md-9 p-1 bg-customer">
<select class="form-control select2 single__select vcenter_id" name="vcenter_id"
<select class="form-control vcenter_id" name="vcenter_id"
data-selected="{{ $selectedVcenterId }}">
<option value="">--- Chọn vCenter ---</option>
@if(isset($vcenters) && $vcenters->count())
@@ -31,10 +32,6 @@ $selectedVcenterId = old('vcenter_id') ??
}
window.vcenterComponentInitialized = true;
$('.select2').select2({
width: '100%'
});
const $vcenter = $('.vcenter_id');
const $datacenter = $('.datacenter_id');
const $host = $('.host_id');
@@ -63,6 +60,7 @@ $selectedVcenterId = old('vcenter_id') ??
if ($vcenter.val()) {
if ($datacenter.is('select')) $datacenter.prop('disabled', false);
$vcenter.trigger('change.vcenterComponent');
}
});
</script>
@@ -2,7 +2,7 @@
<div class="form-group row">
<label class="col-md-4" for="customer_id">Client User</label>
<div class="col-md-8">
<select class="form-control select2" name="customer_id" id="customer_id" style="width: 100%">
<select class="form-control" name="customer_id" id="customer_id" style="width: 100%">
@if (count($customers) > 0)
@foreach ($customers as $item)
<option value="{{ $item->id }}">
@@ -8,7 +8,7 @@
<div class="row form-group align-items-center mb-0">
<label for="vcenter_id" class="col-md-3 text-right">Chọn vCenter</label>
<div class="col-md-9 p-1 bg-customer">
<select id="vcenter_id" class="form-control select2 single__select" name="vcenter_id"
<select id="vcenter_id" class="form-control single__select" name="vcenter_id"
data-selected="{{ $selectedVcenterId }}">
<option value="">--- Chọn vCenter ---</option>
@foreach ($vcenters as $vc)
+1 -3
View File
@@ -8,11 +8,9 @@ export default defineConfig({
input: [
'resources/sass/app.scss',
'resources/css/custom.css',
'resources/css/components/micromodal.css',
'resources/rtl-css/app-rtl.css',
'resources/rtl-css/custom-rtl.css',
'resources/js/app-vite.js', // Using app-vite.js
'resources/js/components/micromodal.js',
'resources/js/app-vite.js',
'resources/js/pages/template.js',
'resources/js/pages/ace.js',
'resources/js/pages/apexcharts.js',