Skip to content

Commit fb1cca0

Browse files
lrljoelrljoe
authored
## [v3.4.4] - 2024-08-10 ### New Features - Boolean/Toggle Filter by @lrljoe in rappasoft#1830 ### Bug Fixes - Merge Column Attributes Back in if Sortable by @lrljoe in rappasoft#1833 ### Tweaks - Moving JS to Simplified Method in datatable by @lrljoe in rappasoft#1832
1 parent 540e526 commit fb1cca0

35 files changed

+385
-349
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
All notable changes to `laravel-livewire-tables` will be documented in this file
44

5+
## [v3.4.4] - 2024-08-10
6+
### New Features
7+
- Boolean/Toggle Filter by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1830
8+
9+
### Bug Fixes
10+
- Merge Column Attributes Back in if Sortable by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1833
11+
12+
### Tweaks
13+
- Moving JS to Simplified Method in datatable by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1832
14+
515
## [v3.4.3] - 2024-08-08
616
### New Features
717
- Boolean/Toggle Filter by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1830

‎resources/js/laravel-livewire-tables.js‎

Lines changed: 141 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/*jshint esversion: 6 */
22

33
document.addEventListener('alpine:init', () => {
4-
Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({
4+
5+
Alpine.data('laravellivewiretable', (wire, showBulkActionsAlpine, tableID, primaryKeyName) => ({
56
listeners: [],
67
childElementOpen: false,
78
filtersOpen: wire.entangle('filterSlideDownDefaultVisible'),
@@ -12,6 +13,144 @@ document.addEventListener('alpine:init', () => {
1213
selectAllStatus: wire.entangle('selectAll'),
1314
delaySelectAll: wire.entangle('delaySelectAll'),
1415
hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'),
16+
dragging: false,
17+
reorderEnabled: false,
18+
sourceID: '',
19+
targetID: '',
20+
evenRowClasses: '',
21+
oddRowClasses: '',
22+
currentlyHighlightedElement: '',
23+
evenRowClassArray: {},
24+
oddRowClassArray: {},
25+
evenNotInOdd: {},
26+
oddNotInEven: {},
27+
orderedRows: [],
28+
defaultReorderColumn: wire.get('defaultReorderColumn'),
29+
reorderStatus: wire.entangle('reorderStatus'),
30+
currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
31+
hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
32+
reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
33+
dragStart(event) {
34+
this.$nextTick(() => { this.setupEvenOddClasses() });
35+
this.sourceID = event.target.id;
36+
event.dataTransfer.effectAllowed = 'move';
37+
event.dataTransfer.setData('text/plain', event.target.id);
38+
event.target.classList.add("laravel-livewire-tables-dragging");
39+
},
40+
dragOverEvent(event) {
41+
if (typeof this.currentlyHighlightedElement == 'object') {
42+
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
43+
}
44+
let target = event.target.closest('tr');
45+
this.currentlyHighlightedElement = target;
46+
47+
if (event.offsetY < (target.getBoundingClientRect().height / 2)) {
48+
target.classList.add('laravel-livewire-tables-highlight-top');
49+
target.classList.remove('laravel-livewire-tables-highlight-bottom');
50+
}
51+
else {
52+
target.classList.remove('laravel-livewire-tables-highlight-top');
53+
target.classList.add('laravel-livewire-tables-highlight-bottom');
54+
}
55+
},
56+
dragLeaveEvent(event) {
57+
event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
58+
},
59+
dropEvent(event) {
60+
if (typeof this.currentlyHighlightedElement == 'object') {
61+
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
62+
}
63+
64+
let target = event.target.closest('tr');
65+
let parent = event.target.closest('tr').parentNode;
66+
let element = document.getElementById(this.sourceID).closest('tr');
67+
element.classList.remove("laravel-livewire-table-dragging");
68+
let originalPosition = element.rowIndex;
69+
let newPosition = target.rowIndex;
70+
let table = document.getElementById(tableID);
71+
let loopStart = originalPosition;
72+
if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
73+
parent.insertBefore(element, target.nextSibling);
74+
}
75+
else {
76+
parent.insertBefore(element, target);
77+
}
78+
if (newPosition < originalPosition) {
79+
loopStart = newPosition;
80+
}
81+
82+
/*
83+
let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) {
84+
elem.classList.remove(...this.oddNotInEven);
85+
row.classList.add(...this.evenNotInOdd);
86+
});
87+
*/
88+
let nextLoop = 'even';
89+
for (let i = 1, row; row = table.rows[i]; i++) {
90+
if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) {
91+
if (nextLoop === 'even') {
92+
row.classList.remove(...this.oddNotInEven);
93+
row.classList.add(...this.evenNotInOdd);
94+
nextLoop = 'odd';
95+
}
96+
else {
97+
row.classList.remove(...this.evenNotInOdd);
98+
row.classList.add(...this.oddNotInEven);
99+
nextLoop = 'even';
100+
}
101+
}
102+
}
103+
},
104+
reorderToggle() {
105+
if (this.currentlyReorderingStatus) {
106+
console.log("Disable Reordering");
107+
wire.disableReordering();
108+
}
109+
else {
110+
if (this.hideReorderColumnUnlessReorderingStatus) {
111+
this.reorderDisplayColumn = true;
112+
console.log("enableReordering");
113+
}
114+
this.setupEvenOddClasses();
115+
wire.enableReordering();
116+
}
117+
this.$nextTick(() => { this.setupEvenOddClasses() });
118+
},
119+
cancelReorder() {
120+
if (this.hideReorderColumnUnlessReorderingStatus) {
121+
this.reorderDisplayColumn = false;
122+
}
123+
console.log("cancelReorder");
124+
125+
wire.disableReordering();
126+
127+
},
128+
updateOrderedItems() {
129+
let table = document.getElementById(tableID);
130+
let orderedRows = [];
131+
for (let i = 1, row; row = table.rows[i]; i++) {
132+
orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
133+
}
134+
wire.storeReorder(orderedRows);
135+
},
136+
setupEvenOddClasses() {
137+
if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
138+
{
139+
let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
140+
let evenRowClassArray = [];
141+
let oddRowClassArray = [];
142+
143+
if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) {
144+
evenRowClassArray = Array.from(tbody.rows[0].classList);
145+
oddRowClassArray = Array.from(tbody.rows[1].classList);
146+
this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
147+
this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
148+
149+
evenRowClassArray = []
150+
oddRowClassArray = []
151+
}
152+
}
153+
},
15154
toggleSelectAll() {
16155
if (!showBulkActionsAlpine) {
17156
return;
@@ -75,6 +214,7 @@ document.addEventListener('alpine:init', () => {
75214
this.listeners.forEach((listener) => {
76215
listener();
77216
});
217+
78218
}
79219
}));
80220

@@ -227,144 +367,4 @@ document.addEventListener('alpine:init', () => {
227367

228368

229369
}));
230-
Alpine.data('reorderFunction', (wire, tableID, primaryKeyName) => ({
231-
dragging: false,
232-
reorderEnabled: false,
233-
sourceID: '',
234-
targetID: '',
235-
evenRowClasses: '',
236-
oddRowClasses: '',
237-
currentlyHighlightedElement: '',
238-
evenRowClassArray: {},
239-
oddRowClassArray: {},
240-
evenNotInOdd: {},
241-
oddNotInEven: {},
242-
orderedRows: [],
243-
defaultReorderColumn: wire.get('defaultReorderColumn'),
244-
reorderStatus: wire.get('reorderStatus'),
245-
currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
246-
hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
247-
reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
248-
dragStart(event) {
249-
this.$nextTick(() => { this.setupEvenOddClasses() });
250-
this.sourceID = event.target.id;
251-
event.dataTransfer.effectAllowed = 'move';
252-
event.dataTransfer.setData('text/plain', event.target.id);
253-
event.target.classList.add("laravel-livewire-tables-dragging");
254-
},
255-
dragOverEvent(event) {
256-
if (typeof this.currentlyHighlightedElement == 'object') {
257-
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
258-
}
259-
let target = event.target.closest('tr');
260-
this.currentlyHighlightedElement = target;
261-
262-
if (event.offsetY < (target.getBoundingClientRect().height / 2)) {
263-
target.classList.add('laravel-livewire-tables-highlight-top');
264-
target.classList.remove('laravel-livewire-tables-highlight-bottom');
265-
}
266-
else {
267-
target.classList.remove('laravel-livewire-tables-highlight-top');
268-
target.classList.add('laravel-livewire-tables-highlight-bottom');
269-
}
270-
},
271-
dragLeaveEvent(event) {
272-
event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
273-
},
274-
dropEvent(event) {
275-
if (typeof this.currentlyHighlightedElement == 'object') {
276-
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
277-
}
278-
279-
let target = event.target.closest('tr');
280-
let parent = event.target.closest('tr').parentNode;
281-
let element = document.getElementById(this.sourceID).closest('tr');
282-
element.classList.remove("laravel-livewire-table-dragging");
283-
let originalPosition = element.rowIndex;
284-
let newPosition = target.rowIndex;
285-
let table = document.getElementById(tableID);
286-
let loopStart = originalPosition;
287-
if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
288-
parent.insertBefore(element, target.nextSibling);
289-
}
290-
else {
291-
parent.insertBefore(element, target);
292-
}
293-
if (newPosition < originalPosition) {
294-
loopStart = newPosition;
295-
}
296-
297-
/*
298-
let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) {
299-
elem.classList.remove(...this.oddNotInEven);
300-
row.classList.add(...this.evenNotInOdd);
301-
});
302-
*/
303-
let nextLoop = 'even';
304-
for (let i = 1, row; row = table.rows[i]; i++) {
305-
if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) {
306-
if (nextLoop === 'even') {
307-
row.classList.remove(...this.oddNotInEven);
308-
row.classList.add(...this.evenNotInOdd);
309-
nextLoop = 'odd';
310-
}
311-
else {
312-
row.classList.remove(...this.evenNotInOdd);
313-
row.classList.add(...this.oddNotInEven);
314-
nextLoop = 'even';
315-
}
316-
}
317-
}
318-
},
319-
reorderToggle() {
320-
this.$nextTick(() => { this.setupEvenOddClasses() });
321-
if (this.currentlyReorderingStatus) {
322-
wire.disableReordering();
323-
324-
}
325-
else {
326-
this.setupEvenOddClasses();
327-
if (this.hideReorderColumnUnlessReorderingStatus) {
328-
this.reorderDisplayColumn = true;
329-
}
330-
wire.enableReordering();
331-
332-
}
333-
},
334-
cancelReorder() {
335-
if (this.hideReorderColumnUnlessReorderingStatus) {
336-
this.reorderDisplayColumn = false;
337-
}
338-
wire.disableReordering();
339-
340-
},
341-
updateOrderedItems() {
342-
let table = document.getElementById(tableID);
343-
let orderedRows = [];
344-
for (let i = 1, row; row = table.rows[i]; i++) {
345-
orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
346-
}
347-
wire.storeReorder(orderedRows);
348-
},
349-
setupEvenOddClasses() {
350-
if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
351-
{
352-
let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
353-
let evenRowClassArray = [];
354-
let oddRowClassArray = [];
355-
356-
if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) {
357-
evenRowClassArray = Array.from(tbody.rows[0].classList);
358-
oddRowClassArray = Array.from(tbody.rows[1].classList);
359-
this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
360-
this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
361-
362-
evenRowClassArray = []
363-
oddRowClassArray = []
364-
}
365-
}
366-
},
367-
init() {
368-
}
369-
}));
370370
});

0 commit comments

Comments
 (0)