Skip to content

Commit 2584eb9

Browse files
lrljoelrljoe
committed
CollapseRework3
1 parent f28ca23 commit 2584eb9

Some content is hidden

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

63 files changed

+2236
-2265
lines changed

‎resources/css/laravel-livewire-tables.min.css‎

Lines changed: 428 additions & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 17 additions & 974 deletions
Large diffs are not rendered by default.

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

Lines changed: 17 additions & 974 deletions
Large diffs are not rendered by default.

‎resources/js/partials/core/externalFilter.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*jshint esversion: 6 */
2+
3+
function externalFilter() {
4+
5+
6+
7+
Alpine.data('tablesExternalFilter', (wire, filterKey) => ({
8+
externalFilterKey: filterKey,
9+
pillValues: [],
10+
optionsAvailable: wire.entangle('optionsAvailable'),
11+
optionsSelected: wire.entangle('optionsSelected').live,
12+
selectedItems: wire.entangle('selectedItems'),
13+
sendValueToPill(value)
14+
{
15+
let sentValue = this.removeHTMLTags(value);
16+
this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue });
17+
},
18+
overridePill(values)
19+
{
20+
let sentValue = this.removeHTMLTags(values);
21+
this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue });
22+
},
23+
syncItems(items) {
24+
this.pillValues = [];
25+
items.forEach((item) => {
26+
this.pillValues.push(this.optionsAvailable[item]);
27+
});
28+
if(this.pillValues.length > 0)
29+
{
30+
this.pillValues.sort();
31+
this.syncExternalFilterPillsValues(this.externalFilterKey,this.pillValues);
32+
}
33+
this.optionsSelected = this.selectedItems;
34+
wire.set('value', this.selectedItems);
35+
36+
},
37+
init() {
38+
this.selectedItems = this.optionsSelected;
39+
this.syncItems(this.selectedItems);
40+
this.$watch('selectedItems', value => this.syncItems(value));
41+
}
42+
}));
43+
}
44+
45+
export default externalFilter;

‎resources/js/partials/core/externalFilter.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/partials/core/filterPills.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/*jshint esversion: 6 */
2+
3+
function filterPills() {
4+
Alpine.data('filterPillsHandler', (data) => ({
5+
localData: data,
6+
localFilterKey: '',
7+
localFilterTitle: '',
8+
isExternalFilter: false,
9+
shouldRenderAsHTML: false,
10+
shouldWatchPillValues: false,
11+
pillsSeparator: ',',
12+
pillValues: null,
13+
pillHasValues: false,
14+
displayString: '',
15+
generateLocalFilterPillImplodedValues(filterPillValues)
16+
{
17+
if(typeof(filterPillValues) !== 'undefined')
18+
{
19+
var temporarySeparatorString = '---tablepillsseparator---';
20+
var regex = new RegExp(temporarySeparatorString, 'g');
21+
var joinedValues;
22+
23+
if(Array.isArray(filterPillValues))
24+
{
25+
joinedValues = filterPillValues.join(temporarySeparatorString);
26+
}
27+
else
28+
{
29+
joinedValues = filterPillValues;
30+
}
31+
32+
if(!this.shouldRenderAsHTML)
33+
{
34+
joinedValues = this.removeHTMLTags(joinedValues);
35+
}
36+
37+
if (joinedValues !== null)
38+
{
39+
let replacedJoinedValues = joinedValues.replace(regex, this.pillsSeparator);
40+
return replacedJoinedValues;
41+
42+
}
43+
return "";
44+
}
45+
return "";
46+
},
47+
clearExternalFilterPill()
48+
{
49+
if(this.isExternalFilter)
50+
{
51+
this.externalFilterPillsVals[this.localFilterKey] = [];
52+
this.displayString = this.generateLocalFilterPillImplodedValues(this.externalFilterPillsVals[this.localFilterKey]);
53+
this.updatePillHasValues();
54+
this.resetSpecificFilter(this.localFilterKey);
55+
}
56+
},
57+
trigger: {
58+
['@filterpillupdate.window'](event) {
59+
this.watchForUpdateEvent(event);
60+
},
61+
},
62+
checkEventIsValid(eventTableName, eventFilterKey)
63+
{
64+
return ((this.tableName === eventTableName) && (this.localFilterKey === eventFilterKey));
65+
},
66+
watchForUpdateEvent(event)
67+
{
68+
if(this.checkEventIsValid(event.detail.tableName ?? '', event.detail.filterKey ?? ''))
69+
{
70+
let eventPillItem = event.detail.pillItem ?? '';
71+
if(!this.shouldRenderAsHTML)
72+
{
73+
eventPillItem = this.removeHTMLTags(eventPillItem);
74+
}
75+
76+
if(eventPillItem != "")
77+
{
78+
if(this.isExternalFilter)
79+
{
80+
let filterPillValues = this.externalFilterPillsVals[this.localFilterKey];
81+
82+
filterPillValues.push(eventPillItem);
83+
this.updatePillValues(filterPillValues);
84+
}
85+
else
86+
{
87+
this.updatePillValues(eventPillItem);
88+
}
89+
}
90+
}
91+
},
92+
updatePillValues(filterPillValues)
93+
{
94+
this.pillValues = filterPillValues;
95+
this.displayString = this.generateLocalFilterPillImplodedValues(filterPillValues);
96+
this.updatePillHasValues();
97+
98+
return this.displayString;
99+
},
100+
updatePillHasValues()
101+
{
102+
this.pillHasValues = (this.displayString.length > 0);
103+
},
104+
init()
105+
{
106+
this.localFilterKey = this.localData['filterKey'] ?? 'unknown';
107+
this.localFilterTitle = this.localData['filterPillTitle'] ?? 'Unknown';
108+
this.pillsSeparator = this.localData['separator'] ?? ',';
109+
this.shouldWatchPillValues = Boolean(this.localData['watchForEvents'] ?? 0);
110+
this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0);
111+
this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0);
112+
this.pillValues = this.localData['pillValues'] ?? null;
113+
114+
this.$nextTick(() => {
115+
if(this.isExternalFilter)
116+
{
117+
this.updatePillValues(this.externalFilterPillsVals[this.localFilterKey]);
118+
}
119+
else
120+
{
121+
this.updatePillValues(this.pillValues);
122+
}
123+
});
124+
if(this.isExternalFilter && this.shouldWatchPillValues)
125+
{
126+
this.$watch('externalFilterPillsVals.'+this.localFilterKey, filterPillValues => {
127+
this.updatePillValues(filterPillValues);
128+
});
129+
}
130+
}
131+
}));
132+
133+
}
134+
135+
export default filterPills;

‎resources/js/partials/core/filterPills.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/partials/core/reorder.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/*jshint esversion: 6 */
2+
3+
function reorder() {
4+
Alpine.data('reorderFunction', (wire, tableID, primaryKeyName) => ({
5+
dragging: false,
6+
reorderEnabled: false,
7+
sourceID: '',
8+
targetID: '',
9+
evenRowClasses: '',
10+
oddRowClasses: '',
11+
currentlyHighlightedElement: '',
12+
evenRowClassArray: {},
13+
oddRowClassArray: {},
14+
evenNotInOdd: {},
15+
oddNotInEven: {},
16+
orderedRows: [],
17+
defaultReorderColumn: wire.get('defaultReorderColumn'),
18+
reorderStatus: wire.get('reorderStatus'),
19+
currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
20+
hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
21+
reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
22+
dragStart(event) {
23+
this.$nextTick(() => { this.setupEvenOddClasses() });
24+
this.sourceID = event.target.id;
25+
event.dataTransfer.effectAllowed = 'move';
26+
event.dataTransfer.setData('text/plain', event.target.id);
27+
event.target.classList.add("laravel-livewire-tables-dragging");
28+
},
29+
dragOverEvent(event) {
30+
if (typeof this.currentlyHighlightedElement == 'object') {
31+
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
32+
}
33+
let target = event.target.closest('tr');
34+
this.currentlyHighlightedElement = target;
35+
36+
if (event.offsetY < (target.getBoundingClientRect().height / 2)) {
37+
target.classList.add('laravel-livewire-tables-highlight-top');
38+
target.classList.remove('laravel-livewire-tables-highlight-bottom');
39+
}
40+
else {
41+
target.classList.remove('laravel-livewire-tables-highlight-top');
42+
target.classList.add('laravel-livewire-tables-highlight-bottom');
43+
}
44+
},
45+
dragLeaveEvent(event) {
46+
event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
47+
},
48+
dropEvent(event) {
49+
if (typeof this.currentlyHighlightedElement == 'object') {
50+
this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
51+
}
52+
53+
let target = event.target.closest('tr');
54+
let parent = event.target.closest('tr').parentNode;
55+
let element = document.getElementById(this.sourceID).closest('tr');
56+
element.classList.remove("laravel-livewire-table-dragging");
57+
let originalPosition = element.rowIndex;
58+
let newPosition = target.rowIndex;
59+
let table = document.getElementById(tableID);
60+
let loopStart = originalPosition;
61+
if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
62+
parent.insertBefore(element, target.nextSibling);
63+
}
64+
else {
65+
parent.insertBefore(element, target);
66+
}
67+
if (newPosition < originalPosition) {
68+
loopStart = newPosition;
69+
}
70+
let nextLoop = 'even';
71+
for (let i = 1, row; row = table.rows[i]; i++) {
72+
if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) {
73+
if (nextLoop === 'even') {
74+
row.classList.remove(...this.oddNotInEven);
75+
row.classList.add(...this.evenNotInOdd);
76+
nextLoop = 'odd';
77+
}
78+
else {
79+
row.classList.remove(...this.evenNotInOdd);
80+
row.classList.add(...this.oddNotInEven);
81+
nextLoop = 'even';
82+
}
83+
}
84+
}
85+
},
86+
reorderToggle() {
87+
this.$nextTick(() => { this.setupEvenOddClasses() });
88+
if (this.currentlyReorderingStatus) {
89+
wire.disableReordering();
90+
91+
}
92+
else {
93+
this.setupEvenOddClasses();
94+
if (this.hideReorderColumnUnlessReorderingStatus) {
95+
this.reorderDisplayColumn = true;
96+
}
97+
wire.enableReordering();
98+
99+
}
100+
},
101+
cancelReorder() {
102+
if (this.hideReorderColumnUnlessReorderingStatus) {
103+
this.reorderDisplayColumn = false;
104+
}
105+
wire.disableReordering();
106+
107+
},
108+
updateOrderedItems() {
109+
let table = document.getElementById(tableID);
110+
let orderedRows = [];
111+
for (let i = 1, row; row = table.rows[i]; i++) {
112+
orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
113+
}
114+
wire.storeReorder(orderedRows);
115+
},
116+
setupEvenOddClasses() {
117+
if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
118+
{
119+
let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
120+
let evenRowClassArray = [];
121+
let oddRowClassArray = [];
122+
123+
if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) {
124+
evenRowClassArray = Array.from(tbody.rows[0].classList);
125+
oddRowClassArray = Array.from(tbody.rows[1].classList);
126+
this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
127+
this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
128+
129+
evenRowClassArray = []
130+
oddRowClassArray = []
131+
}
132+
}
133+
},
134+
init() {
135+
}
136+
}));
137+
}
138+
139+
export default reorder;

‎resources/js/partials/core/reorder.min.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)