TableAjax.php.TableAjax.js 133 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543
  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. DBG && 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 topLeftWrap = document.createElement('div')
  1075. var topRightWrap = document.createElement('div')
  1076. topWrap.appendChild(topLeftWrap)
  1077. topWrap.appendChild(topRightWrap)
  1078. topWrap.style.padding = '12px 0'
  1079. topWrap.style.borderTop = '1px solid #ddd'
  1080. topWrap.style.borderBottom = '1px solid #ddd'
  1081. topWrap.style.overflow = 'hidden'
  1082. topLeftWrap.style.width = '' + priv.getStickyColsSumWidth() + 'px'
  1083. topLeftWrap.style.float = 'left'
  1084. topLeftWrap.style.fontSize = '12px'
  1085. topLeftWrap.style.lineHeight = '22px'
  1086. topRightWrap.style.float = 'left'
  1087. topLeftWrap.appendChild(_uiNodeSelectedInfo)
  1088. topRightWrap.appendChild(_uiNodeSpecialFilters)
  1089. _uiNodeCont.parentNode.insertBefore(topWrap, _uiNodeCont)
  1090. priv.renderInlineEditBox();// .tblAjax__inlineEditBox
  1091. _foot = undefined;
  1092. _head = undefined;
  1093. _body = undefined;
  1094. _headSort = undefined;
  1095. _headFilter = undefined;// TODO: refactor
  1096. };
  1097. priv.renderTable = function() {
  1098. if (!_state.colsSorted) return;
  1099. DBG && console.warn('DBG:renderTable: ', { _head, _headSort, _headFilter, _headSpecialFilter });
  1100. if (!_head) {
  1101. _headSort = undefined;
  1102. _headFilter = undefined;
  1103. _headSpecialFilter = undefined;
  1104. _head = _uiNode$Table.find('thead');
  1105. }
  1106. if (!_headSort) {
  1107. priv.renderTableTheadSort();
  1108. _headSort = true;
  1109. }
  1110. if (!_headFilter && priv.options.filter) {
  1111. priv.renderTableTheadFilter();
  1112. _headFilter = true;
  1113. }
  1114. if (!_headSpecialFilter && priv.options.specialFilterFunctions) {
  1115. priv.renderHeadSpecialFilters();
  1116. _headSpecialFilter = true;
  1117. }
  1118. if (!_body) {
  1119. DBG && console.log('DBG:renderTable !_body', { _bodyNode })
  1120. // _uiNode$Table.find('tbody').remove();
  1121. // _bodyNode = $('<tbody></tbody>').insertAfter(_head);
  1122. // _uiNode$Table.find('tbody > tr').remove();
  1123. _bodyNode.find('tr').remove();
  1124. // find out what rows to show next...
  1125. var rowsAdded = 0;
  1126. // slice out the chunk of data we need and create rows
  1127. $.each(_data.rows, function(index, props) {
  1128. var rowNode = priv.renderRow(props);
  1129. if (rowNode) rowNode.appendTo(_bodyNode);
  1130. rowsAdded++;
  1131. if (rowsAdded >= priv.options.pageSize) { // enough rows created
  1132. return false;
  1133. }
  1134. });
  1135. if (_state.page == 1) {
  1136. _totalPages = Math.ceil(_data.total / priv.options.pageSize);
  1137. }
  1138. if (_state.page == _totalPages) { // pad with empty rows if we're at last page.
  1139. while (rowsAdded < priv.options.pageSize) {
  1140. var rowNode = priv.renderRowEmptyNode();
  1141. if (rowNode) rowNode.appendTo(_bodyNode);
  1142. rowsAdded++;
  1143. }
  1144. }
  1145. }
  1146. if (!_foot) {
  1147. priv.renderTableTfoot();
  1148. priv.renderFooter();
  1149. }
  1150. _foot = $(_uiNodeCont).next('.foot');
  1151. priv.uiFixStickyCols();
  1152. if (_data.total == 0 && priv.options.hidePagerOnEmpty) {
  1153. $('.btn-toolbar', _foot).remove();
  1154. }
  1155. if (priv.options.debug || DBG) console.log('table created');
  1156. if (typeof priv.options.tableCreated == 'function') {
  1157. priv.options.tableCreated.call(_uiNode$Table.get(0), {table: _uiNode$Table.get(0)});
  1158. }
  1159. };
  1160. // TODO: priv.renderFieldWidget_InlineEdit = function(fldName, value) {}
  1161. // TODO: priv.renderFieldWidget_FormField = function(fldName, value) {}
  1162. // @usage: priv.renderFieldWidget_TableCell(fldName, val, rowPK, row)
  1163. priv.renderFieldWidget_TableCell = function(fldName, value, rowPK, row) {
  1164. var renderFieldAsTableCell = priv.getFieldWidget_TableCell(fldName);
  1165. if (!renderFieldAsTableCell) return null;
  1166. return renderFieldAsTableCell(value, rowPK, row);
  1167. };
  1168. priv.registerFieldWidget = function(type, fldName, fieldProps) {
  1169. var fieldWidget = null;
  1170. switch (type) {
  1171. case "date":// @return Element - TODO: not used yet
  1172. fieldWidget = (function(fldName, fieldProps) {
  1173. var _fieldName = fldName,
  1174. _fieldProps = fieldProps;
  1175. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1176. return function(val, fieldPK, row) {
  1177. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1178. return val;
  1179. }
  1180. }(fldName, fieldProps));
  1181. break;
  1182. case "bool":// @return Element - TODO: not used yet
  1183. fieldWidget = (function(fldName, fieldProps) {
  1184. var _fieldName = fldName,
  1185. _fieldProps = fieldProps;
  1186. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1187. return function(val, fieldPK, row) {
  1188. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1189. fldNode = document.createElement('input');
  1190. fldNode.setAttribute('type', 'checkbox');
  1191. if (val) fldNode.setAttribute('checked', 'checked');
  1192. fldNode.setAttribute('disabled', 'disabled');
  1193. fldNode.appendChild(document.createTextNode(val));
  1194. return fldNode;
  1195. }
  1196. }(fldName, fieldProps));
  1197. break;
  1198. case "number":// @return String - TODO: not used yet
  1199. fieldWidget = (function(fldName, fieldProps) {
  1200. var _fieldName = fldName,
  1201. _fieldProps = fieldProps,
  1202. _fractionDigits = _.get(_fieldProps, 'fractionDigits', 2);
  1203. // console.log('FieldWidget: generate function to render field('+_fieldName+') _fractionDigits('+_fractionDigits+')', fieldProps);
  1204. return function(val, fieldPK, row) {
  1205. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1206. if ('' === val) return ''; // is nullable
  1207. if ('*****' === val) return val;
  1208. // enumeration
  1209. // fractionDigits
  1210. // maxExclusive
  1211. // maxInclusive
  1212. // minExclusive
  1213. // minInclusive
  1214. // pattern
  1215. // totalDigits
  1216. // whiteSpace
  1217. val = Number(val);
  1218. return ((val || 0) % 1 === 0)? val : val.toFixed(_fractionDigits);
  1219. }
  1220. }(fldName, fieldProps));
  1221. break;
  1222. case "string":// @return String
  1223. fieldWidget = (function(fldName, fieldProps) {
  1224. var _fieldName = fldName,
  1225. _fieldProps = fieldProps,
  1226. _format = _.get(_fieldProps, 'format', '{0}');
  1227. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1228. return function(val, fieldPK, row) {
  1229. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1230. return p5Utils__format(_format, [val]);
  1231. }
  1232. }(fldName, fieldProps));
  1233. break;
  1234. case "p5:price":// @return String
  1235. fieldWidget = (function(fldName, fieldProps) {
  1236. var _fieldName = fldName,
  1237. _fieldProps = fieldProps,
  1238. _format = _.get(_fieldProps, 'format', '<span style="text-align:right">{0}</span>');
  1239. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1240. return function(val, fieldPK, row) {
  1241. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1242. return p5Utils__format(_format, [val]);
  1243. }
  1244. }(fldName, fieldProps));
  1245. break;
  1246. case "p5:string":// @return String
  1247. fieldWidget = (function(fldName, fieldProps) {
  1248. var _fieldName = fldName;
  1249. var _fieldProps = fieldProps;
  1250. var _formatDefault = _.get(_fieldProps, 'format', null);
  1251. var _formatByValue = _.get(_fieldProps, 'formatByValue', null);
  1252. var _formatEmpty = _.get(_fieldProps, 'formatEmpty', null);
  1253. var _aliasMap = _.get(_fieldProps, 'aliasMap', null);
  1254. return function(val, fieldPK, row) {
  1255. var outValue = '';
  1256. if (_formatByValue && val in _formatByValue) {
  1257. outValue = p5Utils__format(_formatByValue[val], [val])
  1258. }
  1259. else if (val && _formatDefault) {
  1260. outValue = p5Utils__format(_formatDefault, [val])
  1261. }
  1262. else if (!val && _formatEmpty) {
  1263. outValue = p5Utils__format(_formatEmpty, [])
  1264. }
  1265. // console.log('p5:string value', val, '_aliasMap', _aliasMap)
  1266. if (_aliasMap) {
  1267. Object.keys(_aliasMap).map(function (mapKey) {
  1268. var mapField = _aliasMap[mapKey]
  1269. if (undefined !== row[mapField]) {
  1270. outValue = outValue.replace(new RegExp('\{' + mapKey + '\}', 'g'), row[mapField]);
  1271. }
  1272. })
  1273. }
  1274. return outValue;
  1275. }
  1276. }(fldName, fieldProps));
  1277. break;
  1278. case "p5:www_link":// @return Element
  1279. fieldWidget = (function(fldName, fieldProps) {
  1280. var _fieldName = fldName,
  1281. _fieldProps = fieldProps;
  1282. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1283. return function(val, fieldPK, row) {
  1284. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1285. var link = '',
  1286. a = null,
  1287. dbg = false;
  1288. if (!val.length) return '';
  1289. if ('index.php' == val.substr(0, 9) || 'procesy5.php' == val.substr(0, 12)) {
  1290. link = window.location.protocol + '//' + window.location.hostname
  1291. link += window.location.pathname.split('/').slice(0, -1).join('/')
  1292. link += '/' + val
  1293. } else {
  1294. if ('http' == val.substr(0, 4)) link = val
  1295. //else if ('ftp' == val.substr(0, 3))
  1296. else link = 'http://' + val
  1297. }
  1298. var linkErrors = validate({www_link: link}, {www_link: {url: true}});
  1299. if (linkErrors) {
  1300. // if(dbg)console.log('linkErrors for (' + link +')', linkErrors);
  1301. return val;
  1302. }
  1303. fldNode = document.createElement('a');
  1304. fldNode.setAttribute('href', link);
  1305. fldNode.setAttribute('target', '_blank');
  1306. fldNode.appendChild(document.createTextNode(val));
  1307. return fldNode;
  1308. }
  1309. }(fldName, fieldProps));
  1310. break;
  1311. case "special":
  1312. fieldWidget = (function(fldName, fieldProps) {
  1313. var _fieldName = fldName;
  1314. var _fieldProps = fieldProps;
  1315. var _format = _.get(_fieldProps, 'format', '{0}');
  1316. var _aliasMap = _.get(_fieldProps, 'aliasMap', null);
  1317. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1318. return function(val, fieldPK, row) {
  1319. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps, 'row', row);
  1320. var format = _format;
  1321. if (_aliasMap) {
  1322. Object.keys(_aliasMap).map(function (mapKey) {
  1323. var mapField = _aliasMap[mapKey]
  1324. if (undefined !== row[mapField]) {
  1325. format = format.replace(new RegExp('\{' + mapKey + '\}', 'g'), row[mapField]);
  1326. }
  1327. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') _aliasMap:', _aliasMap, 'row['+mapField+']', row[mapField], 'converted val:', val);
  1328. })
  1329. }
  1330. return p5Utils__format(format, [val]);
  1331. }
  1332. }(fldName, fieldProps));
  1333. break;
  1334. case "simpleLink":
  1335. fieldWidget = (function(fldName, fieldProps) {
  1336. var _fieldName = fldName,
  1337. _fieldProps = fieldProps,
  1338. _format = _.get(_fieldProps, 'format', '{0}');
  1339. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1340. return function(val, fieldPK, row) {
  1341. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1342. var valLink = String(val);
  1343. if (undefined !== _fieldProps._tsRetId
  1344. && (0 === _fieldProps._tsRetId || '0' === _fieldProps._tsRetId || null === _fieldProps._tsRetId)
  1345. && undefined !== _fieldProps._tsSimpleLink) {
  1346. valLink = _fieldProps._tsSimpleLink.format;
  1347. $.each(_fieldProps._tsSimpleLink.aliasMap, function(i, v) {
  1348. // console.log('simpleLink aliasMap fldName:', fldName, 'i:', i, 'v:', v, 'row['+v+']', row[v], 'val', val, 'typeof val', typeof val);
  1349. if (undefined !== row[v]) {
  1350. var _itemValue = row[v];
  1351. if (fldName == 'LINK_PROBLEMS' && row[v]) _itemValue = _itemValue.replace(/"/g, '%22').replace(/&/g, '%26');
  1352. valLink = valLink.replace(new RegExp('\{' + i + '\}', 'g'), _itemValue);
  1353. }
  1354. });
  1355. }
  1356. return p5Utils__format(_format, [valLink]);
  1357. }
  1358. }(fldName, fieldProps));
  1359. break;
  1360. case "gml:PolygonPropertyType":
  1361. case "gml:LineStringPropertyType":
  1362. case "gml:PointPropertyType":
  1363. case "p5Type:polygon":
  1364. case "p5Type:lineString":
  1365. case "p5Type:point":
  1366. case "geom":
  1367. fieldWidget = (function(fldName, fieldProps) {
  1368. var _fieldName = fldName,
  1369. _fieldProps = fieldProps,
  1370. _format = _.get(_fieldProps, 'format', '{0}');
  1371. // console.log('FieldWidget: generate function to render field('+_fieldName+') ', fieldProps);
  1372. return function(val, fieldPK, row) {
  1373. // console.log('FieldWidget: run function to render field('+_fieldName+') with value('+val+') ', fieldProps);
  1374. // console.log('FieldWidget: test priv', priv);
  1375. var node = jQuery('<span></span>');
  1376. node.TableAjaxGeomField({
  1377. recordID: fieldPK,
  1378. fieldValue: val,
  1379. hasValueClassName: 'cell-mapfld-hasValue',
  1380. linkClassNamePrefix: 'cell-mapfld',
  1381. linkSelectClassName: 'select',
  1382. linkSelectAddClassNames: 'glyphicon glyphicon-map-marker',
  1383. getCsvUrl: priv.options.getCsvTheGeomAjaxUrl,
  1384. linkGetCsvAddClassNames: 'glyphicon glyphicon-download',
  1385. linkRemoveClassName: 'remove',
  1386. linkRemoveAddClassNames: 'glyphicon glyphicon-remove',
  1387. onSelect: function(recordID, geomShape) {
  1388. if (priv.options.debug || DBG) console.log('recordID:', recordID, 'geomShape:', geomShape);
  1389. priv.mapEditorShow();
  1390. _mapEditor.TableAjaxMapSelectRecord(recordID, geomShape);
  1391. },
  1392. onRemove: function(geomField, recordID, geomShape) {
  1393. if (confirm('Czy usunąć obiekt z mapy dla rekordu ' + recordID + '?')) {
  1394. if (!recordID) return;
  1395. var selectedRecordId = recordID;
  1396. superagent
  1397. .post(priv.options.removeTheGeomAjaxUrl)
  1398. .type('json') // header ĺapplication/x-www-form-urlencoded' requires type('form');
  1399. .send({
  1400. ID: recordID,
  1401. namespace: priv.options.namespace
  1402. })
  1403. .set('Accept', 'application/json')
  1404. .end(function(err, res) {
  1405. if(priv.options.debug)console.log('DBG: res:', res, 'res.body:', res.body);
  1406. var payload;
  1407. if (err || !res.ok || 'application/json' !== res.type) {
  1408. payload = {type: 'warning', msg: res.body.msg || 'Wystąpiły błędy', body: res.body};
  1409. } else {
  1410. payload = {type: 'success', msg: res.body.msg || '', body: res.body};
  1411. }
  1412. p5UI__notifyAjaxCallback(payload);
  1413. var data = res.body;
  1414. if (data && data.record && data.record.the_geom) {
  1415. if (priv.options.debug || DBG) console.log('data.record.the_geom:2:', data.record.the_geom);
  1416. geomField.setValue(data.record.the_geom);
  1417. }
  1418. else if (data && data.record) {
  1419. if (priv.options.debug || DBG) console.log('data.record.the_geom:2:', data.record.the_geom);
  1420. geomField.setValue(data.record.the_geom);
  1421. }
  1422. _mapEditor.TableAjaxMapRefresh();
  1423. });
  1424. }
  1425. }
  1426. });
  1427. return node;
  1428. }
  1429. }(fldName, fieldProps));
  1430. break;
  1431. case "ref":
  1432. fieldWidget = (function(fldName, fieldProps) {
  1433. var _fieldName = fldName,
  1434. _fieldProps = fieldProps;
  1435. // console.log('FieldWidget: generate function to render field('+_fieldName+') fieldProps: ', fieldProps);
  1436. return function(val, fieldPK, row) {
  1437. // console.log('FieldWidget: pk('+fieldPK+') run function to render field('+_fieldName+') with value: ', val, ', fieldProps: ', fieldProps);
  1438. // if (val.length > 5) return '('+val.length+')' + printFirst5 + '...' => open more info
  1439. return _.map(val, function(v) {
  1440. if (!v || !v.xlink) return '';
  1441. var idRemote = v.xlink.split('.').pop()
  1442. var nsRemote = v.xlink.split(':').pop().split('.').shift()
  1443. var seLink = URI_BASE + 'index.php?_route=ViewTableAjax&namespace=' + fieldProps.xsdRefNsPrefix.replace(/__x3A__/g, '/') + '/' + nsRemote + '#EDIT/' + idRemote;
  1444. var wfsLink = fieldProps.xsdRefUri + '#' + fieldProps.xsdRefType + '.' + idRemote;
  1445. return '<a class="btn btn-xs btn-default" href="' + seLink + '" title="' + wfsLink + '">' + idRemote + '</a>';
  1446. }).join(' ');
  1447. }
  1448. }(fldName, fieldProps));
  1449. break;
  1450. }
  1451. _fieldWidgets[fldName] = fieldWidget;
  1452. };
  1453. priv.getFieldWidget_TableCell = function(fieldName) {
  1454. var props = _data.cols[fieldName],
  1455. type = null,
  1456. renderFieldAsTableCell = null;
  1457. if (!props) return null;
  1458. type = _.get(props, 'type');
  1459. if (!type) type = 'string';// TODO: throw Exception? / default string
  1460. renderFieldAsTableCell = _.get(_fieldWidgets, fieldName);
  1461. if (renderFieldAsTableCell) return renderFieldAsTableCell;
  1462. priv.registerFieldWidget(type, fieldName, props);
  1463. renderFieldAsTableCell = _.get(_fieldWidgets, fieldName);
  1464. if (!renderFieldAsTableCell) throw "Field type '" + type + "' not implemented";
  1465. return renderFieldAsTableCell;
  1466. };
  1467. priv.renderRow = function(props) {
  1468. var rowNode = $('<tr></tr>');
  1469. var rowPK = (_state.primaryKey in props) ? props[_state.primaryKey] : null;
  1470. var cellNode;
  1471. var columnName, columnProps, val, cellCnt, format, showTooltip, fldWidgetNode;
  1472. var dbg = (priv.options.debug || DBG);
  1473. // ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event);"
  1474. rowNode.attr('ondrop', "p5TA_onDrop(event, '"+rowPK+"', '"+priv.options.namespace+"')")
  1475. rowNode.attr('ondragover', "p5TA_onDragOver(event, this, '"+rowPK+"', '"+priv.options.namespace+"')")
  1476. rowNode.attr('ondragend', "p5TA_onDragEnd(event, this, '"+rowPK+"', '"+priv.options.namespace+"')")
  1477. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1478. cellNode = priv.renderCellRowFunctions(priv.options.rowFunctions, rowPK, props);
  1479. cellNode.addClass('text-right stickyCol stickyCol1');
  1480. cellNode.appendTo(rowNode);
  1481. }
  1482. //create checkbox
  1483. if (_state.primaryKey && priv.options.checkboxes) { // row checkbox cell
  1484. var checkable = props['checkable'] === false ? 'disabled' : '';
  1485. cellNode = $('<td class="stickyCol stickyCol2" style="padding:3px 5px"></td>').appendTo(rowNode);
  1486. ReactDOM.render(
  1487. h(P5UI__TableAjaxRowCheckbox, {
  1488. namespace: priv.options.namespace,
  1489. primaryKey: rowPK,
  1490. store: priv.options.selectedStore,
  1491. actions: priv.options.selectedActions
  1492. }),
  1493. cellNode.get(0)
  1494. );
  1495. }
  1496. if (_state.primaryKey) rowNode.data('unique', rowPK);
  1497. //create cells
  1498. for (var i = 0; i < _state.colsSorted.length; i++) {
  1499. columnName = _state.colsSorted[i];
  1500. columnProps = _data.cols[columnName];
  1501. val = '';
  1502. if (!columnProps) continue;
  1503. if (columnProps.hidden) continue;// TODO: "unique" is hidden
  1504. showTooltip = true;
  1505. val = props[columnName];
  1506. cellNode = $('<td></td>').appendTo(rowNode);
  1507. if (i === 1) cellNode.addClass('stickyCol stickyCol3');// primaryKey(ID)
  1508. if (i !== 1) cellNode.on('dblclick', {id:rowPK, col:columnName}, priv.rowDblClicked);
  1509. cellCnt = (i === 1)? '<div></div>' : '<span></span>';
  1510. cellCnt = $(cellCnt).appendTo(cellNode);// fix dblclick for copy
  1511. cellNode.data('column', columnName);
  1512. if (val === undefined) continue;
  1513. format = _.get(columnProps, 'format', '{0}');
  1514. // test use field widgets
  1515. fldWidgetNode = priv.renderFieldWidget_TableCell(columnName, val, rowPK, props);
  1516. if (fldWidgetNode || fldWidgetNode === 0) {
  1517. cellCnt.empty();
  1518. cellCnt.append(fldWidgetNode);
  1519. } else if (fldWidgetNode === '') {
  1520. cellCnt.empty();
  1521. } else {
  1522. console.log('TODO: !FieldWidget for row.pk('+rowPK+') col('+columnName+') typeof fldWidgetNode(' + (typeof fldWidgetNode) + ') columnProps', columnProps, 'fldWidgetNode', fldWidgetNode, 'value', props[columnName]);
  1523. }// test fld widgets
  1524. if (columnProps._tsRetId) {
  1525. showTooltip = false;
  1526. if (columnProps._tsRetId > 0) {
  1527. cellCnt.on('click', {id:rowPK, col:columnName, friendly:columnProps.friendly, value:p5Utils__format(format, [val])}, priv.popoverCellTypeSpecial);
  1528. }
  1529. }
  1530. if ('ref' === columnProps.type) showTooltip = false;
  1531. if ('ref' === columnProps.type) cellNode.css('padding', "3px")
  1532. if ('ref' === columnProps.type && (priv.options.debug || DBG)) console.log('renderRow rowPK('+rowPK+') columnProps', columnProps)
  1533. // if ('ref' === columnProps.type) cellNode.html('<a href="index.php?_route=ViewTableAjax' +
  1534. // '&namespace=' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType +
  1535. // '&backRefNS=' + priv.options.namespace +
  1536. // '&backRefPK=' + rowPK +
  1537. // '&backRefField=' + columnProps.column +
  1538. // '">przeglądaj</a>')
  1539. if ('ref' === columnProps.type) {
  1540. cellNode.html('<a onClick="return p5UI__tableAjaxOpenRefCell(' +
  1541. '\'' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType + '\', ' + // namespace
  1542. '\'' + priv.options.namespace + '\', ' + // backRefNS
  1543. '\'' + rowPK + '\', ' + // backRefPK
  1544. '\'' + columnProps.column + '\')' + // backRefField
  1545. '" ' +
  1546. 'href="index.php?_route=ViewTableAjax' +
  1547. '&namespace=' + columnProps.xsdRefNsPrefix.replace('__x3A__', '/') + '/' + columnProps.xsdRefType +
  1548. '&backRefNS=' + priv.options.namespace +
  1549. '&backRefPK=' + rowPK +
  1550. '&backRefField=' + columnProps.column +
  1551. '">przeglądaj</a>')
  1552. }
  1553. if (columnProps.xsdType && 'xsd:base64Binary' === columnProps.xsdType) {
  1554. cellCnt.empty();
  1555. if (val) {
  1556. 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>');
  1557. } else {
  1558. cellCnt.append('<span style="color:silver" title="Brak danych">N/S;</span>');
  1559. }
  1560. }
  1561. if (i > 1 && priv.options.longDesc) {// TODO: use better check for columns: functions and pk
  1562. cellNode.addClass('tbl-short-txt');
  1563. if (showTooltip) {
  1564. cellCnt.tooltip({title: cellCnt.text(), placement: 'left'});
  1565. }
  1566. }
  1567. }
  1568. return rowNode;
  1569. };
  1570. priv.renderCellRowFunctions = function(rowFunctions, rowPK, rowProps) {
  1571. var cellNode = $('<td></td>'),
  1572. keys = Object.keys(rowFunctions),
  1573. total = keys.length,
  1574. moreFuncBtnNode,
  1575. moreFunctions = [],
  1576. idx
  1577. ;
  1578. if (priv.options.debug || DBG) console.log('TableAjax::renderCellRowFunctions: rowFunctions', rowFunctions);
  1579. idx = keys.indexOf('hist');
  1580. if (idx !== -1) {
  1581. histFunc = keys.splice(idx, 1);
  1582. keys.push('hist');
  1583. }
  1584. moreFunctions = keys.splice(3);
  1585. keys.forEach(function(key) {
  1586. var funObj = rowFunctions[key],
  1587. funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: false})
  1588. ;
  1589. funcNode.appendTo(cellNode);
  1590. });
  1591. moreFuncBtnNode = $('<a href="#" style="margin:0 2px;text-decoration:none" title="Więcej funkcji dla rekordu nr '+rowPK+'" class="glyphicon glyphicon-menu-hamburger"> </a>');
  1592. moreFuncBtnNode.on('click', {rowPK: rowPK, rowFunctions: rowFunctions, more: moreFunctions}, priv.popoverCellMoreFunctions);
  1593. moreFuncBtnNode.appendTo(cellNode);
  1594. return cellNode;
  1595. };
  1596. priv.popoverCellMoreFunctions = function(e) {
  1597. e.preventDefault();
  1598. e.stopPropagation();
  1599. if (!e.data || !e.data.rowPK) {
  1600. if (priv.options.debug || DBG) console.log('NO data');
  1601. return false;
  1602. }
  1603. if (priv.options.debug || DBG) console.log('TableAjax::popoverCellMoreFunctions: rowPK', e.data.rowPK, 'moreFunctions', e.data.more, 'rowFunctions', e.data.rowFunctions);
  1604. var lastId = _popoverCell.data('rowid');
  1605. var lastCol = _popoverCell.data('col');
  1606. var rowPK = e.data.rowPK;
  1607. var moreFunctions = e.data.more;
  1608. var rowFunctions = e.data.rowFunctions;
  1609. var funcListNode;
  1610. if (lastId == e.data.rowPK && lastCol == 'moreFunctions') {
  1611. //_popoverCellCurrent.popover('toggle');
  1612. return;
  1613. }
  1614. if (_popoverCellCurrent) {
  1615. _popoverCellCurrent.popover('destroy');
  1616. }
  1617. _popoverCell.data('rowid', rowPK);
  1618. _popoverCell.data('col', 'rowFunctions');
  1619. _popoverCell.empty();
  1620. funcListNode = $('<ul class="list-unstyled popoverRowFunctions"></ul>').appendTo(_popoverCell);
  1621. moreFunctions.forEach(function(funcName) {
  1622. var funcItemNode = $('<li></li>').appendTo(funcListNode),
  1623. funObj = rowFunctions[funcName],
  1624. funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: true})
  1625. ;
  1626. funcNode.addClass('func_name-' + funcName);
  1627. funcItemNode.append(funcNode);
  1628. });
  1629. if (3 === priv.options.namespace.split('/').length) { // if namesapce is AntAcl [ and has ref fields or back ref ]
  1630. var funcItemNode = $('<li></li>').appendTo(funcListNode)
  1631. var funObj = {
  1632. ico: 'glyphicon glyphicon-random',
  1633. label: 'Przeglądaj powiązania',
  1634. href: 'index.php?_route=RefGraph&namespace=' + priv.options.namespace + '&primaryKey=' + rowPK,
  1635. // onclick: function (e) { // TODO: open in
  1636. // console.log('TODO: przeglądaj powiązania')
  1637. // }
  1638. }
  1639. var funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, { ico: true, label: true })
  1640. funcItemNode.append(funcNode);
  1641. }
  1642. _popoverCell.append('<div class="popoverCellContent" style="white-space:normal"></div>');
  1643. _popoverCellCurrent = jQuery(e.currentTarget);
  1644. // title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
  1645. var opts = {
  1646. container: 'body',
  1647. placement: 'right',
  1648. trigger: 'click',
  1649. template: '',
  1650. html: true,
  1651. content: _popoverCell.html()
  1652. }
  1653. opts.template += '<div class="popover" role="tooltip" style="max-width:600px;width:440px;">';
  1654. {
  1655. opts.template += '<div class="arrow"></div>';
  1656. //opts.template += '<h3 class="popover-title"></h3>';
  1657. opts.template += '<div style="display:block;position:relative;">';
  1658. {
  1659. opts.template += '<div class="popover-title">';
  1660. opts.template += '</div>';
  1661. opts.template += '<button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:8px;top:6px;">&times;</button>';
  1662. }
  1663. opts.template += '</div>';
  1664. opts.template += '<div class="popover-content"></div>';
  1665. }
  1666. opts.template += '</div>';
  1667. _popoverCellCurrent.popover(opts);
  1668. _popoverCellCurrent.on('shown.bs.popover', function(e) {
  1669. if (!_popoverCellCurrent) return;
  1670. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  1671. if (!popoverNodeId) return;
  1672. var popover$Node = jQuery('#' + popoverNodeId);
  1673. if (!popover$Node.length) return;
  1674. var arrow$Node = popover$Node.children('.arrow');
  1675. if (arrow$Node.length) {
  1676. var posTop = parseFloat(arrow$Node.css('top'));
  1677. arrow$Node.css('top', '' + posTop + 'px')
  1678. }
  1679. popover$Node.find('.popoverCellContent').html('<p class="text-muted">Pobieranie funkcji...<p>');
  1680. priv.ajaxLoadMoreFunctionsCell(rowPK);
  1681. });
  1682. _popoverCellCurrent.popover('show');
  1683. return;
  1684. };
  1685. priv.ajaxLoadMoreFunctionsCell = function(rowPK) {
  1686. var dbg = (priv.options.debug || DBG);
  1687. if (_popoverCellAjaxXhr) {
  1688. _popoverCellAjaxXhr.abort();
  1689. }
  1690. _popoverCellAjaxXhr = $.ajax({
  1691. type: 'GET',
  1692. url: priv.options.moreFunctionsCellAjaxUrl + '&ID=' + rowPK,
  1693. dataType: 'json',
  1694. contentType: "application/json; charset=utf-8",
  1695. data: ''
  1696. })
  1697. .done(function(data, textStatus, jqXHR){
  1698. if (data && 'success' === data.type) {
  1699. var popoverCellContent,
  1700. rowFunctions = [],
  1701. funcNodesToUpdate = []
  1702. ;
  1703. if (data.rowFunctions && data.rowFunctions.length > 0) {
  1704. rowFunctions = data.rowFunctions;
  1705. }
  1706. if (rowFunctions.length > 0) {
  1707. var popoverCellContent = $('<ul class="list-unstyled"></ul>');
  1708. rowFunctions.forEach(function(funObj) {
  1709. var funcNode = p5UI_TableAjax_generateFunctionNode(funObj, rowPK, {ico: true, label: true});
  1710. if (funObj.id) {
  1711. funcNodesToUpdate.push({id: funObj.id, node: funcNode});
  1712. } else {
  1713. var funcItemNode = $('<li></li>').appendTo(popoverCellContent);
  1714. funcItemNode.append(funcNode);
  1715. }
  1716. });
  1717. } else {
  1718. popoverCellContent = '<p class="text-muted">Brak dodatkowych funkcji</p>';
  1719. }
  1720. //_popoverCell.append(popoverCellContent);// cache
  1721. if (_popoverCellCurrent) {
  1722. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  1723. if (popoverNodeId) {
  1724. var popoverNode = jQuery('#' + popoverNodeId),
  1725. popoverCntNode = popoverNode.find('.popoverCellContent'),
  1726. popoverRowFuncNode = popoverNode.find('.popoverRowFunctions');
  1727. ;
  1728. {// fix generated row Functions by loaded from ajax call
  1729. if(dbg) console.log('popoverRowFunctions. popoverRowFuncNode', popoverRowFuncNode);
  1730. if(dbg) console.log('popoverRowFunctions. funcNodesToUpdate', funcNodesToUpdate);
  1731. funcNodesToUpdate.forEach(function(funcNodeInfo) {
  1732. var className = 'func_name-' + funcNodeInfo.id,
  1733. foundRowFuncNode = null
  1734. ;
  1735. if(dbg) console.log('popoverRowFunctions. funcNodesToUpdate loop:', funcNodeInfo);
  1736. popoverRowFuncNode.find('li > a').each(function(ind, n) {
  1737. var n$ = $(n);
  1738. if(dbg) console.log('popoverRowFunctions loop(',ind,'):', n, 'data(func_name)', n$.data('func_name'), 'data', n$.data());
  1739. if (n$.hasClass(className)) {
  1740. foundRowFuncNode = n$;
  1741. }
  1742. });
  1743. if (foundRowFuncNode) {
  1744. foundRowFuncNode.replaceWith(funcNodeInfo.node);
  1745. } else {
  1746. var funcItemNode = $('<li></li>').appendTo(popoverCellContent);
  1747. funcItemNode.append(foundRowFuncNode);
  1748. }
  1749. });
  1750. }
  1751. popoverCntNode.empty().append(popoverCellContent);
  1752. if (rowFunctions.length <= 0) {
  1753. popoverCntNode.find('p.text-muted').delay(600).hide(300);
  1754. }
  1755. }
  1756. }
  1757. }
  1758. });
  1759. };
  1760. priv.renderRowEmptyNode = function() {
  1761. var rowNode = $('<tr></tr>');
  1762. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1763. $('<td class="text-right stickyCol stickyCol1">&nbsp;</td>').appendTo(rowNode);
  1764. }
  1765. if (_state.primaryKey && priv.options.checkboxes) {
  1766. var cellNode = $('<td class="stickyCol stickyCol2" style="padding:3px 5px"></td>').appendTo(rowNode);
  1767. }
  1768. for (var i = 0; i < _state.colsSorted.length; i++) {
  1769. var columnName = _state.colsSorted[i],
  1770. columnProps = _data.cols[columnName]
  1771. ;
  1772. if (!columnProps) return;
  1773. if (columnProps.hidden) continue;// "unique" is hidden - TODO: rm "unique" from _state.colsSorted ?
  1774. if (i == 1) {// TODO: 1 is pk - use better check
  1775. $('<td class="stickyCol3">&nbsp;</td>').appendTo(rowNode);
  1776. } else {
  1777. $('<td>&nbsp;</td>').appendTo(rowNode);
  1778. }
  1779. }
  1780. return rowNode;
  1781. };
  1782. priv.renderTableTheadSort = function() {
  1783. DBG && console.log('DBG:renderTableTheadSort', { '_state._currSortCol': _state._currSortCol, '_state._currSortFlip': _state._currSortFlip });
  1784. var nodeClass = 'tblAjax__' + 'head__sort'
  1785. var currentNode = _uiNode$Table.find('thead').find('.' + nodeClass)
  1786. var node = $('<tr class="sort ' + nodeClass + '"></tr>')
  1787. if (priv.options.tblFunctions || priv.options.filtersClean) {
  1788. var headCell = $('<th class="text-right head-info stickyCol stickyCol1"></th>').appendTo(node)
  1789. $.map(priv.options.tblFunctions, function (funObj, funName) {
  1790. var funHtml = $('<a></a>')
  1791. funHtml.attr('href', funObj.href || '#')
  1792. if (funObj.title) funHtml.attr('title', funObj.title)
  1793. if (funObj.icon) funHtml.html('<span class="glyphicon glyphicon-' + funObj.icon + '"></span> ')
  1794. if (funObj.method && priv[funObj.method] && typeof priv[funObj.method] == 'function') {
  1795. funHtml.on('click', priv[funObj.method])
  1796. }
  1797. funHtml.appendTo(headCell)
  1798. })
  1799. }
  1800. if (_state.primaryKey && priv.options.checkboxes) {
  1801. var headCell = $('<th class="stickyCol stickyCol2" style="padding:3px 5px"></th>').appendTo(node);
  1802. ReactDOM.render(
  1803. h(P5UI__TableAjaxRowCheckbox, {
  1804. namespace: priv.options.namespace,
  1805. primaryKey: 'select-all',
  1806. store: priv.options.selectedStore,
  1807. actions: priv.options.selectedActions
  1808. }),
  1809. headCell.get(0)
  1810. );
  1811. }
  1812. for (var i = 0; i < _state.colsSorted.length; i++) {
  1813. var column = _state.colsSorted[i]
  1814. var props = _data.cols[column]
  1815. DBG && console.log('DBG:renderTableTheadSort loop', { column, props });
  1816. if (props.hidden) continue;
  1817. var headCell = $('<th class="ta-ordering"></th>').appendTo(node)
  1818. if (_state.primaryKey === column) headCell.addClass('stickyCol stickyCol3')
  1819. ReactDOM.render(
  1820. h(P5UI__TableAjaxSortableLabel, {
  1821. namespace: priv.options.namespace,
  1822. isSortable: (props.type != 'special' && props.type != 'geom' && props.type != "simpleLink" && props.type != "ref"), // TODO: props.isSortable
  1823. fieldName: column,
  1824. fieldProps: props,
  1825. store: priv.options.filterStore,
  1826. actions: priv.options.filterActions
  1827. }),
  1828. headCell.get(0)
  1829. );
  1830. if (column !== _state.primaryKey) {
  1831. var hideColBtn = $('<i class="glyphicon glyphicon-remove remove-cell"></i>')
  1832. hideColBtn.on('click', {column: column}, priv.columnHideClicked)
  1833. hideColBtn.appendTo(headCell)
  1834. }
  1835. }
  1836. currentNode.replaceWith(node)
  1837. };
  1838. priv.renderHeadSpecialFilters = function() {
  1839. DBG && console.warn('DBG:priv.renderHeadSpecialFilters...', { 'priv.options.specialFilterFunctions': priv.options.specialFilterFunctions });
  1840. if (!priv.options.specialFilterFunctions) {
  1841. return;
  1842. }
  1843. ReactDOM.render(
  1844. h(P5UI__TableAjaxSpecialFilters, {
  1845. store: priv.options.filterStore,
  1846. actions: priv.options.filterActions,
  1847. specialFilters: priv.options.specialFilterFunctions,
  1848. namespace: priv.options.namespace,
  1849. }),
  1850. _uiNodeSpecialFilters
  1851. );
  1852. };
  1853. priv.renderTableTheadFilter = function() {
  1854. DBG && console.log('DBG::renderTableTheadFilter...');
  1855. var nodeClass = 'tblAjax__' + 'head__filter',
  1856. currentNode = _uiNode$Table.find('thead').find('.' + nodeClass),
  1857. node;
  1858. // currentNode.find('i').tooltip('hide');
  1859. node = $('<tr class="filter ' + nodeClass + '"></tr>');
  1860. //_head.find(".filter").remove();
  1861. //_headFilter = $('<tr class="filter"></tr>').appendTo(_head);
  1862. var headCell;
  1863. var elem;
  1864. var placeHolder = '';
  1865. var tooltip = '';
  1866. //create the functions column
  1867. if (priv.options.rowFunctions || priv.options.filtersClean) {
  1868. var headCell = $('<th class="text-right stickyCol stickyCol1"></th>').appendTo(node);
  1869. headCell.css({padding: '0'});
  1870. if (priv.options.filtersClean) {
  1871. ReactDOM.render(
  1872. h(p5UI__TableAjaxClearAllFilters, {
  1873. store: priv.options.filterStore,
  1874. actions: priv.options.filterActions
  1875. }),
  1876. headCell.get(0)
  1877. );
  1878. }
  1879. }
  1880. //create the filter checkbox
  1881. if (_state.primaryKey && priv.options.checkboxes) {
  1882. // tooltip = priv.options.types.bool.filterTooltip || 'Pokaż tylko:<br/>nieokreślony,<br/>zaznaczony,<br/>niezaznaczony';
  1883. headCell = $('<th class="stickyCol stickyCol2" style="padding:0"></th>').appendTo(node);
  1884. ReactDOM.render(
  1885. h(P5UI__TableAjaxFieldCheckboxSearch, {
  1886. namespace: priv.options.namespace,
  1887. fieldName: ( priv.options.checkboxIdContext ? '@sel_' + priv.options.checkboxIdContext : '@selected' ),
  1888. store: priv.options.filterStore,
  1889. actions: priv.options.filterActions
  1890. }),
  1891. headCell.get(0)
  1892. );
  1893. }
  1894. //create the column filters
  1895. for (var i = 0; i < _state.colsSorted.length; i++) {
  1896. var column = _state.colsSorted[i];
  1897. var props = _data.cols[column];
  1898. tooltip = props.filterTooltip === true ? undefined : props.filterTooltip === false ? '' : props.filterTooltip;
  1899. placeHolder = props.placeHolder === true ? undefined : props.placeHolder === false ? '' : props.placeHolder;
  1900. if (props.hidden) continue;
  1901. headCell = $('<th></th>').appendTo(node);
  1902. headCell.css({padding: '0'});
  1903. if (i == 1) headCell.addClass('stickyCol stickyCol3');
  1904. ReactDOM.render(
  1905. h(p5UI__FieldInputFilterSearch, {
  1906. disabled: (priv.options.forceFilterInit && undefined !== priv.options.forceFilterInit[column]),
  1907. fieldName: column,
  1908. type: props.type,
  1909. lagacyProps: props, // TODO: use ony required like xsdType
  1910. // xsdType: props.xsdType,
  1911. store: priv.options.filterStore,
  1912. onChange: function (fieldName, value) {
  1913. priv.options.filterStore.dispatch( priv.options.filterActions.delayFilter(fieldName, value) );
  1914. }
  1915. }),
  1916. headCell.get(0)
  1917. );
  1918. }
  1919. currentNode.replaceWith(node);
  1920. };
  1921. priv.renderTableTfoot = function() {
  1922. _uiNode$Table.find('tfoot').remove();
  1923. _foot = $('<tfoot></tfoot>').insertAfter(_bodyNode);
  1924. //$(_uiNodeCont).next('.foot').replaceWith(_foot);
  1925. };
  1926. priv.renderFooter = function() {
  1927. priv.renderFooterInfo();
  1928. priv.renderFooterPagination();
  1929. priv.renderFooterPageSizes();
  1930. priv.renderFooterColumnPicker();
  1931. priv.renderFooterFunctions();
  1932. priv.renderFooterExport();
  1933. };
  1934. priv.renderFooterInfo = function() {
  1935. DBG && console.log('DBG:TableAjax::renderFooterInfo', { _uiNodeFooterInfo: _uiNodeFooterInfo });
  1936. var fromRow = Math.max(_state.page - 1, 0) * _state.pageSize;
  1937. var total = _data.total;
  1938. var toRow = Math.min(fromRow + _state.pageSize, total);
  1939. if (_data.total > 0) {
  1940. _uiNodeFooterInfo.innerHTML = '<div style="font-size:12px; line-height:1.4em;">' +
  1941. '<strong>Łącznie wyników:</strong> <span class="hide-on-loading">' + total + '</span>' +
  1942. '<br>' +
  1943. '<small class="hide-on-loading" style="color:#999; font-size:10px">' + p5Utils__format('Wyświetlane wiersze: od {0} do {1}', [fromRow + 1, toRow]) + '</small>' +
  1944. '</div>';
  1945. } else {
  1946. _uiNodeFooterInfo.innerHTML = '<p><strong>Brak wierszy pasujących do kryteriów wyszukiwania<strong></p>';
  1947. }
  1948. };
  1949. priv.renderFooterPagination = function() {
  1950. var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',
  1951. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  1952. node;
  1953. var currPage = _state.page;
  1954. var totalPages = Math.ceil(_data.total / _state.pageSize);
  1955. if (priv.options.debug || DBG) console.log('Render: ', nodeClass, '_data.total', _data.total, 'currPage', currPage);
  1956. if (_data.total > 0) {
  1957. node = $('<div class="btn-group ' + nodeClass + '"></div>');
  1958. var lowerPage = currPage - 2;
  1959. var upperPage = currPage + 2;
  1960. if (upperPage > totalPages) {
  1961. var diff = upperPage - totalPages;
  1962. upperPage = totalPages;
  1963. lowerPage -= diff;
  1964. }
  1965. if (lowerPage < 1) lowerPage = 1;
  1966. if (upperPage < 5) upperPage = 5;
  1967. //$(p5Utils__format('<li class="{0}"><a href="#">&lt;&lt;</a></li>', [currPage == 1 ? 'disabled' : '']))
  1968. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&lt;&lt;</button>', [currPage == 1 ? ' disabled' : '']))
  1969. .on('click', {pageIndex: 1}, priv.pageChanged)
  1970. .appendTo(node);
  1971. //$(p5Utils__format('<li class="{0}"><a href="#">&lt;</a></li>', [currPage == 1 ? 'disabled' : '']))
  1972. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&lt;</button>', [currPage == 1 ? ' disabled' : '']))
  1973. .on('click', {pageIndex: currPage - 1}, priv.pageChanged)
  1974. .appendTo(node);
  1975. for (var i = lowerPage; i <= upperPage; i++) {
  1976. var link;
  1977. //if (i != currPage) link = $(p5Utils__format('<li class="{1}"><a href="#">{0}</a></li>', [i, i > totalPages ? 'disabled' : '']));
  1978. if (i != currPage) link = $(p5Utils__format('<button type="button" class="btn btn-default{1}">{0}</button>', [i, i > totalPages ? ' disabled' : '']));
  1979. //if (i == currPage) link = $(p5Utils__format('<li class="active"><a href="#">{0}</a></li>', [i]));
  1980. if (i == currPage) link = $(p5Utils__format('<button type="button" class="btn btn-default active">{0}</button>', [i]));
  1981. if (link) {
  1982. link.on('click', {pageIndex: i}, priv.pageChanged);
  1983. link.appendTo(node);
  1984. }
  1985. }
  1986. //$(p5Utils__format('<li class="{0}"><a href="#">&gt;</a></li>', [currPage == totalPages ? 'disabled' : '']))
  1987. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&gt;</button>', [currPage == totalPages ? ' disabled' : '']))
  1988. .on('click', {pageIndex: currPage + 1}, priv.pageChanged)
  1989. .appendTo(node);
  1990. //$(p5Utils__format('<li class="{0}"><a href="#">&gt;&gt;</a></li>', [currPage == totalPages ? 'disabled' : '']))
  1991. $(p5Utils__format('<button type="button" class="btn btn-default{0}">&gt;&gt;</button>', [currPage == totalPages ? ' disabled' : '']))
  1992. .on('click', {pageIndex: totalPages}, priv.pageChanged)
  1993. .appendTo(node);
  1994. } else {
  1995. node = $('<span class="' + nodeClass + '"></span>');
  1996. }
  1997. currentNode.replaceWith(node);
  1998. };
  1999. priv.renderFooterPageSizes = function() {
  2000. var nodeClass = 'tblAjax__' + 'footer__toolbar__pagesizes',
  2001. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2002. node;
  2003. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2004. if (_data.total > 0 && priv.options.pageSizes.length > 0) {
  2005. node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
  2006. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(node);
  2007. var span = $('<span class="caret"></span>').appendTo(btn);
  2008. var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
  2009. $.each(priv.options.pageSizes, function(index, val) {
  2010. var li = $('<li></li>').appendTo(ul);
  2011. if (val == priv.options.pageSize) {
  2012. $(p5Utils__format('<a style="color:#337AB7;">{0}</a>', [val])).appendTo(li);
  2013. } else {
  2014. $(p5Utils__format('<a href="#">{0}</a>', [val])).appendTo(li);
  2015. }
  2016. });
  2017. node.on('click', 'a', priv.pageSizeChanged);
  2018. } else {
  2019. node = $('<span class="' + nodeClass + '"></span>');
  2020. }
  2021. currentNode.replaceWith(node);
  2022. };
  2023. priv.renderFooterColumnPicker = function() {
  2024. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2025. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2026. node;
  2027. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2028. if (priv.options.columnPicker) {
  2029. node = $('<div class="btn-group dropup columnpicker ' + nodeClass + '"></div>');
  2030. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(node);
  2031. var span = $('<span class="caret"></span>').appendTo(btn);
  2032. var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
  2033. var selectedFilter = priv.modelColFilter_getSelected();
  2034. priv.modelColFilter_getFilters().map(function(colFltr) {
  2035. var li = $('<li></li>').appendTo(ul),
  2036. selected = (selectedFilter && selectedFilter == colFltr.name)? 'checked="checked"' : '',
  2037. input = '<input ' + selected + ' type="radio" style="margin:0"/>',
  2038. a = $('<a href="#" data-col_filter="' + colFltr.name + '" style="padding:0px 20px;">' + input + ' ' + colFltr.label + '</a>').appendTo(li);
  2039. if ('all' != colFltr.name && 'most_used' != colFltr.name) {
  2040. 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);
  2041. arm.on('click', priv.modelColFilter_onClickRemoveFilter)
  2042. }
  2043. });
  2044. {// if (!selectedFilter) {// save current filter
  2045. var li = $('<li style="text-align:center; clear:both"></li>').appendTo(ul)
  2046. priv.modelColFilter_getSaveBtn().appendTo(li);
  2047. }
  2048. $('<li class="divider"></li>').appendTo(ul);
  2049. $.each(_data.cols, function(col, props) {
  2050. if (props.type != "unique" && col != _state.primaryKey) {
  2051. var li = $('<li></li>').appendTo(ul),
  2052. label = (props.friendly || col).replace(/<br\/?>/g, ' '),
  2053. input = p5Utils__format('<input {0} type="checkbox" title="{1}" value="{1}" style="margin:0"/>&nbsp;{2}', [(props.hidden) ? '' : 'checked', col, label]),
  2054. a = $('<a href="#" style="padding:0px 20px;">' + input + '</a>').appendTo(li);
  2055. }
  2056. });
  2057. node.on('click', 'input[type="checkbox"]', priv.columnPickerClicked);
  2058. node.on('click', 'a', priv.columnPickerLinkClicked);
  2059. } else {
  2060. node = $('<span class="' + nodeClass + '"></span>');
  2061. }
  2062. currentNode.replaceWith(node);
  2063. };
  2064. priv.renderFooterFunctions = function() {
  2065. var nodeClass = 'tblAjax__' + 'footer__toolbar__functions',
  2066. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2067. node;
  2068. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2069. if (priv.options.tblFunctions) {
  2070. node = $('<div class="btn-group ' + nodeClass + '"></div>');
  2071. $.map(priv.options.tblFunctions, function(funObj, funName){
  2072. var funHtml = $('<button class="btn btn-sm btn-default"></button>');
  2073. if (funObj.title) funHtml.attr('title', funObj.title);
  2074. if (funObj.method) funHtml.on('click', priv[funObj.method]);
  2075. else if (funObj.href) funHtml.on('click', {hash:funObj.href}, priv.routeChanged);
  2076. var funIconHtml = $('<i></i>');
  2077. if (funObj.icon) funIconHtml.attr('class', 'glyphicon glyphicon-' + funObj.icon);
  2078. funIconHtml.prependTo(funHtml);
  2079. funHtml.addClass('btn');
  2080. funHtml.appendTo(node);
  2081. });
  2082. } else {
  2083. node = $('<span class="' + nodeClass + '"></span>');
  2084. }
  2085. currentNode.replaceWith(node);
  2086. };
  2087. priv.renderFooterExport = function() {
  2088. var nodeClass = 'tblAjax__' + 'footer__toolbar__export',
  2089. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
  2090. node;
  2091. if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
  2092. if (priv.options.exportFields && priv.options.exportFields.length) {
  2093. node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
  2094. var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(node);
  2095. var span = $('<span class="caret"></span>').appendTo(btn);
  2096. var ul = $('<ul class="dropdown-menu" style="max-height:250px;padding:5px 20px 5px 8px;overflow:auto;">').appendTo(node);
  2097. $.each(_data.cols, function(col, props) {
  2098. if (-1 !== priv.options.exportFields.indexOf(col)) {
  2099. var li = $('<li></li>').appendTo(ul);
  2100. $(p5Utils__format('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>', [(_exportFieldsSelect[col])? 'checked' : '', col, props.friendly || col])).appendTo(li);
  2101. li.on('click', 'input', priv.exportFieldChanged);
  2102. }
  2103. });
  2104. var li;
  2105. li = $('<li></li>').appendTo(ul);
  2106. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do HTML</a>').appendTo(li);
  2107. li.on('click', 'a', priv.exportToHTML);
  2108. li = $('<li></li>').appendTo(ul);
  2109. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do CSV</a>').appendTo(li);
  2110. li.on('click', 'a', priv.exportToCSV);
  2111. li = $('<li></li>').appendTo(ul);
  2112. $('<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);
  2113. li.on('click', 'a', priv.exportToCSVWinCP1250);
  2114. li = $('<li></li>').appendTo(ul);
  2115. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share" title="Export XLS"></i>Export do XLS</a>').appendTo(li);
  2116. li.on('click', 'a', priv.exportToXLS);
  2117. li = $('<li></li>').appendTo(ul);
  2118. $('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share" title="Export XLSX"></i>Export do XLSX</a>').appendTo(li);
  2119. li.on('click', 'a', priv.exportToXLSX);
  2120. } else {
  2121. node = $('<span class="' + nodeClass + '"></span>');
  2122. }
  2123. currentNode.replaceWith(node);
  2124. };
  2125. priv.renderInlineEditBox = function() {
  2126. var nodeClass = 'tblAjax__' + 'inlineEditBox',
  2127. currentNode = $(_uiNodeCont).parent().children('.' + nodeClass),
  2128. node;
  2129. var node = $('<div class="' + nodeClass + ' modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>');
  2130. var modalWrap = $('<div class="modal-dialog"></div>').appendTo(node);
  2131. var modalWrap = $('<div class="modal-content"></div>').appendTo(modalWrap);
  2132. var frmInlineEdit = $('<form style="margin:0;padding:0;"></form>').appendTo(modalWrap);
  2133. var iebHead = $('<div class="modal-header" style="cursor:pointer">').appendTo(frmInlineEdit);
  2134. $('<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove" style="color:red"></i></button>').appendTo(iebHead);
  2135. $('<h4 id="myModalLabel">Edytuj</h4>').appendTo(iebHead);
  2136. var iebBodyWrap = $('<div class="modal-body" style="padding:0"></div>').appendTo(frmInlineEdit);
  2137. var iebBody = $('<div style="padding:15px"></div>').appendTo(iebBodyWrap);
  2138. $('<input type="hidden" name="ID" value="">').appendTo(iebBody);
  2139. $('<input type="hidden" name="col" value="">').appendTo(iebBody);
  2140. $('<div class="inlineEditBox-cnt"></div>').appendTo(iebBody);
  2141. var iebFoot = $('<div class="modal-footer"></div>').appendTo(frmInlineEdit);
  2142. $('<button class="btn btn-close" data-dismiss="modal" aria-hidden="true">Zamknij</button>').appendTo(iebFoot);
  2143. var iebBtnSave = $('<input type="submit" value="Zapisz" class="btn btn-primary btn-save">').appendTo(iebFoot);
  2144. frmInlineEdit.on('submit', function() {
  2145. var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
  2146. var data = inlineEditBox$Node.find('form').serialize();
  2147. inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
  2148. function notifyAjaxCallback(data) {
  2149. var notify = {};
  2150. notify.type = (data && data.type)? data.type : '';
  2151. notify.msg = (data && data.msg)? data.msg : '';
  2152. switch (notify.type) {
  2153. case 'success':
  2154. if (!notify.msg) notify.msg = 'Dane poprawnie zaktualizowane';
  2155. break;
  2156. case 'info':
  2157. if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
  2158. break;
  2159. case 'error':
  2160. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2161. break;
  2162. case 'warning':
  2163. notify.type = 'warn';
  2164. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2165. break;
  2166. default:
  2167. notify.msg = 'Nieznany błąd';
  2168. if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
  2169. notify.type = '';
  2170. }
  2171. jQuery.notify(notify.msg, notify.type);
  2172. }
  2173. $.ajax({
  2174. data: data,
  2175. dataType: 'json',
  2176. type: "POST",
  2177. url: priv.options.editInlineSaveUrl
  2178. })
  2179. .done(function(data, textStatus, jqXHR){
  2180. notifyAjaxCallback(data);
  2181. publ.refresh();
  2182. inlineEditBox$Node.modal('hide');
  2183. })
  2184. .fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
  2185. if (jqXHR.responseJSON) {
  2186. notifyAjaxCallback(jqXHR.responseJSON);
  2187. }
  2188. else {
  2189. var txt = jqXHR.responseText || 'Wystąpiły błędy';
  2190. if (jqXHR.status == 404) {
  2191. jQuery.notify(jqXHR.responseText, 'error');
  2192. } else {
  2193. jQuery.notify(jqXHR.responseText, 'warn');
  2194. }
  2195. }
  2196. inlineEditBox$Node.modal('hide');
  2197. });
  2198. return false;
  2199. });
  2200. currentNode.replaceWith(node);
  2201. };
  2202. priv.exportFieldChanged = function(e) {
  2203. e.stopPropagation();
  2204. var column = $(this).val();
  2205. _exportFieldsSelect[column] = !_exportFieldsSelect[column];
  2206. };
  2207. priv.exportToHTML = function(e) {
  2208. priv.exportData('html', $(this), e);
  2209. };
  2210. priv.exportToCSV = function(e) {
  2211. priv.exportData('csv', $(this), e);
  2212. };
  2213. priv.exportToCSVWinCP1250 = function(e) {
  2214. priv.exportData('csv_cp1250', $(this), e);
  2215. };
  2216. priv.exportToXLS = function(e) {
  2217. priv.exportData('xls', $(this), e);
  2218. };
  2219. priv.exportToXLSX = function(e) {
  2220. priv.exportData('xlsx', $(this), e);
  2221. };
  2222. priv.exportData = function(format, node, e) {
  2223. var exportFields = [];
  2224. $.each(_exportFieldsSelect, function(col, selected) {
  2225. if (selected) {
  2226. exportFields.push(col);
  2227. }
  2228. });
  2229. if (!exportFields.length) {
  2230. alert('Nie wybrano żadnych pól do eksportu.');
  2231. e.preventDefault();
  2232. return false;
  2233. }
  2234. var limit = 10000;
  2235. if (!_data.total || _data.total <= 0) {
  2236. alert('Brak rekordów do eksportu.');
  2237. e.preventDefault();
  2238. return false;
  2239. }
  2240. if (_data.total > limit) {
  2241. if (!confirm('Za dużo rekordów. Wyeksportowane zostaną tylko pierwsze ' + limit + ' z ' + _data.total + ' rekordów.')) {
  2242. e.preventDefault();
  2243. return false;
  2244. }
  2245. }
  2246. var exportUrl = 'index.php?_route=ExportTableAjax&namespace=' + priv.options.namespace;
  2247. exportUrl += '&' + 'format=' + format;
  2248. exportUrl += '&' + 'flds=' + exportFields.join(',');
  2249. exportUrl += '&' + 'sortCol=' + (_state._currSortCol || '');
  2250. exportUrl += '&' + 'sortDir=' + (_state._currSortFlip ? "desc" : "asc");
  2251. exportUrl += '&' + priv.filter_getFilterQuery();
  2252. node.attr('href', exportUrl);
  2253. };
  2254. priv.showFailFetchDataMsg = function () {
  2255. var clearAllFiltersBtn = jQuery('<button class="btn btn-xs btn-link" style="color:red">usunąć wszystkie filtry</button>')
  2256. clearAllFiltersBtn.on('click', function () {
  2257. priv.options.filterStore.dispatch( priv.options.filterActions.clearAllFilters() )
  2258. jQuery(this).parent().remove();
  2259. })
  2260. var msgNode = jQuery('<div class="alert alert-danger" style="clear:both; max-width:600px; margin: 10px auto">' +
  2261. 'Wystąpił błąd podczas pobierania danych ' +
  2262. '<a href="javascript:window.location.reload()" class="btn btn-xs btn-link">spróbuj ponownie</a>.' + '<br>' +
  2263. 'Jeśli problem się powtarza, spróbuj ' +
  2264. '</div>')
  2265. msgNode.append(clearAllFiltersBtn);
  2266. jQuery(_uiNodeCont).prepend(msgNode);
  2267. }
  2268. /*
  2269. calls the webservice(if defined).
  2270. used only inside priv.init
  2271. */
  2272. priv.update = function(callback) {
  2273. var skipCols, resetChecked;// undefined
  2274. if (!priv.options.url) {
  2275. if (priv.options.debug || DBG) console.log('no url found');
  2276. return;
  2277. }
  2278. if (priv.options.debug || DBG) console.log(p5Utils__format('requesting data from url:{0}', [priv.options.url]));
  2279. var initUrlAdd = '&' + priv.filter_getFullFilterQuery();
  2280. DBG && console.warn('DBG:update... - FETCH_DATA', { initUrlAdd, '_state._filterQuery': _state._filterQuery, '_state._specialFilterQuery': _state._specialFilterQuery, _state });
  2281. // p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych (init) ...'});
  2282. window.fetch(priv.options.url + initUrlAdd, {
  2283. method: priv.options.urlPost ? 'POST' : 'GET',
  2284. credentials: 'same-origin',// add cookies
  2285. }).then(function (response) {
  2286. return response.json()
  2287. }).then(function (data) {
  2288. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:update: request finished response data:', data);
  2289. if ('success' == data.type) {
  2290. return data;
  2291. } else {
  2292. p5UI__notifyAjaxCallback(data);
  2293. priv.showFailFetchDataMsg();
  2294. }
  2295. return null;
  2296. }).then(function (data) {
  2297. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:update: request finished data:', data);
  2298. if (!data) return;
  2299. if (data && data.cols) {
  2300. priv.setStateCols(data.cols, data.primaryKey);
  2301. }
  2302. // assign the new state (data)
  2303. state = {data: {}};
  2304. if (!skipCols) state.data.cols = data.cols || {};
  2305. state.data.rows = data.rows || [];
  2306. state.data.total = data.total || 0;
  2307. state.data.primaryKey = data.primaryKey || 'ID';
  2308. state.page = data.page || 0;
  2309. state.pageSize = data.pageSize || priv.options.pageSize;
  2310. state.filters = data.filters || {};
  2311. DBG && console.warn('DBG:update... - FETCH_DATA END priv.setState(state);', { state });
  2312. priv.setState(state);
  2313. if (typeof callback == "function") {
  2314. callback.call(this);
  2315. }
  2316. }).catch(function (e) {
  2317. console.log('loadDataAjax:fetch: ERR:', e);
  2318. });
  2319. };
  2320. /*
  2321. assigns the new data.
  2322. */
  2323. priv.setState = function(state) {
  2324. var oldState = _state; // TODO: use to check what really changed (use extend!)
  2325. var renderParts = {};
  2326. if (state.data) {
  2327. if (state.data.cols && Object.keys(state.data.cols).length > 0) {
  2328. priv.setStateCols(state.data.cols, state.data.primaryKey);
  2329. priv.setStateData(state.data);
  2330. } else {
  2331. priv.setStateData(state.data);
  2332. }
  2333. renderParts['body'] = true;
  2334. renderParts['foot_pagination'] = true;
  2335. }
  2336. if (state.hasOwnProperty('specialFilters')) {
  2337. _state.specialFilters = state.specialFilters;
  2338. renderParts['head__specialFilters'] = true;
  2339. }
  2340. if (state.hasOwnProperty('page')) {
  2341. if (state.page != _state.page) {
  2342. _state.page = state.page;
  2343. renderParts['foot_pagination'] = true;
  2344. }
  2345. }
  2346. if (state.hasOwnProperty('pageSize')) {
  2347. if (state.pageSize != _state.pageSize) {
  2348. _state.pageSize = state.pageSize;
  2349. renderParts['foot_pagination'] = true;
  2350. }
  2351. }
  2352. if (state.hasOwnProperty('filters')) {
  2353. renderParts['head__specialFilters'] = true;
  2354. renderParts['foot_pagination'] = true;
  2355. }
  2356. renderParts = Object.keys(renderParts);
  2357. if (renderParts.length > 0) {
  2358. DBG && console.log('DBG::trigger(TableAjax:render): ', renderParts);
  2359. jQuery(_uiNodeCont).trigger('TableAjax:render', renderParts);
  2360. }
  2361. };
  2362. priv.setStateCols = function(cols, primaryKey) {
  2363. if (priv.options.debug || DBG) console.log('priv.setStateCols: ', {primaryKey: primaryKey, cols: cols});
  2364. // console.log("priv.setStateCols");
  2365. // console.trace();
  2366. _state.cols = cols;
  2367. _state.primaryKey = primaryKey || _state.primaryKey;
  2368. // fix col name - props.column
  2369. $.each(_state.cols, function(col, props) {
  2370. props.column = col;
  2371. });
  2372. // fix col types - default 'string'
  2373. $.each(_state.cols, function(col, props) {
  2374. if (!props.type) cols[col].type = "string";
  2375. });
  2376. // fix props.filter - set true if not set - TODO: allow filter this col?
  2377. $.each(_state.cols, function(col, props) {
  2378. if (props.filter == undefined) props.filter = true;
  2379. });
  2380. if (_state.primaryKey) {
  2381. //create a unique column definition
  2382. _state.cols["unique"] = {
  2383. column: "unique",
  2384. type: "unique",
  2385. index: -1,
  2386. hidden: true
  2387. };
  2388. }
  2389. _state.colsSorted = Object.keys(_state.cols).sort(function(a, b) {
  2390. return _state.cols[a].index - _state.cols[b].index;
  2391. });
  2392. };
  2393. priv.setStateData = function(pData) {
  2394. var listPrimaryKeys = (pData && pData.rows && pData.rows.length)
  2395. ? pData.rows.map(function (item) {
  2396. return item['@primaryKey'];
  2397. })
  2398. : []
  2399. ;
  2400. jQuery(_uiNodeCont).trigger('TableAjax:updateRows', { primaryKeys: listPrimaryKeys });
  2401. if (priv.options.checkboxes) {
  2402. priv.options.selectedStore.dispatch( priv.options.selectedActions.setPrimaryKeys(priv.options.namespace, listPrimaryKeys) );
  2403. }
  2404. var data = $.extend(true, {}, pData);
  2405. data.cols = _state.cols;// always use old cols - change cols mved to priv.setStateCols
  2406. _data = data;
  2407. _data.rowsOrg = _data.rows;
  2408. //we might have more/less data now. Recalculate stuff.
  2409. if (_state.page > 1) {
  2410. _totalPages = Math.ceil(_data.total / priv.options.pageSize);
  2411. }
  2412. };
  2413. /*
  2414. helper that returns the underlying data by the unique value
  2415. */
  2416. priv.getRow = function(uniqueValue) {
  2417. var row;
  2418. $.each(_data.rowsOrg, function(i, r) {
  2419. if (r[_state.primaryKey] == uniqueValue) {
  2420. row = r;
  2421. return false;
  2422. }
  2423. });
  2424. return row;
  2425. };
  2426. priv.longTextChanged = function(e) {
  2427. priv.options.longDesc = !priv.options.longDesc;
  2428. _bodyNode.find('td').each(function(ind, el){
  2429. var $el = jQuery(el);
  2430. if (!$el.attr('class') || $el.attr('class') == 'tbl-short-txt') {
  2431. if (el.firstChild && el.firstChild.nodeName == 'SPAN') {
  2432. if (priv.options.longDesc) {
  2433. $el.addClass('tbl-short-txt');
  2434. var $elSpan = jQuery(el.firstChild);
  2435. $elSpan.tooltip({title: $elSpan.text(), placement: 'left'});
  2436. } else {
  2437. $el.removeClass('tbl-short-txt');
  2438. }
  2439. }
  2440. }
  2441. });
  2442. return false;
  2443. };
  2444. priv.mapEditorHide = function() {
  2445. priv.options.mapEditor = false;
  2446. if ('window' == priv.options.mapEditorContainer) {
  2447. //_mapEditorDialog.dialog("close");
  2448. _mapEditorDialog.dialog("destroy");
  2449. }
  2450. _mapEditorWrap.hide();
  2451. _mapEditor.hide();
  2452. };
  2453. priv.mapEditorShow = function() {
  2454. //console.log('TODO:mapEditorShow():', priv.options.mapEditorContainer, 'visible:', priv.options.mapEditor);
  2455. priv.options.mapEditor = true;
  2456. _mapEditor.show();
  2457. _mapEditorWrap.show();
  2458. _mapEditor.TableAjaxMap({
  2459. //debug: true,
  2460. wpsUrl: 'http://biuro.biall-net.pl/wps',
  2461. wfsUrl: 'http://biuro.biall-net.pl/wps',
  2462. showAddLayerWidget: (priv.options.hasAdditionalLayers) ? true : false,
  2463. zoomStrategyActivate: 14,
  2464. layerName: priv.options.labelHtml,
  2465. addBtn: {
  2466. title: 'Przenieś mapę do okna',
  2467. displayClass: 'mapEditor-btnBackToWindow',
  2468. trigger: function() {
  2469. priv.mapEditorHide();
  2470. priv.options.mapEditorContainer = 'window';
  2471. priv.mapEditorShow();
  2472. priv.resizableMapDockNode('destroy');
  2473. }
  2474. },
  2475. onSaveFeature: function(selectedRecordId, selectedFeatureExtent) {
  2476. if (priv.options.debug || DBG) console.log('onSaveFeature (',selectedRecordId,'/',selectedFeatureExtent,') ', this);
  2477. if (!selectedRecordId) {
  2478. alert('Brak zaznaczonego rekordu - wybierz rekord z tabeli');
  2479. return;
  2480. }
  2481. function notifyAjaxCallback(data) {
  2482. var notify = {};
  2483. notify.type = (data && data.type)? data.type : '';
  2484. notify.msg = (data && data.msg)? data.msg : '';
  2485. switch (notify.type) {
  2486. case 'success':
  2487. if (!notify.msg) notify.msg = 'Aktualizacja danych dla rekordu ' + selectedRecordId;
  2488. break;
  2489. case 'info':
  2490. if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
  2491. break;
  2492. case 'error':
  2493. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2494. break;
  2495. case 'warning':
  2496. notify.type = 'warn';
  2497. if (!notify.msg) notify.msg = 'Wystąpiły błędy';
  2498. break;
  2499. default:
  2500. notify.msg = 'Nieznany błąd';
  2501. if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
  2502. notify.type = '';
  2503. }
  2504. jQuery.notify(notify.msg, notify.type);
  2505. }
  2506. $.ajax({
  2507. data: {polygon: selectedFeatureExtent},
  2508. dataType: 'json',
  2509. type: "POST",
  2510. url: priv.options.theGeomSaveUrl + '&ID=' + selectedRecordId
  2511. })
  2512. .done(function(data, textStatus, jqXHR){
  2513. notifyAjaxCallback(data);
  2514. //jQuery.notify('Aktualizacja danych dla rekordu ' + selectedRecordId, 'success');
  2515. publ.loadPage(0);// TODO: reload table data
  2516. })
  2517. .fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
  2518. if (jqXHR.responseJSON) {
  2519. notifyAjaxCallback(jqXHR.responseJSON);
  2520. }
  2521. else {
  2522. var txt = jqXHR.responseText || 'Wystąpiły błędy';
  2523. if (jqXHR.status == 404) {
  2524. jQuery.notify(jqXHR.responseText, 'error');
  2525. } else {
  2526. jQuery.notify(jqXHR.responseText, 'warn');
  2527. }
  2528. }
  2529. });
  2530. },
  2531. onSelectBox: function(bounds) {
  2532. if (undefined !== OpenLayers.Bounds && bounds instanceof OpenLayers.Bounds) {
  2533. var column = 'the_geom';
  2534. var filter = 'BBOX:' + bounds.top + ',' + bounds.right + ',' + bounds.bottom + ',' + bounds.left;
  2535. priv.options.filterStore.dispatch( priv.options.filterActions.setFilter(column, filter) )
  2536. }
  2537. }
  2538. });
  2539. priv.mapEditorShowElement();
  2540. };
  2541. priv.mapEditorShowElement = function() {
  2542. if ('window' == priv.options.mapEditorContainer) {
  2543. var mapEditor = _mapEditorWrap.children('.mapEditor-map');
  2544. if (!mapEditor || !mapEditor.length) {
  2545. var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
  2546. var mapEditor = tblCont.children('.AjaxTableCont-mapEditorContainer').children('.mapEditor-map');
  2547. if (!mapEditor || !mapEditor.length) {
  2548. // TODO: create new map
  2549. }
  2550. _mapEditorWrap.append(mapEditor);
  2551. }
  2552. _mapEditorWrap.css({padding:'5px'});
  2553. _mapEditorDialog = _mapEditorWrap.dialog({
  2554. width: 540,
  2555. minWidth: 400,
  2556. minHeight: 400,
  2557. open: function(e, ui) {
  2558. var n = jQuery(this),
  2559. mapWrap = n.children(":first"),
  2560. map = mapWrap.children(":first");
  2561. map.css({width: n.width() - 5, height: n.height() - 5});
  2562. _mapEditor.TableAjaxMapUpdateSize();
  2563. },
  2564. resizeStart: function(e, ui) {
  2565. jQuery(this).children(":first").children(":first").css({display:'none'});
  2566. },
  2567. resizeStop: function(e, ui){
  2568. var n = jQuery(this),
  2569. map = n.children(":first").children(":first");
  2570. n.css({width: n.parent().width()});
  2571. map.css({display: 'block', height: n.height(), width: n.width()});
  2572. _mapEditor.TableAjaxMapUpdateSize();
  2573. },
  2574. dragStop: function(e, ui){
  2575. _mapEditor.TableAjaxMapUpdateSize();// to prevent drag-zoom error
  2576. }
  2577. });
  2578. _mapEditorWrap.bind('dialogclose', function(e) {
  2579. priv.options.mapEditor = false;
  2580. });
  2581. var dialogTitleBar = _mapEditorDialog.parent().parent().find('.ui-dialog-titlebar');
  2582. var dialogTitleBarCloseBtn = dialogTitleBar.find('.ui-dialog-titlebar-close');
  2583. if (dialogTitleBarCloseBtn) {
  2584. 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>');
  2585. btnToggle.on('click', function(e) {
  2586. priv.options.mapEditorContainer = 'dock';
  2587. _mapEditorWrap.dialog('close');
  2588. priv.mapEditorShowElement();
  2589. });
  2590. btnToggle.insertBefore(dialogTitleBarCloseBtn);
  2591. }
  2592. }
  2593. else if ('dock' == priv.options.mapEditorContainer) {
  2594. priv.resizableMapDockNode('prepare');
  2595. _mapEditor.TableAjaxMapUpdateSize();
  2596. }
  2597. };
  2598. priv.resizableMapDockNode = function(task) {
  2599. if ('prepare' == task) {
  2600. var mapEditor = _mapEditorWrap.children('.mapEditor-map');
  2601. if (mapEditor && mapEditor.length) {// map is inside _mapEditorWrap (window)
  2602. var mapDockNode = jQuery('<div class="AjaxTableCont-mapEditorContainer"></div>');
  2603. var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
  2604. tblCont.children('.AjaxTableCont-mapEditorContainer').remove();
  2605. var breadcrumb = tblCont.children('.breadcrumb');
  2606. if (!breadcrumb || !breadcrumb.length) {
  2607. tblCont.prepend(mapDockNode);
  2608. } else {
  2609. mapDockNode.insertAfter(breadcrumb);
  2610. }
  2611. mapDockNode.append(mapEditor);
  2612. }
  2613. var mapDockResizable = mapEditor.parent();
  2614. mapDockResizable.resizable({handles: 's', minHeight: 300, minWidth: 300});
  2615. var resizeLineHeigth = 6;
  2616. mapDockResizable.children(":first").css({height: 'auto'});
  2617. mapDockResizable.css({marginBottom: resizeLineHeigth+'px'});
  2618. mapEditor.css({marginBottom: resizeLineHeigth+'px'});
  2619. mapEditor.children(":first").css({width: mapEditor.width()});
  2620. mapDockResizable.find('.ui-resizable-s').css({height:resizeLineHeigth+'px', bottom: '-'+resizeLineHeigth+'px'});
  2621. mapDockResizable.on('resizestart', function(event, ui) {
  2622. ui.element.children(":first").children(":first").css({display:'none'})
  2623. });
  2624. mapDockResizable.on('resizestop', function(event, ui) {
  2625. ui.element.children(":first").children(":first").css({display:'block', height: ui.element.height()});
  2626. });
  2627. } else if ('destroy' == task) {
  2628. var mapDockResizable = jQuery(_uiNodeCont).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
  2629. mapDockResizable.resizable('destroy');
  2630. mapDockResizable.remove();
  2631. }
  2632. };
  2633. priv.mapEditorChanged = function(e) {
  2634. if (priv.options.debug || DBG) console.log('mapEditorChanged option(',priv.options.mapEditor,')');
  2635. priv.options.mapEditor = !priv.options.mapEditor;
  2636. if (priv.options.mapEditor) {
  2637. priv.mapEditorShow();
  2638. }
  2639. else {
  2640. priv.mapEditorHide();
  2641. }
  2642. return false;
  2643. };
  2644. /*
  2645. when: changing page in pager
  2646. what: triggers table to be created with new page
  2647. */
  2648. priv.pageChanged = function(e) {
  2649. e.preventDefault();
  2650. var totalPages = Math.ceil(_data.total / _state.pageSize);
  2651. if (e.data.pageIndex < 1 || e.data.pageIndex > totalPages) return;
  2652. //set the new page
  2653. _state.page = e.data.pageIndex;
  2654. publ.loadPage(_state.page);
  2655. };
  2656. /*
  2657. when: changing pagesize in pagesize dropdown
  2658. what: triggers table to be created with new pagesize
  2659. */
  2660. priv.pageSizeChanged = function(e) {
  2661. e.preventDefault();
  2662. var val = $(this).text();
  2663. if (priv.options.debug || DBG) console.log(p5Utils__format('pagesize changed to:{0}', [val]));
  2664. if (parseInt(val) == priv.options.pageSize) {
  2665. return false;
  2666. }
  2667. priv.options.pageSize = parseInt(val);
  2668. publ.loadPage(1, priv.options.pageSize);
  2669. jQuery(_uiNodeCont).trigger('TableAjax:render', ['body', 'foot_pagination']);
  2670. priv.saveProfilePageSize(priv.options.pageSize);
  2671. };
  2672. /*
  2673. when: clicking a column
  2674. what: triggers table to be sorted by the column
  2675. */
  2676. priv.columnClicked = function(e) {
  2677. e.preventDefault();
  2678. if (priv.options.debug || DBG) console.log(p5Utils__format('col:{0} clicked', [e.data.column]));
  2679. priv.options.filterStore.dispatch( priv.options.filterActions.toggleSort(e.data.column) )
  2680. };
  2681. priv.saveProfilePageSize = function(pageSize) {
  2682. var reqData = {};
  2683. reqData.pageSize = pageSize;
  2684. $.ajax({
  2685. data: reqData,
  2686. type: "POST",
  2687. dataType: 'json',
  2688. // async: true,
  2689. url: priv.options.pageSizeSave
  2690. })
  2691. .done(function(data, textStatus, jqXHR){
  2692. if (data && data.type && data.type == 'info') {
  2693. jQuery.notify('Nie wprowadzono żadnych zmian', 'info');
  2694. } else {
  2695. jQuery.notify('Zapisano ustawienia', 'success');
  2696. }
  2697. })
  2698. .fail(function(){
  2699. jQuery.notify('Wystąpił błąd podczas zapisywania ustawień', 'error');
  2700. });
  2701. };
  2702. priv.saveHiddenCols = function() {
  2703. var reqData = {};
  2704. $.each(_data.cols, function(col, props) {
  2705. if (props.type != "unique" && col != 'unique' && col != _state.primaryKey) {
  2706. reqData[col] = (props.hidden)? 'HIDE' : 'SHOW';
  2707. }
  2708. });
  2709. $.ajax({
  2710. data: reqData,
  2711. type: "POST",
  2712. dataType: 'json',
  2713. // async: true,
  2714. url: priv.options.hiddenColsSaveUrl
  2715. })
  2716. .done(function(data, textStatus, jqXHR){
  2717. if (data && data.type && data.type == 'info') {
  2718. jQuery.notify('Nie wprowadzono żadnych zmian', 'info');
  2719. } else {
  2720. jQuery.notify('Zapisano ustawienia', 'success');
  2721. }
  2722. })
  2723. .fail(function(){
  2724. jQuery.notify('Wystąpił błąd podczas zapisywania ustawień', 'error');
  2725. });
  2726. };
  2727. /*
  2728. when: clicking a column in columnpicker
  2729. what: triggers table to show/hide the column
  2730. */
  2731. priv.columnPickerClicked = function(e) {
  2732. e.stopPropagation();
  2733. var column = $(this).val();
  2734. //toggle column visibility
  2735. priv.modelColFilter_toggleColumn(column);
  2736. priv.saveHiddenCols();
  2737. //_data.cols[column].index = new priv.ext.XDate();
  2738. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
  2739. };
  2740. priv.modelColFilter_init = function() {// run only once, set _state._modelColFilter {selected, filters: [ {name, label, visibleCols} ]}
  2741. var isAllSelected = true;
  2742. if (undefined === _state._modelColFilter) {
  2743. var columnFilters = [];
  2744. {
  2745. var fltrAll = {'name': 'all', 'label': 'Wszystkie', visibleCols: []};
  2746. $.each(_data.cols, function(col, props) {
  2747. if ("unique" == props.type) return;
  2748. fltrAll.visibleCols.push(col);
  2749. if (_data.cols[col].hidden) isAllSelected = false;
  2750. });
  2751. columnFilters.push(fltrAll);
  2752. }
  2753. // {
  2754. // var fltrMostUsed = {'name': 'most_used', 'label': 'Najczęściej używane', visibleCols: []};
  2755. // var fltrMostUsedLimit = 10;
  2756. // $.each(_data.cols, function(col, props) {
  2757. // if ("unique" == props.type) return;
  2758. // if (fltrMostUsedLimit-- > 0) {
  2759. // fltrMostUsed.visibleCols.push(col);
  2760. // }
  2761. // });
  2762. // columnFilters.push(fltrMostUsed);
  2763. // }
  2764. _state._modelColFilter = {
  2765. selected: (isAllSelected)? 'all' : null,
  2766. filters: columnFilters,
  2767. saveBtn: $('<button class="btn btn-xs btn-primary" disabled="disabled">Zapisz widoczne kolumny</button>')
  2768. };
  2769. _state._modelColFilter.saveBtn.on('click', priv.modelColFilter_saveBtnClicked)
  2770. if (priv.options.userTableFilterUrl) {
  2771. window.fetch(priv.options.userTableFilterUrl, {
  2772. method: 'POST',
  2773. headers: {
  2774. 'Content-Type': 'application/json'
  2775. },
  2776. credentials: 'same-origin',// add cookies
  2777. body: JSON.stringify({
  2778. namespace: priv.options.namespace,
  2779. })
  2780. }).then(function (response) {
  2781. return response.json()
  2782. }).then(function (result) {
  2783. if ('success' == result.type) {
  2784. // p5UI__notifyAjaxCallback(result)
  2785. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2786. return ('all' === filter.name || 'most_used' == filter.name)
  2787. }).concat(Object.keys(result.data).map(function (fltr) {
  2788. return {
  2789. name: fltr,
  2790. label: fltr,
  2791. visibleCols: result.data[fltr].split(',')
  2792. }
  2793. }))
  2794. jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
  2795. } else {
  2796. p5UI__notifyAjaxCallback(result)
  2797. }
  2798. }).catch(function (e) {
  2799. // TODO: show error ("ajax response error: " + e)
  2800. });
  2801. }
  2802. }
  2803. };
  2804. priv.modelColFilter_onClickRemoveFilter = function (e) {
  2805. e.preventDefault()
  2806. e.stopPropagation()
  2807. var filtrName = $(this).data('col_filter')
  2808. if (!filtrName) return
  2809. window.fetch(priv.options.rmUserTableFilterAjaxUrl, {
  2810. method: 'POST',
  2811. headers: {
  2812. 'Content-Type': 'application/json'
  2813. },
  2814. credentials: 'same-origin',// add cookies
  2815. body: JSON.stringify({
  2816. namespace: priv.options.namespace,
  2817. filtrName: filtrName,
  2818. })
  2819. }).then(function (response) {
  2820. return response.json()
  2821. }).then(function (result) {
  2822. if ('success' == result.type) {
  2823. p5UI__notifyAjaxCallback(result)
  2824. var userTableFilters = result.data;// resolve(result.data)
  2825. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2826. return ('all' === filter.name || 'most_used' == filter.name)
  2827. }).concat(Object.keys(userTableFilters).map(function (fltr) {
  2828. return {
  2829. name: fltr,
  2830. label: fltr,
  2831. visibleCols: userTableFilters[fltr].split(',')
  2832. }
  2833. }))
  2834. jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
  2835. } else {
  2836. p5UI__notifyAjaxCallback(result)
  2837. }
  2838. }).catch(function (e) {
  2839. p5UI__notifyAjaxCallback({ type: 'error', msg: new String(e) })
  2840. });
  2841. };
  2842. priv.modelColFilter_saveBtnClicked = function (e) {
  2843. swal({
  2844. title: 'Zapisz widoczne kolumny',
  2845. html: '',
  2846. animation: true,
  2847. input: 'text',
  2848. inputPlaceholder: 'nazwa filtra',
  2849. // inputValue: null,
  2850. // inputAttributes: {'step': '0.01'},
  2851. showCancelButton: true,
  2852. confirmButtonText: 'Zapisz',
  2853. showLoaderOnConfirm: true,
  2854. showCloseButton: true,
  2855. preConfirm: function(filtrName) {
  2856. return new Promise(function(resolve, reject) {
  2857. if (!filtrName) reject('Proszę podać nazwę filtra')
  2858. if (filtrName.length > 255) reject('Nazwa za długa')
  2859. window.fetch(priv.options.addUserTableFilterAjaxUrl, {
  2860. method: 'POST',
  2861. headers: {
  2862. 'Content-Type': 'application/json'
  2863. },
  2864. credentials: 'same-origin',// add cookies
  2865. body: JSON.stringify({
  2866. namespace: priv.options.namespace,
  2867. filtrName: filtrName,
  2868. visibleCols: Object.keys(_data.cols).filter(function(col) {
  2869. return !_data.cols[col].hidden
  2870. }).join(','),
  2871. })
  2872. }).then(function (response) {
  2873. return response.text()
  2874. }).then(function (responseText) {
  2875. try {
  2876. // json = response.json() // BUG: error trafia do catch promisów, zamiast aktualnego bloku
  2877. // -- obiekt response pewnie jest powiązany z Promisem z fetch
  2878. // -- response.json() zwraca Promise tak samo jak response.text()
  2879. return JSON.parse(responseText)
  2880. } catch (e) {
  2881. throw responseText
  2882. }
  2883. }).then(function (result) {
  2884. if ('success' == result.type) {
  2885. p5UI__notifyAjaxCallback(result)
  2886. resolve(result.data)
  2887. } else {
  2888. p5UI__notifyAjaxCallback(result)
  2889. reject(result.msg || "Wystąpił błąd!")
  2890. }
  2891. }).catch(function (e) {
  2892. reject("ajax response error: " + e)
  2893. });
  2894. })
  2895. },
  2896. allowOutsideClick: false
  2897. }).then(function(userTableFilters) {
  2898. _state._modelColFilter.filters = _state._modelColFilter.filters.filter(function (filter) {
  2899. return ('all' === filter.name || 'most_used' == filter.name)
  2900. }).concat(Object.keys(userTableFilters).map(function (fltr) {
  2901. return {
  2902. name: fltr,
  2903. label: fltr,
  2904. visibleCols: userTableFilters[fltr].split(',')
  2905. }
  2906. }))
  2907. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  2908. }).catch(function(e) {
  2909. // eg. hit Cancel
  2910. })
  2911. }
  2912. priv.modelColFilter_getSaveBtn = function () {
  2913. priv.modelColFilter_init();
  2914. return _state._modelColFilter.saveBtn
  2915. }
  2916. priv.modelColFilter_getFilters = function() {
  2917. priv.modelColFilter_init();
  2918. return _state._modelColFilter.filters;
  2919. };
  2920. priv.modelColFilter_getSelected = function() {
  2921. priv.modelColFilter_init();
  2922. return _state._modelColFilter.selected;
  2923. };
  2924. priv.modelColFilter_setFilter = function(filterKey) {
  2925. priv.modelColFilter_init();
  2926. _state._modelColFilter.selected = filterKey;
  2927. priv.modelColFilter_uiUncheckAllColFilters();
  2928. priv.modelColFilter_uiCheckColFilter(filterKey);
  2929. };
  2930. priv.modelColFilter_toggleColumn = function(column, value) {
  2931. priv.modelColFilter_init();
  2932. _state._modelColFilter.selected = null;
  2933. if (!_data.cols[column] || !_data.cols[column]) return;
  2934. _data.cols[column].hidden = (undefined !== value)? value : !_data.cols[column].hidden;
  2935. priv.modelColFilter_uiUncheckAllColFilters();
  2936. {
  2937. var isAllSelected = true;
  2938. $.each(_data.cols, function(col, props) {
  2939. if ("unique" == props.type) return;
  2940. if (_data.cols[col].hidden) isAllSelected = false;
  2941. });
  2942. if (isAllSelected) {
  2943. _state._modelColFilter.selected = 'all';
  2944. priv.modelColFilter_uiCheckColFilter('all');
  2945. }
  2946. }
  2947. };
  2948. priv.modelColFilter_uiUncheckAllColFilters = function() {
  2949. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2950. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
  2951. ;
  2952. currentNode.find('input[type="radio"]').prop("checked", false);
  2953. };
  2954. priv.modelColFilter_uiCheckColFilter = function(filterKey) {
  2955. var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
  2956. currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
  2957. ;
  2958. currentNode.find('input[type="radio"]').each(function(idx, input) {
  2959. var input$ = jQuery(input);
  2960. if (filterKey == jQuery(input$).parent().data('col_filter')) {
  2961. input$.prop("checked", true);
  2962. } else {
  2963. input$.prop("checked", false);
  2964. }
  2965. });
  2966. };
  2967. priv.columnPickerLinkClicked = function(e) {
  2968. e.stopPropagation();
  2969. var input$ = $(this).find('input'),
  2970. col_filter = $(this).data('col_filter'),
  2971. columnFilters = priv.modelColFilter_getFilters()
  2972. ;
  2973. if (col_filter) {
  2974. var filter = null;
  2975. $.each(columnFilters, function(idx, colFltr) {
  2976. if (col_filter == colFltr.name) {
  2977. filter = colFltr;
  2978. }
  2979. });
  2980. if (!filter) return;
  2981. $.each(_data.cols, function(col, props) {
  2982. var isHidden = (-1 === filter.visibleCols.indexOf(col));
  2983. priv.modelColFilter_toggleColumn(col, isHidden);
  2984. });
  2985. priv.modelColFilter_setFilter(col_filter);
  2986. priv.saveHiddenCols();
  2987. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  2988. } else {
  2989. e.preventDefault();
  2990. if (input$.length != 1) return;
  2991. var column = input$.val();
  2992. if (!column) return;
  2993. //toggle column visibility
  2994. priv.modelColFilter_toggleColumn(column);
  2995. input$.prop("checked", !input$.is(':checked'));// update view
  2996. priv.saveHiddenCols();
  2997. //_data.cols[column].index = new priv.ext.XDate();
  2998. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
  2999. }
  3000. };
  3001. priv.columnHideClicked = function(e) {
  3002. e.stopPropagation();
  3003. var column;
  3004. if (e.data && e.data.column) {
  3005. column = e.data.column;
  3006. } else {
  3007. return;
  3008. }
  3009. //toggle column visibility
  3010. priv.modelColFilter_toggleColumn(column);
  3011. priv.saveHiddenCols();
  3012. //_data.cols[column].index = new priv.ext.XDate();
  3013. jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
  3014. };
  3015. /*
  3016. when: clicking anywhere on a row
  3017. what: row data and other info is returned to caller
  3018. */
  3019. // priv.rowClicked = function(e) {// TODO: not used
  3020. // if (!_state.primaryKey) {
  3021. // if (priv.options.debug || DBG) console.log('no unique column specified');
  3022. // return;
  3023. // }
  3024. //
  3025. // //gather callback data
  3026. // var elem = $(this);
  3027. // var column = _data.cols[elem.data('column')];
  3028. // var unique = elem.closest('tr').data('unique');
  3029. // var row = priv.getRow(unique);
  3030. // var isChecked = elem.closest('tr').find('.unique').is(':checked');
  3031. //
  3032. // //trigger callback
  3033. // if (typeof priv.options.rowClicked == 'function') {
  3034. // priv.options.rowClicked.call(e.target, {
  3035. // event: e,
  3036. // row: row,
  3037. // column: column,
  3038. // checked: isChecked
  3039. // });
  3040. // }
  3041. // };
  3042. /**
  3043. * Inline edit.
  3044. */
  3045. priv.rowDblClicked = function(e) {
  3046. var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
  3047. // hide popover for typespecial fld on click
  3048. if (_popoverCellCurrent) {
  3049. _popoverCellCurrent.popover('hide');
  3050. }
  3051. // e.clientX: 1002; e.clientY: 245
  3052. if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
  3053. inlineEditBox$Node.modal();
  3054. inlineEditBox$Node.show();
  3055. inlineEditBox$Node.on('shown.bs.modal', function(e) {
  3056. var dialogBox = jQuery(this).find('.modal-dialog'),
  3057. modalBody = dialogBox.find('.modal-body'),
  3058. boudingRect = dialogBox.get(0).getBoundingClientRect();
  3059. dialogBox.css({position: 'absolute', margin:0, top: boudingRect.top, left: boudingRect.left});
  3060. modalBody.css({overflow: 'scroll'});
  3061. dialogBox.resizable({minHeight: 300, minWidth: 300, alsoResize: modalBody});
  3062. dialogBox.draggable({handle: '.modal-header'});
  3063. });
  3064. inlineEditBox$Node.on('hidden.bs.modal', function(e) {
  3065. var dialogBox = jQuery(this).find('.modal-dialog'),
  3066. modalBody = dialogBox.find('.modal-body');
  3067. dialogBox.removeAttr('style');
  3068. modalBody.removeAttr('style');
  3069. modalBody.css({padding: '0'});
  3070. dialogBox.resizable();
  3071. dialogBox.draggable();
  3072. dialogBox.resizable('destroy');
  3073. dialogBox.draggable('destroy');
  3074. });
  3075. inlineEditBox$Node.find('input[name=ID]').val(e.data.id);
  3076. inlineEditBox$Node.find('input[name=col]').val(e.data.col);
  3077. inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
  3078. $.ajax({
  3079. url: priv.options.editInlineUrl + '&ID=' + e.data.id + '&col=' + e.data.col,
  3080. type: 'GET',
  3081. dataType: 'json',
  3082. success: function(data) {
  3083. if ('p5:www_link' == _.get(data, 'simpleType')) {
  3084. inlineEditBox$Node.find('.inlineEditBox-cnt').empty();
  3085. var label = jQuery('<label>');// for="' + data.htmlFieldName + '">');// "<label for="f22579" class="AjaxTableEdit-label"> ... </label>
  3086. label.attr('for', data.htmlFieldName);
  3087. label.attr('class', 'AjaxTableEdit-label');
  3088. inlineEditBox$Node.find('.inlineEditBox-cnt').append(label);
  3089. var inLabel = jQuery('<strong title="[' + data.idZasob + '] ' + data.fieldLabel + '">' + data.fieldLabel + '</strong>');
  3090. label.append(inLabel);
  3091. var frmItem = jQuery('<input>');
  3092. frmItem.attr('type', 'text');
  3093. frmItem.attr('name', data.htmlFieldName);
  3094. frmItem.attr('value', data.formItem.value);
  3095. frmItem.attr('maxlength', _.get(data, 'restrictions.maxLength', 255));
  3096. frmItem.attr('style', 'width:98%');
  3097. frmItem.attr('class', 'form-control');
  3098. frmItem.insertAfter(label);
  3099. } else {
  3100. var content = _.get(data, 'legacy_html', "Nieznany błąd");
  3101. inlineEditBox$Node.find('.inlineEditBox-cnt').html(content);
  3102. }
  3103. inlineEditBox$Node.find('.btn-save').show();
  3104. initDateTimePicker(inlineEditBox$Node);
  3105. inlineEditBox$Node.find('textarea').autosize();
  3106. var fld = inlineEditBox$Node.find('input[name^="f"]');
  3107. if (fld.length > 0 && !fld.hasClass('se_type-date')) {
  3108. fld.keydown(function(event) {
  3109. if (event.which == 13) {
  3110. event.preventDefault();
  3111. inlineEditBox$Node.find('form').submit();
  3112. }
  3113. });
  3114. }
  3115. (function setFocusAtFirstInlineEditFormFld(modal$node){
  3116. var fld, dbg = false;
  3117. if(dbg)console.log('focus...');
  3118. fld = modal$node.find('input[name^="f"]:first');
  3119. if (fld.length > 0 && !fld.hasClass('se_type-date')) {
  3120. if(dbg)console.log('set focus to first input element');
  3121. fld.focus(); return;
  3122. }
  3123. fld = modal$node.find('select[name^="f"]:first');
  3124. if (fld.length) {
  3125. if (fld.get(0).selectize) {
  3126. if(dbg)console.log('set focus to first typepecial element');
  3127. } else {
  3128. if(dbg)console.log('set focus to first select element');
  3129. fld.focus(); return;
  3130. }
  3131. }
  3132. if(dbg)console.log('set focus to close btn');
  3133. modal$node.find('.btn-close').focus();
  3134. })(inlineEditBox$Node);
  3135. },
  3136. error: function(err) {
  3137. if (priv.options.debug || DBG) console.log('err');
  3138. }
  3139. });
  3140. } else {
  3141. if (priv.options.debug || DBG) console.log('NO data');
  3142. return false;
  3143. }
  3144. };
  3145. priv.ajaxLoadTypeSpeciallCell = function(id, col) {
  3146. if (_popoverCellAjaxXhr) {
  3147. _popoverCellAjaxXhr.abort();
  3148. }
  3149. _popoverCellAjaxXhr = $.ajax({
  3150. type: 'GET',
  3151. url: 'index.php?_route=ViewTableAjax&_task=typeSpecialCell&namespace=' + priv.options.namespace + '&ID=' + id + '&col=' + col,
  3152. dataType: 'json',
  3153. contentType: "application/json; charset=utf-8",
  3154. data: '',
  3155. success: function(req){
  3156. if (_.get(req, 'data.tbl_id') > 0) {
  3157. var addHtml = '';
  3158. for (var i in req.data.items) {
  3159. var url = 'index.php?_route=ViewTableAjax';
  3160. url += '&namespace=' + req.namespace;
  3161. url += '&f_' + req.data.fld_name + '=' + req.data.items[i].id;
  3162. url += '&_hash=' + Math.random().toString(36).substring(2);
  3163. addHtml += '<a href="' + url + '">Wyszukaj ' + req.data.items[i].id + '</a>: ' + req.data.items[i].label;
  3164. addHtml += '<br>';
  3165. }
  3166. //_popoverCell.append(addHtml);// cache
  3167. if (_popoverCellCurrent) {
  3168. var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
  3169. if (popoverNodeId) {
  3170. jQuery('#' + popoverNodeId).find('.popoverCellContent').append(addHtml);
  3171. }
  3172. }
  3173. }
  3174. }
  3175. });
  3176. };
  3177. priv.popoverCellTypeSpecial = function(e) {
  3178. e.preventDefault();
  3179. e.stopPropagation();
  3180. if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
  3181. var lastId = _popoverCell.data('rowid'),
  3182. lastCol = _popoverCell.data('col'),
  3183. rowPK = e.data.id,
  3184. colName = e.data.col
  3185. ;
  3186. if (lastId == rowPK && lastCol == colName) {
  3187. //_popoverCellCurrent.popover('toggle');
  3188. }
  3189. else {
  3190. if (_popoverCellCurrent) {
  3191. _popoverCellCurrent.popover('destroy');
  3192. }
  3193. _popoverCell.data('rowid', rowPK);
  3194. _popoverCell.data('col', colName);
  3195. _popoverCell.html(e.data.value + '<div class="popoverCellContent loading" style="white-space:normal"></div>');
  3196. _popoverCellCurrent = jQuery(e.currentTarget);
  3197. // title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
  3198. var opts = {
  3199. placement: 'left'
  3200. , trigger: 'click'
  3201. // , title: e.data.col + '<a href="#" class="glyphicon glyphicon-remove pull-right" onclick="return hidePopover();"></a>'
  3202. , 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>'
  3203. , html: true
  3204. , content: _popoverCell.html()
  3205. }
  3206. _popoverCellCurrent.popover(opts);
  3207. if (_data.cols[colName]) {
  3208. if (_data.cols[colName]._tsRetId > 0) {
  3209. _popoverCellCurrent.on('shown.bs.popover', function() {
  3210. priv.ajaxLoadTypeSpeciallCell(rowPK, colName);
  3211. });
  3212. }
  3213. }
  3214. _popoverCellCurrent.popover('show');
  3215. }
  3216. } else {
  3217. if (priv.options.debug || DBG) console.log('NO data');
  3218. return false;
  3219. }
  3220. return;
  3221. };
  3222. priv.routeChanged = function(e) {
  3223. hash = e.data.hash || '';
  3224. if (hash.length == 0) {
  3225. return;
  3226. }
  3227. if (hash.substring(0, 1) != '#') {
  3228. hash = '#' + hash;
  3229. }
  3230. location.hash = hash;
  3231. };
  3232. priv.refresh = function(e) {
  3233. e.preventDefault();
  3234. publ.loadPage(_state.page);
  3235. };
  3236. publ.init = function(options) {
  3237. if (priv.options.debug || DBG) console.log('TableAjax initialization...');
  3238. //merge supplied options with defaults
  3239. $.extend(priv.options, defaults, options);
  3240. priv.init();
  3241. return publ;
  3242. };
  3243. publ.refresh = function() {
  3244. publ.loadPage(_state.page);
  3245. };
  3246. publ.loadPage = function(page, pageSize) {
  3247. priv.loadPage(page, pageSize);
  3248. }
  3249. priv.loadPage = function(page, pageSize) {
  3250. var resetChecked = false;
  3251. var reqData = {
  3252. page: page,
  3253. pageSize: (pageSize || priv.options.pageSize),
  3254. currSortCol: (_state._currSortCol || ''),
  3255. currSortFlip: _state._currSortFlip ? "desc" : "asc"
  3256. };
  3257. var urlAdd = '';
  3258. urlAdd += '&' + 'page=' + page;
  3259. urlAdd += '&' + 'pageSize=' + (pageSize || priv.options.pageSize);
  3260. DBG && console.log('DBG::loadPage... FETCH_DATA', { '_state._filterQuery': _state._filterQuery, '_state._specialFilterQuery': _state._specialFilterQuery, _state });
  3261. urlAdd += '&' + priv.filter_getFullFilterQuery();
  3262. _uiNode$Table.parent().parent().addClass('AjaxTable-loading');
  3263. // p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych...'});
  3264. window.fetch(priv.options.url + urlAdd, {
  3265. method: priv.options.urlPost ? 'POST' : 'GET',
  3266. credentials: 'same-origin',// add cookies
  3267. }).then(function (response) {
  3268. return response.json()
  3269. }).then(function (data) {
  3270. if (priv.options.debug || DBG) console.log('loadDataAjax:fetch:loadPage: request finished, data:', data);
  3271. // p5UI__notifyAjaxCallback(data);
  3272. if ('success' == data.type) {
  3273. state = {data: {}};
  3274. state.data.cols = data.cols || {};
  3275. state.data.rows = data.rows || [];
  3276. state.data.total = data.total || 0;
  3277. state.data.primaryKey = data.primaryKey || 'ID';
  3278. state.page = data.page || 0;
  3279. state.pageSize = data.pageSize || priv.options.pageSize;
  3280. state.filters = data.filters || {};
  3281. DBG && console.log('DBG::loadPage... - FETCH_DATA END priv.setState(state);', { state });
  3282. priv.setState(state);
  3283. _uiNode$Table.parent().parent().removeClass('AjaxTable-loading');
  3284. } else {
  3285. p5UI__notifyAjaxCallback(data);
  3286. priv.showFailFetchDataMsg();
  3287. }
  3288. }).catch(function (e) {
  3289. console.log('loadDataAjax:fetch: ERR:', e);
  3290. });
  3291. };
  3292. publ.getCurrentPage = function() {
  3293. return _state.page;
  3294. };
  3295. publ.popoverCellRemove = function() {
  3296. if (_popoverCellCurrent) {
  3297. _popoverCellCurrent.popover('destroy');
  3298. }
  3299. _popoverCell.data('rowid', -1);
  3300. _popoverCell.data('col', -1);
  3301. _popoverCell.html('');
  3302. };
  3303. return publ;
  3304. }
  3305. $.fn.TableAjax = function(options) {
  3306. options = options || {};
  3307. return this.each(function() {
  3308. options.id = this;
  3309. $(this).data('TableAjax', new TableAjax().init(options));
  3310. });
  3311. };
  3312. $.fn.TableAjaxLoadPage = function(page, pageSize) {
  3313. return this.each(function() {
  3314. var tblAjax = jQuery(this).data('TableAjax');
  3315. var curPage = page || tblAjax.getCurrentPage();
  3316. if (tblAjax) tblAjax.loadPage(curPage, pageSize);
  3317. });
  3318. };
  3319. $.fn.TableAjaxRefresh = function(page, pageSize) {
  3320. return this.each(function() {
  3321. var tblAjax = jQuery(this).data('TableAjax');
  3322. if (tblAjax) tblAjax.refresh();
  3323. });
  3324. };