prima nota - i filtri vengono applicati solo al click del pulsante

app/Http/Livewire/Record.php

@@ -1745,7 +1745,7 @@ class Record extends Component
     public function updatedSelectedPeriod($value)
     {
         $this->setPeriodDates();
-        $this->applyFilters();
+        // $this->applyFilters();
     }
 
     public function updatedSelectedDay($value)
@@ -1754,7 +1754,7 @@ class Record extends Component
             $this->selectedPeriod = 'GIORNO_PERSONALIZZATO';
             $this->fromDate = $value;
             $this->toDate = $value;
-            $this->applyFilters();
+            // $this->applyFilters();
         }
     }
 
@@ -1791,7 +1791,7 @@ class Record extends Component
             $lastDay = date('Y-m-t', strtotime($value . '-01'));
             $this->fromDate = $firstDay;
             $this->toDate = $lastDay;
-            $this->applyFilters();
+            // $this->applyFilters();
         }
     }
 

resources/views/livewire/records.blade.php

@@ -12,7 +12,7 @@
         <div class="row g-3">
             <div class="col-md-3">
                 Utente
-                <select name="search_member_id" class="form-select filterMember" wire:model="filterMember">
+                <select name="search_member_id" class="form-select filterMember" wire:model.delay="filterMember">
                     <option value="">--Seleziona--
                     @foreach($members as $member)
                         <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}}
@@ -21,7 +21,7 @@
             </div>
             <div class="col-md-3">
                 Causale
-                <select name="search_causal_id[]" class="form-select filterCausals me-2" multiple="multiple" wire:model="filterCausals">
+                <select name="search_causal_id[]" class="form-select filterCausals me-2" multiple="multiple" wire:model.delay="filterCausals">
                     @foreach($causals as $causal)
                         <option value="{{$causal["id"]}}">{!!$causal["name"]!!}
                     @endforeach
@@ -30,7 +30,7 @@
             <div class="col-md-3">
                 Periodo
                 <div class="col-12 mb-3">
-                    <select wire:model="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 43px!important;">
+                    <select wire:model.delay="selectedPeriod" class="form-select" @if($isFiltering) disabled @endif style="height: 43px!important;">
                         <option value="OGGI">Oggi</option>
                         <option value="IERI">Ieri</option>
                         <option value="GIORNO_PERSONALIZZATO">Giorno Personalizzato</option>
@@ -47,7 +47,7 @@
                     <div class="day-picker-container position-relative">
                         <div class="input-group">
                             <input type="date"
-                                wire:model="selectedDay"
+                                wire:model.delay="selectedDay"
                                 class="form-control"
                                 style="height: 43px!important;"
                                 @if($isFiltering) disabled @endif>
@@ -87,7 +87,7 @@
 
                             <div class="mb-3">
                                 <label class="form-label small">Anno</label>
-                                <select wire:model="selectedYear" class="form-select form-select-sm">
+                                <select wire:model.delay="selectedYear" class="form-select form-select-sm">
                                     @php
                                         $currentYear = date('Y');
                                         $selectedDayYear = $selectedDay ? substr($selectedDay, 0, 4) : $currentYear;
@@ -170,7 +170,7 @@
                     <div class="month-picker-container position-relative">
                         <div class="input-group">
                             <input type="month"
-                                wire:model="selectedMonth"
+                                wire:model.delay="selectedMonth"
                                 class="form-control"
                                 style="height: 43px!important;"
                                 @if($isFiltering) disabled @endif>
@@ -191,7 +191,7 @@
 
                             <div class="mb-3">
                                 <label class="form-label small">Anno</label>
-                                <select wire:model="selectedYear" class="form-select form-select-sm">
+                                <select wire:model.delay="selectedYear" class="form-select form-select-sm">
                                     @php
                                         $currentYear = date('Y');
                                         $selectedYear = $selectedMonth ? substr($selectedMonth, 0, 4) : $currentYear;
@@ -263,7 +263,7 @@
         <div class="row g-3">
             <div class="col-md-3">
                 Metodo di pagamento
-                <select name="search_payment_method[]" class="form-select filterPaymentMethods me-2" multiple="multiple" wire:model="filterPaymentMethods">
+                <select name="search_payment_method[]" class="form-select filterPaymentMethods me-2" multiple="multiple" wire:model.delay="filterPaymentMethods">
                     @foreach($payments as $payment)
                         <option value="{{$payment["id"]}}">{{$payment["name"]}}
                     @endforeach
@@ -271,7 +271,7 @@
             </div>
             <div class="col-md-3">
                 Origine
-                <select name="search_origin[]" class="form-select filterOrigins me-2" multiple="multiple" wire:model="filterOrigins">
+                <select name="search_origin[]" class="form-select filterOrigins me-2" multiple="multiple" wire:model.delay="filterOrigins">
                     @foreach($origins as $origin)
                         <option value="{{$origin["id"]}}">{{$origin["name"]}}
                     @endforeach
@@ -279,7 +279,7 @@
             </div>
             <div class="col-md-3">
                 Destinazione
-                <select name="search_destination[]" class="form-select filterDestinations me-2" multiple="multiple" wire:model="filterDestinations">
+                <select name="search_destination[]" class="form-select filterDestinations me-2" multiple="multiple" wire:model.delay="filterDestinations">
                     @foreach($destinations as $destination)
                         <option value="{{$destination["id"]}}">{{$destination["name"]}}
                     @endforeach
@@ -287,7 +287,7 @@
             </div>
             <div class="col">
                 <div class="prima--nota_buttons ms-auto" style="float:right; margin-top:25px;">
-                    <button class="btn--ui primary" wire:click="applyFilters" style="margin-right:5px;" @if($isFiltering) disabled @endif>
+                    <button class="btn--ui primary" onclick="filter()" style="margin-right:5px;" @if($isFiltering) disabled @endif>
                         @if($isFiltering)
                             <i class="fas fa-spinner fa-spin"></i> CARICAMENTO...
                         @else
@@ -299,7 +299,7 @@
             </div>
         </div>
         {{-- Custom loader --}}
-        <div wire:loading>
+        <div class="custom_loader_wrapper" wire:loading.delay wire:target="applyFilters">
             <div class="custom_loader">
                 <i class="fas fa-spinner fa-spin"></i>
             </div>
@@ -1387,6 +1387,16 @@
             });
         }
 
+        function filter() {
+            @this.set('filterCausals', $('.filterCausals').select2("val"));
+            @this.set('filterPaymentMethods', $('.filterPaymentMethods').select2("val"));
+            @this.set('filterOrigins', $('.filterOrigins').select2("val"));
+            @this.set('filterDestinations', $('.filterDestinations').select2("val"));
+            @this.set('filterMember', $('.filterMember').select2("val"));
+
+            @this.applyFilters();
+        }
+
         function load() {
             $(document).ready(function(){
                 $(document).on("keypress", $('.filterCausals'), function (e) {
@@ -1409,7 +1419,7 @@
 
                 $('.filterCausals').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterCausals').select2("val");
-                    @this.set('filterCausals', data);
+                    // @this.set('filterCausals', data);
                 });
 
                 $('.filterCausals').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
@@ -1446,7 +1456,7 @@
 
                 $('.filterPaymentMethods').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterPaymentMethods').select2("val");
-                    @this.set('filterPaymentMethods', data);
+                    // @this.set('filterPaymentMethods', data);
                 });
 
                 $('.filterPaymentMethods').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
@@ -1483,7 +1493,7 @@
 
                 $('.filterOrigins').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterOrigins').select2("val");
-                    @this.set('filterOrigins', data);
+                    // @this.set('filterOrigins', data);
                 });
 
                 $('.filterOrigins').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
@@ -1520,7 +1530,7 @@
 
                 $('.filterDestinations').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterDestinations').select2("val");
-                    @this.set('filterDestinations', data);
+                    // @this.set('filterDestinations', data);
                 });
 
                 $('.filterDestinations').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {
@@ -1547,7 +1557,7 @@
 
                 $('.filterMember').off('change.customHandler').on('change.customHandler', function (e) {
                     var data = $('.filterMember').select2("val");
-                    @this.set('filterMember', data);
+                    // @this.set('filterMember', data);
                 });
 
                 $('.filterMember').off('select2:open.customHandler').on('select2:open.customHandler', function (e) {