From 262fb2bc337c7cbbe0330e7e822f77b423813b01 Mon Sep 17 00:00:00 2001 From: lrljoe Date: Wed, 7 Aug 2024 21:00:13 +0100 Subject: [PATCH 01/19] Adjusting for AddBooleanFilter - Fixing Label For --- .gitattributes | 1 + .gitignore | 2 +- minifyJs | 6 + resources/js/laravel-livewire-tables.js | 28 +- resources/js/laravel-livewire-tables.min.js | 2 +- resources/js/partials/filter-boolean.js | 19 ++ resources/js/partials/filter-boolean.min.js | 1 + resources/js/partials/filter-date-range.js | 96 ++++--- .../js/partials/filter-date-range.min.js | 2 +- resources/js/partials/filter-number-range.js | 127 ++++---- .../js/partials/filter-number-range.min.js | 2 +- resources/js/partials/reorder.js | 272 +++++++++--------- resources/js/partials/reorder.min.js | 2 +- resources/js/partials/tableWrapper.js | 82 ++++++ resources/js/partials/tableWrapper.min.js | 1 + .../components/tools/filter-label.blade.php | 4 +- .../tools/filters/boolean.blade.php | 28 ++ .../tools/filters/number-range.blade.php | 4 +- src/Traits/Helpers/FilterHelpers.php | 4 +- src/Views/Filters/BooleanFilter.php | 39 +++ src/Views/Filters/DateFilter.php | 2 +- src/Views/Filters/DateRangeFilter.php | 2 +- src/Views/Filters/DateTimeFilter.php | 2 +- .../Filters/MultiSelectDropdownFilter.php | 2 +- src/Views/Filters/MultiSelectFilter.php | 2 +- src/Views/Filters/NumberRangeFilter.php | 2 +- src/Views/Filters/SelectFilter.php | 2 +- src/Views/Traits/Helpers/FilterHelpers.php | 2 +- 28 files changed, 481 insertions(+), 257 deletions(-) create mode 100755 minifyJs create mode 100644 resources/js/partials/filter-boolean.js create mode 100644 resources/js/partials/filter-boolean.min.js create mode 100644 resources/js/partials/tableWrapper.js create mode 100644 resources/js/partials/tableWrapper.min.js create mode 100644 resources/views/components/tools/filters/boolean.blade.php create mode 100644 src/Views/Filters/BooleanFilter.php diff --git a/.gitattributes b/.gitattributes index 5fb810aac..70d99ed4c 100644 --- a/.gitattributes +++ b/.gitattributes @@ -37,3 +37,4 @@ /resources/js/partials/filter-date-range.js export-ignore /resources/js/partials/filter-number-range.js export-ignore /resources/js/partials/reorder.js export-ignore +/minifyJs export-ignore \ No newline at end of file diff --git a/.gitignore b/.gitignore index d3e4b8ca4..848cfaa9b 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,4 @@ phpunit.xml.dist.dev phpunit.xml.bak phpstan.txt coverage.xml -./tmp/** \ No newline at end of file +./tmp/** diff --git a/minifyJs b/minifyJs new file mode 100755 index 000000000..a25ec833e --- /dev/null +++ b/minifyJs @@ -0,0 +1,6 @@ +minify ./resources/js/partials/filter-boolean.js > ./resources/js/partials/filter-boolean.min.js \ +&& minify ./resources/js/partials/filter-date-range.js > ./resources/js/partials/filter-date-range.min.js \ +&& minify ./resources/js/partials/filter-number-range.js > ./resources/js/partials/filter-number-range.min.js \ +&& minify ./resources/js/partials/reorder.js > ./resources/js/partials/reorder.min.js \ +&& minify ./resources/js/partials/tableWrapper.js > ./resources/js/partials/tableWrapper.min.js \ +&& minify ./resources/js/laravel-livewire-tables.js > ./resources/js/laravel-livewire-tables.min.js diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js index d698ff82c..8f11c2e2a 100644 --- a/resources/js/laravel-livewire-tables.js +++ b/resources/js/laravel-livewire-tables.js @@ -2,6 +2,7 @@ document.addEventListener('alpine:init', () => { Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({ + listeners: [], childElementOpen: false, filtersOpen: wire.entangle('filterSlideDownDefaultVisible'), paginationCurrentCount: wire.entangle('paginationCurrentCount'), @@ -69,8 +70,33 @@ document.addEventListener('alpine:init', () => { tempSelectedItems.push(value.toString()); } this.selectedItems = [...new Set(tempSelectedItems)]; + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); } })); + + + Alpine.data('booleanFilter', (wire,filterKey,tableName,defaultValue) => ({ + switchOn: false, + value: wire.entangle('filterComponents.'+filterKey).live, + init() { + this.switchOn = false; + if (typeof this.value !== 'undefined') { + this.switchOn = Boolean(Number(this.value)); + } + this.listeners.push( + Livewire.on('filter-was-reset', (detail) => { + if(detail.tableName == tableName && detail.filterKey == filterKey) { + this.switchOn = defaultValue; + } + }) + ); + } + })); + Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({ allFilters: wire.entangle('filterComponents', false), originalMin: 0, @@ -334,8 +360,6 @@ document.addEventListener('alpine:init', () => { oddRowClassArray = Array.from(tbody.rows[1].classList); this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - console.log("EvenNotInOdd:"+this.evenNotInOdd); - console.log("oddNotInEven:"+this.oddNotInEven); evenRowClassArray = [] oddRowClassArray = [] diff --git a/resources/js/laravel-livewire-tables.min.js b/resources/js/laravel-livewire-tables.min.js index 82e3e3a1a..26f3e1590 100644 --- a/resources/js/laravel-livewire-tables.min.js +++ b/resources/js/laravel-livewire-tables.min.js @@ -1 +1 @@ -document.addEventListener("alpine:init",()=>{Alpine.data("tableWrapper",(e,t)=>({childElementOpen:!1,filtersOpen:e.entangle("filterSlideDownDefaultVisible"),paginationCurrentCount:e.entangle("paginationCurrentCount"),paginationTotalItemCount:e.entangle("paginationTotalItemCount"),paginationCurrentItems:e.entangle("paginationCurrentItems"),selectedItems:e.entangle("selected"),selectAllStatus:e.entangle("selectAll"),delaySelectAll:e.entangle("delaySelectAll"),hideBulkActionsWhenEmpty:e.entangle("hideBulkActionsWhenEmpty"),toggleSelectAll(){t&&(this.paginationTotalItemCount===this.selectedItems.length?(this.clearSelected(),this.selectAllStatus=!1):this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected())},setAllItemsSelected(){t&&(this.selectAllStatus=!0,this.selectAllOnPage())},setAllSelected(){t&&(this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):e.setAllSelected())},clearSelected(){t&&(this.selectAllStatus=!1,e.clearSelected())},selectAllOnPage(){if(!t)return;let e=this.selectedItems,i=this.paginationCurrentItems.values();for(let l of i)e.push(l.toString());this.selectedItems=[...new Set(e)]}})),Alpine.data("numberRangeFilter",(e,t,i,l,s)=>({allFilters:e.entangle("filterComponents",!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:e.entangle("filterComponents."+t,!1),defaultMin:l.minRange,defaultMax:l.maxRange,restrictUpdates:!1,initialiseStyles(){let e=document.getElementById(i);e.style.setProperty("--value-a",this.wireValues.min??this.filterMin),e.style.setProperty("--text-value-a",JSON.stringify(this.wireValues.min??this.filterMin)),e.style.setProperty("--value-b",this.wireValues.max??this.filterMax),e.style.setProperty("--text-value-b",JSON.stringify(this.wireValues.max??this.filterMax))},updateStyles(e,t){let l=document.getElementById(i);l.style.setProperty("--value-a",e),l.style.setProperty("--text-value-a",JSON.stringify(e)),l.style.setProperty("--value-b",t),l.style.setProperty("--text-value-b",JSON.stringify(t))},setupWire(){void 0!==this.wireValues?(this.filterMin=this.originalMin=void 0!==this.wireValues.min?this.wireValues.min:this.defaultMin,this.filterMax=this.originalMax=void 0!==this.wireValues.max?this.wireValues.max:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax),this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let e=parseInt(this.filterMin),t=parseInt(this.filterMax);(e!=this.originalMin||t!=this.originalMax)&&(tthis.setupWire())}})),Alpine.data("flatpickrFilter",(e,t,i,l,s)=>({wireValues:e.entangle("filterComponents."+t),flatpickrInstance:flatpickr(l,{mode:"range",altFormat:i.altFormat??"F j, Y",altInput:i.altInput??!1,allowInput:i.allowInput??!1,allowInvalidPreload:!0,ariaDateFormat:i.ariaDateFormat??"F j, Y",clickOpens:!0,dateFormat:i.dateFormat??"Y-m-d",defaultDate:i.defaultDate??null,defaultHour:i.defaultHour??12,defaultMinute:i.defaultMinute??0,enableTime:i.enableTime??!1,enableSeconds:i.enableSeconds??!1,hourIncrement:i.hourIncrement??1,locale:i.locale??"en",minDate:i.earliestDate??null,maxDate:i.latestDate??null,minuteIncrement:i.minuteIncrement??5,shorthandCurrentMonth:i.shorthandCurrentMonth??!1,time_24hr:i.time_24hr??!1,weekNumbers:i.weekNumbers??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(i,l,s){if(i.length>1){var a=l.split(" ")[0],r=l.split(" ")[2],n={};window.childElementOpen=!1,window.filterPopoverOpen=!1,n={minDate:a,maxDate:r},e.set("filterComponents."+t,n)}}}),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())}})),Alpine.data("reorderFunction",(e,t,i)=>({dragging:!1,reorderEnabled:!1,sourceID:"",targetID:"",evenRowClasses:"",oddRowClasses:"",currentlyHighlightedElement:"",evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:e.get("defaultReorderColumn"),reorderStatus:e.get("reorderStatus"),currentlyReorderingStatus:e.entangle("currentlyReorderingStatus"),hideReorderColumnUnlessReorderingStatus:e.entangle("hideReorderColumnUnlessReorderingStatus"),reorderDisplayColumn:e.entangle("reorderDisplayColumn"),dragStart(e){this.$nextTick(()=>{this.setupEvenOddClasses()}),this.sourceID=e.target.id,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",e.target.id),e.target.classList.add("laravel-livewire-tables-dragging")},dragOverEvent(e){"object"==typeof this.currentlyHighlightedElement&&this.currentlyHighlightedElement.classList.remove("laravel-livewire-tables-highlight-bottom","laravel-livewire-tables-highlight-top");let t=e.target.closest("tr");this.currentlyHighlightedElement=t,e.offsetYi.getBoundingClientRect().height/2?l.insertBefore(s,i.nextSibling):l.insertBefore(s,i),r{this.setupEvenOddClasses()}),this.currentlyReorderingStatus?e.disableReordering():(this.setupEvenOddClasses(),this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!0),e.enableReordering())},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1),e.disableReordering()},updateOrderedItems(){let l=document.getElementById(t),s=[];for(let a=1,r;r=l.rows[a];a++)s.push({[i]:r.getAttribute("rowpk"),[this.defaultReorderColumn]:a});e.storeReorder(s)},setupEvenOddClasses(){if(void 0===this.evenNotInOdd.length||0==this.evenNotInOdd.length||void 0===this.oddNotInEven.length||0==this.oddNotInEven.length){let e=document.getElementById(t).getElementsByTagName("tbody")[0],i=[],l=[];void 0!==e.rows[0]&&void 0!==e.rows[1]&&(i=Array.from(e.rows[0].classList),l=Array.from(e.rows[1].classList),this.evenNotInOdd=i.filter(e=>!l.includes(e)),this.oddNotInEven=l.filter(e=>!i.includes(e)),console.log("EvenNotInOdd:"+this.evenNotInOdd),console.log("oddNotInEven:"+this.oddNotInEven),i=[],l=[])}},init(){}}))}); \ No newline at end of file +document.addEventListener('alpine:init',()=>{Alpine.data('tableWrapper',(wire,showBulkActionsAlpine)=>({listeners:[],childElementOpen:!1,filtersOpen:wire.entangle('filterSlideDownDefaultVisible'),paginationCurrentCount:wire.entangle('paginationCurrentCount'),paginationTotalItemCount:wire.entangle('paginationTotalItemCount'),paginationCurrentItems:wire.entangle('paginationCurrentItems'),selectedItems:wire.entangle('selected'),selectAllStatus:wire.entangle('selectAll'),delaySelectAll:wire.entangle('delaySelectAll'),hideBulkActionsWhenEmpty:wire.entangle('hideBulkActionsWhenEmpty'),toggleSelectAll(){if(!showBulkActionsAlpine)return;if(this.paginationTotalItemCount===this.selectedItems.length){this.clearSelected();this.selectAllStatus=!1}else this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected()},setAllItemsSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!0;this.selectAllOnPage()},setAllSelected(){if(!showBulkActionsAlpine)return;this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):(wire.setAllSelected())},clearSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!1;wire.clearSelected()},selectAllOnPage(){if(!showBulkActionsAlpine)return;let a=this.selectedItems;var b=this.paginationCurrentItems.values();for(const A of b)a.push(`${A}`);this.selectedItems=[...new Set(a)]},destroy(){for(const _ of this.listeners)_()}}));Alpine.data('booleanFilter',(B,c,C,d)=>({switchOn:!1,value:B.entangle(`filterComponents.${c}`).live,init(){this.switchOn=!1;this.value!==void 0&&(this.switchOn=!!+this.value);this.listeners.push(Livewire.on('filter-was-reset',_a=>{(_a.tableName==C&&_a.filterKey==c)&&(this.switchOn=d)}))}}));Alpine.data('numberRangeFilter',(D,_b,_c,_d,e)=>({allFilters:D.entangle('filterComponents',!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:D.entangle(`filterComponents.${_b}`,!1),defaultMin:_d['minRange'],defaultMax:_d['maxRange'],restrictUpdates:!1,initialiseStyles(){let _A=document.getElementById(_c);_A.style.setProperty('--value-a',this.wireValues['min']??this.filterMin);_A.style.setProperty('--text-value-a',JSON.stringify(this.wireValues['min']??this.filterMin));_A.style.setProperty('--value-b',this.wireValues['max']??this.filterMax);_A.style.setProperty('--text-value-b',JSON.stringify(this.wireValues['max']??this.filterMax))},updateStyles(E,_B){let _C=document.getElementById(_c);_C.style.setProperty('--value-a',E);_C.style.setProperty('--text-value-a',JSON.stringify(E));_C.style.setProperty('--value-b',_B);_C.style.setProperty('--text-value-b',JSON.stringify(_B))},setupWire(){this.wireValues!==void 0?(this.filterMin=this.originalMin=(this.wireValues['min']!==void 0)?this.wireValues['min']:this.defaultMin,this.filterMax=this.originalMax=(this.wireValues['max']!==void 0)?this.wireValues['max']:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax);this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let aA=parseInt(this.filterMin);let aB=parseInt(this.filterMax);if(aA!=this.originalMin||aB!=this.originalMax){aBthis.setupWire())}}));Alpine.data('flatpickrFilter',(aC,aD,aE,_D,_e)=>({wireValues:aC.entangle(`filterComponents.${aD}`),flatpickrInstance:flatpickr(_D,{mode:'range',altFormat:aE['altFormat']??'F j, Y',altInput:aE['altInput']??!1,allowInput:aE['allowInput']??!1,allowInvalidPreload:!0,ariaDateFormat:aE['ariaDateFormat']??'F j, Y',clickOpens:!0,dateFormat:aE['dateFormat']??'Y-m-d',defaultDate:aE['defaultDate']??null,defaultHour:aE['defaultHour']??12,defaultMinute:aE['defaultMinute']??0,enableTime:aE['enableTime']??!1,enableSeconds:aE['enableSeconds']??!1,hourIncrement:aE['hourIncrement']??1,locale:aE['locale']??'en',minDate:aE['earliestDate']??null,maxDate:aE['latestDate']??null,minuteIncrement:aE['minuteIncrement']??5,shorthandCurrentMonth:aE['shorthandCurrentMonth']??!1,time_24hr:aE['time_24hr']??!1,weekNumbers:aE['weekNumbers']??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(aF,aG,aH){if(aF.length>1){var aI=aG.split(' ')[0],_E=aG.split(' ')[2],f={};window.childElementOpen=window.filterPopoverOpen=!1;f={'minDate':aI,'maxDate':_E};aC.set(`filterComponents.${aD}`,f)}}}),setupWire(){if(this.wireValues!==void 0)if(this.wireValues.minDate!==void 0&&this.wireValues.maxDate!==void 0){this.flatpickrInstance.setDate([this.wireValues.minDate,this.wireValues.maxDate])}else this.flatpickrInstance.setDate([]);else this.flatpickrInstance.setDate([])},init(){this.setupWire();this.$watch('wireValues',value=>this.setupWire())}}));Alpine.data('reorderFunction',(wire,tableID,primaryKeyName)=>({dragging:!1,reorderEnabled:!1,sourceID:'',targetID:'',evenRowClasses:'',oddRowClasses:'',currentlyHighlightedElement:'',evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:wire.get('defaultReorderColumn'),reorderStatus:wire.get('reorderStatus'),currentlyReorderingStatus:wire.entangle('currentlyReorderingStatus'),hideReorderColumnUnlessReorderingStatus:wire.entangle('hideReorderColumnUnlessReorderingStatus'),reorderDisplayColumn:wire.entangle('reorderDisplayColumn'),dragStart(aJ){this.$nextTick(()=>this.setupEvenOddClasses());this.sourceID=aJ.target.id;aJ.dataTransfer.effectAllowed='move';aJ.dataTransfer.setData('text/plain',aJ.target.id);aJ.target.classList.add('laravel-livewire-tables-dragging')},dragOverEvent(aK){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let aL=aK.target.closest('tr');this.currentlyHighlightedElement=aL;aK.offsetY<(aL.getBoundingClientRect().height/2)?(aL.classList.add('laravel-livewire-tables-highlight-top'),aL.classList.remove('laravel-livewire-tables-highlight-bottom')):(aL.classList.remove('laravel-livewire-tables-highlight-top'),aL.classList.add('laravel-livewire-tables-highlight-bottom'))},dragLeaveEvent(aM){aM.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top')},dropEvent(aN){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let aO=aN.target.closest('tr');let aP=aN.target.closest('tr').parentNode;let aQ=document.getElementById(this.sourceID).closest('tr');aQ.classList.remove('laravel-livewire-table-dragging');let aR=aQ.rowIndex;let F=aO.rowIndex;let g=document.getElementById(tableID);aN.offsetY>(aO.getBoundingClientRect().height/2)?aP.insertBefore(aQ,aO.nextSibling):aP.insertBefore(aQ,aO);Fthis.setupEvenOddClasses());if(this.currentlyReorderingStatus)wire.disableReordering();else{this.setupEvenOddClasses();this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!0);wire.enableReordering()}},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1);wire.disableReordering()},updateOrderedItems(){let aT=document.getElementById(tableID);let aU=[];for(let i=1,aV;aV=aT.rows[i];i++)aU.push({[primaryKeyName]:aV.getAttribute('rowpk'),[this.defaultReorderColumn]:i});wire.storeReorder(aU)},setupEvenOddClasses(){if(this.evenNotInOdd.length===void 0||this.evenNotInOdd.length==0||this.oddNotInEven.length===void 0||this.oddNotInEven.length==0){let aW=document.getElementById(tableID).getElementsByTagName('tbody')[0];let aX=[];let aY=[];(aW.rows[0]!==void 0&&aW.rows[1]!==void 0)&&(aX=[...aW.rows[0].classList],aY=[...aW.rows[1].classList],this.evenNotInOdd=aX.filter(aZ=>!aY.includes(aZ)),this.oddNotInEven=aY.filter(bA=>!aX.includes(bA)),aX=[],aY=[])}},init(){}}))}); diff --git a/resources/js/partials/filter-boolean.js b/resources/js/partials/filter-boolean.js new file mode 100644 index 000000000..9ea7c15e2 --- /dev/null +++ b/resources/js/partials/filter-boolean.js @@ -0,0 +1,19 @@ +document.addEventListener('alpine:init', () => { + Alpine.data('booleanFilter', (wire,filterKey,tableName,defaultValue) => ({ + switchOn: false, + value: wire.entangle('filterComponents.'+filterKey).live, + init() { + this.switchOn = false; + if (typeof this.value !== 'undefined') { + this.switchOn = Boolean(Number(this.value)); + } + this.listeners.push( + Livewire.on('filter-was-reset', (detail) => { + if(detail.tableName == tableName && detail.filterKey == filterKey) { + this.switchOn = defaultValue; + } + }) + ); + } + })); +}); \ No newline at end of file diff --git a/resources/js/partials/filter-boolean.min.js b/resources/js/partials/filter-boolean.min.js new file mode 100644 index 000000000..afae2ff77 --- /dev/null +++ b/resources/js/partials/filter-boolean.min.js @@ -0,0 +1 @@ +document.addEventListener('alpine:init',()=>Alpine.data('booleanFilter',(a,b,c,d)=>({switchOn:!1,value:a.entangle(`filterComponents.${b}`).live,init(){this.switchOn=!1;this.value!==void 0&&(this.switchOn=!!+this.value);this.listeners.push(Livewire.on('filter-was-reset',A=>{(A.tableName==c&&A.filterKey==b)&&(this.switchOn=d)}))}}))); diff --git a/resources/js/partials/filter-date-range.js b/resources/js/partials/filter-date-range.js index 4755b5d17..f28f42d93 100644 --- a/resources/js/partials/filter-date-range.js +++ b/resources/js/partials/filter-date-range.js @@ -2,56 +2,66 @@ function fpf() { Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({ - wireValues: wire.entangle('filterComponents.' + filterKey), - flatpickrInstance: flatpickr(refLocation, { - mode: 'range', - clickOpens: true, - allowInvalidPreload: true, - defaultDate: [], - ariaDateFormat: filterConfig['ariaDateFormat'], - allowInput: filterConfig['allowInput'], - altFormat: filterConfig['altFormat'], - altInput: filterConfig['altInput'], - dateFormat: filterConfig['dateFormat'], - locale: 'en', - minDate: filterConfig['earliestDate'], - maxDate: filterConfig['latestDate'], - onOpen: function () { - window.childElementOpen = true; - }, - onChange: function (selectedDates, dateStr, instance) { - if (selectedDates.length > 1) { - var startDate = dateStr.split(' ')[0]; - var endDate = dateStr.split(' ')[2]; - var wireDateArray = {}; - window.childElementOpen = false; - window.filterPopoverOpen = false; - wireDateArray = { 'minDate': startDate, 'maxDate': endDate }; - wire.set('filterComponents.' + filterKey, wireDateArray); + wireValues: wire.entangle('filterComponents.' + filterKey), + flatpickrInstance: flatpickr(refLocation, { + mode: 'range', + altFormat: filterConfig['altFormat'] ?? "F j, Y", + altInput: filterConfig['altInput'] ?? false, + allowInput: filterConfig['allowInput'] ?? false, + allowInvalidPreload: true, + ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y", + clickOpens: true, + dateFormat: filterConfig['dateFormat'] ?? "Y-m-d", + defaultDate: filterConfig['defaultDate'] ?? null, + defaultHour: filterConfig['defaultHour'] ?? 12, + defaultMinute: filterConfig['defaultMinute'] ?? 0, + enableTime: filterConfig['enableTime'] ?? false, + enableSeconds: filterConfig['enableSeconds'] ?? false, + hourIncrement: filterConfig['hourIncrement'] ?? 1, + locale: filterConfig['locale'] ?? 'en', + minDate: filterConfig['earliestDate'] ?? null, + maxDate: filterConfig['latestDate'] ?? null, + minuteIncrement: filterConfig['minuteIncrement'] ?? 5, + shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false, + time_24hr: filterConfig['time_24hr'] ?? false, + weekNumbers: filterConfig['weekNumbers'] ?? false, + onOpen: function () { + window.childElementOpen = true; + }, + onChange: function (selectedDates, dateStr, instance) { + if (selectedDates.length > 1) { + var startDate = dateStr.split(' ')[0]; + var endDate = dateStr.split(' ')[2]; + var wireDateArray = {}; + window.childElementOpen = false; + window.filterPopoverOpen = false; + wireDateArray = { 'minDate': startDate, 'maxDate': endDate }; + wire.set('filterComponents.' + filterKey, wireDateArray); + } } - } - }), - setupWire() { - if (this.wireValues !== undefined) { - if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) { - let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate]; - this.flatpickrInstance.setDate(initialDateArray); + }), + setupWire() { + if (this.wireValues !== undefined) { + if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) { + let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate]; + this.flatpickrInstance.setDate(initialDateArray); + } + else { + this.flatpickrInstance.setDate([]); + } } else { this.flatpickrInstance.setDate([]); } + }, + init() { + this.setupWire(); + this.$watch('wireValues', value => this.setupWire()); } - else { - this.flatpickrInstance.setDate([]); - } - }, - init() { - this.setupWire(); - this.$watch('wireValues', value => this.setupWire()); - } - + + + })); -})); } export default fpf; \ No newline at end of file diff --git a/resources/js/partials/filter-date-range.min.js b/resources/js/partials/filter-date-range.min.js index 5178ea8c6..7a7e5b158 100644 --- a/resources/js/partials/filter-date-range.min.js +++ b/resources/js/partials/filter-date-range.min.js @@ -1 +1 @@ -function fpf(){Alpine.data("flatpickrFilter",(t,e,a,i,l)=>({wireValues:t.entangle("filterComponents."+e),flatpickrInstance:flatpickr(i,{mode:"range",clickOpens:!0,allowInvalidPreload:!0,defaultDate:[],ariaDateFormat:a.ariaDateFormat,allowInput:a.allowInput,altFormat:a.altFormat,altInput:a.altInput,dateFormat:a.dateFormat,locale:"en",minDate:a.earliestDate,maxDate:a.latestDate,onOpen:function(){window.childElementOpen=!0},onChange:function(a,i,l){if(a.length>1){var n=i.split(" ")[0],s=i.split(" ")[2],r={};window.childElementOpen=!1,window.filterPopoverOpen=!1,r={minDate:n,maxDate:s},t.set("filterComponents."+e,r)}}}),setupWire(){if(void 0!==this.wireValues){if(void 0!==this.wireValues.minDate&&void 0!==this.wireValues.maxDate){let t=[this.wireValues.minDate,this.wireValues.maxDate];this.flatpickrInstance.setDate(t)}else this.flatpickrInstance.setDate([])}else this.flatpickrInstance.setDate([])},init(){this.setupWire(),this.$watch("wireValues",t=>this.setupWire())}}))}export default fpf; \ No newline at end of file +function a(){Alpine.data('flatpickrFilter',(A,b,c,d,e)=>({wireValues:A.entangle(`filterComponents.${b}`),flatpickrInstance:flatpickr(d,{mode:'range',altFormat:c['altFormat']??'F j, Y',altInput:c['altInput']??!1,allowInput:c['allowInput']??!1,allowInvalidPreload:!0,ariaDateFormat:c['ariaDateFormat']??'F j, Y',clickOpens:!0,dateFormat:c['dateFormat']??'Y-m-d',defaultDate:c['defaultDate']??null,defaultHour:c['defaultHour']??12,defaultMinute:c['defaultMinute']??0,enableTime:c['enableTime']??!1,enableSeconds:c['enableSeconds']??!1,hourIncrement:c['hourIncrement']??1,locale:c['locale']??'en',minDate:c['earliestDate']??null,maxDate:c['latestDate']??null,minuteIncrement:c['minuteIncrement']??5,shorthandCurrentMonth:c['shorthandCurrentMonth']??!1,time_24hr:c['time_24hr']??!1,weekNumbers:c['weekNumbers']??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(_,B,C){if(_.length>1){var D=B.split(' ')[0],E=B.split(' ')[2],f={};window.childElementOpen=window.filterPopoverOpen=!1;f={'minDate':D,'maxDate':E};A.set(`filterComponents.${b}`,f)}}}),setupWire(){if(this.wireValues!==void 0)if(this.wireValues.minDate!==void 0&&this.wireValues.maxDate!==void 0){this.flatpickrInstance.setDate([this.wireValues.minDate,this.wireValues.maxDate])}else this.flatpickrInstance.setDate([]);else this.flatpickrInstance.setDate([])},init(){this.setupWire();this.$watch('wireValues',value=>this.setupWire())}}))}export default a; diff --git a/resources/js/partials/filter-number-range.js b/resources/js/partials/filter-number-range.js index 8aff53043..bf50c65ba 100644 --- a/resources/js/partials/filter-number-range.js +++ b/resources/js/partials/filter-number-range.js @@ -1,68 +1,75 @@ /*jshint esversion: 6 */ export function nrf() { Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({ - allFilters: wire.entangle('filterComponents', false), - originalMin: 0, - originalMax: 100, - filterMin: 0, - filterMax: 100, - currentMin: 0, - currentMax: 100, - hasUpdate: false, - wireValues: wire.entangle('filterComponents.' + filterKey, false), - defaultMin: filterConfig['minRange'], - defaultMax: filterConfig['maxRange'], - restrictUpdates: false, - updateStyles() { - let numRangeFilterContainer = document.getElementById(parentElementPath); - let currentFilterMin = document.getElementById(childElementRoot + "-min"); - let currentFilterMax = document.getElementById(childElementRoot + "-max"); - numRangeFilterContainer.style.setProperty('--value-a', currentFilterMin.value); - numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(currentFilterMin.value)); - numRangeFilterContainer.style.setProperty('--value-b', currentFilterMax.value); - numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(currentFilterMax.value)); - }, - setupWire() { - if (this.wireValues !== undefined) { - this.filterMin = this.originalMin = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin; - this.filterMax = this.originalMax = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax; - } else { - this.filterMin = this.originalMin = this.defaultMin; - this.filterMax = this.originalMax = this.defaultMax; - } - this.updateStyles(); - }, - allowUpdates() { - this.updateWire(); - }, - updateWire() { - let tmpFilterMin = parseInt(this.filterMin); - let tmpFilterMax = parseInt(this.filterMax); - - if (tmpFilterMin != this.originalMin || tmpFilterMax != this.originalMax) { - if (tmpFilterMax < tmpFilterMin) { - this.filterMin = tmpFilterMax; - this.filterMax = tmpFilterMin; + allFilters: wire.entangle('filterComponents', false), + originalMin: 0, + originalMax: 100, + filterMin: 0, + filterMax: 100, + currentMin: 0, + currentMax: 100, + hasUpdate: false, + wireValues: wire.entangle('filterComponents.' + filterKey, false), + defaultMin: filterConfig['minRange'], + defaultMax: filterConfig['maxRange'], + restrictUpdates: false, + initialiseStyles() + { + let numRangeFilterContainer = document.getElementById(parentElementPath); + numRangeFilterContainer.style.setProperty('--value-a', this.wireValues['min'] ?? this.filterMin); + numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(this.wireValues['min'] ?? this.filterMin)); + numRangeFilterContainer.style.setProperty('--value-b', this.wireValues['max'] ?? this.filterMax); + numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(this.wireValues['max'] ?? this.filterMax)); + }, + updateStyles(filterMin, filterMax) { + let numRangeFilterContainer = document.getElementById(parentElementPath); + numRangeFilterContainer.style.setProperty('--value-a', filterMin); + numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(filterMin)); + numRangeFilterContainer.style.setProperty('--value-b', filterMax); + numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(filterMax)); + }, + setupWire() { + if (this.wireValues !== undefined) { + this.filterMin = this.originalMin = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin; + this.filterMax = this.originalMax = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax; + } else { + this.filterMin = this.originalMin = this.defaultMin; + this.filterMax = this.originalMax = this.defaultMax; + } + this.updateStyles(this.filterMin, this.filterMax); + }, + allowUpdates() { + this.updateWire(); + }, + updateWire() { + let tmpFilterMin = parseInt(this.filterMin); + let tmpFilterMax = parseInt(this.filterMax); + + if (tmpFilterMin != this.originalMin || tmpFilterMax != this.originalMax) { + if (tmpFilterMax < tmpFilterMin) { + this.filterMin = tmpFilterMax; + this.filterMax = tmpFilterMin; + } + this.hasUpdate = true; + this.originalMin = tmpFilterMin; + this.originalMax = tmpFilterMax; + } + this.updateStyles(this.filterMin,this.filterMax); + }, + updateWireable() { + if (this.hasUpdate) { + this.hasUpdate = false; + this.wireValues = { 'min': this.filterMin, 'max': this.filterMax }; + wire.set('filterComponents.' + filterKey, this.wireValues); } - this.hasUpdate = true; - this.originalMin = tmpFilterMin; - this.originalMax = tmpFilterMax; - } - this.updateStyles(); - }, - updateWireable() { - if (this.hasUpdate) { - this.hasUpdate = false; - this.wireValues = { 'min': this.filterMin, 'max': this.filterMax }; - wire.set('filterComponents.' + filterKey, this.wireValues); - } + }, + init() { + this.initialiseStyles(); + this.setupWire(); + this.$watch('allFilters', value => this.setupWire()); + }, + })); - }, - init() { - this.setupWire(); - this.$watch('allFilters', value => this.setupWire()); - }, -})); } export default nrf; diff --git a/resources/js/partials/filter-number-range.min.js b/resources/js/partials/filter-number-range.min.js index 40f63cc71..3c9aa3d13 100644 --- a/resources/js/partials/filter-number-range.min.js +++ b/resources/js/partials/filter-number-range.min.js @@ -1 +1 @@ -export function nrf(){Alpine.data("numberRangeFilter",(t,i,e,a,s)=>({allFilters:t.entangle("filterComponents",!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:t.entangle("filterComponents."+i,!1),defaultMin:a.minRange,defaultMax:a.maxRange,restrictUpdates:!1,updateStyles(){let t=document.getElementById(e),i=document.getElementById(s+"-min"),a=document.getElementById(s+"-max");t.style.setProperty("--value-a",i.value),t.style.setProperty("--text-value-a",JSON.stringify(i.value)),t.style.setProperty("--value-b",a.value),t.style.setProperty("--text-value-b",JSON.stringify(a.value))},setupWire(){void 0!==this.wireValues?(this.filterMin=this.originalMin=void 0!==this.wireValues.min?this.wireValues.min:this.defaultMin,this.filterMax=this.originalMax=void 0!==this.wireValues.max?this.wireValues.max:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax),this.updateStyles()},allowUpdates(){this.updateWire()},updateWire(){let t=parseInt(this.filterMin),i=parseInt(this.filterMax);(t!=this.originalMin||i!=this.originalMax)&&(ithis.setupWire())}}))}export default nrf; \ No newline at end of file +function a(){Alpine.data('numberRangeFilter',(A,b,c,d,e)=>({allFilters:A.entangle('filterComponents',!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:A.entangle(`filterComponents.${b}`,!1),defaultMin:d['minRange'],defaultMax:d['maxRange'],restrictUpdates:!1,initialiseStyles(){let _=document.getElementById(c);_.style.setProperty('--value-a',this.wireValues['min']??this.filterMin);_.style.setProperty('--text-value-a',JSON.stringify(this.wireValues['min']??this.filterMin));_.style.setProperty('--value-b',this.wireValues['max']??this.filterMax);_.style.setProperty('--text-value-b',JSON.stringify(this.wireValues['max']??this.filterMax))},updateStyles(B,C){let _c=document.getElementById(c);_c.style.setProperty('--value-a',B);_c.style.setProperty('--text-value-a',JSON.stringify(B));_c.style.setProperty('--value-b',C);_c.style.setProperty('--text-value-b',JSON.stringify(C))},setupWire(){this.wireValues!==void 0?(this.filterMin=this.originalMin=(this.wireValues['min']!==void 0)?this.wireValues['min']:this.defaultMin,this.filterMax=this.originalMax=(this.wireValues['max']!==void 0)?this.wireValues['max']:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax);this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let _a=parseInt(this.filterMin);let _b=parseInt(this.filterMax);if(_a!=this.originalMin||_b!=this.originalMax){_b<_a&&(this.filterMin=_b,this.filterMax=_a);this.hasUpdate=!0;this.originalMin=_a;this.originalMax=_b}this.updateStyles(this.filterMin,this.filterMax)},updateWireable(){this.hasUpdate&&(this.hasUpdate=!1,this.wireValues={'min':this.filterMin,'max':this.filterMax},A.set(`filterComponents.${b}`,this.wireValues))},init(){this.initialiseStyles();this.setupWire();this.$watch('allFilters',value=>this.setupWire())}}))}export{a as nrf};export default a; diff --git a/resources/js/partials/reorder.js b/resources/js/partials/reorder.js index b6ede2ec0..a6115025e 100644 --- a/resources/js/partials/reorder.js +++ b/resources/js/partials/reorder.js @@ -2,142 +2,146 @@ function tableReorder() { Alpine.data('reorderFunction', (wire, tableID, primaryKeyName) => ({ - dragging: false, - reorderEnabled: false, - sourceID: '', - targetID: '', - evenRowClasses: '', - oddRowClasses: '', - currentlyHighlightedElement: '', - evenRowClassArray: {}, - oddRowClassArray: {}, - evenNotInOdd: {}, - oddNotInEven: {}, - orderedRows: [], - defaultReorderColumn: wire.get('defaultReorderColumn'), - reorderStatus: wire.get('reorderStatus'), - currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), - hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), - reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), - dragStart(event) { - this.sourceID = event.target.id; - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', event.target.id); - event.target.classList.add("laravel-livewire-tables-dragging"); - }, - dragOverEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - let target = event.target.closest('tr'); - this.currentlyHighlightedElement = target; + dragging: false, + reorderEnabled: false, + sourceID: '', + targetID: '', + evenRowClasses: '', + oddRowClasses: '', + currentlyHighlightedElement: '', + evenRowClassArray: {}, + oddRowClassArray: {}, + evenNotInOdd: {}, + oddNotInEven: {}, + orderedRows: [], + defaultReorderColumn: wire.get('defaultReorderColumn'), + reorderStatus: wire.get('reorderStatus'), + currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), + hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), + reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), + dragStart(event) { + this.$nextTick(() => { this.setupEvenOddClasses() }); - if (event.offsetY < (target.getBoundingClientRect().height / 2)) { - target.classList.add('laravel-livewire-tables-highlight-top'); - target.classList.remove('laravel-livewire-tables-highlight-bottom'); - } - else { - target.classList.remove('laravel-livewire-tables-highlight-top'); - target.classList.add('laravel-livewire-tables-highlight-bottom'); - } - }, - dragLeaveEvent(event) { - event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - }, - dropEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - let target = event.target.closest('tr'); - let parent = event.target.closest('tr').parentNode; - let element = document.getElementById(this.sourceID).closest('tr'); - element.classList.remove("laravel-livewire-table-dragging"); - let originalPosition = element.rowIndex; - let newPosition = target.rowIndex; - let table = document.getElementById(tableID); - let loopStart = originalPosition; - if (event.offsetY > (target.getBoundingClientRect().height / 2)) { - parent.insertBefore(element, target.nextSibling); - } - else { - parent.insertBefore(element, target); - } - if (newPosition < originalPosition) { - loopStart = newPosition; - } + this.sourceID = event.target.id; + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', event.target.id); + event.target.classList.add("laravel-livewire-tables-dragging"); + }, + dragOverEvent(event) { + if (typeof this.currentlyHighlightedElement == 'object') { + this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); + } + let target = event.target.closest('tr'); + this.currentlyHighlightedElement = target; + + if (event.offsetY < (target.getBoundingClientRect().height / 2)) { + target.classList.add('laravel-livewire-tables-highlight-top'); + target.classList.remove('laravel-livewire-tables-highlight-bottom'); + } + else { + target.classList.remove('laravel-livewire-tables-highlight-top'); + target.classList.add('laravel-livewire-tables-highlight-bottom'); + } + }, + dragLeaveEvent(event) { + event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); + }, + dropEvent(event) { + if (typeof this.currentlyHighlightedElement == 'object') { + this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); + } + + let target = event.target.closest('tr'); + let parent = event.target.closest('tr').parentNode; + let element = document.getElementById(this.sourceID).closest('tr'); + element.classList.remove("laravel-livewire-table-dragging"); + let originalPosition = element.rowIndex; + let newPosition = target.rowIndex; + let table = document.getElementById(tableID); + let loopStart = originalPosition; + if (event.offsetY > (target.getBoundingClientRect().height / 2)) { + parent.insertBefore(element, target.nextSibling); + } + else { + parent.insertBefore(element, target); + } + if (newPosition < originalPosition) { + loopStart = newPosition; + } + + /* + let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) { + elem.classList.remove(...this.oddNotInEven); + row.classList.add(...this.evenNotInOdd); + }); + */ + let nextLoop = 'even'; + for (let i = 1, row; row = table.rows[i]; i++) { + if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) { + if (nextLoop === 'even') { + row.classList.remove(...this.oddNotInEven); + row.classList.add(...this.evenNotInOdd); + nextLoop = 'odd'; + } + else { + row.classList.remove(...this.evenNotInOdd); + row.classList.add(...this.oddNotInEven); + nextLoop = 'even'; + } + } + } + }, + reorderToggle() { + this.$nextTick(() => { this.setupEvenOddClasses() }); + if (this.currentlyReorderingStatus) { + wire.disableReordering(); + + } + else { + this.setupEvenOddClasses(); + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = true; + } + wire.enableReordering(); + + } + }, + cancelReorder() { + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = false; + } + wire.disableReordering(); + + }, + updateOrderedItems() { + let table = document.getElementById(tableID); + let orderedRows = []; + for (let i = 1, row; row = table.rows[i]; i++) { + orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i }); + } + wire.storeReorder(orderedRows); + }, + setupEvenOddClasses() { + if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0) + { + let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0]; + let evenRowClassArray = []; + let oddRowClassArray = []; + + if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) { + evenRowClassArray = Array.from(tbody.rows[0].classList); + oddRowClassArray = Array.from(tbody.rows[1].classList); + this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); + this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - /* - let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) { - elem.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - }); - */ - let nextLoop = 'even'; - for (let i = 1, row; row = table.rows[i]; i++) { - if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) { - if (nextLoop === 'even') { - row.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - nextLoop = 'odd'; - } - else { - row.classList.remove(...this.evenNotInOdd); - row.classList.add(...this.oddNotInEven); - nextLoop = 'even'; - } - } - } - }, - reorderToggle() { - if (this.currentlyReorderingStatus) { - wire.disableReordering(); - - } - else { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = true; - } - wire.enableReordering(); - - } - }, - cancelReorder() { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = false; - } - wire.disableReordering(); - - }, - updateOrderedItems() { - let table = document.getElementById(tableID); - let orderedRows = []; - for (let i = 1, row; row = table.rows[i]; i++) { - orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i }); - } - wire.storeReorder(orderedRows); - }, - setupEvenOddClasses() { - if (this.currentlyReorderingStatus === true) { - - let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0]; - let evenRowClassArray = []; - let oddRowClassArray = []; - - if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) { - evenRowClassArray = Array.from(tbody.rows[0].classList); - oddRowClassArray = Array.from(tbody.rows[1].classList); - this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); - this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - evenRowClassArray = [] - oddRowClassArray = [] - } - } - }, - init() { - this.$watch('currentlyReorderingStatus', value => this.setupEvenOddClasses()); - - } - })); + evenRowClassArray = [] + oddRowClassArray = [] + } + } + }, + init() { + } + })); } export default tableReorder; \ No newline at end of file diff --git a/resources/js/partials/reorder.min.js b/resources/js/partials/reorder.min.js index c0da29df6..84ad82e43 100644 --- a/resources/js/partials/reorder.min.js +++ b/resources/js/partials/reorder.min.js @@ -1 +1 @@ -function tableReorder(){Alpine.data("reorderFunction",(e,t,r)=>({dragging:!1,reorderEnabled:!1,sourceID:"",targetID:"",evenRowClasses:"",oddRowClasses:"",currentlyHighlightedElement:"",evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:e.get("defaultReorderColumn"),reorderStatus:e.get("reorderStatus"),currentlyReorderingStatus:e.entangle("currentlyReorderingStatus"),hideReorderColumnUnlessReorderingStatus:e.entangle("hideReorderColumnUnlessReorderingStatus"),reorderDisplayColumn:e.entangle("reorderDisplayColumn"),dragStart(e){this.sourceID=e.target.id,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",e.target.id),e.target.classList.add("laravel-livewire-tables-dragging")},dragOverEvent(e){"object"==typeof this.currentlyHighlightedElement&&this.currentlyHighlightedElement.classList.remove("laravel-livewire-tables-highlight-bottom","laravel-livewire-tables-highlight-top");let t=e.target.closest("tr");this.currentlyHighlightedElement=t,e.offsetYr.getBoundingClientRect().height/2?l.insertBefore(s,r.nextSibling):l.insertBefore(s,r),o!l.includes(e)),this.oddNotInEven=l.filter(e=>!r.includes(e)),r=[],l=[])}},init(){this.$watch("currentlyReorderingStatus",e=>this.setupEvenOddClasses())}}))}export default tableReorder; \ No newline at end of file +function a(){Alpine.data('reorderFunction',(wire,tableID,primaryKeyName)=>({dragging:!1,reorderEnabled:!1,sourceID:'',targetID:'',evenRowClasses:'',oddRowClasses:'',currentlyHighlightedElement:'',evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:wire.get('defaultReorderColumn'),reorderStatus:wire.get('reorderStatus'),currentlyReorderingStatus:wire.entangle('currentlyReorderingStatus'),hideReorderColumnUnlessReorderingStatus:wire.entangle('hideReorderColumnUnlessReorderingStatus'),reorderDisplayColumn:wire.entangle('reorderDisplayColumn'),dragStart(A){this.$nextTick(()=>this.setupEvenOddClasses());this.sourceID=A.target.id;A.dataTransfer.effectAllowed='move';A.dataTransfer.setData('text/plain',A.target.id);A.target.classList.add('laravel-livewire-tables-dragging')},dragOverEvent(_){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let b=_.target.closest('tr');this.currentlyHighlightedElement=b;_.offsetY<(b.getBoundingClientRect().height/2)?(b.classList.add('laravel-livewire-tables-highlight-top'),b.classList.remove('laravel-livewire-tables-highlight-bottom')):(b.classList.remove('laravel-livewire-tables-highlight-top'),b.classList.add('laravel-livewire-tables-highlight-bottom'))},dragLeaveEvent(B){B.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top')},dropEvent(c){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let C=c.target.closest('tr');let _c=c.target.closest('tr').parentNode;let d=document.getElementById(this.sourceID).closest('tr');d.classList.remove('laravel-livewire-table-dragging');let e=d.rowIndex;let f=C.rowIndex;let g=document.getElementById(tableID);c.offsetY>(C.getBoundingClientRect().height/2)?_c.insertBefore(d,C.nextSibling):_c.insertBefore(d,C);fthis.setupEvenOddClasses());if(this.currentlyReorderingStatus)wire.disableReordering();else{this.setupEvenOddClasses();this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!0);wire.enableReordering()}},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1);wire.disableReordering()},updateOrderedItems(){let _a=document.getElementById(tableID);let D=[];for(let i=1,_B;_B=_a.rows[i];i++)D.push({[primaryKeyName]:_B.getAttribute('rowpk'),[this.defaultReorderColumn]:i});wire.storeReorder(D)},setupEvenOddClasses(){if(this.evenNotInOdd.length===void 0||this.evenNotInOdd.length==0||this.oddNotInEven.length===void 0||this.oddNotInEven.length==0){let _A=document.getElementById(tableID).getElementsByTagName('tbody')[0];let E=[];let _C=[];(_A.rows[0]!==void 0&&_A.rows[1]!==void 0)&&(E=[..._A.rows[0].classList],_C=[..._A.rows[1].classList],this.evenNotInOdd=E.filter(aA=>!_C.includes(aA)),this.oddNotInEven=_C.filter(aB=>!E.includes(aB)),E=[],_C=[])}},init(){}}))}export default a; diff --git a/resources/js/partials/tableWrapper.js b/resources/js/partials/tableWrapper.js new file mode 100644 index 000000000..9bf1aaaeb --- /dev/null +++ b/resources/js/partials/tableWrapper.js @@ -0,0 +1,82 @@ +/*jshint esversion: 6 */ + +function tableWrapper() { + Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({ + listeners: [], + childElementOpen: false, + filtersOpen: wire.entangle('filterSlideDownDefaultVisible'), + paginationCurrentCount: wire.entangle('paginationCurrentCount'), + paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), + paginationCurrentItems: wire.entangle('paginationCurrentItems'), + selectedItems: wire.entangle('selected'), + selectAllStatus: wire.entangle('selectAll'), + delaySelectAll: wire.entangle('delaySelectAll'), + hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), + toggleSelectAll() { + if (!showBulkActionsAlpine) { + return; + } + + if (this.paginationTotalItemCount === this.selectedItems.length) { + this.clearSelected(); + this.selectAllStatus = false; + } else { + if (this.delaySelectAll) + { + this.setAllItemsSelected(); + } + else + { + this.setAllSelected(); + } + } + }, + setAllItemsSelected() { + if (!showBulkActionsAlpine) { + return; + } + this.selectAllStatus = true; + this.selectAllOnPage(); + }, + setAllSelected() { + if (!showBulkActionsAlpine) { + return; + } + if (this.delaySelectAll) + { + this.selectAllStatus = true; + this.selectAllOnPage(); + } + else + { + wire.setAllSelected(); + } + }, + clearSelected() { + if (!showBulkActionsAlpine) { + return; + } + this.selectAllStatus = false; + wire.clearSelected(); + }, + selectAllOnPage() { + if (!showBulkActionsAlpine) { + return; + } + + let tempSelectedItems = this.selectedItems; + const iterator = this.paginationCurrentItems.values(); + for (const value of iterator) { + tempSelectedItems.push(value.toString()); + } + this.selectedItems = [...new Set(tempSelectedItems)]; + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); + } + })); +} + +export default tableWrapper; \ No newline at end of file diff --git a/resources/js/partials/tableWrapper.min.js b/resources/js/partials/tableWrapper.min.js new file mode 100644 index 000000000..b89a83af6 --- /dev/null +++ b/resources/js/partials/tableWrapper.min.js @@ -0,0 +1 @@ +function a(){Alpine.data('tableWrapper',(wire,showBulkActionsAlpine)=>({listeners:[],childElementOpen:!1,filtersOpen:wire.entangle('filterSlideDownDefaultVisible'),paginationCurrentCount:wire.entangle('paginationCurrentCount'),paginationTotalItemCount:wire.entangle('paginationTotalItemCount'),paginationCurrentItems:wire.entangle('paginationCurrentItems'),selectedItems:wire.entangle('selected'),selectAllStatus:wire.entangle('selectAll'),delaySelectAll:wire.entangle('delaySelectAll'),hideBulkActionsWhenEmpty:wire.entangle('hideBulkActionsWhenEmpty'),toggleSelectAll(){if(!showBulkActionsAlpine)return;if(this.paginationTotalItemCount===this.selectedItems.length){this.clearSelected();this.selectAllStatus=!1}else this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected()},setAllItemsSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!0;this.selectAllOnPage()},setAllSelected(){if(!showBulkActionsAlpine)return;this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):(wire.setAllSelected())},clearSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!1;wire.clearSelected()},selectAllOnPage(){if(!showBulkActionsAlpine)return;let A=this.selectedItems;var b=this.paginationCurrentItems.values();for(const _ of b)A.push(`${_}`);this.selectedItems=[...new Set(A)]},destroy(){for(const B of this.listeners)B()}}))}export default a; diff --git a/resources/views/components/tools/filter-label.blade.php b/resources/views/components/tools/filter-label.blade.php index aca95ed29..6ac6196ae 100644 --- a/resources/views/components/tools/filter-label.blade.php +++ b/resources/views/components/tools/filter-label.blade.php @@ -1,5 +1,5 @@ @aware(['component', 'tableName']) -@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table', 'isTailwind' => false, 'isBootstrap' => false, 'isBootstrap4' => false, 'isBootstrap5' => false]) +@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table', 'isTailwind' => false, 'isBootstrap' => false, 'isBootstrap4' => false, 'isBootstrap5' => false, 'for' => null]) @php $customLabelAttributes = $filter->getFilterLabelAttributes(); @@ -8,7 +8,7 @@ @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition()) @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName, 'isTailwind' => $isTailwind, 'isBootstrap' => $isBootstrap, 'isBootstrap4' => $isBootstrap4, 'isBootstrap5' => $isBootstrap5, 'customLabelAttributes' => $customLabelAttributes]) @elseif(!$filter->hasCustomPosition()) -