feat: Enhance Select2 functionality with clearable options and custom placeholders, and apply new card styling to the order add page.

This commit is contained in:
pbao9
2026-02-14 22:10:30 +07:00
parent 5252f9142c
commit 691c7e3765
2 changed files with 35 additions and 33 deletions
@@ -78,17 +78,19 @@
window.initSelect2 = function() {
$(".select2").each(function () {
if (!$(this).hasClass('select2-hidden-accessible')) {
var placeholder = $(this).data('placeholder') || 'Select an option';
$(this).select2({
allowClear: false,
allowClear: true,
width: "100%",
placeholder: placeholder,
});
}
});
};
$(document).ready(function () {
window.initSelect2();
});
$(document).ready(function () {
window.initSelect2();
});
// Global ModalManager initialization
document.addEventListener('DOMContentLoaded', function() {
@@ -107,8 +109,8 @@
@stack('custom-scripts')
<script type="text/javascript">
var apiMedia = '{{ route('api.GetAllImage') }}';
var apiUpload = '{{ route('media.upload') }}';
var apiMedia = "{{ route('api.GetAllImage') }}";
var apiUpload = "{{ route('media.upload') }}";
</script>
</body>
@@ -3,11 +3,11 @@
@section('breadcrumb')
@php
$breadcrumbItems = [
['label' => 'Order'],
['label' => 'Order Management', 'url' => route('administrator.pages.order.index')],
['label' => 'Add New Order', 'active' => true],
];
$breadcrumbItems = [
['label' => 'Order'],
['label' => 'Order Management', 'url' => route('administrator.pages.order.index')],
['label' => 'Add New Order', 'active' => true],
];
@endphp
<x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection
@@ -18,12 +18,12 @@
@csrf
<div class="row align-items-start">
<div class="col-md-8">
<div class="card card-outline card-primary">
<div class="card-header bg-white">
<div class="card card-outline card-primary rounded-4 shadow-none">
<div class="card-header bg-white rounded-top-4">
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#detail" role="tab"
aria-controls="detail" aria-selected="true">Customer Information</a>
<a class="nav-link active" data-bs-toggle="tab" href="#detail" role="tab" aria-controls="detail"
aria-selected="true">Customer Information</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#product" role="tab" aria-controls="product"
@@ -36,7 +36,8 @@
<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">
<select class="form-control select2" name="customer_id" id="customer_id" data-placeholder="Select Customer">
<option value=""></option>
@if($customer->count())
@foreach($customer->all() as $item)
<option value="{{ $item->id }}">
@@ -49,7 +50,8 @@
<div class="form-group mb-3">
<label for="payment_id">Payment Method</label>
<select class="form-control select2" name="payment_id" id="payment_id">
<select class="form-control select2" name="payment_id" id="payment_id" data-placeholder="Select Payment">
<option value=""></option>
@if($payment->count())
@foreach($payment->all() as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@@ -60,8 +62,8 @@
<div class="form-group mb-3">
<label for="discount_id">Promotion Code</label>
<select class="form-control select2" name="discount_id" id="discount_id">
<option value="">--------</option>
<select class="form-control select2" name="discount_id" id="discount_id" data-placeholder="Select Discount">
<option value=""></option>
@if($discount->count())
@foreach($discount->all() as $item)
<option value="{{ $item->id }}">{{ $item->code }}</option>
@@ -80,8 +82,8 @@
<div class="form-group mb-3">
<div class="form-check">
<input type="checkbox" name="create_invoice" id="create_invoice"
class="form-check-input" value="1" checked>
<input type="checkbox" name="create_invoice" id="create_invoice" class="form-check-input"
value="1" checked>
<label class="form-check-label" for="create_invoice">
Create Invoice
</label>
@@ -96,8 +98,7 @@
<div class="col-md-6 mb-3">
<label>Product Type (*)</label>
<select class="form-control select2 order_product_type"
data-append="product[0][product_id]" name="product[0][type]"
id="product_type">
data-append="product[0][product_id]" name="product[0][type]" id="product_type">
<option value="">-----------</option>
@foreach(ProductTypeEnums::cases() as $type)
<option value="{{ $type->value }}">{{ $type->label() }}</option>
@@ -106,8 +107,8 @@
</div>
<div class="col-md-6 mb-3">
<label>Product (*)</label>
<select class="form-control select2 product_id"
name="product[0][product_id]" id="product_id">
<select class="form-control select2 product_id" name="product[0][product_id]"
id="product_id">
<option value="">-----------</option>
</select>
</div>
@@ -128,13 +129,12 @@
</div>
<div class="col-md-6 mb-3">
<label>Quantity (*)</label>
<input type="number" class="form-control" name="product[0][quantity]"
value="1" min="1">
<input type="number" class="form-control" name="product[0][quantity]" value="1" min="1">
</div>
<div class="col-md-6 mb-3">
<label>Price Override</label>
<input type="number" class="form-control" name="product[0][price_custom]"
value="" min="1">
<input type="number" class="form-control" name="product[0][price_custom]" value=""
min="1">
</div>
</div>
</div>
@@ -146,11 +146,11 @@
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-outline card-primary">
<div class="card-header bg-white">
<div class="col-md-4">
<div class="card card-outline card-primary rounded-4 shadow-none">
<div class="card-header bg-white rounded-top-4">
<h5 class="card-title m-0">Order Summary</h5>
</div>
<div class="card-body">