9 lines
4.4 KiB
JavaScript
9 lines
4.4 KiB
JavaScript
/*!
|
|
App Connect Data Traversal
|
|
Version: 2.0.2
|
|
(c) 2024 Wappler.io
|
|
@build 2024-08-13 15:22:09
|
|
*/
|
|
dmx.versions.dmxDataTraversal="2.0.2",dmx.Component("data-view",{initialData:{data:[],page:1,pages:1,items:0,sort:{on:"",dir:"asc"},has:{first:!1,prev:!1,next:!1,last:!1}},attributes:{data:{type:[Array,Object],default:null},filter:{type:String,default:""},page:{type:Number,default:1},pagesize:{type:Number,default:0},sorton:{type:String,default:""},sortdir:{type:String,default:"asc",enum:["asc","desc"]}},methods:{select(t){this._updatePage(+t)},first(){this._updatePage(1)},prev(){this._updatePage(this.data.page-1)},next(){this._updatePage(this.data.page+1)},last(){this._updatePage(this.data.pages)},sort(t,e){this.props.sorton=t,this.props.sortdir=e&&"desc"==e.toLowerCase()?"desc":"asc"}},init(){this._data=[],this._items=[],this.props.data&&this._updateData(),this.props.filter?this._updateFilter():this._updateItems()},destroy(){this._filterEffect&&(this._filterEffect(),delete this._filterEffect)},performUpdate(t){t.has("filter")?this._updateFilter():t.has("data")?(this._updateData(),this._updateFilter()):t.has("sorton")||t.has("sortdir")?this._updateFilter():t.has("page")?this._updatePage(this.props.page):t.has("pagesize")&&this._updatePage(this.data.page)},_updateFilter(){this.destroy(),this.props.filter?this._filterEffect=dmx.effect((()=>{dmx.parse(this.props.filter,this),this._updateItems()})):this._updateItems()},_updateData(){this._data=dmx.repeatItems(this.props.data).map((t=>(delete(t=dmx.clone(t)).$value,delete t.$index,delete t.$key,t)))},_updateItems(){if(this._items=this._data.slice(0),this.props.filter&&(this._items=this._items.filter((t=>dmx.parse(this.props.filter,dmx.DataScope(t,this))))),this.props.sorton){const t=this.props.sorton,e=this.props.sortdir,a="desc"===e;this._items.sort(((e,s)=>a?"string"==typeof e[t]&&"string"==typeof s[t]?s[t].localeCompare(e[t]):e[t]>s[t]?-1:e[t]<s[t]?1:0:"string"==typeof e[t]&&"string"==typeof s[t]?e[t].localeCompare(s[t]):e[t]<s[t]?-1:e[t]>s[t]?1:0)),this.set("sort",{on:t,dir:e})}this.props.pagesize;const t=this._items.length;this.set({items:t}),this._updatePage(this.data.page)},_updatePage(t){const e=this.props.pagesize,a=e?Math.max(1,Math.ceil(this._items.length/e)):1,s=((t=t<1?1:t>a?a:t)-1)*e;this.set({page:t,pages:a,data:e?this._items.slice(s,s+e):this._items,has:{first:t>1,prev:t>1,next:t<a,last:t<a}})}}),dmx.Component("data-detail",{initialData:{data:[]},attributes:{data:{type:Array,default:null},key:{type:String,default:null},value:{type:[String,Number],default:null}},methods:{select(t){this.props.value=t,this._updateSelection()}},init(){this._updateData()},performUpdate(t){t.has("data")?this._updateData():t.has("value")&&this._updateSelection(!0)},_updateData(){this._data=[],this.props.data&&"object"==typeof this.props.data&&(Array.isArray(this.props.data)?this._data=this.props.data.map((t=>"object"==typeof t?t:{$value:t})):this._data=Object.entries(this.props.data).map((([t,e])=>({$key:t,$value:e})))),this._updateSelection()},_updateSelection(t){this.set("data",this._data.find((t=>t[this.props.key]===this.props.value))||null),t&&requestAnimationFrame((()=>{this.$node.querySelectorAll("form").forEach((t=>t.reset()))}))}}),dmx.Component("data-iterator",{initialData:{index:-1,value:null,has:{first:!1,prev:!1,next:!1,last:!1}},attributes:{data:{type:Array,default:null},index:{type:Number,default:0},loop:{type:Boolean,default:!1}},methods:{first(){this._data.length&&this._select(0)},prev(){this._data.length&&this._select(this.data.index-1)},next(){this._data.length&&this._select(this.data.index+1)},last(){this._data.length&&this._select(this._data.length-1)},random(){this._data.length&&this._select(Math.floor(this._data.length*Math.random()))},select(t){this._data.length&&this._select(t)}},init(){this._updateData()},performUpdate(t){t.has("data")?this._updateData():t.has("index")&&this._select(this.props.index)},_updateData(){this._data=[],this.props.data&&(Array.isArray(this.props.data)?this._data=this.props.data:console.warn(`Iterator ${this.name} expects an array as data but got ${typeof this.props.data}`),this._select(this.props.index))},_select(t){if(t=parseInt(t,10),this._data.length){const e=this._data.length-1;t<0&&(t=this.props.loop?e:0),t>e&&(t=this.props.loop?0:e),this.set({index:t,value:this._data[t],has:{first:t>0,prev:t>0,next:t<e,last:t<e}})}else this.set({index:-1,value:null,has:{first:!1,prev:!1,next:!1,last:!1}})}});
|
|
//# sourceMappingURL=dmxDataTraversal.js.map
|