TableAjax.php.TableAjax.js 133 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541
  1. if (!URI_BASE) throw "Missing URI_BASE"; // => Request::getPathUri()
  2. if (!URI_WPS) throw "Missing URI_WPS";
  3. if (!global.jQuery) throw "Missing jQuery"
  4. var $ = global.jQuery
  5. var RENDER_AS_REACT = Boolean(RENDER_AS_REACT) || false
  6. var DBG = DBG || false;
  7. var DBG1 = true;
  8. if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
  9. if (!global.p5VendorJs.Redux) throw "Missing p5 Vendor js lib: Redux";
  10. if (!global.createTableFiltersStateObject) throw "Missing createTableFiltersStateObject";
  11. if (!global.createTableSelectedStateObject) throw "Missing createTableSelectedStateObject";
  12. if (!global.createTableDataStateObject) throw "Missing createTableDataStateObject";
  13. var createReactClass = global.p5VendorJs.createReactClass;
  14. var h = global.p5VendorJs.React.createElement;
  15. var ReactDOM = global.p5VendorJs.ReactDOM;
  16. var Redux = global.p5VendorJs.Redux;
  17. var ReduxThunk = global.p5VendorJs.ReduxThunk;
  18. var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js
  19. var p5UI__FieldCheckboxSearch = global.p5VendorJs['p5UI__FieldCheckboxSearch'];
  20. var p5UI__FieldCheckboxLoading = global.p5VendorJs['p5UI__FieldCheckboxLoading'];
  21. var p5UI__TableAjaxWidget = global.p5VendorJs['p5UI__TableAjax'];
  22. var P5UI__TableAjaxSortableLabel = global.p5VendorJs['P5UI__TableAjaxSortableLabel'];
  23. var P5UI__TableAjaxRowCheckbox = global.p5VendorJs['P5UI__TableAjaxRowCheckbox'];
  24. var P5UI__TableAjaxSelectedInfo = global.p5VendorJs['P5UI__TableAjaxSelectedInfo'];
  25. if (!String.prototype.startsWith) { // TODO: to global js utils
  26. String.prototype.startsWith = function(search, pos) {
  27. return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
  28. };
  29. }
  30. p5WfsRefFilter = (function () { // convert GET param key ogc filter for ref
  31. return {
  32. parse: function (filterKey) {
  33. if (filterKey.startsWith('Ref_From_')) return { type: 'From', idInstance: filterKey.substr('Ref_From_'.length) };
  34. if (filterKey.startsWith('Ref_To_')) return { type: 'To', idInstance: filterKey.substr('Ref_To_'.length) };
  35. return null;
  36. }
  37. };
  38. })();
  39. function p5Utils__mapToQuery(map, callback) {
  40. var mapCallback = ('function' === typeof callback) ? callback : function (key) {
  41. return '' + key + '=' + encodeURIComponent(map.get(key));
  42. };
  43. return Array.from(map.keys()).sort()
  44. .map(mapCallback)
  45. .join('&')
  46. }
  47. function p5Utils__mapToQueryWithKeyPrefix(map, keyPrefix, callback) {
  48. var mapCallback = ('function' === typeof callback) ? callback : function (key) {
  49. return '' + (keyPrefix || '') + key + '=' + encodeURIComponent(map.get(key));
  50. };
  51. return p5Utils__mapToQuery(map, mapCallback)
  52. }
  53. function p5Utils__objectToQueryWithKeyPrefix(obj, prefix, callback) {
  54. if (!obj) return '';
  55. var mapCallback = ('function' === typeof callback) ? callback : function (key) {
  56. return '' + key + '=' + encodeURIComponent(obj[key]);
  57. };
  58. return Object.keys(obj).sort()
  59. .map(mapCallback)
  60. .join('&')
  61. }
  62. global['P5UI__TableAjaxSpecialFilter'] = createReactClass({
  63. // props.store: Redux store with state: { isLoading bool, selected array of strings }
  64. // props.actions: Redux store actions
  65. // props.name: PropTypes.string.isRequired
  66. // props.values: PropTypes.array.isRequired
  67. // props.icon: PropTypes.string.isRequired
  68. // props.label: PropTypes.string
  69. getStateFromStore: function () {
  70. var state = this.props.store.getState();
  71. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilter::getStateFromStore (name:'+this.props.name+')', { store: state, name: this.props.name, selected: state.specialFilter.get(this.props.name) });
  72. return {
  73. selected: state.specialFilter.get(this.props.name),
  74. };
  75. },
  76. getInitialState: function () {
  77. return this.getStateFromStore();
  78. },
  79. componentDidMount: function () {
  80. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilter::componentDidMount (name:'+this.props.name+')');
  81. this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
  82. },
  83. componentWillUnmount: function () {
  84. this.unsubscribe()
  85. },
  86. storeUpdated: function () {
  87. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilter::storeUpdated (name:'+this.props.name+')');
  88. this.setState(this.getStateFromStore())
  89. },
  90. shouldComponentUpdate: function (nextProps, nextState) {
  91. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilter::shouldComponentUpdate (name:'+this.props.name+')', { state: this.state, nextState});
  92. return (
  93. this.state.selected !== nextState.selected
  94. );
  95. },
  96. handleRemoveFilter: function (event) {
  97. this.props.store.dispatch( this.props.actions.setSpecialFilter(this.props.name, '') );
  98. },
  99. handleSetFilter: function (value) {
  100. this.props.store.dispatch( this.props.actions.setSpecialFilter(this.props.name, value) );
  101. },
  102. renderButton: function (buttonKey) {
  103. var option = buttonKey;
  104. var props = this.props.values[option];
  105. var value = props.value || '';
  106. var state = this.props.store.getState();
  107. DBG && console.warn('DBG:renderButton state', { state, props, value });
  108. var active = (value === this.state.selected);
  109. return h('button', {
  110. className: "btn btn-xs btn-default" + ( active ? " active" : "" ),
  111. onClick: function (event) {
  112. DBG && console.warn('DBG:renderButton click', { value });
  113. this.handleSetFilter(value);
  114. }.bind(this),
  115. }, option);
  116. },
  117. render: function () {
  118. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilter::render (name:'+this.props.name+')', { state: this.state, props: this.props });
  119. var label = this.props.label || this.props.name;
  120. return h('div', { className: "btn-group", style: { margin: '0 4px 0 0' } },
  121. [
  122. h('button', {
  123. className: "btn btn-xs btn-default",
  124. title: label,
  125. }, [
  126. h('i', { className: this.props.icon })
  127. ])
  128. ].concat(
  129. Object.keys(this.props.values).map(this.renderButton)
  130. ).concat(
  131. [
  132. h('button', {
  133. className: "btn btn-xs btn-default",
  134. title: "Kasuj filtr",
  135. disabled: !this.state.selected,
  136. onClick: this.handleRemoveFilter,
  137. style: { color: !this.state.selected ? '#bbb' : '#f00' }
  138. }, [
  139. h('i', { className: "glyphicon glyphicon-remove" })
  140. ])
  141. ]
  142. )
  143. );
  144. }
  145. });
  146. global['P5UI__TableAjaxSpecialFilterRelations'] = createReactClass({
  147. // props.store: Redux store with state: { isLoading bool, selected array of strings }
  148. // props.actions: Redux store actions
  149. // props.name: PropTypes.string.isRequired
  150. // props.values: PropTypes.array.isRequired
  151. // props.icon: PropTypes.string.isRequired
  152. // props.label: PropTypes.string
  153. // props.availableBackRefs: PropTypes.array.isRequired // array of objects { id, namespace, label }
  154. // props.availableChildRefs: PropTypes.array.isRequired // array of objects { id, namespace, label }
  155. getStateFromStore: function () {
  156. var state = this.props.store.getState();
  157. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::getStateFromStore (name:'+this.props.name+')', { store: state, name: this.props.name, selected: state.specialFilter.get(this.props.name) });
  158. var selected = []; // Array of { idInstance, primaryKey }
  159. state.specialFilter.forEach(function (value, key) {
  160. var refInfo = p5WfsRefFilter.parse(key); // null | { type: 'From' | 'To', idInstance: int }
  161. if (refInfo) {
  162. selected.push(Object.assign(refInfo, { primaryKey: value, filterKey: key }))
  163. }
  164. })
  165. DBG && console.log('TODO: DBG::P5UI__TableAjaxSpecialFilterRelations::getStateFromStore (name:'+this.props.name+')', { store: state, name: this.props.name, selected });
  166. return {
  167. selected: selected,
  168. };
  169. },
  170. getInitialState: function () {
  171. return this.getStateFromStore();
  172. },
  173. componentDidMount: function () {
  174. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::componentDidMount (name:'+this.props.name+')');
  175. this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
  176. },
  177. componentWillUnmount: function () {
  178. this.unsubscribe()
  179. },
  180. storeUpdated: function () {
  181. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::storeUpdated (name:'+this.props.name+')');
  182. this.setState(this.getStateFromStore())
  183. },
  184. shouldComponentUpdate: function (nextProps, nextState) {
  185. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::shouldComponentUpdate (name:'+this.props.name+')', { state: this.state, nextState});
  186. return (
  187. this.state.selected !== nextState.selected
  188. );
  189. },
  190. handleRemoveFilter: function (event) {
  191. this.props.store.dispatch( this.props.actions.setSpecialFilter(this.props.name, '') );
  192. },
  193. handleSetFilter: function (value) {
  194. this.props.store.dispatch( this.props.actions.setSpecialFilter(this.props.name, value) );
  195. },
  196. handleCreate: function () {
  197. // TODO: save swal reference to variable to avoid open twice?
  198. var inputOptions = {};
  199. if (this.props.availableBackRefs) this.props.availableBackRefs.forEach(function (instanceInfo) {
  200. inputOptions[ 'From_' + instanceInfo.id ] = "z " + instanceInfo.label || instanceInfo.namespace;
  201. });
  202. if (this.props.availableChildRefs) this.props.availableChildRefs.forEach(function (instanceInfo) {
  203. inputOptions[ 'To_' + instanceInfo.id ] = "do " + instanceInfo.label || instanceInfo.namespace;
  204. });
  205. swal({
  206. title: "Wybierz rodzaj relacji",
  207. input: 'select',
  208. inputOptions: inputOptions,
  209. inputPlaceholder: "Wybierz",
  210. showCancelButton: true,
  211. cancelButtonText: "Anuluj",
  212. animation: false,
  213. inputValidator: function (value) {
  214. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::inputValidator', value);
  215. return new Promise(function (resolve) {
  216. if (!value) {
  217. resolve('Nie wybrano obiektu');
  218. } else {
  219. resolve();
  220. }
  221. });
  222. },
  223. }).then(this.handleInstanceCreate) // args: { value: ... }
  224. },
  225. handleInstanceCreate: function (result) {
  226. if (!result.value) return; // cancel when result = { dismiss: "cancel" }
  227. var idInstance = '';
  228. var type = '';
  229. var instanceLabel = '';
  230. if ('From_' === result.value.substr(0, 'From_'.length)) {
  231. type = 'From';
  232. idInstance = result.value.substr('From_'.length);
  233. if (this.props.availableBackRefs) this.props.availableBackRefs.forEach(function (instanceInfo) {
  234. if (idInstance == instanceInfo.id) instanceLabel = instanceInfo.label || instanceInfo.namespace;
  235. });
  236. }
  237. else if ('To_' === result.value.substr(0, 'To_'.length)) {
  238. type = 'To';
  239. idInstance = result.value.substr('To_'.length);
  240. if (this.props.availableChildRefs) this.props.availableChildRefs.forEach(function (instanceInfo) {
  241. if (idInstance == instanceInfo.id) instanceLabel = instanceInfo.label || instanceInfo.namespace;
  242. });
  243. }
  244. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::handleInstanceCreate (name:'+this.props.name+') selected instance('+idInstance+')', { result: result, state: this.state, props: this.props, availableBackRefs: this.props.availableBackRefs });
  245. swal({
  246. title: "Wybierz obiekt",
  247. html: (instanceLabel) ? "typu: " + instanceLabel : "",
  248. input: 'text',
  249. inputPlaceholder: "Wybierz obiekt",
  250. showCancelButton: true,
  251. cancelButtonText: "Anuluj",
  252. animation: false,
  253. inputValidator: function (value) {
  254. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::inputValidator', value);
  255. return new Promise(function (resolve) {
  256. if (!value) {
  257. resolve('Nie podano obiektu');
  258. } else {
  259. resolve();
  260. }
  261. });
  262. },
  263. preConfirm: function (value) {
  264. return {
  265. type: type,
  266. idInstance: idInstance,
  267. primaryKey: value,
  268. }
  269. }
  270. }).then(this.handleInstancePrimaryKeySelected) // args: { value: { idInstance, primaryKey } }
  271. },
  272. handleInstancePrimaryKeySelected: function (result) {
  273. if (!result.value) return; // cancel when result = { dismiss: "cancel" }
  274. var type = result.value.type;
  275. var idInstance = result.value.idInstance;
  276. var primaryKey = result.value.primaryKey;
  277. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::handleInstancePrimaryKeySelected (name:'+this.props.name+') selected featureID('+idInstance+'.'+primaryKey+')', { result: result, state: this.state, props: this.props, availableBackRefs: this.props.availableBackRefs });
  278. this.props.store.dispatch( this.props.actions.setSpecialFilter('Ref_' + type + '_' + idInstance, primaryKey) );
  279. },
  280. renderButton: function (buttonKey) {
  281. var option = buttonKey;
  282. var props = this.props.values[option];
  283. var value = props.value || '';
  284. var state = this.props.store.getState();
  285. DBG && console.warn('DBG:renderButton state', { state, props, value });
  286. var active = (value === this.state.selected);
  287. return h('button', {
  288. className: "btn btn-xs btn-default" + ( active ? " active" : "" ),
  289. onClick: function (event) {
  290. DBG && console.warn('DBG:renderButton click', { value });
  291. this.handleSetFilter(value);
  292. }.bind(this),
  293. }, option);
  294. },
  295. renderLabel: function () {
  296. var label = this.props.label || this.props.name;
  297. return h('button', {
  298. className: "btn btn-xs btn-default",
  299. title: label,
  300. style: {
  301. color: '#31708f',
  302. backgroundColor: '#d9edf7',
  303. }
  304. }, [
  305. h('i', { className: this.props.icon }),
  306. " Filtr relacji: ",
  307. ]);
  308. },
  309. renderListSelected: function () { // @return array of react nodes
  310. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::this.props.availableBackRefs (name:'+this.props.name+')', { state: this.state, props: this.props, availableBackRefs: this.props.availableBackRefs });
  311. return this.state.selected.map(this.renderSelected);
  312. },
  313. renderSelected: function (selected) { // @selected: { type: 'From' | 'To', filterKey, idInstance, primaryKey }, @return react node
  314. var filterKey = selected.filterKey;
  315. var type = selected.type; // From | To - backRef | childRef
  316. var idInstance = selected.idInstance;
  317. var primaryKey = selected.primaryKey;
  318. var namespace = idInstance;
  319. var label = "" + idInstance + "." + primaryKey + "";
  320. if ('From' === type) {
  321. var foundInstanceInfo = this.props.availableBackRefs.filter(function (instanceInfo) {
  322. return ( parseInt(idInstance) === parseInt(instanceInfo.id) );
  323. });
  324. if (foundInstanceInfo.length > 0) label = 'z ' + foundInstanceInfo[0].label + "." + primaryKey;
  325. if (foundInstanceInfo.length > 0) namespace = foundInstanceInfo[0].namespace;
  326. } else if ('To' === type) {
  327. var foundInstanceInfo = this.props.availableChildRefs.filter(function (instanceInfo) {
  328. return ( parseInt(idInstance) === parseInt(instanceInfo.id) );
  329. });
  330. if (foundInstanceInfo.length > 0) label = 'do ' + foundInstanceInfo[0].label + "." + primaryKey;
  331. if (foundInstanceInfo.length > 0) namespace = foundInstanceInfo[0].namespace;
  332. }
  333. return h(P5UI__TableAjaxSpecialFilterRelationFrom, {
  334. filterKey: filterKey,
  335. label: label,
  336. namespace: namespace,
  337. primaryKey: primaryKey,
  338. store: this.props.store,
  339. actions: this.props.actions,
  340. });
  341. },
  342. renderBackRef: function () { // @return react node - button with dropdown to select primaryKey from parent instance + remove button if selected
  343. return null;
  344. },
  345. renderCreateButton: function () {
  346. return h('button', {
  347. className: "btn btn-xs btn-default",
  348. title: "Dodaj nowy filtr relacji",
  349. onClick: this.handleCreate,
  350. }, [
  351. h('i', { className: 'glyphicon glyphicon-plus' })
  352. ]);
  353. },
  354. render: function () {
  355. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelations::render (name:'+this.props.name+')', { state: this.state, props: this.props });
  356. return h('div', { className: "btn-group", style: { margin: '0 4px 0 0' } },
  357. [
  358. this.renderLabel(),
  359. ].concat(
  360. this.renderListSelected()
  361. ).concat([
  362. this.renderCreateButton()
  363. ])
  364. // Object.keys(this.props.values).map(this.renderButton)
  365. // ).concat(
  366. // [
  367. // h('button', {
  368. // className: "btn btn-xs btn-default",
  369. // title: "Kasuj filtr",
  370. // disabled: !this.state.selected,
  371. // onClick: this.handleRemoveFilter,
  372. // style: { color: !this.state.selected ? '#bbb' : '#f00' }
  373. // }, [
  374. // h('i', { className: "glyphicon glyphicon-remove" })
  375. // ])
  376. // ]
  377. );
  378. }
  379. });
  380. global['P5UI__TableAjaxSpecialFilterRelationFrom'] = createReactClass({
  381. handleRemoveFilter: function (event) {
  382. this.props.store.dispatch( this.props.actions.setSpecialFilter(this.props.filterKey, '') );
  383. },
  384. render: function () {
  385. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilterRelationFrom::render (filterKey:'+this.props.filterKey+')', { state: this.state, props: this.props });
  386. var refInfo = p5WfsRefFilter.parse(this.props.filterKey); // null | { type: 'From' | 'To', idInstance: int }
  387. return h('button', {
  388. className: "btn btn-xs btn-default active",
  389. title: "Powiązane" + ( 'From' === refInfo.type ? " z " : " do " ) + this.props.namespace + " " + this.props.primaryKey,
  390. // onClick: this.handleUpdate, // TODO: paste param
  391. }, [
  392. this.props.label,
  393. h('i', {
  394. className: 'glyphicon glyphicon-remove',
  395. style: {
  396. color: '#f00',
  397. opacity: 0.5,
  398. marginLeft: "3px",
  399. },
  400. onClick: this.handleRemoveFilter,
  401. })
  402. ]);
  403. }
  404. });
  405. global['P5UI__TableAjaxSpecialFilters'] = createReactClass({
  406. // props.store: Redux store with state: { isLoading bool, selected array of strings }
  407. // props.actions: Redux store actions
  408. // props.namespace: PropTypes.string.isRequired
  409. // props.specialFilters: PropTypes.object.isRequired
  410. // props.specialFilters:
  411. // [Msgs] => stdClass Object
  412. // [icon] => glyphicon glyphicon-envelope
  413. // [label] => Wiadomości
  414. // [btns] => Array:
  415. // [WIADOMOSCI] => stdClass Object
  416. // [value] => HAS_MSGS
  417. // [NOWE] => stdClass Object
  418. // [value] => NEW_MSGS
  419. // [BRAK_WIAD.] => stdClass Object
  420. // [value] => NO_MSGS
  421. // [Status] => stdClass Object
  422. // [icon] => glyphicon glyphicon-question-sign
  423. // [btns] => Array:
  424. // [OCZEKUJACY] => stdClass Object
  425. // [value] => WAITING
  426. // [AKTYWNI] => stdClass Object
  427. // [value] => AKTYWNI
  428. // handleClick: function (event) {
  429. // DBG && console.log('DBG::P5UI__TableAjaxSpecialFilters::handleChange (ns:'+this.props.namespace+')', { checked: checked });
  430. // this.props.store.dispatch( this.props.actions.unselectAll( this.props.namespace ) )
  431. // },
  432. renderSpecialFilter: function (key) {
  433. var props = this.props.specialFilters[key];
  434. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilters::renderSpecialFilter (ns:'+this.props.namespace+')', { key: key, props, state: this.state });
  435. if ('RELATIONS' === props.type) {
  436. DBG && console.warn('DBG::P5UI__TableAjaxSpecialFilters::renderSpecialFilter TODO render RELATIONS filter (ns:'+this.props.namespace+')', { props, state: this.state });
  437. return h(P5UI__TableAjaxSpecialFilterRelations, {
  438. store: this.props.store,
  439. actions: this.props.actions,
  440. name: key,
  441. icon: props.icon,
  442. label: props.label,
  443. availableBackRefs: props.availableBackRefs,
  444. availableChildRefs: props.availableChildRefs,
  445. });
  446. }
  447. return h(P5UI__TableAjaxSpecialFilter, {
  448. store: this.props.store,
  449. actions: this.props.actions,
  450. name: key,
  451. icon: props.icon,
  452. label: props.label,
  453. values: props.btns,
  454. });
  455. },
  456. render: function () {
  457. DBG && console.log('DBG::P5UI__TableAjaxSpecialFilters::render (ns:'+this.props.namespace+')', { props: this.props, state: this.state });
  458. return h('div', {}, Object.keys(this.props.specialFilters).map(this.renderSpecialFilter))
  459. }
  460. });
  461. global['P5UI__TableAjaxFieldCheckboxSearch'] = createReactClass({
  462. // props.namespace: PropTypes.string.isRequired
  463. // props.fieldName: PropTypes.string.isRequired
  464. // props.store: Redux store with state: { isLoading bool, selected array of strings }
  465. // props.actions: Redux store actions
  466. getStateFromStore: function () {
  467. var state = this.props.store.getState();
  468. // selected = || 2 // 0 - unchecked, 1 - checked, 2 - indeterminate
  469. var selected = '';
  470. if (state.filter.has(this.props.fieldName)) {
  471. selected = state.filter.get(this.props.fieldName)
  472. }
  473. return {
  474. disabled: this.props.disabled ? true : false,
  475. selected: selected,
  476. active: ('YES' === selected || 'NO' === selected),
  477. // isLoading: (-1 !== state.loading.indexOf(this.props.fieldName)),
  478. // checked: (-1 !== state.selected.indexOf(this.props.fieldName))
  479. };
  480. },
  481. getInitialState: function() {
  482. return this.getStateFromStore();
  483. },
  484. componentDidMount: function () {
  485. DBG && console.log('DBG::P5UI__TableAjaxFieldCheckboxSearch::componentDidMount (f:'+this.props.fieldName+')');
  486. this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
  487. },
  488. componentWillUnmount: function () {
  489. this.unsubscribe()
  490. },
  491. storeUpdated: function () {
  492. DBG && console.log('DBG::P5UI__TableAjaxFieldCheckboxSearch::storeUpdated (f:'+this.props.fieldName+')', this.getStateFromStore());
  493. this.setState(this.getStateFromStore())
  494. },
  495. shouldComponentUpdate: function (nextProps, nextState) {
  496. DBG && console.log('DBG::P5UI__TableAjaxFieldCheckboxSearch::shouldComponentUpdate (f:'+this.props.fieldName+')', { state: this.state, nextState});
  497. return (
  498. this.state.disabled !== nextState.disabled
  499. || this.state.selected !== nextState.selected
  500. );
  501. },
  502. handleChange: function (selected) { // selected: 0 - not checked, 1 - checked, 2 - indeterminate
  503. DBG && console.log('DBG::P5UI__TableAjaxFieldCheckboxSearch::handleChange (f:'+this.props.fieldName+')', { selected: selected, state: this.state });
  504. if (0 === selected) {
  505. this.props.store.dispatch( this.props.actions.setFilter(this.props.fieldName, 'NO') );
  506. } else if (1 === selected) {
  507. this.props.store.dispatch( this.props.actions.setFilter(this.props.fieldName, 'YES') );
  508. } else if (2 === selected) {
  509. this.props.store.dispatch( this.props.actions.setFilter(this.props.fieldName, '') );
  510. }
  511. },
  512. mapSelectedToValue: function (selected) {
  513. switch (selected) {
  514. case 'YES': return 1;
  515. case 'NO': return 0;
  516. default: return 2;
  517. }
  518. },
  519. render: function () {
  520. DBG && console.log('DBG::P5UI__TableAjaxFieldCheckboxSearch::render (f:'+this.props.fieldName+')', { props: this.props, state: this.state, state_sel: this.state.selected, sel: this.mapSelectedToValue(this.state.selected) });
  521. return h('div',
  522. {
  523. style: {
  524. boxSizing: 'border-box', width: '100%', height: '21px', padding: '0 5px', borderTop: 0,
  525. borderBottom: '2px solid ' + ( this.state.active ? '#00ACCC' : 'transparent' ),
  526. },
  527. }, [
  528. h(p5UI__FieldCheckboxSearch, {
  529. size: 19,
  530. color: '#888',
  531. staticLabel: ["Pokaż:", "wszystkie,", "wybrane,", "niewybrane"].join("\n"),
  532. fieldName: this.props.fieldName,
  533. selected: this.mapSelectedToValue(this.state.selected),
  534. onChange: this.handleChange
  535. // checked: this.state.checked,
  536. // disabled: this.state.disabled,
  537. // isLoading: this.state.isLoading,
  538. }),
  539. ]
  540. );
  541. }
  542. });
  543. global['p5UI__FieldInputFilterSearch'] = createReactClass({
  544. // props.fieldName: PropTypes.string.isRequired
  545. // props.type: PropTypes.string.isRequired
  546. // props.store: Redux store with state: { }
  547. // props.actions: Redux store actions
  548. // props.disabled: PropTypes.bool
  549. // props.lagacyProps: PropTypes.object
  550. getStateFromStore: function () {
  551. var storeState = this.props.store.getState();
  552. return {
  553. value: storeState.filter.get(this.props.fieldName) || '',
  554. active: storeState.filter.has(this.props.fieldName)
  555. };
  556. },
  557. getInitialState: function() {
  558. return this.getStateFromStore();
  559. },
  560. componentDidMount: function () {
  561. DBG && console.log('DBG::p5UI__FieldInputFilterSearch::componentDidMount (f:'+this.props.fieldName+')');
  562. this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
  563. },
  564. componentWillUnmount: function () {
  565. this.unsubscribe()
  566. },
  567. storeUpdated: function () {
  568. DBG && console.log('DBG::p5UI__FieldInputFilterSearch::storeUpdated (f:'+this.props.fieldName+')', this.getStateFromStore());
  569. this.setState(this.getStateFromStore())
  570. },
  571. shouldComponentUpdate: function (nextProps, nextState) {
  572. DBG && console.log('DBG::p5UI__FieldInputFilterSearch::shouldComponentUpdate (f:'+this.props.fieldName+')', { state: this.state, nextState});
  573. return (
  574. this.state.value !== nextState.value
  575. || this.state.active !== nextState.active
  576. );
  577. },
  578. handleChange: function (event) { // handleChange: function (event) {
  579. var value = event.target.value;
  580. DBG && console.log('DBG::p5UI__FieldInputFilterSearch::handleChange (f:'+this.props.fieldName+')', { value });
  581. this.setState({ value: value });
  582. this.props.onChange(this.props.fieldName, value);
  583. // this.props.store.dispatch( this.props.actions.toggle( this.props.namespace, this.props.primaryKey, checked ) )
  584. },
  585. render: function () {
  586. DBG1 && console.log('DBG::p5UI__FieldInputFilterSearch::render (f:'+this.props.fieldName+',v:'+this.state.value+')', { props: this.props, state: this.state });
  587. switch (this.props.type) {
  588. case "number":
  589. case "date":
  590. case "bool":
  591. case "p5:price":
  592. case "p5:www_link":
  593. case "p5:string":
  594. case "string": return this.renderInput();
  595. case "special": return this.renderEmpty();
  596. case "simpleLink": return this.renderEmpty();
  597. case "geom": return this.renderInput();
  598. case "none": return this.renderEmpty();
  599. case "ref": return this.renderEmpty();
  600. default: return this.renderEmpty();
  601. }
  602. },
  603. renderEmpty: function () {
  604. return h('div', {}, " ");
  605. },
  606. renderInput: function () {
  607. return h('input', {
  608. className: "filter", // + ( this.state.active ? " filter-active" : "" ),
  609. placeholder: !this.props.disabled ? "%" : "",
  610. type: "text",
  611. disabled: this.props.disabled || false,
  612. style: {
  613. boxSizing: 'border-box', width: '100%', height: '21px', borderTop: 0,
  614. borderBottom: '2px solid ' + ( this.state.active ? '#00ACCC' : 'transparent' ),
  615. },
  616. value: this.state.value,
  617. onChange: this.handleChange
  618. });
  619. }
  620. });
  621. global['p5UI__TableAjaxClearAllFilters'] = createReactClass({
  622. // props.store: Redux store with state: { }
  623. // props.actions: Redux store actions
  624. getStateFromStore: function () {
  625. var storeState = this.props.store.getState();
  626. return {
  627. isFiltersEmpty: ( 0 === storeState.filter.size && 0 === storeState.specialFilter.size )
  628. };
  629. },
  630. getInitialState: function() {
  631. return this.getStateFromStore();
  632. },
  633. componentDidMount: function () {
  634. DBG && console.log('DBG::p5UI__TableAjaxClearAllFilters::componentDidMount (f:'+this.props.fieldName+')');
  635. this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
  636. },
  637. componentWillUnmount: function () {
  638. this.unsubscribe()
  639. },
  640. storeUpdated: function () {
  641. DBG && console.log('DBG::p5UI__TableAjaxClearAllFilters::storeUpdated (f:'+this.props.fieldName+')', this.getStateFromStore());
  642. this.setState(this.getStateFromStore())
  643. },
  644. // shouldComponentUpdate: function (nextProps, nextState) {
  645. // DBG && console.log('DBG::p5UI__TableAjaxClearAllFilters::shouldComponentUpdate (f:'+this.props.fieldName+')', { state: this.state, nextState});
  646. // return (
  647. // this.state.value !== nextState.value
  648. // || this.state.active !== nextState.active
  649. // );
  650. // },
  651. handleClick: function (event) {
  652. DBG && console.log('DBG::p5UI__TableAjaxClearAllFilters::handleClick (clearAllFilters)');
  653. this.props.store.dispatch( this.props.actions.clearAllFilters() )
  654. },
  655. render: function () {
  656. DBG && console.log('DBG::p5UI__TableAjaxClearAllFilters::render (clearAllFilters)', { props: this.props, state: this.state });
  657. return h('i', {
  658. title: this.props.title || "Kasuj wszystkie filtry",
  659. className: "glyphicon glyphicon-remove",
  660. style: Object.assign(
  661. {
  662. opacity: '0.5',
  663. lineHeight: '20px',
  664. padding: '0 3px',
  665. cursor: 'pointer',
  666. },
  667. this.state.isFiltersEmpty ? { color: '#777' } : { color: '#f00' }
  668. ),
  669. onClick: this.handleClick
  670. });
  671. }
  672. });
  673. var TableAjax = function() {
  674. var priv = {}; //private api
  675. var publ = {}; //public api
  676. priv.options = {};
  677. var defaults = {
  678. namespace: '',
  679. url: '', //webservice url
  680. urlPost: false, //use POST instead of GET
  681. selectAllByFilterUrl: '',
  682. getCsvTheGeomAjaxUrl: '',
  683. removeTheGeomAjaxUrl: '',
  684. moreFunctionsCellAjaxUrl: '',
  685. editInlineSaveUrl: '',
  686. theGeomSaveUrl: '',
  687. pageSizeSave: '',
  688. hiddenColsSaveUrl: '',
  689. editInlineUrl: '',
  690. addUserTableFilterAjaxUrl: '',
  691. rmUserTableFilterAjaxUrl: '',
  692. hasAdditionalLayers: 0,
  693. labelHtml: '',
  694. debug: false, //prints debug info to console
  695. filter: false, //show filter row
  696. filterInit: false,// init filters data
  697. forceFilterInit: false,
  698. columnPicker: false, //show columnpicker
  699. checkboxes: false, //show body checkboxes
  700. actions: '', //holds action links
  701. pageSize: 10, //current pagesize
  702. pageSizes: [10, 20, 30, 40, 50, 'All'], //available pagesizes
  703. hidePagerOnEmpty: false, //removes pager if no rows
  704. types: { //type specific options
  705. string: {},
  706. number: {},
  707. bool: {},
  708. date: {}
  709. },
  710. rowFunctions: false,
  711. tblFunctions: false,
  712. specialFilterFunctions: false,
  713. filtersClean: false,
  714. router: false,
  715. longDesc: false,
  716. exportFields: [],
  717. mapEditor: false, // mapEditor visible or not
  718. mapEditorContainer: 'window' // 'window' or 'dock'
  719. };
  720. var _reactUITableNode; // TODO: react table node
  721. var _uiNodeCont; // container holding table
  722. var _uiNodeSelectedInfo;
  723. var _uiNodeSpecialFilters;
  724. var _uiNodeFooterInfo;
  725. var _uiNode$Table; // the table node
  726. var _head; // table header
  727. var _headSort; // table header sorting row
  728. var _headFilter; // table header columns filter row
  729. var _headSpecialFilter; // table header special filter row
  730. var _bodyNode; // table body
  731. var _body; // TODO: table body need render?
  732. var _foot; // table footer
  733. var _inlineEditBox; // inline edit box with form
  734. var _popoverCell; // inline popover cell
  735. var _popoverCellCurrent; // inline popover cell
  736. var _popoverCellAjaxXhr;
  737. var _mapEditor; // map editor node
  738. var _mapEditorWrap; // map editor wrapper node
  739. var _mapEditorDialog; // map editor jquery ui dialog node
  740. var _state = {};// state - to replace variables below (date, ...)
  741. var _data; //columns and rows
  742. var _totalPages; // total pages
  743. var _currDpOp; // clicked datetimepicker operator
  744. var _filterTimeout; // timer for delayed filtering
  745. var _checkToggleChecked = false; // check-all toggle state
  746. var _exportFieldsSelect = {};
  747. var _tableWidth;
  748. var _fieldWidgets = {};
  749. /*
  750. initialize the plugin.
  751. */
  752. priv.init = function() {
  753. _uiNodeCont = priv.options.id; // <div id="{_htmlID}" style="..."><table class="AjaxTable...
  754. _state = {};// init state
  755. _state.page = 1;
  756. _state.specialFilters = {};
  757. { // init events
  758. jQuery(_uiNodeCont).on('TableAjax:render', priv.onRender);
  759. jQuery(window).on('resize', priv.onWindowResize)
  760. }
  761. priv.initialRender();// set up _uiNode$...
  762. priv.options.types.string = ((priv.options.types || {}).string || {});
  763. priv.options.types.number = ((priv.options.types || {}).number || {});
  764. priv.options.types.bool = ((priv.options.types || {}).bool || {});
  765. priv.options.types.date = ((priv.options.types || {}).date || {});
  766. if (priv.options.mapEditorContainer != 'dock'
  767. && priv.options.mapEditorContainer != 'window') {
  768. priv.options.mapEditorContainer = 'window';
  769. }
  770. if (priv.options.exportFields) {
  771. $.each(priv.options.exportFields, function(ind, col) {
  772. _exportFieldsSelect[col] = true;
  773. });
  774. }
  775. _state._forceFilterQuery = p5Utils__objectToQueryWithKeyPrefix(priv.options.forceFilterInit, 'f_')
  776. var fetchDataPromise = (function (props) {
  777. var props = props || {};
  778. return function (namespace, filterParams) {
  779. var urlAdd = '';
  780. DBG && console.log('DBG: fetchDataPromise', props.url)
  781. return window.fetch(props.url + urlAdd, {
  782. method: 'GET', // priv.options.urlPost ? 'POST' : 'GET',
  783. credentials: 'same-origin',// add cookies
  784. }).then(function (response) {
  785. // TODO: handle parse json error
  786. return response.json()
  787. }).then(function (responseJson) {
  788. // if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:loadPage: request finished, data:', data);
  789. // // props.notify(data);
  790. if ('success' !== responseJson.type) throw responseJson.msg || "Wystąpił problem podczas pobierania danych";
  791. // state = {data: {}};
  792. // state.data.cols = data.cols || {};
  793. // state.data.rows = data.rows || [];
  794. // state.data.total = data.total || 0;
  795. // state.data.primaryKey = data.primaryKey || 'ID';
  796. // state.page = data.page || 0;
  797. // state.pageSize = data.pageSize || priv.options.pageSize;
  798. // state.filters = data.filters || {};
  799. // DBG && console.log('DBG::loadPage... - FETCH_DATA END priv.setState(state);', { state });
  800. // priv.setState(state);
  801. // _uiNode$Table.parent().parent().removeClass('AjaxTable-loading');
  802. // } else {
  803. // props.notify(data);
  804. // props.showFailFetchDataMsg();
  805. // }
  806. return responseJson;
  807. }).then(function (responseData) {
  808. DBG && console.log('DBG: fetchDataPromise responseData', { responseData })
  809. var colsOrder = []; // responseData.cols.index
  810. return {
  811. rawReponse: responseData,
  812. colsOrder: colsOrder,
  813. rows: responseData.rows,
  814. }
  815. }).catch(function (err) {
  816. props.notify({ type: 'error', msg: ''+err });
  817. props.showFailFetchDataMsg();
  818. });
  819. };
  820. })({
  821. url: priv.options.url,
  822. showFailFetchDataMsg: priv.showFailFetchDataMsg.bind(priv),
  823. notify: p5UI__notifyAjaxCallback,
  824. });
  825. var stateObjectTableData = createTableDataStateObject({}, fetchDataPromise);
  826. DBG && console.log('DBG: stateObjectTableData', stateObjectTableData);
  827. priv.options.tableDataStore = stateObjectTableData.store;
  828. priv.options.tableDataActions = stateObjectTableData.actions;
  829. var stateObjectFilter = createTableFiltersStateObject(priv.options.filterInit || {});
  830. priv.options.filterStore = stateObjectFilter.store;
  831. priv.options.filterActions = stateObjectFilter.actions;
  832. priv.filter_mapStoreToState = function (curFilterState) {
  833. // var curFilterState = store.getState()
  834. return {
  835. _filterQuery: p5Utils__mapToQueryWithKeyPrefix(curFilterState.filter, 'f_'),
  836. _specialFilterQuery: p5Utils__mapToQueryWithKeyPrefix(curFilterState.specialFilter, 'sf_'),
  837. _currSortCol: curFilterState.currSortCol,
  838. _currSortFlip: curFilterState.currSortFlip
  839. };
  840. };
  841. priv.filter_getFilterQuery = function () {
  842. return [
  843. _state._filterQuery,
  844. _state._specialFilterQuery,
  845. _state._forceFilterQuery
  846. ].filter(Boolean).join('&');
  847. };
  848. priv.filter_getFullFilterQuery = function () {
  849. return [
  850. 'currSortCol=' + ( _state._currSortCol || ''),
  851. 'currSortFlip=' + ( _state._currSortFlip ? "desc" : "asc" ),
  852. _state._filterQuery,
  853. _state._specialFilterQuery,
  854. _state._forceFilterQuery
  855. ].filter(Boolean).join('&');
  856. };
  857. _state = Object.assign(_state, priv.filter_mapStoreToState(priv.options.filterStore.getState()));
  858. DBG && console.log('TODO:INIT: ', { _state });
  859. priv.options.filterStore.subscribe(function () {
  860. var curState = priv.filter_mapStoreToState(priv.options.filterStore.getState());
  861. var needFetchData = (
  862. curState._filterQuery !== _state._filterQuery
  863. || curState._specialFilterQuery !== _state._specialFilterQuery
  864. || curState._currSortCol !== _state._currSortCol
  865. || curState._currSortFlip !== _state._currSortFlip
  866. );
  867. DBG && console.log('TODO:filtersUpdated - FETCH_DATA: ', { _state, curState });
  868. _state._filterQuery = curState._filterQuery;
  869. _state._specialFilterQuery = curState._specialFilterQuery;
  870. _state._currSortCol = curState._currSortCol;
  871. _state._currSortFlip = curState._currSortFlip;
  872. if (needFetchData) {
  873. DBG && console.log('TODO:filtersUpdated - FETCH_DATA: ', { curState });
  874. priv.loadPage(0)
  875. }
  876. })
  877. if (priv.options.checkboxes) {
  878. var stateObjectSelected = createTableSelectedStateObject(priv.options.checkboxIdContext);
  879. priv.options.selectedStore = stateObjectSelected.store;
  880. priv.options.selectedActions = stateObjectSelected.actions;
  881. if (_uiNodeSelectedInfo) { // must run after priv.initialRender(); - _uiNodeSelectedInfo must exists
  882. ReactDOM.render(
  883. h(P5UI__TableAjaxSelectedInfo, {
  884. namespace: priv.options.namespace,
  885. store: priv.options.selectedStore,
  886. actions: priv.options.selectedActions,
  887. onSelectAllMatching: function () {
  888. // TODO: priv.filter_mapStoreToState(priv.options.filterStore.getState())
  889. var filterQuery = priv.filter_getFilterQuery();
  890. // var filterQuery = '';
  891. // filterQuery += (_state._filterQuery) ? "&" + _state._filterQuery : "";
  892. // filterQuery += (_state._specialFilterQuery) ? "&" + _state._specialFilterQuery : "";
  893. // filterQuery += (_state._forceFilterQuery) ? "&" + _state._forceFilterQuery : "";
  894. priv.options.selectedStore.dispatch( priv.options.selectedActions.selectAllMatchingFilter(priv.options.namespace, filterQuery) );
  895. }
  896. }),
  897. _uiNodeSelectedInfo
  898. );
  899. }
  900. }
  901. priv.initialReactRender(RENDER_AS_REACT); // set up _reactUITableNode, require stores created
  902. // TODO: priv.options.router.init();
  903. // priv.options.router.getLinkOnclickFunction(task, args);
  904. if (location.hash) {
  905. priv.options.router()
  906. } else {
  907. priv.update(priv.options.router)
  908. }
  909. if (typeof priv.options.router == "function") {
  910. $(window).bind('hashchange', function() {
  911. priv.options.router();
  912. });
  913. }
  914. };
  915. priv.onRender = function(e) {
  916. var renderUIParts = [];
  917. if (arguments.length > 1) {
  918. for (var i=1; i<arguments.length; i++) {
  919. renderUIParts.push( arguments[i] );
  920. }
  921. }
  922. if (priv.options.debug || DBG) console.log('onRender.arguments:', arguments.length, arguments, 'e:', e);
  923. DBG && console.log('DBG::onRender: ', { renderUIParts });
  924. // console.log("priv.onRender arguments:", arguments);
  925. // console.trace();
  926. renderUIParts.forEach(function (uiPart) {
  927. switch (uiPart) {
  928. case 'head': _head = undefined; break;
  929. case 'body': _body = undefined; break;
  930. case 'foot': _foot = undefined; break;
  931. case 'foot_pagination': {
  932. priv.renderFooterInfo();
  933. priv.renderFooterPagination();
  934. priv.renderFooterPageSizes();
  935. }
  936. break;
  937. case 'footer__toolbar__info': priv.renderFooterInfo(); break;
  938. case 'footer__toolbar__pagination': priv.renderFooterPagination(); break;
  939. case 'footer__toolbar__pagesizes': priv.renderFooterPageSizes(); break;
  940. case 'foot__columnPicker': priv.renderFooterColumnPicker(); break;
  941. case 'head__specialFilters': priv.renderHeadSpecialFilters(); break;
  942. }
  943. })
  944. priv.renderTable();
  945. priv.onWindowResize();
  946. {// activate saveBtn if some columns hidden
  947. var selectedFilter = priv.modelColFilter_getSelected();
  948. if (null === selectedFilter) {
  949. priv.modelColFilter_getSaveBtn().prop("disabled", false)
  950. } else {
  951. priv.modelColFilter_getSaveBtn().prop("disabled", true)
  952. }
  953. }
  954. };
  955. priv.onWindowResize = function() {
  956. var stickyCol1Width = priv.getStickyCol1Width();
  957. var stickyCol2Width = priv.getStickyCol2Width();
  958. var stickyCol3Width = priv.getStickyCol3Width();
  959. var contW = jQuery(_uiNodeCont).parent().width();
  960. var colsW = stickyCol1Width + stickyCol2Width + stickyCol3Width;
  961. jQuery(_uiNodeCont).css({width:'' + (contW - colsW) + 'px'})//, marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
  962. var wh = jQuery(window).height(); // returns height of browser viewport
  963. var dh = jQuery(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
  964. if (dh > wh) {
  965. jQuery(_uiNodeCont).doubleScroll()
  966. jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({float: 'right', display:'block'})
  967. } else {
  968. jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({display:'none'})
  969. }
  970. }
  971. priv.uiFixStickyCols = function () {
  972. var stickyCol1Width = priv.getStickyCol1Width();
  973. var stickyCol2Width = priv.getStickyCol2Width();
  974. var stickyCol3Width = priv.getStickyCol3Width();
  975. if (undefined === _tableWidth) {
  976. _tableWidth = true;
  977. var contW = jQuery(_uiNodeCont).width();
  978. var th1 = _uiNode$Table.find('.stickyCol1:first');
  979. var th2 = th1.next();
  980. var th1W = th1.innerWidth();
  981. var th2W = 50 + 2 * 5;//th2.innerWidth();
  982. // var colsW = stickyCol1Width + stickyCol2Width + stickyCol3Width;
  983. var colsW = priv.getStickyColsSumWidth();
  984. jQuery(_uiNodeCont).css({
  985. width: '' + (contW - colsW) + 'px',
  986. marginLeft: '' + colsW + 'px',
  987. minHeight: '360px',
  988. overflowX: 'scroll',
  989. overflowY: 'visible',
  990. paddingBottom: '1px',
  991. clear: 'both',
  992. });
  993. }
  994. _uiNode$Table.find('.stickyCol1').css({
  995. position: 'absolute',
  996. left: '0',
  997. top: 'auto',
  998. width: '' + (stickyCol1Width) + 'px',
  999. });
  1000. //_uiNode$Table.find('.filter').find('.stickyCol1').css({height:'34px'});
  1001. var sortStickyColHeight = _uiNode$Table.find('.sort').find('th:last').outerHeight();
  1002. _uiNode$Table.find('.sort').find('.stickyCol').css({height: sortStickyColHeight + 'px'});
  1003. var filterStickyColHeight = _uiNode$Table.find('.filter').find('th:last').outerHeight() + 1;
  1004. _uiNode$Table.find('.filter').find('.stickyCol').css({height: filterStickyColHeight + 'px'});
  1005. if (priv.options.checkboxes) _uiNode$Table.find('.stickyCol2').css({
  1006. position: 'absolute',
  1007. left: '' + (stickyCol1Width) + 'px',
  1008. top: 'auto',
  1009. width: '' + (stickyCol2Width) + 'px',
  1010. borderRight: '1px solid silver',
  1011. overflow: 'hidden'
  1012. });
  1013. _uiNode$Table.find('.stickyCol3').css({
  1014. position: 'absolute',
  1015. left: '' + (stickyCol1Width + stickyCol2Width) + 'px',
  1016. top: 'auto',
  1017. width: '' + (stickyCol3Width) + 'px',
  1018. borderRight: '1px solid silver',
  1019. overflow: 'hidden'
  1020. });
  1021. _uiNode$Table.find('tbody').find('.stickyCol').css({
  1022. height: '' + (29 + 1) + 'px',
  1023. });
  1024. };
  1025. priv.getStickyCol1Width = function () { return (12 + 3) * 4 + 2 * 5 + 1; }
  1026. priv.getStickyCol2Width = function () { return (priv.options.checkboxes) ? 20 + 2 * 5 + 1 : 0; }
  1027. priv.getStickyCol3Width = function () { return 50 + 2 * 5 + 1; }
  1028. priv.getStickyColsSumWidth = function () { return priv.getStickyCol1Width() + priv.getStickyCol2Width() + priv.getStickyCol3Width(); }
  1029. priv.initialReactRender = function (isVisible) { // TODO: render table as React node
  1030. if (!isVisible) return; // TODO: double request fetchData BUG `_task=loadDataAjax` - second request send without filter/sort
  1031. _reactUITableNode = document.createElement('div')
  1032. if (!isVisible) _reactUITableNode.style.display = 'none';
  1033. _reactUITableNode.setAttribute('class', "TableAjax-reactUITableNode");
  1034. _uiNodeCont.parentNode.appendChild(_reactUITableNode);
  1035. ReactDOM.render(
  1036. h(p5UI__TableAjaxWidget, {
  1037. namespace: priv.options.namespace,
  1038. dataStore: priv.options.tableDataStore,
  1039. dataActions: priv.options.tableDataActions,
  1040. filterStore: priv.options.filterStore,
  1041. filterActions: priv.options.filterActions,
  1042. selectedStore: priv.options.selectedStore,
  1043. selectedActions: priv.options.selectedActions,
  1044. }),
  1045. _reactUITableNode
  1046. );
  1047. };
  1048. priv.initialRender = function() {
  1049. _uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiNodeCont);
  1050. _head = $('<thead></thead>').prependTo(_uiNode$Table);
  1051. _headSort = $('<tr class="sort tblAjax__head__sort"></tr>').prependTo(_head);
  1052. _headFilter = $('<tr class="filter tblAjax__head__filter"></tr>').appendTo(_head);
  1053. _bodyNode = $('<tbody></tbody>').insertAfter(_head);
  1054. $('<tfoot></tfoot>').insertAfter(_bodyNode);
  1055. _foot = $('<div class="foot tblAjax__footer" style="margin:0; padding:12px; border-top:1px solid #ddd; border-bottom:1px solid #ddd"></div>').insertAfter(_uiNodeCont);
  1056. var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar" style="margin:0"></div>').appendTo(_foot);
  1057. _uiNodeFooterInfo = document.createElement('div') // .tblAjax__head__specialFilter
  1058. _uiNodeFooterInfo.setAttribute('class', "tblAjax__footer__toolbar__info foot-info");
  1059. _uiNodeFooterInfo.style.float = "left";
  1060. _uiNodeFooterInfo.style.padding = "0 20px 0 0";
  1061. $(_uiNodeFooterInfo).appendTo(footToolbar);
  1062. $('<span class="tblAjax__footer__toolbar__pagination"></span>').appendTo(footToolbar);
  1063. $('<span class="tblAjax__footer__toolbar__pagesizes"></span>').appendTo(footToolbar);
  1064. $('<span class="tblAjax__footer__toolbar__columnPicker"></span>').appendTo(footToolbar);
  1065. $('<span class="tblAjax__footer__toolbar__functions"></span>').appendTo(footToolbar);
  1066. $('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
  1067. _mapEditorWrap = $('<div class="mapEditor" style="display:none"></div>').insertAfter(_foot);
  1068. _mapEditor = $('<div class="mapEditor-map"></div>').appendTo(_mapEditorWrap);
  1069. _popoverCell = $('<div class="popoverCell" style="display:none"></div>').insertAfter(_foot);
  1070. $('<div class="tblAjax__inlineEditBox"></div>').insertAfter(_foot);
  1071. _uiNodeSelectedInfo = document.createElement('div')
  1072. _uiNodeSpecialFilters = document.createElement('div') // .tblAjax__head__specialFilter
  1073. var topWrap = document.createElement('div')
  1074. var topWrapLeft = document.createElement('div')
  1075. var topWrapRight = document.createElement('div')
  1076. topWrap.appendChild(topWrapLeft)
  1077. topWrap.appendChild(topWrapRight)
  1078. topWrapLeft.style.width = '' + priv.getStickyColsSumWidth() + 'px'
  1079. topWrapLeft.style.padding = '4px'
  1080. topWrapLeft.style.float = 'left'
  1081. topWrapLeft.style.fontSize = '12px'
  1082. topWrapLeft.style.lineHeight = '22px'
  1083. topWrapRight.style.float = 'left'
  1084. topWrapRight.style.padding = '4px'
  1085. topWrapLeft.appendChild(_uiNodeSelectedInfo)
  1086. topWrapRight.appendChild(_uiNodeSpecialFilters)
  1087. _uiNodeCont.parentNode.insertBefore(topWrap, _uiNodeCont)
  1088. priv.renderInlineEditBox();// .tblAjax__inlineEditBox
  1089. _foot = undefined;
  1090. _head = undefined;
  1091. _body = undefined;
  1092. _headSort = undefined;
  1093. _headFilter = undefined;// TODO: refactor
  1094. };
  1095. priv.renderTable = function() {
  1096. if (!_state.colsSorted) return;
  1097. DBG && console.warn('DBG:renderTable: ', { _head, _headSort, _headFilter, _headSpecialFilter });
  1098. if (!_head) {
  1099. _headSort = undefined;
  1100. _headFilter = undefined;
  1101. _headSpecialFilter = undefined;
  1102. _head = _uiNode$Table.find('thead');
  1103. }
  1104. if (!_headSort) {
  1105. priv.renderTableTheadSort();
  1106. _headSort = true;
  1107. }
  1108. if (!_headFilter && priv.options.filter) {
  1109. priv.renderTableTheadFilter();
  1110. _headFilter = true;
  1111. }
  1112. if (!_headSpecialFilter && priv.options.specialFilterFunctions) {
  1113. priv.renderHeadSpecialFilters();
  1114. _headSpecialFilter = true;
  1115. }
  1116. if (!_body) {
  1117. DBG && console.log('DBG:renderTable !_body', { _bodyNode })
  1118. // _uiNode$Table.find('tbody').remove();
  1119. // _bodyNode = $('<tbody></tbody>').insertAfter(_head);
  1120. // _uiNode$Table.find('tbody > tr').remove();
  1121. _bodyNode.find('tr').remove();
  1122. // find out what rows to show next...
  1123. var rowsAdded = 0;
  1124. // slice out the chunk of data we need and create rows
  1125. $.each(_data.rows, function(index, props) {
  1126. var rowNode = priv.renderRow(props);
  1127. if (rowNode) rowNode.appendTo(_bodyNode);
  1128. rowsAdded++;
  1129. if (rowsAdded >= priv.options.pageSize) { // enough rows created
  1130. return false;
  1131. }
  1132. });
  1133. if (_state.page == 1) {
  1134. _totalPages = Math.ceil(_data.total / priv.options.pageSize);
  1135. }
  1136. if (_state.page == _totalPages) { // pad with empty rows if we're at last page.
  1137. while (rowsAdded < priv.options.pageSize) {
  1138. var rowNode = priv.renderRowEmptyNode();
  1139. if (rowNode) rowNode.appendTo(_bodyNode);
  1140. rowsAdded++;
  1141. }
  1142. }
  1143. }
  1144. if (!_foot) {
  1145. priv.renderTableTfoot();
  1146. priv.renderFooter();
  1147. }
  1148. _foot = $(_uiNodeCont).next('.foot');
  1149. priv.uiFixStickyCols();
  1150. if (_data.total == 0 && priv.options.hidePagerOnEmpty) {
  1151. $('.btn-toolbar', _foot).remove();
  1152. }
  1153. if (priv.options.debug || DBG) console.log('table created');
  1154. if (typeof priv.options.tableCreated == 'function') {
  1155. priv.options.tableCreated.call(_uiNode$Table.get(0), {table: _uiNode$Table.get(0)});
  1156. }
  1157. };
  1158. // TODO: priv.renderFieldWidget_InlineEdit = function(fldName, value) {}
  1159. // TODO: priv.renderFieldWidget_FormField = function(fldName, value) {}
  1160. // @usage: priv.renderFieldWidget_TableCell(fldName, val, rowPK, row)
  1161. priv.renderFieldWidget_TableCell = function(fldName, value, rowPK, row) {
  1162. var renderFieldAsTableCell = priv.getFieldWidget_TableCell(fldName);
  1163. if (!renderFieldAsTableCell) return null;
  1164. return renderFieldAsTableCell(value, rowPK, row);
  1165. };
  1166. priv.registerFieldWidget = function(type, fldName, fieldProps) {
  1167. var fieldWidget = null;
  1168. switch (type) {
  1169. case "date":// @return Element - TODO: not used yet
  1170. fieldWidget = (function(fldName, fieldProps) {
  1171. var _fieldName = fldName,
  1172. _fieldProps = fieldProps;
  1173. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1174. return function(val, fieldPK, row) {
  1175. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1176. return val;
  1177. }
  1178. }(fldName, fieldProps));
  1179. break;
  1180. case "bool":// @return Element - TODO: not used yet
  1181. fieldWidget = (function(fldName, fieldProps) {
  1182. var _fieldName = fldName,
  1183. _fieldProps = fieldProps;
  1184. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1185. return function(val, fieldPK, row) {
  1186. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1187. fldNode = document.createElement('input');
  1188. fldNode.setAttribute('type', 'checkbox');
  1189. if (val) fldNode.setAttribute('checked', 'checked');
  1190. fldNode.setAttribute('disabled', 'disabled');
  1191. fldNode.appendChild(document.createTextNode(val));
  1192. return fldNode;
  1193. }
  1194. }(fldName, fieldProps));
  1195. break;
  1196. case "number":// @return String - TODO: not used yet
  1197. fieldWidget = (function(fldName, fieldProps) {
  1198. var _fieldName = fldName,
  1199. _fieldProps = fieldProps,
  1200. _fractionDigits = _.get(_fieldProps, 'fractionDigits', 2);
  1201. // console.log('FieldWidget: generate function to render field('+_fieldName+') _fractionDigits('+_fractionDigits+')', fieldProps);
  1202. return function(val, fieldPK, row) {
  1203. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1204. if ('' === val) return ''; // is nullable
  1205. if ('*****' === val) return val;
  1206. // enumeration
  1207. // fractionDigits
  1208. // maxExclusive
  1209. // maxInclusive
  1210. // minExclusive
  1211. // minInclusive
  1212. // pattern
  1213. // totalDigits
  1214. // whiteSpace
  1215. val = Number(val);
  1216. return ((val || 0) % 1 === 0)? val : val.toFixed(_fractionDigits);
  1217. }
  1218. }(fldName, fieldProps));
  1219. break;
  1220. case "string":// @return String
  1221. fieldWidget = (function(fldName, fieldProps) {
  1222. var _fieldName = fldName,
  1223. _fieldProps = fieldProps,
  1224. _format = _.get(_fieldProps, 'format', '{0}');
  1225. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1226. return function(val, fieldPK, row) {
  1227. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1228. return p5Utils__format(_format, [val]);
  1229. }
  1230. }(fldName, fieldProps));
  1231. break;
  1232. case "p5:price":// @return String
  1233. fieldWidget = (function(fldName, fieldProps) {
  1234. var _fieldName = fldName,
  1235. _fieldProps = fieldProps,
  1236. _format = _.get(_fieldProps, 'format', '<span style="text-align:right">{0}</span>');
  1237. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1238. return function(val, fieldPK, row) {
  1239. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1240. return p5Utils__format(_format, [val]);
  1241. }
  1242. }(fldName, fieldProps));
  1243. break;
  1244. case "p5:string":// @return String
  1245. fieldWidget = (function(fldName, fieldProps) {
  1246. var _fieldName = fldName;
  1247. var _fieldProps = fieldProps;
  1248. var _formatDefault = _.get(_fieldProps, 'format', null);
  1249. var _formatByValue = _.get(_fieldProps, 'formatByValue', null);
  1250. var _formatEmpty = _.get(_fieldProps, 'formatEmpty', null);
  1251. var _aliasMap = _.get(_fieldProps, 'aliasMap', null);
  1252. return function(val, fieldPK, row) {
  1253. var outValue = '';
  1254. if (_formatByValue && val in _formatByValue) {
  1255. outValue = p5Utils__format(_formatByValue[val], [val])
  1256. }
  1257. else if (val && _formatDefault) {
  1258. outValue = p5Utils__format(_formatDefault, [val])
  1259. }
  1260. else if (!val && _formatEmpty) {
  1261. outValue = p5Utils__format(_formatEmpty, [])
  1262. }
  1263. // console.log('p5:string value', val, '_aliasMap', _aliasMap)
  1264. if (_aliasMap) {
  1265. Object.keys(_aliasMap).map(function (mapKey) {
  1266. var mapField = _aliasMap[mapKey]
  1267. if (undefined !== row[mapField]) {
  1268. outValue = outValue.replace(new RegExp('\{' + mapKey + '\}', 'g'), row[mapField]);
  1269. }
  1270. })
  1271. }
  1272. return outValue;
  1273. }
  1274. }(fldName, fieldProps));
  1275. break;
  1276. case "p5:www_link":// @return Element
  1277. fieldWidget = (function(fldName, fieldProps) {
  1278. var _fieldName = fldName,
  1279. _fieldProps = fieldProps;
  1280. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1281. return function(val, fieldPK, row) {
  1282. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1283. var link = '',
  1284. a = null,
  1285. dbg = false;
  1286. if (!val.length) return '';
  1287. if ('index.php' == val.substr(0, 9) || 'procesy5.php' == val.substr(0, 12)) {
  1288. link = window.location.protocol + '//' + window.location.hostname
  1289. link += window.location.pathname.split('/').slice(0, -1).join('/')
  1290. link += '/' + val
  1291. } else {
  1292. if ('http' == val.substr(0, 4)) link = val
  1293. //else if ('ftp' == val.substr(0, 3))
  1294. else link = 'http://' + val
  1295. }
  1296. var linkErrors = validate({www_link: link}, {www_link: {url: true}});
  1297. if (linkErrors) {
  1298. // if(dbg)console.log('linkErrors for (' + link +')', linkErrors);
  1299. return val;
  1300. }
  1301. fldNode = document.createElement('a');
  1302. fldNode.setAttribute('href', link);
  1303. fldNode.setAttribute('target', '_blank');
  1304. fldNode.appendChild(document.createTextNode(val));
  1305. return fldNode;
  1306. }
  1307. }(fldName, fieldProps));
  1308. break;
  1309. case "special":
  1310. fieldWidget = (function(fldName, fieldProps) {
  1311. var _fieldName = fldName;
  1312. var _fieldProps = fieldProps;
  1313. var _format = _.get(_fieldProps, 'format', '{0}');
  1314. var _aliasMap = _.get(_fieldProps, 'aliasMap', null);
  1315. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1316. return function(val, fieldPK, row) {
  1317. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps, 'row', row);
  1318. var format = _format;
  1319. if (_aliasMap) {
  1320. Object.keys(_aliasMap).map(function (mapKey) {
  1321. var mapField = _aliasMap[mapKey]
  1322. if (undefined !== row[mapField]) {
  1323. format = format.replace(new RegExp('\{' + mapKey + '\}', 'g'), row[mapField]);
  1324. }
  1325. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') _aliasMap:', _aliasMap, 'row['+mapField+']', row[mapField], 'converted val:', val);
  1326. })
  1327. }
  1328. return p5Utils__format(format, [val]);
  1329. }
  1330. }(fldName, fieldProps));
  1331. break;
  1332. case "simpleLink":
  1333. fieldWidget = (function(fldName, fieldProps) {
  1334. var _fieldName = fldName,
  1335. _fieldProps = fieldProps,
  1336. _format = _.get(_fieldProps, 'format', '{0}');
  1337. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1338. return function(val, fieldPK, row) {
  1339. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1340. var valLink = String(val);
  1341. if (undefined !== _fieldProps._tsRetId
  1342. && (0 === _fieldProps._tsRetId || '0' === _fieldProps._tsRetId || null === _fieldProps._tsRetId)
  1343. && undefined !== _fieldProps._tsSimpleLink) {
  1344. valLink = _fieldProps._tsSimpleLink.format;
  1345. $.each(_fieldProps._tsSimpleLink.aliasMap, function(i, v) {
  1346. // console.log('simpleLink aliasMap fldName:', fldName, 'i:', i, 'v:', v, 'row['+v+']', row[v], 'val', val, 'typeof val', typeof val);
  1347. if (undefined !== row[v]) {
  1348. var _itemValue = row[v];
  1349. if (fldName == 'LINK_PROBLEMS' && row[v]) _itemValue = _itemValue.replace(/"/g, '%22').replace(/&/g, '%26');
  1350. valLink = valLink.replace(new RegExp('\{' + i + '\}', 'g'), _itemValue);
  1351. }
  1352. });
  1353. }
  1354. return p5Utils__format(_format, [valLink]);
  1355. }
  1356. }(fldName, fieldProps));
  1357. break;
  1358. case "gml:PolygonPropertyType":
  1359. case "gml:LineStringPropertyType":
  1360. case "gml:PointPropertyType":
  1361. case "p5Type:polygon":
  1362. case "p5Type:lineString":
  1363. case "p5Type:point":
  1364. case "geom":
  1365. fieldWidget = (function(fldName, fieldProps) {
  1366. var _fieldName = fldName,
  1367. _fieldProps = fieldProps,
  1368. _format = _.get(_fieldProps, 'format', '{0}');
  1369. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1370. return function(val, fieldPK, row) {
  1371. // console.log('FieldWidget: run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1372. // console.log('FieldWidget: test priv', priv);
  1373. var node = jQuery('<span></span>');
  1374. node.TableAjaxGeomField({
  1375. recordID: fieldPK,
  1376. fieldValue: val,
  1377. hasValueClassName: 'cell-mapfld-hasValue',
  1378. linkClassNamePrefix: 'cell-mapfld',
  1379. linkSelectClassName: 'select',
  1380. linkSelectAddClassNames: 'glyphicon glyphicon-map-marker',
  1381. getCsvUrl: priv.options.getCsvTheGeomAjaxUrl,
  1382. linkGetCsvAddClassNames: 'glyphicon glyphicon-download',
  1383. linkRemoveClassName: 'remove',
  1384. linkRemoveAddClassNames: 'glyphicon glyphicon-remove',
  1385. onSelect: function(recordID, geomShape) {
  1386. if (priv.options.debug || DBG) console.log('recordID:', recordID, 'geomShape:', geomShape);
  1387. priv.mapEditorShow();
  1388. _mapEditor.TableAjaxMapSelectRecord(recordID, geomShape);
  1389. },
  1390. onRemove: function(geomField, recordID, geomShape) {
  1391. if (confirm('Czy usunąć obiekt z mapy dla rekordu ' + recordID + '?')) {
  1392. if (!recordID) return;
  1393. var selectedRecordId = recordID;
  1394. superagent
  1395. .post(priv.options.removeTheGeomAjaxUrl)
  1396. .type('json') // header ĺapplication/x-www-form-urlencoded' requires type('form');
  1397. .send({
  1398. ID: recordID,
  1399. namespace: priv.options.namespace
  1400. })
  1401. .set('Accept', 'application/json')
  1402. .end(function(err, res) {
  1403. if(priv.options.debug)console.log('DBG: res:', res, 'res.body:', res.body);
  1404. var payload;
  1405. if (err || !res.ok || 'application/json' !== res.type) {
  1406. payload = {type: 'warning', msg: res.body.msg || 'Wystąpiły błędy', body: res.body};
  1407. } else {
  1408. payload = {type: 'success', msg: res.body.msg || '', body: res.body};
  1409. }
  1410. p5UI__notifyAjaxCallback(payload);
  1411. var data = res.body;
  1412. if (data && data.record && data.record.the_geom) {
  1413. if (priv.options.debug || DBG) console.log('data.record.the_geom:2:', data.record.the_geom);
  1414. geomField.setValue(data.record.the_geom);
  1415. }
  1416. else if (data && data.record) {
  1417. if (priv.options.debug || DBG) console.log('data.record.the_geom:2:', data.record.the_geom);
  1418. geomField.setValue(data.record.the_geom);
  1419. }
  1420. _mapEditor.TableAjaxMapRefresh();
  1421. });
  1422. }
  1423. }
  1424. });
  1425. return node;
  1426. }
  1427. }(fldName, fieldProps));
  1428. break;
  1429. case "ref":
  1430. fieldWidget = (function(fldName, fieldProps) {
  1431. var _fieldName = fldName,
  1432. _fieldProps = fieldProps;
  1433. // console.log('FieldWidget: generate function to render field('+_fieldName+') fieldProps: ', fieldProps);
  1434. return function(val, fieldPK, row) {
  1435. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value: ', val, ', fieldProps: ', fieldProps);
  1436. // if (val.length > 5) return '('+val.length+')' + printFirst5 + '...' => open more info
  1437. return _.map(val, function(v) {
  1438. if (!v || !v.xlink) return '';
  1439. var idRemote = v.xlink.split('.').pop()
  1440. var nsRemote = v.xlink.split(':').pop().split('.').shift()
  1441. var seLink = URI_BASE + 'index.php?_route=ViewTableAjax&namespace=' + fieldProps.xsdRefNsPrefix.replace(/__x3A__/g, '/') + '/' + nsRemote + '#EDIT/' + idRemote;
  1442. var wfsLink = fieldProps.xsdRefUri + '#' + fieldProps.xsdRefType + '.' + idRemote;
  1443. return '<a class="btn btn-xs btn-default" href="' + seLink + '" title="' + wfsLink + '">' + idRemote + '</a>';
  1444. }).join(' ');
  1445. }
  1446. }(fldName, fieldProps));
  1447. break;
  1448. }
  1449. _fieldWidgets[fldName] = fieldWidget;
  1450. };
  1451. priv.getFieldWidget_TableCell = function(fieldName) {
  1452. var props = _data.cols[fieldName],
  1453. type = null,
  1454. renderFieldAsTableCell = null;
  1455. if (!props) return null;
  1456. type = _.get(props, 'type');
  1457. if (!type) type = 'string';// TODO: throw Exception? / default string
  1458. renderFieldAsTableCell = _.get(_fieldWidgets, fieldName);
  1459. if (renderFieldAsTableCell) return renderFieldAsTableCell;
  1460. priv.registerFieldWidget(type, fieldName, props);
  1461. renderFieldAsTableCell = _.get(_fieldWidgets, fieldName);
  1462. if (!renderFieldAsTableCell) throw "Field type '" + type + "' not implemented";
  1463. return renderFieldAsTableCell;
  1464. };
  1465. priv.renderRow = function(props) {
  1466. var rowNode = $('<tr></tr>');
  1467. var rowPK = (_state.primaryKey in props) ? props[_state.primaryKey] : null;
  1468. var cellNode;
  1469. var columnName, columnProps, val, cellCnt, format, showTooltip, fldWidgetNode;
  1470. var dbg = (priv.options.debug || DBG);
  1471. // ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event);"
  1472. rowNode.attr('ondrop', "p5TA_onDrop(event, '"+rowPK+"', '"+priv.options.namespace+"')")
  1473. rowNode.attr('ondragover', "p5TA_onDragOver(event, this, '"+rowPK+"', '"+priv.options.namespace+"')")
  1474. rowNode.attr('ondragend', "p5TA_onDragEnd(event, this, '"+rowPK+"', '"+priv.options.namespace+"')")
  1475. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1476. cellNode = priv.renderCellRowFunctions(priv.options.rowFunctions, rowPK, props);
  1477. cellNode.addClass('text-right stickyCol stickyCol1');
  1478. cellNode.appendTo(rowNode);
  1479. }
  1480. //create checkbox
  1481. if (_state.primaryKey && priv.options.checkboxes) { // row checkbox cell
  1482. var checkable = props['checkable'] === false ? 'disabled' : '';
  1483. cellNode = $('<td class="stickyCol stickyCol2" style="padding:3px 5px"></td>').appendTo(rowNode);
  1484. ReactDOM.render(
  1485. h(P5UI__TableAjaxRowCheckbox, {
  1486. namespace: priv.options.namespace,
  1487. primaryKey: rowPK,
  1488. store: priv.options.selectedStore,
  1489. actions: priv.options.selectedActions
  1490. }),
  1491. cellNode.get(0)
  1492. );
  1493. }
  1494. if (_state.primaryKey) rowNode.data('unique', rowPK);
  1495. //create cells
  1496. for (var i = 0; i < _state.colsSorted.length; i++) {
  1497. columnName = _state.colsSorted[i];
  1498. columnProps = _data.cols[columnName];
  1499. val = '';
  1500. if (!columnProps) continue;
  1501. if (columnProps.hidden) continue;// TODO: "unique" is hidden
  1502. showTooltip = true;
  1503. val = props[columnName];
  1504. cellNode = $('<td></td>').appendTo(rowNode);
  1505. if (i === 1) cellNode.addClass('stickyCol stickyCol3');// primaryKey(ID)
  1506. if (i !== 1) cellNode.on('dblclick', {id:rowPK, col:columnName}, priv.rowDblClicked);
  1507. cellCnt = (i === 1)? '<div></div>' : '<span></span>';
  1508. cellCnt = $(cellCnt).appendTo(cellNode);// fix dblclick for copy
  1509. cellNode.data('column', columnName);
  1510. if (val === undefined) continue;
  1511. format = _.get(columnProps, 'format', '{0}');
  1512. // test use field widgets
  1513. fldWidgetNode = priv.renderFieldWidget_TableCell(columnName, val, rowPK, props);
  1514. if (fldWidgetNode || fldWidgetNode === 0) {
  1515. cellCnt.empty();
  1516. cellCnt.append(fldWidgetNode);
  1517. } else if (fldWidgetNode === '') {
  1518. cellCnt.empty();
  1519. } else {
  1520. console.log('TODO: !FieldWidget for row.pk('+rowPK+') col('+columnName+') typeof fldWidgetNode(' + (typeof fldWidgetNode) + ') columnProps', columnProps, 'fldWidgetNode', fldWidgetNode, 'value', props[columnName]);
  1521. }// test fld widgets
  1522. if (columnProps._tsRetId) {
  1523. showTooltip = false;
  1524. if (columnProps._tsRetId > 0) {
  1525. cellCnt.on('click', {id:rowPK, col:columnName, friendly:columnProps.friendly, value:p5Utils__format(format, [val])}, priv.popoverCellTypeSpecial);
  1526. }
  1527. }
  1528. if ('ref' === columnProps.type) showTooltip = false;
  1529. if ('ref' === columnProps.type) cellNode.css('padding', "3px")
  1530. if ('ref' === columnProps.type && (priv.options.debug || DBG)) console.log('renderRow rowPK('+rowPK+') columnProps', columnProps)
  1531. // if ('ref' === columnProps.type) cellNode.html('<a href="index.php?_route=ViewTableAjax' +
  1532. // '&namespace=' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType +
  1533. // '&backRefNS=' + priv.options.namespace +
  1534. // '&backRefPK=' + rowPK +
  1535. // '&backRefField=' + columnProps.column +
  1536. // '">przeglądaj</a>')
  1537. if ('ref' === columnProps.type) {
  1538. cellNode.html('<a onClick="return p5UI__tableAjaxOpenRefCell(' +
  1539. '\'' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType + '\', ' + // namespace
  1540. '\'' + priv.options.namespace + '\', ' + // backRefNS
  1541. '\'' + rowPK + '\', ' + // backRefPK
  1542. '\'' + columnProps.column + '\')' + // backRefField
  1543. '" ' +
  1544. 'href="index.php?_route=ViewTableAjax' +
  1545. '&namespace=' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType +
  1546. '&backRefNS=' + priv.options.namespace +
  1547. '&backRefPK=' + rowPK +
  1548. '&backRefField=' + columnProps.column +
  1549. '">przeglądaj</a>')
  1550. }
  1551. if (columnProps.xsdType && 'xsd:base64Binary' === columnProps.xsdType) {
  1552. cellCnt.empty();
  1553. if (val) {
  1554. cellCnt.append('<a target="_blank" href="wfs-data.php?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetBlob&namespace='+priv.options.namespace+'&primaryKey='+rowPK+'&fieldName='+columnName+'">'+"otwórz"+'</a>');
  1555. } else {
  1556. cellCnt.append('<span style="color:silver" title="Brak danych">N/S;</span>');
  1557. }
  1558. }
  1559. if (i > 1 && priv.options.longDesc) {// TODO: use better check for columns: functions and pk
  1560. cellNode.addClass('tbl-short-txt');
  1561. if (showTooltip) {
  1562. cellCnt.tooltip({title: cellCnt.text(), placement: 'left'});
  1563. }
  1564. }
  1565. }
  1566. return rowNode;
  1567. };
  1568. priv.renderCellRowFunctions = function(rowFunctions, rowPK, rowProps) {
  1569. var cellNode = $('<td></td>'),
  1570. keys = Object.keys(rowFunctions),
  1571. total = keys.length,
  1572. moreFuncBtnNode,
  1573. moreFunctions = [],
  1574. idx
  1575. ;
  1576. if (priv.options.debug || DBG) console.log('TableAjax::renderCellRowFunctions: rowFunctions', rowFunctions);
  1577. idx = keys.indexOf('hist');
  1578. if (idx !== -1) {
  1579. histFunc = keys.splice(idx, 1);
  1580. keys.push('hist');
  1581. }
  1582. moreFunctions = keys.splice(3);
  1583. keys.forEach(function(key) {
  1584. var funObj = rowFunctions[key],
  1585. funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: false})
  1586. ;
  1587. funcNode.appendTo(cellNode);
  1588. });
  1589. moreFuncBtnNode = $('<a href="#" style="margin:0 2px;text-decoration:none" title="Więcej funkcji dla rekordu nr '+rowPK+'" class="glyphicon glyphicon-menu-hamburger"> </a>');
  1590. moreFuncBtnNode.on('click', {rowPK: rowPK, rowFunctions: rowFunctions, more: moreFunctions}, priv.popoverCellMoreFunctions);
  1591. moreFuncBtnNode.appendTo(cellNode);
  1592. return cellNode;
  1593. };
  1594. priv.popoverCellMoreFunctions = function(e) {
  1595. e.preventDefault();
  1596. e.stopPropagation();
  1597. if (!e.data || !e.data.rowPK) {
  1598. if (priv.options.debug || DBG) console.log('NO data');
  1599. return false;
  1600. }
  1601. if (priv.options.debug || DBG) console.log('TableAjax::popoverCellMoreFunctions: rowPK', e.data.rowPK, 'moreFunctions', e.data.more, 'rowFunctions', e.data.rowFunctions);
  1602. var lastId = _popoverCell.data('rowid');
  1603. var lastCol = _popoverCell.data('col');
  1604. var rowPK = e.data.rowPK;
  1605. var moreFunctions = e.data.more;
  1606. var rowFunctions = e.data.rowFunctions;
  1607. var funcListNode;
  1608. if (lastId == e.data.rowPK && lastCol == 'moreFunctions') {
  1609. //_popoverCellCurrent.popover('toggle');
  1610. return;
  1611. }
  1612. if (_popoverCellCurrent) {
  1613. _popoverCellCurrent.popover('destroy');
  1614. }
  1615. _popoverCell.data('rowid', rowPK);
  1616. _popoverCell.data('col', 'rowFunctions');
  1617. _popoverCell.empty();
  1618. funcListNode = $('<ul class="list-unstyled popoverRowFunctions"></ul>').appendTo(_popoverCell);
  1619. moreFunctions.forEach(function(funcName) {
  1620. var funcItemNode = $('<li></li>').appendTo(funcListNode),
  1621. funObj = rowFunctions[funcName],
  1622. funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: true})
  1623. ;
  1624. funcNode.addClass('func_name-' + funcName);
  1625. funcItemNode.append(funcNode);
  1626. });
  1627. if (3 === priv.options.namespace.split('/').length) { // if namesapce is AntAcl [ and has ref fields or back ref ]
  1628. var funcItemNode = $('<li></li>').appendTo(funcListNode)
  1629. var funObj = {
  1630. ico: 'glyphicon glyphicon-random',
  1631. label: 'Przeglądaj powiązania',
  1632. href: 'index.php?_route=RefGraph&namespace=' + priv.options.namespace + '&primaryKey=' + rowPK,
  1633. // onclick: function (e) { // TODO: open in
  1634. // console.log('TODO: przeglądaj powiązania')
  1635. // }
  1636. }
  1637. var funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, { ico: true, label: true })
  1638. funcItemNode.append(funcNode);
  1639. }
  1640. _popoverCell.append('<div class="popoverCellContent" style="white-space:normal"></div>');
  1641. _popoverCellCurrent = jQuery(e.currentTarget);
  1642. // title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
  1643. var opts = {
  1644. container: 'body',
  1645. placement: 'right',
  1646. trigger: 'click',
  1647. template: '',
  1648. html: true,
  1649. content: _popoverCell.html()
  1650. }
  1651. opts.template += '<div class="popover" role="tooltip" style="max-width:600px;width:440px;">';
  1652. {
  1653. opts.template += '<div class="arrow"></div>';
  1654. //opts.template += '<h3 class="popover-title"></h3>';
  1655. opts.template += '<div style="display:block;position:relative;">';
  1656. {
  1657. opts.template += '<div class="popover-title">';
  1658. opts.template += '</div>';
  1659. opts.template += '<button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:8px;top:6px;">&times;</button>';
  1660. }
  1661. opts.template += '</div>';
  1662. opts.template += '<div class="popover-content"></div>';
  1663. }
  1664. opts.template += '</div>';
  1665. _popoverCellCurrent.popover(opts);
  1666. _popoverCellCurrent.on('shown.bs.popover', function(e) {
  1667. if (!_popoverCellCurrent) return;
  1668. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  1669. if (!popoverNodeId) return;
  1670. var popover$Node = jQuery('#' + popoverNodeId);
  1671. if (!popover$Node.length) return;
  1672. var arrow$Node = popover$Node.children('.arrow');
  1673. if (arrow$Node.length) {
  1674. var posTop = parseFloat(arrow$Node.css('top'));
  1675. arrow$Node.css('top', '' + posTop + 'px')
  1676. }
  1677. popover$Node.find('.popoverCellContent').html('<p class="text-muted">Pobieranie funkcji...<p>');
  1678. priv.ajaxLoadMoreFunctionsCell(rowPK);
  1679. });
  1680. _popoverCellCurrent.popover('show');
  1681. return;
  1682. };
  1683. priv.ajaxLoadMoreFunctionsCell = function(rowPK) {
  1684. var dbg = (priv.options.debug || DBG);
  1685. if (_popoverCellAjaxXhr) {
  1686. _popoverCellAjaxXhr.abort();
  1687. }
  1688. _popoverCellAjaxXhr = $.ajax({
  1689. type: 'GET',
  1690. url: priv.options.moreFunctionsCellAjaxUrl + '&ID=' + rowPK,
  1691. dataType: 'json',
  1692. contentType: "application/json; charset=utf-8",
  1693. data: ''
  1694. })
  1695. .done(function(data, textStatus, jqXHR){
  1696. if (data && 'success' === data.type) {
  1697. var popoverCellContent,
  1698. rowFunctions = [],
  1699. funcNodesToUpdate = []
  1700. ;
  1701. if (data.rowFunctions && data.rowFunctions.length > 0) {
  1702. rowFunctions = data.rowFunctions;
  1703. }
  1704. if (rowFunctions.length > 0) {
  1705. var popoverCellContent = $('<ul class="list-unstyled"></ul>');
  1706. rowFunctions.forEach(function(funObj) {
  1707. var funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: true});
  1708. if (funObj.id) {
  1709. funcNodesToUpdate.push({id: funObj.id, node: funcNode});
  1710. } else {
  1711. var funcItemNode = $('<li></li>').appendTo(popoverCellContent);
  1712. funcItemNode.append(funcNode);
  1713. }
  1714. });
  1715. } else {
  1716. popoverCellContent = '<p class="text-muted">Brak dodatkowych funkcji</p>';
  1717. }
  1718. //_popoverCell.append(popoverCellContent);// cache
  1719. if (_popoverCellCurrent) {
  1720. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  1721. if (popoverNodeId) {
  1722. var popoverNode = jQuery('#' + popoverNodeId),
  1723. popoverCntNode = popoverNode.find('.popoverCellContent'),
  1724. popoverRowFuncNode = popoverNode.find('.popoverRowFunctions');
  1725. ;
  1726. {// fix generated row Functions by loaded from ajax call
  1727. if(dbg) console.log('popoverRowFunctions. popoverRowFuncNode', popoverRowFuncNode);
  1728. if(dbg) console.log('popoverRowFunctions. funcNodesToUpdate', funcNodesToUpdate);
  1729. funcNodesToUpdate.forEach(function(funcNodeInfo) {
  1730. var className = 'func_name-' + funcNodeInfo.id,
  1731. foundRowFuncNode = null
  1732. ;
  1733. if(dbg) console.log('popoverRowFunctions. funcNodesToUpdate loop:', funcNodeInfo);
  1734. popoverRowFuncNode.find('li > a').each(function(ind, n) {
  1735. var n$ = $(n);
  1736. if(dbg) console.log('popoverRowFunctions loop(',ind,'):', n, 'data(func_name)', n$.data('func_name'), 'data', n$.data());
  1737. if (n$.hasClass(className)) {
  1738. foundRowFuncNode = n$;
  1739. }
  1740. });
  1741. if (foundRowFuncNode) {
  1742. foundRowFuncNode.replaceWith(funcNodeInfo.node);
  1743. } else {
  1744. var funcItemNode = $('<li></li>').appendTo(popoverCellContent);
  1745. funcItemNode.append(foundRowFuncNode);
  1746. }
  1747. });
  1748. }
  1749. popoverCntNode.empty().append(popoverCellContent);
  1750. if (rowFunctions.length <= 0) {
  1751. popoverCntNode.find('p.text-muted').delay(600).hide(300);
  1752. }
  1753. }
  1754. }
  1755. }
  1756. });
  1757. };
  1758. priv.renderRowEmptyNode = function() {
  1759. var rowNode = $('<tr></tr>');
  1760. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1761. $('<td class="text-right stickyCol stickyCol1">&nbsp;</td>').appendTo(rowNode);
  1762. }
  1763. if (_state.primaryKey && priv.options.checkboxes) {
  1764. var cellNode = $('<td class="stickyCol stickyCol2" style="padding:3px 5px"></td>').appendTo(rowNode);
  1765. }
  1766. for (var i = 0; i < _state.colsSorted.length; i++) {
  1767. var columnName = _state.colsSorted[i],
  1768. columnProps = _data.cols[columnName]
  1769. ;
  1770. if (!columnProps) return;
  1771. if (columnProps.hidden) continue;// "unique" is hidden - TODO: rm "unique" from _state.colsSorted ?
  1772. if (i == 1) {// TODO: 1 is pk - use better check
  1773. $('<td class="stickyCol3">&nbsp;</td>').appendTo(rowNode);
  1774. } else {
  1775. $('<td>&nbsp;</td>').appendTo(rowNode);
  1776. }
  1777. }
  1778. return rowNode;
  1779. };
  1780. priv.renderTableTheadSort = function() {
  1781. DBG && console.log('DBG:renderTableTheadSort', { '_state._currSortCol': _state._currSortCol, '_state._currSortFlip': _state._currSortFlip });
  1782. var nodeClass = 'tblAjax__' + 'head__sort'
  1783. var currentNode = _uiNode$Table.find('thead').find('.' + nodeClass)
  1784. var node = $('<tr class="sort ' + nodeClass + '"></tr>')
  1785. if (priv.options.tblFunctions || priv.options.filtersClean) {
  1786. var headCell = $('<th class="text-right head-info stickyCol stickyCol1"></th>').appendTo(node)
  1787. $.map(priv.options.tblFunctions, function (funObj, funName) {
  1788. var funHtml = $('<a></a>')
  1789. funHtml.attr('href', funObj.href || '#')
  1790. if (funObj.title) funHtml.attr('title', funObj.title)
  1791. if (funObj.icon) funHtml.html('<span class="glyphicon glyphicon-' + funObj.icon + '"></span> ')
  1792. if (funObj.method && priv[funObj.method] && typeof priv[funObj.method] == 'function') {
  1793. funHtml.on('click', priv[funObj.method])
  1794. }
  1795. funHtml.appendTo(headCell)
  1796. })
  1797. }
  1798. if (_state.primaryKey && priv.options.checkboxes) {
  1799. var headCell = $('<th class="stickyCol stickyCol2" style="padding:3px 5px"></th>').appendTo(node);
  1800. ReactDOM.render(
  1801. h(P5UI__TableAjaxRowCheckbox, {
  1802. namespace: priv.options.namespace,
  1803. primaryKey: 'select-all',
  1804. store: priv.options.selectedStore,
  1805. actions: priv.options.selectedActions
  1806. }),
  1807. headCell.get(0)
  1808. );
  1809. }
  1810. for (var i = 0; i < _state.colsSorted.length; i++) {
  1811. var column = _state.colsSorted[i]
  1812. var props = _data.cols[column]
  1813. DBG && console.log('DBG:renderTableTheadSort loop', { column, props });
  1814. if (props.hidden) continue;
  1815. var headCell = $('<th class="ta-ordering"></th>').appendTo(node)
  1816. if (_state.primaryKey === column) headCell.addClass('stickyCol stickyCol3')
  1817. ReactDOM.render(
  1818. h(P5UI__TableAjaxSortableLabel, {
  1819. namespace: priv.options.namespace,
  1820. isSortable: (props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref"), // TODO: props.isSortable
  1821. fieldName: column,
  1822. fieldProps: props,
  1823. store: priv.options.filterStore,
  1824. actions: priv.options.filterActions
  1825. }),
  1826. headCell.get(0)
  1827. );
  1828. if (column !== _state.primaryKey) {
  1829. var hideColBtn = $('<i class="glyphicon glyphicon-remove remove-cell"></i>')
  1830. hideColBtn.on('click', {column: column}, priv.columnHideClicked)
  1831. hideColBtn.appendTo(headCell)
  1832. }
  1833. }
  1834. currentNode.replaceWith(node)
  1835. };
  1836. priv.renderHeadSpecialFilters = function() {
  1837. DBG && console.warn('DBG:priv.renderHeadSpecialFilters...', { 'priv.options.specialFilterFunctions': priv.options.specialFilterFunctions });
  1838. if (!priv.options.specialFilterFunctions) {
  1839. return;
  1840. }
  1841. ReactDOM.render(
  1842. h(P5UI__TableAjaxSpecialFilters, {
  1843. store: priv.options.filterStore,
  1844. actions: priv.options.filterActions,
  1845. specialFilters: priv.options.specialFilterFunctions,
  1846. namespace: priv.options.namespace,
  1847. }),
  1848. _uiNodeSpecialFilters
  1849. );
  1850. };
  1851. priv.renderTableTheadFilter = function() {
  1852. DBG && console.log('DBG::renderTableTheadFilter...');
  1853. var nodeClass = 'tblAjax__' + 'head__filter',
  1854. currentNode = _uiNode$Table.find('thead').find('.' + nodeClass),
  1855. node;
  1856. // currentNode.find('i').tooltip('hide');
  1857. node = $('<tr class="filter ' + nodeClass + '"></tr>');
  1858. //_head.find(".filter").remove();
  1859. //_headFilter = $('<tr class="filter"></tr>').appendTo(_head);
  1860. var headCell;
  1861. var elem;
  1862. var placeHolder = '';
  1863. var tooltip = '';
  1864. //create the functions column
  1865. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1866. var headCell = $('<th class="text-right stickyCol stickyCol1"></th>').appendTo(node);
  1867. headCell.css({padding: '0'});
  1868. if (priv.options.filtersClean) {
  1869. ReactDOM.render(
  1870. h(p5UI__TableAjaxClearAllFilters, {
  1871. store: priv.options.filterStore,
  1872. actions: priv.options.filterActions
  1873. }),
  1874. headCell.get(0)
  1875. );
  1876. }
  1877. }
  1878. //create the filter checkbox
  1879. if (_state.primaryKey && priv.options.checkboxes) {
  1880. // tooltip = priv.options.types.bool.filterTooltip || 'Pokaż tylko:<br/>nieokreślony,<br/>zaznaczony,<br/>niezaznaczony';
  1881. headCell = $('<th class="stickyCol stickyCol2" style="padding:0"></th>').appendTo(node);
  1882. ReactDOM.render(
  1883. h(P5UI__TableAjaxFieldCheckboxSearch, {
  1884. namespace: priv.options.namespace,
  1885. fieldName: ( priv.options.checkboxIdContext ? '@sel_' + priv.options.checkboxIdContext : '@selected' ),
  1886. store: priv.options.filterStore,
  1887. actions: priv.options.filterActions
  1888. }),
  1889. headCell.get(0)
  1890. );
  1891. }
  1892. //create the column filters
  1893. for (var i = 0; i < _state.colsSorted.length; i++) {
  1894. var column = _state.colsSorted[i];
  1895. var props = _data.cols[column];
  1896. tooltip = props.filterTooltip === true ? undefined : props.filterTooltip === false ? '' : props.filterTooltip;
  1897. placeHolder = props.placeHolder === true ? undefined : props.placeHolder === false ? '' : props.placeHolder;
  1898. if (props.hidden) continue;
  1899. headCell = $('<th></th>').appendTo(node);
  1900. headCell.css({padding: '0'});
  1901. if (i == 1) headCell.addClass('stickyCol stickyCol3');
  1902. ReactDOM.render(
  1903. h(p5UI__FieldInputFilterSearch, {
  1904. disabled: (priv.options.forceFilterInit && undefined !== priv.options.forceFilterInit[column]),
  1905. fieldName: column,
  1906. type: props.type,
  1907. lagacyProps: props, // TODO: use ony required like xsdType
  1908. // xsdType: props.xsdType,
  1909. store: priv.options.filterStore,
  1910. onChange: function (fieldName, value) {
  1911. priv.options.filterStore.dispatch( priv.options.filterActions.delayFilter(fieldName, value) );
  1912. }
  1913. }),
  1914. headCell.get(0)
  1915. );
  1916. }
  1917. currentNode.replaceWith(node);
  1918. };
  1919. priv.renderTableTfoot = function() {
  1920. _uiNode$Table.find('tfoot').remove();
  1921. _foot = $('<tfoot></tfoot>').insertAfter(_bodyNode);
  1922. //$(_uiNodeCont).next('.foot').replaceWith(_foot);
  1923. };
  1924. priv.renderFooter = function() {
  1925. priv.renderFooterInfo();
  1926. priv.renderFooterPagination();
  1927. priv.renderFooterPageSizes();
  1928. priv.renderFooterColumnPicker();
  1929. priv.renderFooterFunctions();
  1930. priv.renderFooterExport();
  1931. };
  1932. priv.renderFooterInfo = function() {
  1933. DBG1 && console.log('DBG:TableAjax::renderFooterInfo', { _uiNodeFooterInfo: _uiNodeFooterInfo });
  1934. var fromRow = Math.max(_state.page - 1, 0) * _state.pageSize;
  1935. var total = _data.total;
  1936. var toRow = Math.min(fromRow + _state.pageSize, total);
  1937. if (_data.total > 0) {
  1938. _uiNodeFooterInfo.innerHTML = '<div style="font-size:12px; line-height:1.4em;">' +
  1939. '<strong>Łącznie wyników:</strong> <span class="hide-on-loading">' + total + '</span>' +
  1940. '<br>' +
  1941. '<small class="hide-on-loading" style="color:#999; font-size:10px">' + p5Utils__format('Wyświetlane wiersze: od {0} do {1}', [fromRow + 1, toRow]) + '</small>' +
  1942. '</div>';
  1943. } else {
  1944. _uiNodeFooterInfo.innerHTML = '<p><strong>Brak wierszy pasujących do kryteriów wyszukiwania<strong></p>';
  1945. }
  1946. };
  1947. priv.renderFooterPagination = function() {
  1948. var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',
  1949. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  1950. node;
  1951. var currPage = _state.page;
  1952. var totalPages = Math.ceil(_data.total / _state.pageSize);
  1953. if (priv.options.debug || DBG) console.log('Render: ', nodeClass, '_data.total', _data.total, 'currPage', currPage);
  1954. if (_data.total > 0) {
  1955. node = $('<div class="btn-group ' + nodeClass + '"></div>');
  1956. var lowerPage = currPage - 2;
  1957. var upperPage = currPage + 2;
  1958. if (upperPage > totalPages) {
  1959. var diff = upperPage - totalPages;
  1960. upperPage = totalPages;
  1961. lowerPage -= diff;
  1962. }
  1963. if (lowerPage < 1) lowerPage = 1;
  1964. if (upperPage < 5) upperPage = 5;
  1965. //$(p5Utils__format('<li class="{0}"><a href="#">&lt;&lt;</a></li>', [currPage == 1 ? 'disabled' : '']))
  1966. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&lt;&lt;</button>', [currPage == 1 ? ' disabled' : '']))
  1967. .on('click', {pageIndex: 1}, priv.pageChanged)
  1968. .appendTo(node);
  1969. //$(p5Utils__format('<li class="{0}"><a href="#">&lt;</a></li>', [currPage == 1 ? 'disabled' : '']))
  1970. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&lt;</button>', [currPage == 1 ? ' disabled' : '']))
  1971. .on('click', {pageIndex: currPage - 1}, priv.pageChanged)
  1972. .appendTo(node);
  1973. for (var i = lowerPage; i <= upperPage; i++) {
  1974. var link;
  1975. //if (i != currPage) link = $(p5Utils__format('<li class="{1}"><a href="#">{0}</a></li>', [i, i > totalPages ? 'disabled' : '']));
  1976. if (i != currPage) link = $(p5Utils__format('<button type="button" class="btn btn-default{1}">{0}</button>', [i, i > totalPages ? ' disabled' : '']));
  1977. //if (i == currPage) link = $(p5Utils__format('<li class="active"><a href="#">{0}</a></li>', [i]));
  1978. if (i == currPage) link = $(p5Utils__format('<button type="button" class="btn btn-default active">{0}</button>', [i]));
  1979. if (link) {
  1980. link.on('click', {pageIndex: i}, priv.pageChanged);
  1981. link.appendTo(node);
  1982. }
  1983. }
  1984. //$(p5Utils__format('<li class="{0}"><a href="#">&gt;</a></li>', [currPage == totalPages ? 'disabled' : '']))
  1985. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&gt;</button>', [currPage == totalPages ? ' disabled' : '']))
  1986. .on('click', {pageIndex: currPage + 1}, priv.pageChanged)
  1987. .appendTo(node);
  1988. //$(p5Utils__format('<li class="{0}"><a href="#">&gt;&gt;</a></li>', [currPage == totalPages ? 'disabled' : '']))
  1989. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&gt;&gt;</button>', [currPage == totalPages ? ' disabled' : '']))
  1990. .on('click', {pageIndex: totalPages}, priv.pageChanged)
  1991. .appendTo(node);
  1992. } else {
  1993. node = $('<span class="' + nodeClass + '"></span>');
  1994. }
  1995. currentNode.replaceWith(node);
  1996. };
  1997. priv.renderFooterPageSizes = function() {
  1998. var nodeClass = 'tblAjax__' + 'footer__toolbar__pagesizes',
  1999. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2000. node;
  2001. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2002. if (_data.total > 0 && priv.options.pageSizes.length > 0) {
  2003. node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
  2004. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(node);
  2005. var span = $('<span class="caret"></span>').appendTo(btn);
  2006. var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
  2007. $.each(priv.options.pageSizes, function(index, val) {
  2008. var li = $('<li></li>').appendTo(ul);
  2009. if (val == priv.options.pageSize) {
  2010. $(p5Utils__format('<a style="color:#337AB7;">{0}</a>', [val])).appendTo(li);
  2011. } else {
  2012. $(p5Utils__format('<a href="#">{0}</a>', [val])).appendTo(li);
  2013. }
  2014. });
  2015. node.on('click', 'a', priv.pageSizeChanged);
  2016. } else {
  2017. node = $('<span class="' + nodeClass + '"></span>');
  2018. }
  2019. currentNode.replaceWith(node);
  2020. };
  2021. priv.renderFooterColumnPicker = function() {
  2022. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2023. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2024. node;
  2025. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2026. if (priv.options.columnPicker) {
  2027. node = $('<div class="btn-group dropup columnpicker ' + nodeClass + '"></div>');
  2028. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(node);
  2029. var span = $('<span class="caret"></span>').appendTo(btn);
  2030. var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
  2031. var selectedFilter = priv.modelColFilter_getSelected();
  2032. priv.modelColFilter_getFilters().map(function(colFltr) {
  2033. var li = $('<li></li>').appendTo(ul),
  2034. selected = (selectedFilter && selectedFilter == colFltr.name)? 'checked="checked"' : '',
  2035. input = '<input ' + selected + ' type="radio" style="margin:0"/>',
  2036. a = $('<a href="#" data-col_filter="' + colFltr.name + '" style="padding:0px 20px;">' + input + ' ' + colFltr.label + '</a>').appendTo(li);
  2037. if ('all' != colFltr.name && 'most_used' != colFltr.name) {
  2038. arm = $('<button data-col_filter="' + colFltr.name + '" class="pull-right btn btn-xs btn-link" style="margin:0;padding:0;border:0;color:red">' + '&times;' + '</a>').appendTo(a);
  2039. arm.on('click', priv.modelColFilter_onClickRemoveFilter)
  2040. }
  2041. });
  2042. {// if (!selectedFilter) {// save current filter
  2043. var li = $('<li style="text-align:center; clear:both"></li>').appendTo(ul)
  2044. priv.modelColFilter_getSaveBtn().appendTo(li);
  2045. }
  2046. $('<li class="divider"></li>').appendTo(ul);
  2047. $.each(_data.cols, function(col, props) {
  2048. if (props.type != "unique" && col != _state.primaryKey) {
  2049. var li = $('<li></li>').appendTo(ul),
  2050. label = (props.friendly || col).replace(/<br\/?>/g, ' '),
  2051. input = p5Utils__format('<input {0} type="checkbox" title="{1}" value="{1}" style="margin:0"/>&nbsp;{2}', [(props.hidden) ? '' : 'checked', col, label]),
  2052. a = $('<a href="#" style="padding:0px 20px;">' + input + '</a>').appendTo(li);
  2053. }
  2054. });
  2055. node.on('click', 'input[type="checkbox"]', priv.columnPickerClicked);
  2056. node.on('click', 'a', priv.columnPickerLinkClicked);
  2057. } else {
  2058. node = $('<span class="' + nodeClass + '"></span>');
  2059. }
  2060. currentNode.replaceWith(node);
  2061. };
  2062. priv.renderFooterFunctions = function() {
  2063. var nodeClass = 'tblAjax__' + 'footer__toolbar__functions',
  2064. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2065. node;
  2066. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2067. if (priv.options.tblFunctions) {
  2068. node = $('<div class="btn-group ' + nodeClass + '"></div>');
  2069. $.map(priv.options.tblFunctions, function(funObj, funName){
  2070. var funHtml = $('<button class="btn btn-sm btn-default"></button>');
  2071. if (funObj.title) funHtml.attr('title', funObj.title);
  2072. if (funObj.method) funHtml.on('click', priv[funObj.method]);
  2073. else if (funObj.href) funHtml.on('click', {hash:funObj.href}, priv.routeChanged);
  2074. var funIconHtml = $('<i></i>');
  2075. if (funObj.icon) funIconHtml.attr('class', 'glyphicon glyphicon-' + funObj.icon);
  2076. funIconHtml.prependTo(funHtml);
  2077. funHtml.addClass('btn');
  2078. funHtml.appendTo(node);
  2079. });
  2080. } else {
  2081. node = $('<span class="' + nodeClass + '"></span>');
  2082. }
  2083. currentNode.replaceWith(node);
  2084. };
  2085. priv.renderFooterExport = function() {
  2086. var nodeClass = 'tblAjax__' + 'footer__toolbar__export',
  2087. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2088. node;
  2089. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2090. if (priv.options.exportFields && priv.options.exportFields.length) {
  2091. node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
  2092. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(node);
  2093. var span = $('<span class="caret"></span>').appendTo(btn);
  2094. var ul = $('<ul class="dropdown-menu" style="max-height:250px;padding:5px 20px 5px 8px;overflow:auto;">').appendTo(node);
  2095. $.each(_data.cols, function(col, props) {
  2096. if (-1 !== priv.options.exportFields.indexOf(col)) {
  2097. var li = $('<li></li>').appendTo(ul);
  2098. $(p5Utils__format('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>', [(_exportFieldsSelect[col])? 'checked' : '', col, props.friendly || col])).appendTo(li);
  2099. li.on('click', 'input', priv.exportFieldChanged);
  2100. }
  2101. });
  2102. var li;
  2103. li = $('<li></li>').appendTo(ul);
  2104. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do HTML</a>').appendTo(li);
  2105. li.on('click', 'a', priv.exportToHTML);
  2106. li = $('<li></li>').appendTo(ul);
  2107. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do CSV</a>').appendTo(li);
  2108. li.on('click', 'a', priv.exportToCSV);
  2109. li = $('<li></li>').appendTo(ul);
  2110. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share" title="Export do pliku CSV w kodowaniu Windows-1250"></i>Export do CSV (Windows-1250)</a>').appendTo(li);
  2111. li.on('click', 'a', priv.exportToCSVWinCP1250);
  2112. li = $('<li></li>').appendTo(ul);
  2113. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share" title="Export XLS"></i>Export do XLS</a>').appendTo(li);
  2114. li.on('click', 'a', priv.exportToXLS);
  2115. li = $('<li></li>').appendTo(ul);
  2116. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share" title="Export XLSX"></i>Export do XLSX</a>').appendTo(li);
  2117. li.on('click', 'a', priv.exportToXLSX);
  2118. } else {
  2119. node = $('<span class="' + nodeClass + '"></span>');
  2120. }
  2121. currentNode.replaceWith(node);
  2122. };
  2123. priv.renderInlineEditBox = function() {
  2124. var nodeClass = 'tblAjax__' + 'inlineEditBox',
  2125. currentNode = $(_uiNodeCont).parent().children('.' + nodeClass),
  2126. node;
  2127. var node = $('<div class="' + nodeClass + ' modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>');
  2128. var modalWrap = $('<div class="modal-dialog"></div>').appendTo(node);
  2129. var modalWrap = $('<div class="modal-content"></div>').appendTo(modalWrap);
  2130. var frmInlineEdit = $('<form style="margin:0;padding:0;"></form>').appendTo(modalWrap);
  2131. var iebHead = $('<div class="modal-header" style="cursor:pointer">').appendTo(frmInlineEdit);
  2132. $('<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove" style="color:red"></i></button>').appendTo(iebHead);
  2133. $('<h4 id="myModalLabel">Edytuj</h4>').appendTo(iebHead);
  2134. var iebBodyWrap = $('<div class="modal-body" style="padding:0"></div>').appendTo(frmInlineEdit);
  2135. var iebBody = $('<div style="padding:15px"></div>').appendTo(iebBodyWrap);
  2136. $('<input type="hidden" name="ID" value="">').appendTo(iebBody);
  2137. $('<input type="hidden" name="col" value="">').appendTo(iebBody);
  2138. $('<div class="inlineEditBox-cnt"></div>').appendTo(iebBody);
  2139. var iebFoot = $('<div class="modal-footer"></div>').appendTo(frmInlineEdit);
  2140. $('<button class="btn btn-close" data-dismiss="modal" aria-hidden="true">Zamknij</button>').appendTo(iebFoot);
  2141. var iebBtnSave = $('<input type="submit" value="Zapisz" class="btn btn-primary btn-save">').appendTo(iebFoot);
  2142. frmInlineEdit.on('submit', function() {
  2143. var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
  2144. var data = inlineEditBox$Node.find('form').serialize();
  2145. inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
  2146. function notifyAjaxCallback(data) {
  2147. var notify = {};
  2148. notify.type = (data && data.type)? data.type : '';
  2149. notify.msg = (data && data.msg)? data.msg : '';
  2150. switch (notify.type) {
  2151. case 'success':
  2152. if (!notify.msg) notify.msg = 'Dane poprawnie zaktualizowane';
  2153. break;
  2154. case 'info':
  2155. if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
  2156. break;
  2157. case 'error':
  2158. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2159. break;
  2160. case 'warning':
  2161. notify.type = 'warn';
  2162. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2163. break;
  2164. default:
  2165. notify.msg = 'Nieznany błąd';
  2166. if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
  2167. notify.type = '';
  2168. }
  2169. jQuery.notify(notify.msg, notify.type);
  2170. }
  2171. $.ajax({
  2172. data: data,
  2173. dataType: 'json',
  2174. type: "POST",
  2175. url: priv.options.editInlineSaveUrl
  2176. })
  2177. .done(function(data, textStatus, jqXHR){
  2178. notifyAjaxCallback(data);
  2179. publ.refresh();
  2180. inlineEditBox$Node.modal('hide');
  2181. })
  2182. .fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
  2183. if (jqXHR.responseJSON) {
  2184. notifyAjaxCallback(jqXHR.responseJSON);
  2185. }
  2186. else {
  2187. var txt = jqXHR.responseText || 'Wystąpiły błędy';
  2188. if (jqXHR.status == 404) {
  2189. jQuery.notify(jqXHR.responseText, 'error');
  2190. } else {
  2191. jQuery.notify(jqXHR.responseText, 'warn');
  2192. }
  2193. }
  2194. inlineEditBox$Node.modal('hide');
  2195. });
  2196. return false;
  2197. });
  2198. currentNode.replaceWith(node);
  2199. };
  2200. priv.exportFieldChanged = function(e) {
  2201. e.stopPropagation();
  2202. var column = $(this).val();
  2203. _exportFieldsSelect[column] = !_exportFieldsSelect[column];
  2204. };
  2205. priv.exportToHTML = function(e) {
  2206. priv.exportData('html', $(this), e);
  2207. };
  2208. priv.exportToCSV = function(e) {
  2209. priv.exportData('csv', $(this), e);
  2210. };
  2211. priv.exportToCSVWinCP1250 = function(e) {
  2212. priv.exportData('csv_cp1250', $(this), e);
  2213. };
  2214. priv.exportToXLS = function(e) {
  2215. priv.exportData('xls', $(this), e);
  2216. };
  2217. priv.exportToXLSX = function(e) {
  2218. priv.exportData('xlsx', $(this), e);
  2219. };
  2220. priv.exportData = function(format, node, e) {
  2221. var exportFields = [];
  2222. $.each(_exportFieldsSelect, function(col, selected) {
  2223. if (selected) {
  2224. exportFields.push(col);
  2225. }
  2226. });
  2227. if (!exportFields.length) {
  2228. alert('Nie wybrano żadnych pól do eksportu.');
  2229. e.preventDefault();
  2230. return false;
  2231. }
  2232. var limit = 10000;
  2233. if (!_data.total || _data.total <= 0) {
  2234. alert('Brak rekordów do eksportu.');
  2235. e.preventDefault();
  2236. return false;
  2237. }
  2238. if (_data.total > limit) {
  2239. if (!confirm('Za dużo rekordów. Wyeksportowane zostaną tylko pierwsze ' + limit + ' z ' + _data.total + ' rekordów.')) {
  2240. e.preventDefault();
  2241. return false;
  2242. }
  2243. }
  2244. var exportUrl = 'index.php?_route=ExportTableAjax&namespace=' + priv.options.namespace;
  2245. exportUrl += '&' + 'format=' + format;
  2246. exportUrl += '&' + 'flds=' + exportFields.join(',');
  2247. exportUrl += '&' + 'sortCol=' + (_state._currSortCol || '');
  2248. exportUrl += '&' + 'sortDir=' + (_state._currSortFlip ? "desc" : "asc");
  2249. exportUrl += '&' + priv.filter_getFilterQuery();
  2250. node.attr('href', exportUrl);
  2251. };
  2252. priv.showFailFetchDataMsg = function () {
  2253. var clearAllFiltersBtn = jQuery('<button class="btn btn-xs btn-link" style="color:red">usunąć wszystkie filtry</button>')
  2254. clearAllFiltersBtn.on('click', function () {
  2255. priv.options.filterStore.dispatch( priv.options.filterActions.clearAllFilters() )
  2256. jQuery(this).parent().remove();
  2257. })
  2258. var msgNode = jQuery('<div class="alert alert-danger" style="clear:both; max-width:600px; margin: 10px auto">' +
  2259. 'Wystąpił błąd podczas pobierania danych ' +
  2260. '<a href="javascript:window.location.reload()" class="btn btn-xs btn-link">spróbuj ponownie</a>.' + '<br>' +
  2261. 'Jeśli problem się powtarza, spróbuj ' +
  2262. '</div>')
  2263. msgNode.append(clearAllFiltersBtn);
  2264. jQuery(_uiNodeCont).prepend(msgNode);
  2265. }
  2266. /*
  2267. calls the webservice(if defined).
  2268. used only inside priv.init
  2269. */
  2270. priv.update = function(callback) {
  2271. var skipCols, resetChecked;// undefined
  2272. if (!priv.options.url) {
  2273. if (priv.options.debug || DBG) console.log('no url found');
  2274. return;
  2275. }
  2276. if (priv.options.debug || DBG) console.log(p5Utils__format('requesting data from url:{0}', [priv.options.url]));
  2277. var initUrlAdd = '&' + priv.filter_getFullFilterQuery();
  2278. DBG && console.warn('DBG:update... - FETCH_DATA', { initUrlAdd, '_state._filterQuery': _state._filterQuery, '_state._specialFilterQuery': _state._specialFilterQuery, _state });
  2279. // p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych (init) ...'});
  2280. window.fetch(priv.options.url + initUrlAdd, {
  2281. method: priv.options.urlPost ? 'POST' : 'GET',
  2282. credentials: 'same-origin',// add cookies
  2283. }).then(function (response) {
  2284. return response.json()
  2285. }).then(function (data) {
  2286. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:update: request finished response data:', data);
  2287. if ('success' == data.type) {
  2288. return data;
  2289. } else {
  2290. p5UI__notifyAjaxCallback(data);
  2291. priv.showFailFetchDataMsg();
  2292. }
  2293. return null;
  2294. }).then(function (data) {
  2295. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:update: request finished data:', data);
  2296. if (!data) return;
  2297. if (data && data.cols) {
  2298. priv.setStateCols(data.cols, data.primaryKey);
  2299. }
  2300. // assign the new state (data)
  2301. state = {data: {}};
  2302. if (!skipCols) state.data.cols = data.cols || {};
  2303. state.data.rows = data.rows || [];
  2304. state.data.total = data.total || 0;
  2305. state.data.primaryKey = data.primaryKey || 'ID';
  2306. state.page = data.page || 0;
  2307. state.pageSize = data.pageSize || priv.options.pageSize;
  2308. state.filters = data.filters || {};
  2309. DBG && console.warn('DBG:update... - FETCH_DATA END priv.setState(state);', { state });
  2310. priv.setState(state);
  2311. if (typeof callback == "function") {
  2312. callback.call(this);
  2313. }
  2314. }).catch(function (e) {
  2315. console.log('loadDataAjax:fetch: ERR:', e);
  2316. });
  2317. };
  2318. /*
  2319. assigns the new data.
  2320. */
  2321. priv.setState = function(state) {
  2322. var oldState = _state; // TODO: use to check what really changed (use extend!)
  2323. var renderParts = {};
  2324. if (state.data) {
  2325. if (state.data.cols && Object.keys(state.data.cols).length > 0) {
  2326. priv.setStateCols(state.data.cols, state.data.primaryKey);
  2327. priv.setStateData(state.data);
  2328. } else {
  2329. priv.setStateData(state.data);
  2330. }
  2331. renderParts['body'] = true;
  2332. renderParts['foot_pagination'] = true;
  2333. }
  2334. if (state.hasOwnProperty('specialFilters')) {
  2335. _state.specialFilters = state.specialFilters;
  2336. renderParts['head__specialFilters'] = true;
  2337. }
  2338. if (state.hasOwnProperty('page')) {
  2339. if (state.page != _state.page) {
  2340. _state.page = state.page;
  2341. renderParts['foot_pagination'] = true;
  2342. }
  2343. }
  2344. if (state.hasOwnProperty('pageSize')) {
  2345. if (state.pageSize != _state.pageSize) {
  2346. _state.pageSize = state.pageSize;
  2347. renderParts['foot_pagination'] = true;
  2348. }
  2349. }
  2350. if (state.hasOwnProperty('filters')) {
  2351. renderParts['head__specialFilters'] = true;
  2352. renderParts['foot_pagination'] = true;
  2353. }
  2354. renderParts = Object.keys(renderParts);
  2355. if (renderParts.length > 0) {
  2356. DBG && console.log('DBG::trigger(TableAjax:render): ', renderParts);
  2357. jQuery(_uiNodeCont).trigger('TableAjax:render', renderParts);
  2358. }
  2359. };
  2360. priv.setStateCols = function(cols, primaryKey) {
  2361. if (priv.options.debug || DBG) console.log('priv.setStateCols: ', {primaryKey: primaryKey, cols: cols});
  2362. // console.log("priv.setStateCols");
  2363. // console.trace();
  2364. _state.cols = cols;
  2365. _state.primaryKey = primaryKey || _state.primaryKey;
  2366. // fix col name - props.column
  2367. $.each(_state.cols, function(col, props) {
  2368. props.column = col;
  2369. });
  2370. // fix col types - default 'string'
  2371. $.each(_state.cols, function(col, props) {
  2372. if (!props.type) cols[col].type = "string";
  2373. });
  2374. // fix props.filter - set true if not set - TODO: allow filter this col?
  2375. $.each(_state.cols, function(col, props) {
  2376. if (props.filter == undefined) props.filter = true;
  2377. });
  2378. if (_state.primaryKey) {
  2379. //create a unique column definition
  2380. _state.cols["unique"] = {
  2381. column: "unique",
  2382. type: "unique",
  2383. index: -1,
  2384. hidden: true
  2385. };
  2386. }
  2387. _state.colsSorted = Object.keys(_state.cols).sort(function(a, b) {
  2388. return _state.cols[a].index - _state.cols[b].index;
  2389. });
  2390. };
  2391. priv.setStateData = function(pData) {
  2392. var listPrimaryKeys = (pData && pData.rows && pData.rows.length)
  2393. ? pData.rows.map(function (item) {
  2394. return item['@primaryKey'];
  2395. })
  2396. : []
  2397. ;
  2398. jQuery(_uiNodeCont).trigger('TableAjax:updateRows', { primaryKeys: listPrimaryKeys });
  2399. if (priv.options.checkboxes) {
  2400. priv.options.selectedStore.dispatch( priv.options.selectedActions.setPrimaryKeys(priv.options.namespace, listPrimaryKeys) );
  2401. }
  2402. var data = $.extend(true, {}, pData);
  2403. data.cols = _state.cols;// always use old cols - change cols mved to priv.setStateCols
  2404. _data = data;
  2405. _data.rowsOrg = _data.rows;
  2406. //we might have more/less data now. Recalculate stuff.
  2407. if (_state.page > 1) {
  2408. _totalPages = Math.ceil(_data.total / priv.options.pageSize);
  2409. }
  2410. };
  2411. /*
  2412. helper that returns the underlying data by the unique value
  2413. */
  2414. priv.getRow = function(uniqueValue) {
  2415. var row;
  2416. $.each(_data.rowsOrg, function(i, r) {
  2417. if (r[_state.primaryKey] == uniqueValue) {
  2418. row = r;
  2419. return false;
  2420. }
  2421. });
  2422. return row;
  2423. };
  2424. priv.longTextChanged = function(e) {
  2425. priv.options.longDesc = !priv.options.longDesc;
  2426. _bodyNode.find('td').each(function(ind, el){
  2427. var $el = jQuery(el);
  2428. if (!$el.attr('class') || $el.attr('class') == 'tbl-short-txt') {
  2429. if (el.firstChild && el.firstChild.nodeName == 'SPAN') {
  2430. if (priv.options.longDesc) {
  2431. $el.addClass('tbl-short-txt');
  2432. var $elSpan = jQuery(el.firstChild);
  2433. $elSpan.tooltip({title: $elSpan.text(), placement: 'left'});
  2434. } else {
  2435. $el.removeClass('tbl-short-txt');
  2436. }
  2437. }
  2438. }
  2439. });
  2440. return false;
  2441. };
  2442. priv.mapEditorHide = function() {
  2443. priv.options.mapEditor = false;
  2444. if ('window' == priv.options.mapEditorContainer) {
  2445. //_mapEditorDialog.dialog("close");
  2446. _mapEditorDialog.dialog("destroy");
  2447. }
  2448. _mapEditorWrap.hide();
  2449. _mapEditor.hide();
  2450. };
  2451. priv.mapEditorShow = function() {
  2452. //console.log('TODO:mapEditorShow():', priv.options.mapEditorContainer, 'visible:', priv.options.mapEditor);
  2453. priv.options.mapEditor = true;
  2454. _mapEditor.show();
  2455. _mapEditorWrap.show();
  2456. _mapEditor.TableAjaxMap({
  2457. //debug: true,
  2458. wpsUrl: 'http://biuro.biall-net.pl/wps',
  2459. wfsUrl: 'http://biuro.biall-net.pl/wps',
  2460. showAddLayerWidget: (priv.options.hasAdditionalLayers) ? true : false,
  2461. zoomStrategyActivate: 14,
  2462. layerName: priv.options.labelHtml,
  2463. addBtn: {
  2464. title: 'Przenieś mapę do okna',
  2465. displayClass: 'mapEditor-btnBackToWindow',
  2466. trigger: function() {
  2467. priv.mapEditorHide();
  2468. priv.options.mapEditorContainer = 'window';
  2469. priv.mapEditorShow();
  2470. priv.resizableMapDockNode('destroy');
  2471. }
  2472. },
  2473. onSaveFeature: function(selectedRecordId, selectedFeatureExtent) {
  2474. if (priv.options.debug || DBG) console.log('onSaveFeature (',selectedRecordId,'/',selectedFeatureExtent,') ', this);
  2475. if (!selectedRecordId) {
  2476. alert('Brak zaznaczonego rekordu - wybierz rekord z tabeli');
  2477. return;
  2478. }
  2479. function notifyAjaxCallback(data) {
  2480. var notify = {};
  2481. notify.type = (data && data.type)? data.type : '';
  2482. notify.msg = (data && data.msg)? data.msg : '';
  2483. switch (notify.type) {
  2484. case 'success':
  2485. if (!notify.msg) notify.msg = 'Aktualizacja danych dla rekordu ' + selectedRecordId;
  2486. break;
  2487. case 'info':
  2488. if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
  2489. break;
  2490. case 'error':
  2491. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2492. break;
  2493. case 'warning':
  2494. notify.type = 'warn';
  2495. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2496. break;
  2497. default:
  2498. notify.msg = 'Nieznany błąd';
  2499. if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
  2500. notify.type = '';
  2501. }
  2502. jQuery.notify(notify.msg, notify.type);
  2503. }
  2504. $.ajax({
  2505. data: {polygon: selectedFeatureExtent},
  2506. dataType: 'json',
  2507. type: "POST",
  2508. url: priv.options.theGeomSaveUrl + '&ID=' + selectedRecordId
  2509. })
  2510. .done(function(data, textStatus, jqXHR){
  2511. notifyAjaxCallback(data);
  2512. //jQuery.notify('Aktualizacja danych dla rekordu ' + selectedRecordId, 'success');
  2513. publ.loadPage(0);// TODO: reload table data
  2514. })
  2515. .fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
  2516. if (jqXHR.responseJSON) {
  2517. notifyAjaxCallback(jqXHR.responseJSON);
  2518. }
  2519. else {
  2520. var txt = jqXHR.responseText || 'Wystąpiły błędy';
  2521. if (jqXHR.status == 404) {
  2522. jQuery.notify(jqXHR.responseText, 'error');
  2523. } else {
  2524. jQuery.notify(jqXHR.responseText, 'warn');
  2525. }
  2526. }
  2527. });
  2528. },
  2529. onSelectBox: function(bounds) {
  2530. if (undefined !== OpenLayers.Bounds && bounds instanceof OpenLayers.Bounds) {
  2531. var column = 'the_geom';
  2532. var filter = 'BBOX:' + bounds.top + ',' + bounds.right + ',' + bounds.bottom + ',' + bounds.left;
  2533. priv.options.filterStore.dispatch( priv.options.filterActions.setFilter(column, filter) )
  2534. }
  2535. }
  2536. });
  2537. priv.mapEditorShowElement();
  2538. };
  2539. priv.mapEditorShowElement = function() {
  2540. if ('window' == priv.options.mapEditorContainer) {
  2541. var mapEditor = _mapEditorWrap.children('.mapEditor-map');
  2542. if (!mapEditor || !mapEditor.length) {
  2543. var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
  2544. var mapEditor = tblCont.children('.AjaxTableCont-mapEditorContainer').children('.mapEditor-map');
  2545. if (!mapEditor || !mapEditor.length) {
  2546. // TODO: create new map
  2547. }
  2548. _mapEditorWrap.append(mapEditor);
  2549. }
  2550. _mapEditorWrap.css({padding:'5px'});
  2551. _mapEditorDialog = _mapEditorWrap.dialog({
  2552. width: 540,
  2553. minWidth: 400,
  2554. minHeight: 400,
  2555. open: function(e, ui) {
  2556. var n = jQuery(this),
  2557. mapWrap = n.children(":first"),
  2558. map = mapWrap.children(":first");
  2559. map.css({width: n.width() - 5, height: n.height() - 5});
  2560. _mapEditor.TableAjaxMapUpdateSize();
  2561. },
  2562. resizeStart: function(e, ui) {
  2563. jQuery(this).children(":first").children(":first").css({display:'none'});
  2564. },
  2565. resizeStop: function(e, ui){
  2566. var n = jQuery(this),
  2567. map = n.children(":first").children(":first");
  2568. n.css({width: n.parent().width()});
  2569. map.css({display: 'block', height: n.height(), width: n.width()});
  2570. _mapEditor.TableAjaxMapUpdateSize();
  2571. },
  2572. dragStop: function(e, ui){
  2573. _mapEditor.TableAjaxMapUpdateSize();// to prevent drag-zoom error
  2574. }
  2575. });
  2576. _mapEditorWrap.bind('dialogclose', function(e) {
  2577. priv.options.mapEditor = false;
  2578. });
  2579. var dialogTitleBar = _mapEditorDialog.parent().parent().find('.ui-dialog-titlebar');
  2580. var dialogTitleBarCloseBtn = dialogTitleBar.find('.ui-dialog-titlebar-close');
  2581. if (dialogTitleBarCloseBtn) {
  2582. var btnToggle = jQuery('<span style="width:18px;height:18px;position:absolute;top:50%;right:25px;margin-top:-9px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><i style="margin-top:3px;" class="glyphicon glyphicon-fullscreen"></i></span>');
  2583. btnToggle.on('click', function(e) {
  2584. priv.options.mapEditorContainer = 'dock';
  2585. _mapEditorWrap.dialog('close');
  2586. priv.mapEditorShowElement();
  2587. });
  2588. btnToggle.insertBefore(dialogTitleBarCloseBtn);
  2589. }
  2590. }
  2591. else if ('dock' == priv.options.mapEditorContainer) {
  2592. priv.resizableMapDockNode('prepare');
  2593. _mapEditor.TableAjaxMapUpdateSize();
  2594. }
  2595. };
  2596. priv.resizableMapDockNode = function(task) {
  2597. if ('prepare' == task) {
  2598. var mapEditor = _mapEditorWrap.children('.mapEditor-map');
  2599. if (mapEditor && mapEditor.length) {// map is inside _mapEditorWrap (window)
  2600. var mapDockNode = jQuery('<div class="AjaxTableCont-mapEditorContainer"></div>');
  2601. var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
  2602. tblCont.children('.AjaxTableCont-mapEditorContainer').remove();
  2603. var breadcrumb = tblCont.children('.breadcrumb');
  2604. if (!breadcrumb || !breadcrumb.length) {
  2605. tblCont.prepend(mapDockNode);
  2606. } else {
  2607. mapDockNode.insertAfter(breadcrumb);
  2608. }
  2609. mapDockNode.append(mapEditor);
  2610. }
  2611. var mapDockResizable = mapEditor.parent();
  2612. mapDockResizable.resizable({handles: 's', minHeight: 300, minWidth: 300});
  2613. var resizeLineHeigth = 6;
  2614. mapDockResizable.children(":first").css({height: 'auto'});
  2615. mapDockResizable.css({marginBottom: resizeLineHeigth+'px'});
  2616. mapEditor.css({marginBottom: resizeLineHeigth+'px'});
  2617. mapEditor.children(":first").css({width: mapEditor.width()});
  2618. mapDockResizable.find('.ui-resizable-s').css({height:resizeLineHeigth+'px', bottom: '-'+resizeLineHeigth+'px'});
  2619. mapDockResizable.on('resizestart', function(event, ui) {
  2620. ui.element.children(":first").children(":first").css({display:'none'})
  2621. });
  2622. mapDockResizable.on('resizestop', function(event, ui) {
  2623. ui.element.children(":first").children(":first").css({display:'block', height: ui.element.height()});
  2624. });
  2625. } else if ('destroy' == task) {
  2626. var mapDockResizable = jQuery(_uiNodeCont).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
  2627. mapDockResizable.resizable('destroy');
  2628. mapDockResizable.remove();
  2629. }
  2630. };
  2631. priv.mapEditorChanged = function(e) {
  2632. if (priv.options.debug || DBG) console.log('mapEditorChanged option(',priv.options.mapEditor,')');
  2633. priv.options.mapEditor = !priv.options.mapEditor;
  2634. if (priv.options.mapEditor) {
  2635. priv.mapEditorShow();
  2636. }
  2637. else {
  2638. priv.mapEditorHide();
  2639. }
  2640. return false;
  2641. };
  2642. /*
  2643. when: changing page in pager
  2644. what: triggers table to be created with new page
  2645. */
  2646. priv.pageChanged = function(e) {
  2647. e.preventDefault();
  2648. var totalPages = Math.ceil(_data.total / _state.pageSize);
  2649. if (e.data.pageIndex < 1 || e.data.pageIndex > totalPages) return;
  2650. //set the new page
  2651. _state.page = e.data.pageIndex;
  2652. publ.loadPage(_state.page);
  2653. };
  2654. /*
  2655. when: changing pagesize in pagesize dropdown
  2656. what: triggers table to be created with new pagesize
  2657. */
  2658. priv.pageSizeChanged = function(e) {
  2659. e.preventDefault();
  2660. var val = $(this).text();
  2661. if (priv.options.debug || DBG) console.log(p5Utils__format('pagesize changed to:{0}', [val]));
  2662. if (parseInt(val) == priv.options.pageSize) {
  2663. return false;
  2664. }
  2665. priv.options.pageSize = parseInt(val);
  2666. publ.loadPage(1, priv.options.pageSize);
  2667. jQuery(_uiNodeCont).trigger('TableAjax:render', ['body', 'foot_pagination']);
  2668. priv.saveProfilePageSize(priv.options.pageSize);
  2669. };
  2670. /*
  2671. when: clicking a column
  2672. what: triggers table to be sorted by the column
  2673. */
  2674. priv.columnClicked = function(e) {
  2675. e.preventDefault();
  2676. if (priv.options.debug || DBG) console.log(p5Utils__format('col:{0} clicked', [e.data.column]));
  2677. priv.options.filterStore.dispatch( priv.options.filterActions.toggleSort(e.data.column) )
  2678. };
  2679. priv.saveProfilePageSize = function(pageSize) {
  2680. var reqData = {};
  2681. reqData.pageSize = pageSize;
  2682. $.ajax({
  2683. data: reqData,
  2684. type: "POST",
  2685. dataType: 'json',
  2686. // async: true,
  2687. url: priv.options.pageSizeSave
  2688. })
  2689. .done(function(data, textStatus, jqXHR){
  2690. if (data && data.type && data.type == 'info') {
  2691. jQuery.notify('Nie wprowadzono żadnych zmian', 'info');
  2692. } else {
  2693. jQuery.notify('Zapisano ustawienia', 'success');
  2694. }
  2695. })
  2696. .fail(function(){
  2697. jQuery.notify('Wystąpił błąd podczas zapisywania ustawień', 'error');
  2698. });
  2699. };
  2700. priv.saveHiddenCols = function() {
  2701. var reqData = {};
  2702. $.each(_data.cols, function(col, props) {
  2703. if (props.type != "unique" && col != 'unique' && col != _state.primaryKey) {
  2704. reqData[col] = (props.hidden)? 'HIDE' : 'SHOW';
  2705. }
  2706. });
  2707. $.ajax({
  2708. data: reqData,
  2709. type: "POST",
  2710. dataType: 'json',
  2711. // async: true,
  2712. url: priv.options.hiddenColsSaveUrl
  2713. })
  2714. .done(function(data, textStatus, jqXHR){
  2715. if (data && data.type && data.type == 'info') {
  2716. jQuery.notify('Nie wprowadzono żadnych zmian', 'info');
  2717. } else {
  2718. jQuery.notify('Zapisano ustawienia', 'success');
  2719. }
  2720. })
  2721. .fail(function(){
  2722. jQuery.notify('Wystąpił błąd podczas zapisywania ustawień', 'error');
  2723. });
  2724. };
  2725. /*
  2726. when: clicking a column in columnpicker
  2727. what: triggers table to show/hide the column
  2728. */
  2729. priv.columnPickerClicked = function(e) {
  2730. e.stopPropagation();
  2731. var column = $(this).val();
  2732. //toggle column visibility
  2733. priv.modelColFilter_toggleColumn(column);
  2734. priv.saveHiddenCols();
  2735. //_data.cols[column].index = new priv.ext.XDate();
  2736. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
  2737. };
  2738. priv.modelColFilter_init = function() {// run only once, set _state._modelColFilter {selected, filters: [ {name, label, visibleCols} ]}
  2739. var isAllSelected = true;
  2740. if (undefined === _state._modelColFilter) {
  2741. var columnFilters = [];
  2742. {
  2743. var fltrAll = {'name': 'all', 'label': 'Wszystkie', visibleCols: []};
  2744. $.each(_data.cols, function(col, props) {
  2745. if ("unique" == props.type) return;
  2746. fltrAll.visibleCols.push(col);
  2747. if (_data.cols[col].hidden) isAllSelected = false;
  2748. });
  2749. columnFilters.push(fltrAll);
  2750. }
  2751. // {
  2752. // var fltrMostUsed = {'name': 'most_used', 'label': 'Najczęściej używane', visibleCols: []};
  2753. // var fltrMostUsedLimit = 10;
  2754. // $.each(_data.cols, function(col, props) {
  2755. // if ("unique" == props.type) return;
  2756. // if (fltrMostUsedLimit-- > 0) {
  2757. // fltrMostUsed.visibleCols.push(col);
  2758. // }
  2759. // });
  2760. // columnFilters.push(fltrMostUsed);
  2761. // }
  2762. _state._modelColFilter = {
  2763. selected: (isAllSelected)? 'all' : null,
  2764. filters: columnFilters,
  2765. saveBtn: $('<button class="btn btn-xs btn-primary" disabled="disabled">Zapisz widoczne kolumny</button>')
  2766. };
  2767. _state._modelColFilter.saveBtn.on('click', priv.modelColFilter_saveBtnClicked)
  2768. if (priv.options.userTableFilterUrl) {
  2769. window.fetch(priv.options.userTableFilterUrl, {
  2770. method: 'POST',
  2771. headers: {
  2772. 'Content-Type': 'application/json'
  2773. },
  2774. credentials: 'same-origin',// add cookies
  2775. body: JSON.stringify({
  2776. namespace: priv.options.namespace,
  2777. })
  2778. }).then(function (response) {
  2779. return response.json()
  2780. }).then(function (result) {
  2781. if ('success' == result.type) {
  2782. // p5UI__notifyAjaxCallback(result)
  2783. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2784. return ('all' === filter.name || 'most_used' == filter.name)
  2785. }).concat(Object.keys(result.data).map(function (fltr) {
  2786. return {
  2787. name: fltr,
  2788. label: fltr,
  2789. visibleCols: result.data[fltr].split(',')
  2790. }
  2791. }))
  2792. jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
  2793. } else {
  2794. p5UI__notifyAjaxCallback(result)
  2795. }
  2796. }).catch(function (e) {
  2797. // TODO: show error ("ajax response error: " + e)
  2798. });
  2799. }
  2800. }
  2801. };
  2802. priv.modelColFilter_onClickRemoveFilter = function (e) {
  2803. e.preventDefault()
  2804. e.stopPropagation()
  2805. var filtrName = $(this).data('col_filter')
  2806. if (!filtrName) return
  2807. window.fetch(priv.options.rmUserTableFilterAjaxUrl, {
  2808. method: 'POST',
  2809. headers: {
  2810. 'Content-Type': 'application/json'
  2811. },
  2812. credentials: 'same-origin',// add cookies
  2813. body: JSON.stringify({
  2814. namespace: priv.options.namespace,
  2815. filtrName: filtrName,
  2816. })
  2817. }).then(function (response) {
  2818. return response.json()
  2819. }).then(function (result) {
  2820. if ('success' == result.type) {
  2821. p5UI__notifyAjaxCallback(result)
  2822. var userTableFilters = result.data;// resolve(result.data)
  2823. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2824. return ('all' === filter.name || 'most_used' == filter.name)
  2825. }).concat(Object.keys(userTableFilters).map(function (fltr) {
  2826. return {
  2827. name: fltr,
  2828. label: fltr,
  2829. visibleCols: userTableFilters[fltr].split(',')
  2830. }
  2831. }))
  2832. jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
  2833. } else {
  2834. p5UI__notifyAjaxCallback(result)
  2835. }
  2836. }).catch(function (e) {
  2837. p5UI__notifyAjaxCallback({ type: 'error', msg: new String(e) })
  2838. });
  2839. };
  2840. priv.modelColFilter_saveBtnClicked = function (e) {
  2841. swal({
  2842. title: 'Zapisz widoczne kolumny',
  2843. html: '',
  2844. animation: true,
  2845. input: 'text',
  2846. inputPlaceholder: 'nazwa filtra',
  2847. // inputValue: null,
  2848. // inputAttributes: {'step': '0.01'},
  2849. showCancelButton: true,
  2850. confirmButtonText: 'Zapisz',
  2851. showLoaderOnConfirm: true,
  2852. showCloseButton: true,
  2853. preConfirm: function(filtrName) {
  2854. return new Promise(function(resolve, reject) {
  2855. if (!filtrName) reject('Proszę podać nazwę filtra')
  2856. if (filtrName.length > 255) reject('Nazwa za długa')
  2857. window.fetch(priv.options.addUserTableFilterAjaxUrl, {
  2858. method: 'POST',
  2859. headers: {
  2860. 'Content-Type': 'application/json'
  2861. },
  2862. credentials: 'same-origin',// add cookies
  2863. body: JSON.stringify({
  2864. namespace: priv.options.namespace,
  2865. filtrName: filtrName,
  2866. visibleCols: Object.keys(_data.cols).filter(function(col) {
  2867. return !_data.cols[col].hidden
  2868. }).join(','),
  2869. })
  2870. }).then(function (response) {
  2871. return response.text()
  2872. }).then(function (responseText) {
  2873. try {
  2874. // json = response.json() // BUG: error trafia do catch promisów, zamiast aktualnego bloku
  2875. // -- obiekt response pewnie jest powiązany z Promisem z fetch
  2876. // -- response.json() zwraca Promise tak samo jak response.text()
  2877. return JSON.parse(responseText)
  2878. } catch (e) {
  2879. throw responseText
  2880. }
  2881. }).then(function (result) {
  2882. if ('success' == result.type) {
  2883. p5UI__notifyAjaxCallback(result)
  2884. resolve(result.data)
  2885. } else {
  2886. p5UI__notifyAjaxCallback(result)
  2887. reject(result.msg || "Wystąpił błąd!")
  2888. }
  2889. }).catch(function (e) {
  2890. reject("ajax response error: " + e)
  2891. });
  2892. })
  2893. },
  2894. allowOutsideClick: false
  2895. }).then(function(userTableFilters) {
  2896. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2897. return ('all' === filter.name || 'most_used' == filter.name)
  2898. }).concat(Object.keys(userTableFilters).map(function (fltr) {
  2899. return {
  2900. name: fltr,
  2901. label: fltr,
  2902. visibleCols: userTableFilters[fltr].split(',')
  2903. }
  2904. }))
  2905. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  2906. }).catch(function(e) {
  2907. // eg. hit Cancel
  2908. })
  2909. }
  2910. priv.modelColFilter_getSaveBtn = function () {
  2911. priv.modelColFilter_init();
  2912. return _state._modelColFilter.saveBtn
  2913. }
  2914. priv.modelColFilter_getFilters = function() {
  2915. priv.modelColFilter_init();
  2916. return _state._modelColFilter.filters;
  2917. };
  2918. priv.modelColFilter_getSelected = function() {
  2919. priv.modelColFilter_init();
  2920. return _state._modelColFilter.selected;
  2921. };
  2922. priv.modelColFilter_setFilter = function(filterKey) {
  2923. priv.modelColFilter_init();
  2924. _state._modelColFilter.selected = filterKey;
  2925. priv.modelColFilter_uiUncheckAllColFilters();
  2926. priv.modelColFilter_uiCheckColFilter(filterKey);
  2927. };
  2928. priv.modelColFilter_toggleColumn = function(column, value) {
  2929. priv.modelColFilter_init();
  2930. _state._modelColFilter.selected = null;
  2931. if (!_data.cols[column] || !_data.cols[column]) return;
  2932. _data.cols[column].hidden = (undefined !== value)? value : !_data.cols[column].hidden;
  2933. priv.modelColFilter_uiUncheckAllColFilters();
  2934. {
  2935. var isAllSelected = true;
  2936. $.each(_data.cols, function(col, props) {
  2937. if ("unique" == props.type) return;
  2938. if (_data.cols[col].hidden) isAllSelected = false;
  2939. });
  2940. if (isAllSelected) {
  2941. _state._modelColFilter.selected = 'all';
  2942. priv.modelColFilter_uiCheckColFilter('all');
  2943. }
  2944. }
  2945. };
  2946. priv.modelColFilter_uiUncheckAllColFilters = function() {
  2947. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2948. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
  2949. ;
  2950. currentNode.find('input[type="radio"]').prop("checked", false);
  2951. };
  2952. priv.modelColFilter_uiCheckColFilter = function(filterKey) {
  2953. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2954. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
  2955. ;
  2956. currentNode.find('input[type="radio"]').each(function(idx, input) {
  2957. var input$ = jQuery(input);
  2958. if (filterKey == jQuery(input$).parent().data('col_filter')) {
  2959. input$.prop("checked", true);
  2960. } else {
  2961. input$.prop("checked", false);
  2962. }
  2963. });
  2964. };
  2965. priv.columnPickerLinkClicked = function(e) {
  2966. e.stopPropagation();
  2967. var input$ = $(this).find('input'),
  2968. col_filter = $(this).data('col_filter'),
  2969. columnFilters = priv.modelColFilter_getFilters()
  2970. ;
  2971. if (col_filter) {
  2972. var filter = null;
  2973. $.each(columnFilters, function(idx, colFltr) {
  2974. if (col_filter == colFltr.name) {
  2975. filter = colFltr;
  2976. }
  2977. });
  2978. if (!filter) return;
  2979. $.each(_data.cols, function(col, props) {
  2980. var isHidden = (-1 === filter.visibleCols.indexOf(col));
  2981. priv.modelColFilter_toggleColumn(col, isHidden);
  2982. });
  2983. priv.modelColFilter_setFilter(col_filter);
  2984. priv.saveHiddenCols();
  2985. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  2986. } else {
  2987. e.preventDefault();
  2988. if (input$.length != 1) return;
  2989. var column = input$.val();
  2990. if (!column) return;
  2991. //toggle column visibility
  2992. priv.modelColFilter_toggleColumn(column);
  2993. input$.prop("checked", !input$.is(':checked'));// update view
  2994. priv.saveHiddenCols();
  2995. //_data.cols[column].index = new priv.ext.XDate();
  2996. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
  2997. }
  2998. };
  2999. priv.columnHideClicked = function(e) {
  3000. e.stopPropagation();
  3001. var column;
  3002. if (e.data && e.data.column) {
  3003. column = e.data.column;
  3004. } else {
  3005. return;
  3006. }
  3007. //toggle column visibility
  3008. priv.modelColFilter_toggleColumn(column);
  3009. priv.saveHiddenCols();
  3010. //_data.cols[column].index = new priv.ext.XDate();
  3011. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  3012. };
  3013. /*
  3014. when: clicking anywhere on a row
  3015. what: row data and other info is returned to caller
  3016. */
  3017. // priv.rowClicked = function(e) {// TODO: not used
  3018. // if (!_state.primaryKey) {
  3019. // if (priv.options.debug || DBG) console.log('no unique column specified');
  3020. // return;
  3021. // }
  3022. //
  3023. // //gather callback data
  3024. // var elem = $(this);
  3025. // var column = _data.cols[elem.data('column')];
  3026. // var unique = elem.closest('tr').data('unique');
  3027. // var row = priv.getRow(unique);
  3028. // var isChecked = elem.closest('tr').find('.unique').is(':checked');
  3029. //
  3030. // //trigger callback
  3031. // if (typeof priv.options.rowClicked == 'function') {
  3032. // priv.options.rowClicked.call(e.target, {
  3033. // event: e,
  3034. // row: row,
  3035. // column: column,
  3036. // checked: isChecked
  3037. // });
  3038. // }
  3039. // };
  3040. /**
  3041. * Inline edit.
  3042. */
  3043. priv.rowDblClicked = function(e) {
  3044. var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
  3045. // hide popover for typespecial fld on click
  3046. if (_popoverCellCurrent) {
  3047. _popoverCellCurrent.popover('hide');
  3048. }
  3049. // e.clientX: 1002; e.clientY: 245
  3050. if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
  3051. inlineEditBox$Node.modal();
  3052. inlineEditBox$Node.show();
  3053. inlineEditBox$Node.on('shown.bs.modal', function(e) {
  3054. var dialogBox = jQuery(this).find('.modal-dialog'),
  3055. modalBody = dialogBox.find('.modal-body'),
  3056. boudingRect = dialogBox.get(0).getBoundingClientRect();
  3057. dialogBox.css({position: 'absolute', margin:0, top: boudingRect.top, left: boudingRect.left});
  3058. modalBody.css({overflow: 'scroll'});
  3059. dialogBox.resizable({minHeight: 300, minWidth: 300, alsoResize: modalBody});
  3060. dialogBox.draggable({handle: '.modal-header'});
  3061. });
  3062. inlineEditBox$Node.on('hidden.bs.modal', function(e) {
  3063. var dialogBox = jQuery(this).find('.modal-dialog'),
  3064. modalBody = dialogBox.find('.modal-body');
  3065. dialogBox.removeAttr('style');
  3066. modalBody.removeAttr('style');
  3067. modalBody.css({padding: '0'});
  3068. dialogBox.resizable();
  3069. dialogBox.draggable();
  3070. dialogBox.resizable('destroy');
  3071. dialogBox.draggable('destroy');
  3072. });
  3073. inlineEditBox$Node.find('input[name=ID]').val(e.data.id);
  3074. inlineEditBox$Node.find('input[name=col]').val(e.data.col);
  3075. inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
  3076. $.ajax({
  3077. url: priv.options.editInlineUrl + '&ID=' + e.data.id + '&col=' + e.data.col,
  3078. type: 'GET',
  3079. dataType: 'json',
  3080. success: function(data) {
  3081. if ('p5:www_link' == _.get(data, 'simpleType')) {
  3082. inlineEditBox$Node.find('.inlineEditBox-cnt').empty();
  3083. var label = jQuery('<label>');// for="' + data.htmlFieldName + '">');// "<label for="f22579" class="AjaxTableEdit-label"> ... </label>
  3084. label.attr('for', data.htmlFieldName);
  3085. label.attr('class', 'AjaxTableEdit-label');
  3086. inlineEditBox$Node.find('.inlineEditBox-cnt').append(label);
  3087. var inLabel = jQuery('<strong title="[' + data.idZasob + '] ' + data.fieldLabel + '">' + data.fieldLabel + '</strong>');
  3088. label.append(inLabel);
  3089. var frmItem = jQuery('<input>');
  3090. frmItem.attr('type', 'text');
  3091. frmItem.attr('name', data.htmlFieldName);
  3092. frmItem.attr('value', data.formItem.value);
  3093. frmItem.attr('maxlength', _.get(data, 'restrictions.maxLength', 255));
  3094. frmItem.attr('style', 'width:98%');
  3095. frmItem.attr('class', 'form-control');
  3096. frmItem.insertAfter(label);
  3097. } else {
  3098. var content = _.get(data, 'legacy_html', "Nieznany błąd");
  3099. inlineEditBox$Node.find('.inlineEditBox-cnt').html(content);
  3100. }
  3101. inlineEditBox$Node.find('.btn-save').show();
  3102. initDateTimePicker(inlineEditBox$Node);
  3103. inlineEditBox$Node.find('textarea').autosize();
  3104. var fld = inlineEditBox$Node.find('input[name^="f"]');
  3105. if (fld.length > 0 && !fld.hasClass('se_type-date')) {
  3106. fld.keydown(function(event) {
  3107. if (event.which == 13) {
  3108. event.preventDefault();
  3109. inlineEditBox$Node.find('form').submit();
  3110. }
  3111. });
  3112. }
  3113. (function setFocusAtFirstInlineEditFormFld(modal$node){
  3114. var fld, dbg = false;
  3115. if(dbg)console.log('focus...');
  3116. fld = modal$node.find('input[name^="f"]:first');
  3117. if (fld.length > 0 && !fld.hasClass('se_type-date')) {
  3118. if(dbg)console.log('set focus to first input element');
  3119. fld.focus(); return;
  3120. }
  3121. fld = modal$node.find('select[name^="f"]:first');
  3122. if (fld.length) {
  3123. if (fld.get(0).selectize) {
  3124. if(dbg)console.log('set focus to first typepecial element');
  3125. } else {
  3126. if(dbg)console.log('set focus to first select element');
  3127. fld.focus(); return;
  3128. }
  3129. }
  3130. if(dbg)console.log('set focus to close btn');
  3131. modal$node.find('.btn-close').focus();
  3132. })(inlineEditBox$Node);
  3133. },
  3134. error: function(err) {
  3135. if (priv.options.debug || DBG) console.log('err');
  3136. }
  3137. });
  3138. } else {
  3139. if (priv.options.debug || DBG) console.log('NO data');
  3140. return false;
  3141. }
  3142. };
  3143. priv.ajaxLoadTypeSpeciallCell = function(id, col) {
  3144. if (_popoverCellAjaxXhr) {
  3145. _popoverCellAjaxXhr.abort();
  3146. }
  3147. _popoverCellAjaxXhr = $.ajax({
  3148. type: 'GET',
  3149. url: 'index.php?_route=ViewTableAjax&_task=typeSpecialCell&namespace=' + priv.options.namespace + '&ID=' + id + '&col=' + col,
  3150. dataType: 'json',
  3151. contentType: "application/json; charset=utf-8",
  3152. data: '',
  3153. success: function(req){
  3154. if (_.get(req, 'data.tbl_id') > 0) {
  3155. var addHtml = '';
  3156. for (var i in req.data.items) {
  3157. var url = 'index.php?_route=ViewTableAjax';
  3158. url += '&namespace=' + req.namespace;
  3159. url += '&f_' + req.data.fld_name + '=' + req.data.items[i].id;
  3160. url += '&_hash=' + Math.random().toString(36).substring(2);
  3161. addHtml += '<a href="' + url + '">Wyszukaj ' + req.data.items[i].id + '</a>: ' + req.data.items[i].label;
  3162. addHtml += '<br>';
  3163. }
  3164. //_popoverCell.append(addHtml);// cache
  3165. if (_popoverCellCurrent) {
  3166. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  3167. if (popoverNodeId) {
  3168. jQuery('#' + popoverNodeId).find('.popoverCellContent').append(addHtml);
  3169. }
  3170. }
  3171. }
  3172. }
  3173. });
  3174. };
  3175. priv.popoverCellTypeSpecial = function(e) {
  3176. e.preventDefault();
  3177. e.stopPropagation();
  3178. if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
  3179. var lastId = _popoverCell.data('rowid'),
  3180. lastCol = _popoverCell.data('col'),
  3181. rowPK = e.data.id,
  3182. colName = e.data.col
  3183. ;
  3184. if (lastId == rowPK && lastCol == colName) {
  3185. //_popoverCellCurrent.popover('toggle');
  3186. }
  3187. else {
  3188. if (_popoverCellCurrent) {
  3189. _popoverCellCurrent.popover('destroy');
  3190. }
  3191. _popoverCell.data('rowid', rowPK);
  3192. _popoverCell.data('col', colName);
  3193. _popoverCell.html(e.data.value + '<div class="popoverCellContent loading" style="white-space:normal"></div>');
  3194. _popoverCellCurrent = jQuery(e.currentTarget);
  3195. // title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
  3196. var opts = {
  3197. placement: 'left'
  3198. , trigger: 'click'
  3199. // , title: e.data.col + '<a href="#" class="glyphicon glyphicon-remove pull-right" onclick="return hidePopover();"></a>'
  3200. , title: '<div style="display:block;position:relative;padding:0 20px 0 0;">' + (e.data.friendly || colName) + ' <button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:0;top:0;">&times;</button>' + '</div>'
  3201. , html: true
  3202. , content: _popoverCell.html()
  3203. }
  3204. _popoverCellCurrent.popover(opts);
  3205. if (_data.cols[colName]) {
  3206. if (_data.cols[colName]._tsRetId > 0) {
  3207. _popoverCellCurrent.on('shown.bs.popover', function() {
  3208. priv.ajaxLoadTypeSpeciallCell(rowPK, colName);
  3209. });
  3210. }
  3211. }
  3212. _popoverCellCurrent.popover('show');
  3213. }
  3214. } else {
  3215. if (priv.options.debug || DBG) console.log('NO data');
  3216. return false;
  3217. }
  3218. return;
  3219. };
  3220. priv.routeChanged = function(e) {
  3221. hash = e.data.hash || '';
  3222. if (hash.length == 0) {
  3223. return;
  3224. }
  3225. if (hash.substring(0, 1) != '#') {
  3226. hash = '#' + hash;
  3227. }
  3228. location.hash = hash;
  3229. };
  3230. priv.refresh = function(e) {
  3231. e.preventDefault();
  3232. publ.loadPage(_state.page);
  3233. };
  3234. publ.init = function(options) {
  3235. if (priv.options.debug || DBG) console.log('TableAjax initialization...');
  3236. //merge supplied options with defaults
  3237. $.extend(priv.options, defaults, options);
  3238. priv.init();
  3239. return publ;
  3240. };
  3241. publ.refresh = function() {
  3242. publ.loadPage(_state.page);
  3243. };
  3244. publ.loadPage = function(page, pageSize) {
  3245. priv.loadPage(page, pageSize);
  3246. }
  3247. priv.loadPage = function(page, pageSize) {
  3248. var resetChecked = false;
  3249. var reqData = {
  3250. page: page,
  3251. pageSize: (pageSize || priv.options.pageSize),
  3252. currSortCol: (_state._currSortCol || ''),
  3253. currSortFlip: _state._currSortFlip ? "desc" : "asc"
  3254. };
  3255. var urlAdd = '';
  3256. urlAdd += '&' + 'page=' + page;
  3257. urlAdd += '&' + 'pageSize=' + (pageSize || priv.options.pageSize);
  3258. DBG && console.log('DBG::loadPage... FETCH_DATA', { '_state._filterQuery': _state._filterQuery, '_state._specialFilterQuery': _state._specialFilterQuery, _state });
  3259. urlAdd += '&' + priv.filter_getFullFilterQuery();
  3260. _uiNode$Table.parent().parent().addClass('AjaxTable-loading');
  3261. // p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych...'});
  3262. window.fetch(priv.options.url + urlAdd, {
  3263. method: priv.options.urlPost ? 'POST' : 'GET',
  3264. credentials: 'same-origin',// add cookies
  3265. }).then(function (response) {
  3266. return response.json()
  3267. }).then(function (data) {
  3268. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:loadPage: request finished, data:', data);
  3269. // p5UI__notifyAjaxCallback(data);
  3270. if ('success' == data.type) {
  3271. state = {data: {}};
  3272. state.data.cols = data.cols || {};
  3273. state.data.rows = data.rows || [];
  3274. state.data.total = data.total || 0;
  3275. state.data.primaryKey = data.primaryKey || 'ID';
  3276. state.page = data.page || 0;
  3277. state.pageSize = data.pageSize || priv.options.pageSize;
  3278. state.filters = data.filters || {};
  3279. DBG && console.log('DBG::loadPage... - FETCH_DATA END priv.setState(state);', { state });
  3280. priv.setState(state);
  3281. _uiNode$Table.parent().parent().removeClass('AjaxTable-loading');
  3282. } else {
  3283. p5UI__notifyAjaxCallback(data);
  3284. priv.showFailFetchDataMsg();
  3285. }
  3286. }).catch(function (e) {
  3287. console.log('loadDataAjax:fetch: ERR:', e);
  3288. });
  3289. };
  3290. publ.getCurrentPage = function() {
  3291. return _state.page;
  3292. };
  3293. publ.popoverCellRemove = function() {
  3294. if (_popoverCellCurrent) {
  3295. _popoverCellCurrent.popover('destroy');
  3296. }
  3297. _popoverCell.data('rowid', -1);
  3298. _popoverCell.data('col', -1);
  3299. _popoverCell.html('');
  3300. };
  3301. return publ;
  3302. }
  3303. $.fn.TableAjax = function(options) {
  3304. options = options || {};
  3305. return this.each(function() {
  3306. options.id = this;
  3307. $(this).data('TableAjax', new TableAjax().init(options));
  3308. });
  3309. };
  3310. $.fn.TableAjaxLoadPage = function(page, pageSize) {
  3311. return this.each(function() {
  3312. var tblAjax = jQuery(this).data('TableAjax');
  3313. var curPage = page || tblAjax.getCurrentPage();
  3314. if (tblAjax) tblAjax.loadPage(curPage, pageSize);
  3315. });
  3316. };
  3317. $.fn.TableAjaxRefresh = function(page, pageSize) {
  3318. return this.each(function() {
  3319. var tblAjax = jQuery(this).data('TableAjax');
  3320. if (tblAjax) tblAjax.refresh();
  3321. });
  3322. };