V3 DateRangeFilter - Remove Icon, Add Placeholder (#1492)

* Remove DateRangeFilter Icon * DateRangeFilter - Remove Icon & Add Placeholder
rappasoft · Oct 28, 2023 · 0cc1dea · 0cc1dea
1 parent ec1f7bd
commit 0cc1dea
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 - Migrate PHP from date-range blade into new DateRangeFilter method
 - Add FilterHelper method for generating filter wire:keys
 - Add Filter CustomPosition tests
+- Add Placeholder option for DateRangeFilter
 
 ## [3.0.0-beta.10] - 2023-10-27
 - Changes to toolbar blade structure by @lrljoe in #[1454](https://github.com/rappasoft/laravel-livewire-tables/pull/1454) 

diff --git a/resources/views/components/tools/filters/date-range.blade.php b/resources/views/components/tools/filters/date-range.blade.php
@@ -1,7 +1,5 @@
 @php
     $filterKey = $filter->getKey();
-    $filterConfigs = $filter->getConfigs();
-    $dateString = $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '');  
 @endphp
 
 <div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}" x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')" >
@@ -17,22 +15,15 @@
                 type="text"
                 x-ref="dateRangeInput"
                 x-on:click="init"
-                value="{{ $dateString }}"
+                value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}"
                 wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}"
                 id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}"
                 @class([
-                    'w-10/12 inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
-                    'd-inline-block form-control transition duration-150 ease-in-out border border-gray rounded-sm shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isBootstrap,
+                    'w-full inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
+                    'd-inline-block w-100 form-control transition duration-150 ease-in-out border border-gray rounded-sm shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isBootstrap,
                 ])
-                @style([
-                    'width: 80%;' => $isBootstrap,
-                ])
-            />
-            @if($isTailwind)
-                <x-heroicon-o-calendar-days class="inline-block w-6 h-6 align-middle text-black dark:text-white group-hover:opacity-0"  />
-            @else
-                <x-heroicon-o-calendar-days class="d-inline-block" style="width:1em; height:1em;" />
-            @endif            
+                @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+            />     
         </div>
     </div>
 </div>