refactor: Update front-end assets by removing Select2 integration from various forms and adjusting the build configuration.
This commit is contained in:
@@ -0,0 +1 @@
|
||||
http://[::1]:5174
|
||||
@@ -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
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user