diff --git a/CHANGELOG.md b/CHANGELOG.md index 56875d62e..2231ea6e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to `laravel-livewire-tables` will be documented in this file +## [3.0.0-beta.4] - 2023-10-17 +- Introduction of Loading Placeholder +- Docs livewire namespace fix [Here](https://github.com/rappasoft/laravel-livewire-tables/pull/1420) +- Add CollapseAlways capability for Columns + ## [3.0.0-beta.3] - 2023-10-13 - Fix for Livewire ^3.0.6 where the table loading causes an additional lifecycle - Add unminified files to .gitattributes export-ignore @@ -1000,4 +1005,4 @@ Ground Up Rebuild [0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4 [0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3 [0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2 -[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1 \ No newline at end of file +[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1 diff --git a/docs/datatable/loaders.md b/docs/datatable/loaders.md new file mode 100644 index 000000000..a18c7b77e --- /dev/null +++ b/docs/datatable/loaders.md @@ -0,0 +1,80 @@ +--- +title: Loaders +weight: 4 +--- + +With the introduction of Livewire 3, there are several new methods available for use: + +## Loading Placeholder +```php +public function configure(): void +{ + $this->setLoadingPlaceholderBlade(''); +} +``` + +### setLoadingPlaceholderStatus +```php +public function configure(): void +{ + $this->setLoadingPlaceholderStatus(true); +} +``` + +### setLoadingPlaceholderEnabled +```php +public function configure(): void +{ + $this->setLoadingPlaceholderEnabled(); +} +``` + + +### setLoadingPlaceholderDisabled +```php +public function configure(): void +{ + $this->setLoadingPlaceholderDisabled(); +} +``` + +### setLoadingPlaceholderContent +```php +public function configure(): void +{ + $this->setLoadingPlaceholderContent(''); +} +``` + +### setLoadingPlaceHolderAttributes +```php +public function configure(): void +{ + $this->setLoadingPlaceHolderAttributes([]); +} +``` + +### setLoadingPlaceHolderIconAttributes +```php +public function configure(): void +{ + $this->setLoadingPlacehosetLoadingPlaceHolderIconAttributeslderBlade([]); +} +``` + +### setLoadingPlaceHolderWrapperAttributes +```php +public function configure(): void +{ + $this->setLoadingPlaceHolderWrapperAttributes([]); +} +``` + + +### setLoadingPlaceholderBlade +```php +public function configure(): void +{ + $this->setLoadingPlaceholderBlade(''); +} +``` diff --git a/docs/misc/custom-markup.md b/docs/misc/custom-markup.md index 62e1aa012..8bfb6ec86 100644 --- a/docs/misc/custom-markup.md +++ b/docs/misc/custom-markup.md @@ -1,6 +1,6 @@ --- title: Adding Custom Markup -weight: 3 +weight: 4 --- If you would like to append any custom markup right before the end of the component, you may use the `customView` method and return a view. @@ -12,4 +12,4 @@ public function customView(): string { return 'includes.custom'; } -``` \ No newline at end of file +``` diff --git a/docs/misc/debugging.md b/docs/misc/debugging.md index c1c8f3193..fb42f5a7f 100644 --- a/docs/misc/debugging.md +++ b/docs/misc/debugging.md @@ -1,6 +1,6 @@ --- title: Debugging -weight: 4 +weight: 5 --- ## Configuration diff --git a/docs/misc/loading-placeholder.md b/docs/misc/loading-placeholder.md new file mode 100644 index 000000000..20ca7f9b5 --- /dev/null +++ b/docs/misc/loading-placeholder.md @@ -0,0 +1,78 @@ +--- +title: Loading Placeholder +weight: 2 +--- + +When running complex filters or searches, or displaying larger number of records, you can make use of the built-in Loading Placeholder, this is disabled by default. + +### setLoadingPlaceholderStatus +You may pass a boolean to this, which will either enable (true) or disable (false) the loading placeholder + +```php + public function configure(): void + { + $this->setLoadingPlaceholderStatus(true); + } +``` + +### setLoadingPlaceholderEnabled + +Use this method to enable the loading placeholder: + +```php + public function configure(): void + { + $this->setLoadingPlaceholderEnabled(); + } +``` + +### setLoadingPlaceholderDisabled + +Use this method to disable the loading placeholder: + +```php + public function configure(): void + { + $this->setLoadingPlaceholderDisabled(); + } +``` + +### setLoadingPlaceholderContent + +You may use this method to set custom text for the placeholder: + +```php + public function configure(): void + { + $this->setLoadingPlaceholderContent('Text To Display'); + } +``` +### setLoadingPlaceHolderWrapperAttributes + +This method allows you to customise the attributes for the <tr> element used as a Placeholder when the table is loading. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes. + +```php + public function configure(): void + { + $this->setLoadingPlaceHolderWrapperAttributes([ + 'class' => 'text-bold', + 'default' => false, + ]); + } + +``` + +### setLoadingPlaceHolderIconAttributes + +This method allows you to customise the attributes for the <div> element that is used solely for the PlaceholderIcon. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes. + +```php + public function configure(): void + { + $this->setLoadingPlaceHolderIconAttributes([ + 'class' => 'lds-hourglass', + 'default' => false, + ]); + } + +``` diff --git a/docs/misc/multiple-tables.md b/docs/misc/multiple-tables.md index 026d8ca1b..2a6ac0dd4 100644 --- a/docs/misc/multiple-tables.md +++ b/docs/misc/multiple-tables.md @@ -1,6 +1,6 @@ --- title: Multiple Tables Same Page -weight: 2 +weight: 3 --- This feature works for mutiple tables on the same page that are **different** components. diff --git a/docs/misc/saving-state.md b/docs/misc/saving-state.md index 3ce5148ee..8d85acd26 100644 --- a/docs/misc/saving-state.md +++ b/docs/misc/saving-state.md @@ -1,6 +1,6 @@ --- title: Saving Table State -weight: 5 +weight: 6 --- There may be occasions that you'd like to save the table state, for example if you have a complex set of filters, search parameters, or simply to remember which page you were on! diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css index 0073ed497..77c564573 100644 --- a/resources/css/laravel-livewire-tables.css +++ b/resources/css/laravel-livewire-tables.css @@ -362,3 +362,41 @@ label[dir=rtl] .range-slider { .superhide { display: none; } + +.lds-hourglass { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + } + .lds-hourglass:after { + content: " "; + display: block; + border-radius: 50%; + width: 0; + height: 0; + margin: 8px; + box-sizing: border-box; + border: 32px solid #000; + border-color: #fff transparent #fff transparent; + animation: lds-hourglass 1.2s infinite; + } + .dark .lds-hourglass:after { + border: 32px solid #FFF; + + } + + + @keyframes lds-hourglass { + 0% { + transform: rotate(0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 50% { + transform: rotate(900deg); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 100% { + transform: rotate(1800deg); + } + } \ No newline at end of file diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css index bb9cc4680..bf77392cc 100644 --- a/resources/css/laravel-livewire-tables.min.css +++ b/resources/css/laravel-livewire-tables.min.css @@ -4,4 +4,4 @@ var(--value, 0), var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a), var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2, - 0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none} \ No newline at end of file + 0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #000;border-color:#000 transparent #fff;animation:1.2s infinite lds-hourglass}.dark .lds-hourglass:after{border:32px solid #fff;border-color:#fff transparent #000}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}} \ No newline at end of file diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php new file mode 100644 index 000000000..7c71772ed --- /dev/null +++ b/resources/views/components/includes/loading.blade.php @@ -0,0 +1,35 @@ +@aware(['isTailwind', 'isBootstrap', 'tableName', 'component']) +@props(['colCount' => 1]) + +@php +$customAttributes['loader-wrapper'] = $component->getLoadingPlaceHolderWrapperAttributes(); +$customAttributes['loader-icon'] = $component->getLoadingPlaceHolderIconAttributes(); +@endphp +@if($this->hasLoadingPlaceholderBlade()) + @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount]) +@else + + merge($customAttributes['loader-wrapper']) + ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)]) + ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]); + }} + wire:loading.class.remove="hidden d-none" + > + +
+
merge($customAttributes['loader-icon']) + ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)]) + ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)]) + ->except('default'); + }} + >
+
{{ $component->getLoadingPlaceholderContent() }}
+
+ + + +@endif diff --git a/resources/views/components/table/tr.blade.php b/resources/views/components/table/tr.blade.php index 92d1326ea..fba5f1601 100644 --- a/resources/views/components/table/tr.blade.php +++ b/resources/views/components/table/tr.blade.php @@ -2,19 +2,23 @@ @props(['row', 'rowIndex']) @php - $customAttributes = $this->getTrAttributes($row, $rowIndex); + $customAttributes = $component->getTrAttributes($row, $rowIndex); @endphp hasDisplayLoadingPlaceholder()) + wire:loading.remove + @else wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60" - id="{{ $tableName }}-row-{{ $row->{$this->getPrimaryKey()} }}" + @endif + id="{{ $tableName }}-row-{{ $row->{$component->getPrimaryKey()} }}" :draggable="currentlyReorderingStatus" - wire:key="{{ $tableName }}-tablerow-tr-{{ $row->{$this->getPrimaryKey()} }}" + wire:key="{{ $tableName }}-tablerow-tr-{{ $row->{$component->getPrimaryKey()} }}" loopType="{{ ($rowIndex % 2 === 0) ? 'even' : 'odd' }}" {{ $attributes->merge($customAttributes) diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php index 1d6307f94..36f2de741 100644 --- a/resources/views/datatable.blade.php +++ b/resources/views/datatable.blade.php @@ -30,6 +30,10 @@ @if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader()) @endif + @if($this->hasDisplayLoadingPlaceholder()) + + @endif + diff --git a/src/DataTableComponent.php b/src/DataTableComponent.php index 7733b00c0..ebe33c7a2 100644 --- a/src/DataTableComponent.php +++ b/src/DataTableComponent.php @@ -14,6 +14,7 @@ use Rappasoft\LaravelLivewireTables\Traits\WithEvents; use Rappasoft\LaravelLivewireTables\Traits\WithFilters; use Rappasoft\LaravelLivewireTables\Traits\WithFooter; +use Rappasoft\LaravelLivewireTables\Traits\WithLoadingPlaceholder; use Rappasoft\LaravelLivewireTables\Traits\WithPagination; use Rappasoft\LaravelLivewireTables\Traits\WithRefresh; use Rappasoft\LaravelLivewireTables\Traits\WithReordering; @@ -32,6 +33,7 @@ abstract class DataTableComponent extends Component WithEvents, WithFilters, WithFooter, + WithLoadingPlaceholder, WithPagination, WithRefresh, WithReordering, diff --git a/src/Traits/Configuration/LoadingPlaceholderConfiguration.php b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php new file mode 100644 index 000000000..a88bcccda --- /dev/null +++ b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php @@ -0,0 +1,62 @@ +displayLoadingPlaceholder = $status; + + return $this; + } + + public function setLoadingPlaceholderEnabled(): self + { + $this->setLoadingPlaceholderStatus(true); + + return $this; + } + + public function setLoadingPlaceholderDisabled(): self + { + $this->setLoadingPlaceholderStatus(false); + + return $this; + } + + public function setLoadingPlaceholderContent(string $content): self + { + $this->loadingPlaceholderContent = $content; + + return $this; + } + + public function setLoadingPlaceHolderAttributes(array $attributes): self + { + $this->loadingPlaceHolderAttributes = $attributes; + + return $this; + } + + public function setLoadingPlaceHolderIconAttributes(array $attributes): self + { + $this->loadingPlaceHolderIconAttributes = $attributes; + + return $this; + } + + public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self + { + $this->loadingPlaceHolderWrapperAttributes = $attributes; + + return $this; + } + + public function setLoadingPlaceholderBlade(string $customBlade): self + { + $this->loadingPlaceholderBlade = $customBlade; + + return $this; + } +} diff --git a/src/Traits/Helpers/LoadingPlaceholderHelpers.php b/src/Traits/Helpers/LoadingPlaceholderHelpers.php new file mode 100644 index 000000000..4a5a9e7e7 --- /dev/null +++ b/src/Traits/Helpers/LoadingPlaceholderHelpers.php @@ -0,0 +1,47 @@ +getDisplayLoadingPlaceholder(); + } + + public function getDisplayLoadingPlaceholder(): bool + { + return $this->displayLoadingPlaceholder; + } + + public function getLoadingPlaceholderContent(): string + { + return $this->loadingPlaceholderContent ?? __('livewire-tables:loading'); + } + + public function getLoadingPlaceholderAttributes(): array + { + return count($this->loadingPlaceHolderAttributes) ? $this->loadingPlaceHolderAttributes : ['default' => true]; + + } + + public function getLoadingPlaceHolderIconAttributes(): array + { + return count($this->loadingPlaceHolderIconAttributes) ? $this->loadingPlaceHolderIconAttributes : ['default' => true]; + } + + public function getLoadingPlaceHolderWrapperAttributes(): array + { + return count($this->loadingPlaceHolderWrapperAttributes) ? $this->loadingPlaceHolderWrapperAttributes : ['default' => true]; + } + + public function hasLoadingPlaceholderBlade(): bool + { + return ! is_null($this->getLoadingPlaceHolderBlade()); + } + + public function getLoadingPlaceHolderBlade(): ?string + { + return $this->loadingPlaceholderBlade; + } +} diff --git a/src/Traits/WithLoadingPlaceholder.php b/src/Traits/WithLoadingPlaceholder.php new file mode 100644 index 000000000..47c3a3072 --- /dev/null +++ b/src/Traits/WithLoadingPlaceholder.php @@ -0,0 +1,24 @@ +setPrimaryKey('id') + ->setLoadingPlaceholderEnabled() + ->setLoadingPlaceholderContent('TestLoadingPlaceholderContentTestTest'); + } + + public function columns(): array + { + return [ + Column::make('ID', 'id') + ->sortable() + ->setSortingPillTitle('Key') + ->setSortingPillDirections('0-9', '9-0'), + Column::make('Sort') + ->sortable() + ->excludeFromColumnSelect(), + Column::make('Name') + ->sortable() + ->secondaryHeader($this->getFilterByKey('pet_name_filter')) + ->footerFilter('pet_name_filter') + ->searchable(), + + Column::make('Age'), + + Column::make('Breed', 'breed.name') + ->secondaryHeaderFilter('breed') + ->footer($this->getFilterByKey('breed')) + ->sortable( + fn (Builder $query, string $direction) => $query->orderBy('pets.id', $direction) + ) + ->searchable( + fn (Builder $query, $searchTerm) => $query->orWhere('breed.name', $searchTerm) + ), + + Column::make('Other') + ->label(function ($row, Column $column) { + return 'Other'; + }) + ->footer(function ($rows) { + return 'Count: '.$rows->count(); + }), + + LinkColumn::make('Link') + ->title(fn ($row) => 'Edit') + ->location(fn ($row) => 'http://www.google.com') + ->attributes(fn ($row) => [ + 'class' => 'rounded-full', + 'alt' => $row->name.' Avatar', + ]), + ImageColumn::make('RowImg') + ->location(fn ($row) => 'test'.$row->id) + ->attributes(fn ($row) => [ + 'class' => 'rounded-full', + 'alt' => $row->name.' Avatar', + ]), + Column::make('Last Visit', 'last_visit') + ->sortable() + ->deselected(), + ]; + } + + public function filters(): array + { + return [ + MultiSelectFilter::make('Breed') + ->options( + Breed::query() + ->orderBy('name') + ->get() + ->keyBy('id') + ->map(fn ($breed) => $breed->name) + ->toArray() + ) + ->filter(function (Builder $builder, array $values) { + return $builder->whereIn('breed_id', $values); + }), + MultiSelectDropdownFilter::make('Species') + ->options( + Species::query() + ->orderBy('name') + ->get() + ->keyBy('id') + ->map(fn ($species) => $species->name) + ->toArray() + ) + ->filter(function (Builder $builder, array $values) { + return $builder->whereIn('species_id', $values); + }), + NumberFilter::make('Breed ID', 'breed_id_filter') + ->filter(function (Builder $builder, string $value) { + return $builder->where('breed_id', '=', $value); + }), + + TextFilter::make('Pet Name', 'pet_name_filter') + ->filter(function (Builder $builder, string $value) { + return $builder->where('pets.name', '=', $value); + }), + + DateFilter::make('Last Visit After Date', 'last_visit_date_filter') + ->filter(function (Builder $builder, string $value) { + return $builder->whereDate('pets.last_visit', '=>', $value); + }), + + DateTimeFilter::make('Last Visit Before DateTime', 'last_visit_datetime_filter') + ->filter(function (Builder $builder, string $value) { + return $builder->whereDate('pets.last_visit', '<=', $value); + }), + + SelectFilter::make('Breed SelectFilter', 'breed_select_filter') + ->options( + Breed::query() + ->orderBy('name') + ->get() + ->keyBy('id') + ->map(fn ($breed) => $breed->name) + ->toArray() + ) + ->filter(function (Builder $builder, string $value) { + return $builder->where('breed_id', $value); + }) + ->setCustomFilterLabel('livewire-tables::tests.testFilterLabel') + ->setFilterPillBlade('livewire-tables::tests.testFilterPills'), + ]; + } +} diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php new file mode 100644 index 000000000..e5b033f99 --- /dev/null +++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php @@ -0,0 +1,99 @@ +assertFalse($this->basicTable->hasDisplayLoadingPlaceholder()); + + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder()); + + } + + /** @test */ + public function can_set_loading_placeholder_status_disabled(): void + { + $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder()); + + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder()); + + $this->basicTable->setLoadingPlaceholderDisabled(); + + $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder()); + + } + + /** @test */ + public function can_set_loading_placeholder_content(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder()); + + $this->assertSame('Loading', $this->basicTable->getLoadingPlaceholderContent()); + + $this->basicTable->setLoadingPlaceholderContent('LoadingConfigurationTest - LoadingLoadingLoading'); + + $this->assertSame('LoadingConfigurationTest - LoadingLoadingLoading', $this->basicTable->getLoadingPlaceholderContent()); + + } + + /** @test */ + public function can_set_loading_placeholder_attributes(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderAttributes()); + + $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345']); + + $this->assertSame(['class' => 'test12345'], $this->basicTable->getLoadingPlaceHolderAttributes()); + + } + + /** @test */ + public function can_set_loading_placeholder_icon_attributes(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + + $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123']); + + $this->assertSame(['class' => 'test123'], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + + } + + /** @test */ + public function can_set_loading_placeholder_wrapper_attributes(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + + $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper']); + + $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + } + + /** @test */ + public function can_set_loading_placeholder_custom_blade(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertNull($this->basicTable->getLoadingPlaceHolderBlade()); + + $this->basicTable->setLoadingPlaceholderBlade('test-blade'); + + $this->assertSame('test-blade', $this->basicTable->getLoadingPlaceHolderBlade()); + } +} diff --git a/tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php b/tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php new file mode 100644 index 000000000..5d3b92c28 --- /dev/null +++ b/tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php @@ -0,0 +1,21 @@ +assertFalse($this->basicTable->hasDisplayLoadingPlaceholder()); + + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertTrue($this->basicTable->getDisplayLoadingPlaceholder()); + + $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder()); + + } +} diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php new file mode 100644 index 000000000..04cf3e788 --- /dev/null +++ b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php @@ -0,0 +1,52 @@ +call('setPerPageAccepted', [1, 5, 10]) + ->assertSeeHtml('tr wire:key="table-loader" class="hidden d-none"') + ->call('setPerPage', 5); + } + + /** @test */ + public function can_see_placeholder_custom_text(): void + { + Livewire::test(PetsTableLoadingPlaceholder::class) + ->call('setPerPageAccepted', [1, 5, 10]) + ->assertSeeHtmlInOrder([ + 'TestLoadingPlaceholderContentTestTest', + ]) + ->call('setPerPage', 5); + } + + /** @test */ + public function can_see_correct_placeholder_text_visually(): void + { + Livewire::test(PetsTableLoadingPlaceholder::class) + ->call('setPerPageAccepted', [1, 5, 10]) + ->assertSee('TestLoadingPlaceholderContentTestTest') + ->call('setPerPage', 5); + } + + /** @test */ + public function cannot_see_incorrect_placeholder_text_visually(): void + { + Livewire::test(PetsTableLoadingPlaceholder::class) + ->call('setPerPageAccepted', [1, 5, 10]) + ->assertDontSee('TestLoadingPlaceholderContentTestTest22') + ->call('setPerPage', 5); + } +}