Skip to content

Commit f3c8e42

Browse files
lrljoelrljoe
committed
Further Tweaks - TypeHinting & Cleaning Up
1 parent 099f097 commit f3c8e42

File tree

59 files changed

+762
-578
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+762
-578
lines changed

‎docs/columns/available-methods.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,21 @@ Column::make('Name')
303303
->setColumnLabelStatusEnabled()
304304
```
305305

306+
### Hiding On Reorder
307+
308+
You may set a Column to be hidden when reordering, this is often effective when you have complex columns that are not relevant to reordering.
309+
310+
As pagination is disabled during reordering, returning a minimal set of columns dramatically improves efficiency.
311+
312+
By default, all Selected Columns are displayed when reordering.
313+
314+
```php
315+
Column::make('Name')
316+
->hideOnReorder()
317+
```
318+
319+
320+
306321
## See Also
307322
[Column Styling](./styling)
308323

‎resources/js/partials/filter-date-range.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
function fpf() {
44
Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({
5-
wireValues: wire.entangle('appliedFilters.' + filterKey),
5+
wireValues: wire.entangle('availableFilters.' + filterKey),
66
flatpickrInstance: flatpickr(refLocation, {
77
mode: 'range',
88
altFormat: filterConfig['altFormat'] ?? "F j, Y",

‎resources/js/partials/filter-date-range.min.js‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,68 @@
1-
function fpf(){Alpine.data("flatpickrFilter",(e,t,a,n,l)=>({wireValues:e.entangle("appliedFilters."+t),flatpickrInstance:flatpickr(n,{mode:"range",altFormat:a.altFormat??"F j, Y",altInput:a.altInput??!1,allowInput:a.allowInput??!1,allowInvalidPreload:a.allowInvalidPreload??!0,ariaDateFormat:a.ariaDateFormat??"F j, Y",clickOpens:!0,dateFormat:a.dateFormat??"Y-m-d",defaultDate:a.defaultDate??null,defaultHour:a.defaultHour??12,defaultMinute:a.defaultMinute??0,enableTime:a.enableTime??!1,enableSeconds:a.enableSeconds??!1,hourIncrement:a.hourIncrement??1,locale:a.locale??"en",minDate:a.earliestDate??null,maxDate:a.latestDate??null,minuteIncrement:a.minuteIncrement??5,shorthandCurrentMonth:a.shorthandCurrentMonth??!1,time_24hr:a.time_24hr??!1,weekNumbers:a.weekNumbers??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(a,n,l){if(a.length>1){var i=n.split(" "),r={};window.childElementOpen=!1,window.filterPopoverOpen=!1,r={minDate:i[0],maxDate:void 0===i[2]?i[0]:i[2]},e.set("appliedFilters."+t,r)}}}),setupWire(){if(void 0!==this.wireValues){if(void 0!==this.wireValues.minDate&&void 0!==this.wireValues.maxDate){let e=[this.wireValues.minDate,this.wireValues.maxDate];this.flatpickrInstance.setDate(e)}else this.flatpickrInstance.setDate([])}else this.flatpickrInstance.setDate([])},init(){this.setupWire(),this.$watch("wireValues",e=>this.setupWire())}}))}export default fpf;
1+
/*jshint esversion: 6 */
2+
3+
function fpf() {
4+
Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({
5+
wireValues: wire.entangle('availableFilters.' + filterKey),
6+
flatpickrInstance: flatpickr(refLocation, {
7+
mode: 'range',
8+
altFormat: filterConfig['altFormat'] ?? "F j, Y",
9+
altInput: filterConfig['altInput'] ?? false,
10+
allowInput: filterConfig['allowInput'] ?? false,
11+
allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true,
12+
ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y",
13+
clickOpens: true,
14+
dateFormat: filterConfig['dateFormat'] ?? "Y-m-d",
15+
defaultDate: filterConfig['defaultDate'] ?? null,
16+
defaultHour: filterConfig['defaultHour'] ?? 12,
17+
defaultMinute: filterConfig['defaultMinute'] ?? 0,
18+
enableTime: filterConfig['enableTime'] ?? false,
19+
enableSeconds: filterConfig['enableSeconds'] ?? false,
20+
hourIncrement: filterConfig['hourIncrement'] ?? 1,
21+
locale: filterConfig['locale'] ?? 'en',
22+
minDate: filterConfig['earliestDate'] ?? null,
23+
maxDate: filterConfig['latestDate'] ?? null,
24+
minuteIncrement: filterConfig['minuteIncrement'] ?? 5,
25+
shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false,
26+
time_24hr: filterConfig['time_24hr'] ?? false,
27+
weekNumbers: filterConfig['weekNumbers'] ?? false,
28+
onOpen: function () {
29+
window.childElementOpen = true;
30+
},
31+
onChange: function (selectedDates, dateStr, instance) {
32+
if (selectedDates.length > 1) {
33+
var dates = dateStr.split(' ');
34+
35+
var wireDateArray = {};
36+
window.childElementOpen = false;
37+
window.filterPopoverOpen = false;
38+
wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] };
39+
wire.set('appliedFilters.' + filterKey, wireDateArray);
40+
}
41+
42+
},
43+
}),
44+
setupWire() {
45+
if (this.wireValues !== undefined) {
46+
if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) {
47+
let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate];
48+
this.flatpickrInstance.setDate(initialDateArray);
49+
}
50+
else {
51+
this.flatpickrInstance.setDate([]);
52+
}
53+
}
54+
else {
55+
this.flatpickrInstance.setDate([]);
56+
}
57+
},
58+
init() {
59+
this.setupWire();
60+
this.$watch('wireValues', value => this.setupWire());
61+
}
62+
63+
64+
}));
65+
66+
}
67+
68+
export default fpf;

‎resources/js/partials/filters/boolean.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@
22

33
function newBf() {
44

5-
Alpine.data('newBooleanFilter', (filterKey,tableName,defaultValue) => ({
5+
Alpine.data('newBooleanFilter', (wire,filterKey,tableName,defaultValue) => ({
66
booleanFilterKey: filterKey,
77
switchOn: false,
88
value: false,
99
toggleStatus()
1010
{
11-
let tempValue = Boolean(Number(this.$wire.get('appliedFilters.'+this.booleanFilterKey) ?? this.value));
11+
let tempValue = Boolean(Number(wire.get('appliedFilters.'+this.booleanFilterKey) ?? this.value));
1212
let newBoolean = !tempValue;
1313
this.switchOn = this.value = newBoolean;
1414
return Number(newBoolean);
1515
},
1616
toggleStatusWithUpdate()
1717
{
1818
let newValue = this.toggleStatus();
19-
this.$wire.set('appliedFilters.'+this.booleanFilterKey, newValue);
19+
wire.set('appliedFilters.'+this.booleanFilterKey, newValue);
2020
},
2121
toggleStatusWithReset()
2222
{
2323
let newValue = this.toggleStatus();
24-
this.$wire.call('resetFilter',this.booleanFilterKey);
24+
wire.call('resetFilter',this.booleanFilterKey);
2525
},
2626
setSwitchOn(val)
2727
{
@@ -31,7 +31,8 @@ function newBf() {
3131
init() {
3232

3333
this.$nextTick(() => {
34-
this.value = this.$wire.get('appliedFilters.'+this.booleanFilterKey) ?? defaultValue;
34+
this.value = wire.get('appliedFilters.'+this.booleanFilterKey) ?? defaultValue;
35+
console.log('This Value NextTick: '+this.value ?? 0);
3536
this.setSwitchOn(this.value ?? 0);
3637
});
3738

@@ -63,7 +64,12 @@ function newBf() {
6364
}
6465
})
6566
);
66-
}
67+
},
68+
destroy() {
69+
this.listeners.forEach((listener) => {
70+
listener();
71+
});
72+
},
6773
}));
6874
}
6975

‎resources/js/partials/filters/fpf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
function fpf() {
44
Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({
5-
wireValues: wire.entangle('appliedFilters.' + filterKey),
5+
wireValues: wire.get('appliedFilters.' + filterKey) ? wire.entangle('appliedFilters.' + filterKey) : wire.entangle('availableFilters.' + filterKey),
66
flatpickrInstance: flatpickr(refLocation, {
77
mode: 'range',
88
altFormat: filterConfig['altFormat'] ?? "F j, Y",

‎resources/views/components/bulk-actions/td.blade.php‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
@aware([ 'tableName', 'isTailwind', 'rowPk', 'bulkActionsTdAttributes', 'bulkActionsTdCheckboxAttributes', 'showBulkActionsSections'])
22

3-
@if ($showBulkActionsSections)
4-
<x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $rowPk }}" :displayMinimisedOnReorder="true" :customAttributes=$bulkActionsTdAttributes>
5-
<div @class($isTailwind ? [
6-
'inline-flex rounded-md shadow-sm',
7-
] : [
8-
'form-check',
9-
])>
10-
<x-livewire-tables::forms.checkbox
11-
wire:key="{{ $tableName . 'selectedItems-'.$rowPk }}"
12-
value="{{ $rowPk }}"
13-
:checkboxAttributes=$bulkActionsTdCheckboxAttributes
14-
/>
15-
</div>
16-
</x-livewire-tables::table.td.plain>
17-
@endif
3+
<x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $rowPk }}" :displayMinimisedOnReorder="true" :customAttributes=$bulkActionsTdAttributes>
4+
<div @class($isTailwind ? [
5+
'inline-flex rounded-md shadow-sm',
6+
] : [
7+
'form-check',
8+
])>
9+
<x-livewire-tables::forms.checkbox
10+
wire:key="{{ $tableName . 'selectedItems-'.$rowPk }}"
11+
value="{{ $rowPk }}"
12+
:checkboxAttributes=$bulkActionsTdCheckboxAttributes
13+
/>
14+
</div>
15+
</x-livewire-tables::table.td.plain>

‎resources/views/components/bulk-actions/th.blade.php‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,27 @@
44
$bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
55
@endphp
66

7-
@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
8-
<x-livewire-tables::table.th.plain :displayMinimisedOnReorder="true" wire:key="{{ $tableName }}-thead-bulk-actions" :$customAttributes>
9-
<div x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
10-
x-cloak x-show="currentlyReorderingStatus !== true"
11-
@class([
12-
'inline-flex rounded-md shadow-sm' => $isTailwind,
13-
'form-check' => $isBootstrap,
14-
])
15-
>
16-
<input
17-
x-init="$watch('indeterminateCheckbox', value => $el.indeterminate = value); $watch('selectedItems', value => newSelectCount = value.length);"
18-
x-on:click="if(selectedItems.length == paginationTotalItemCount) { $el.indeterminate = false; $wire.clearSelected(); bulkActionHeaderChecked = false; } else { bulkActionHeaderChecked = true; $el.indeterminate = false; $wire.setAllSelected(); }"
19-
type="checkbox"
20-
:checked="selectedItems.length == paginationTotalItemCount"
21-
{{
22-
$attributes->merge($bulkActionsThCheckboxAttributes)->class($isTailwind ? [
23-
'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)),
24-
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => ($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true),
25-
] : [
26-
'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
27-
])->except(['default','default-styling','default-colors'])
28-
}}
29-
/>
30-
</div>
31-
</x-livewire-tables::table.th.plain>
32-
@endif
7+
<x-livewire-tables::table.th.plain :displayMinimisedOnReorder="true" wire:key="{{ $tableName }}-thead-bulk-actions" :$customAttributes>
8+
<div x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
9+
x-cloak x-show="currentlyReorderingStatus !== true"
10+
@class([
11+
'inline-flex rounded-md shadow-sm' => $isTailwind,
12+
'form-check' => $isBootstrap,
13+
])
14+
>
15+
<input
16+
x-init="$watch('indeterminateCheckbox', value => $el.indeterminate = value); $watch('selectedItems', value => newSelectCount = value.length);"
17+
x-on:click="if(selectedItems.length == paginationTotalItemCount) { $el.indeterminate = false; $wire.clearSelected(); bulkActionHeaderChecked = false; } else { bulkActionHeaderChecked = true; $el.indeterminate = false; $wire.setAllSelected(); }"
18+
type="checkbox"
19+
:checked="selectedItems.length == paginationTotalItemCount"
20+
{{
21+
$attributes->merge($bulkActionsThCheckboxAttributes)->class($isTailwind ? [
22+
'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)),
23+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => ($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true),
24+
] : [
25+
'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
26+
])->except(['default','default-styling','default-colors'])
27+
}}
28+
/>
29+
</div>
30+
</x-livewire-tables::table.th.plain>

‎resources/views/components/bulk-actions/thead/button.blade.php‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@aware(['isTailwind','bulkActionsRowButtonAttributes'])
2+
@props(['bulkActionsRowButtonAttributes'])
3+
<button {{
4+
$attributes->merge([
5+
'wire:loading.attr' => 'disabled',
6+
'type' => 'button',
7+
])->merge($bulkActionsRowButtonAttributes)->class($isTailwind ?
8+
[
9+
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' =>($bulkActionsRowButtonAttributes['default-styling'] ?? true),
10+
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => ($bulkActionsRowButtonAttributes['default-colors'] ?? true),
11+
]:[
12+
'btn btn-primary btn-sm' => ($bulkActionsRowButtonAttributes['default-styling'] ?? true)
13+
])->except(['default','default-colors','default-styling'])
14+
}}
15+
>
16+
{{ $slot }}
17+
</button>

0 commit comments

Comments
 (0)