templates/parcels/transactions.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <style>
  6. fieldset {
  7. border: 1px dashed black;
  8. width: 100%;
  9. }
  10. .datagrid-ftable .datagrid-cell {
  11. font-size: 18px;
  12. font-family: "monospace", sans-serif;
  13. }
  15. .datagrid-ftable .datagrid-row {
  16. background: #cccccc;
  17. }
  20. .search-row {
  21. margin-top: 20px;
  22. margin-bottom: 10px;
  23. }
  24. .dates {
  25. border: 1px solid #e4e0bf;
  26. padding: 10px 10px 10px 0px;
  27. margin: 1px 1px 1px 1px;
  28. }
  30. </style>
  31. {% endblock %}
  32. {% block parcelsLink %}
  33. <li class="nav-item dropdown">
  34. <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  35. <i class="fas fa-gift"></i> Parcels
  36. </a>
  37. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  38. <a class="dropdown-item" href="{{ path('bos_all_parcels') }}"><i class="fas fa-plus-circle"></i> All Parcels</a>
  39. <div class="dropdown-divider"></div>
  40. <a class="dropdown-item" href="#"> <i class="fas fa-money-bill"></i> Transactions</a>
  41. <a class="dropdown-item" href="{{ path('daily_accounts') }}"><i class="fas fa-calendar"></i> Daily Accounts</a>
  42. </div>
  43. </li>
  44. {% endblock %}
  46. {% block main %}
  47. <div class="main-sub-nav col-lg-11 col-md-11 col-sm-12 col-xs-12 alert alert-light">
  49. <ul class="nav nav-tabs">
  50. <li class="nav-item">
  51. <a class="nav-link " href="{{ path('bos_all_parcels') }}"><i class="fas fa-gift"></i> <i class="fas fa-list"></i> Parcels</a>
  52. </li>
  53. <li class="nav-item">
  54. <a class="nav-link active" href=""><i class="fas fa-list"></i> <i class="fas fa-money-bill"></i> Transactions</a>
  55. </li>
  56. <li class="nav-item">
  57. <a class="nav-link" href="{{ path('daily_accounts') }}">Daily Accounts</a></li>
  58. <li class="nav-item">
  59. <a class="nav-link" href="{{ path('bos_all_cancelled_transactions') }}">Cancelled</a></li>
  60. </ul>
  62. <div class="main">
  63. <div class="search-row row">
  65. {#<div class="col-lg-1 col-md-1">
  66. <label for="date_search">Vehicle</label><br>
  67. <input type="text" class="" style="width:100px">
  68. </div>#}
  70. <div class="dates col-lg-4 col-md-4">
  71. <div class="row">
  72. <div class="col-lg-6 col-md-6" style="">
  73. <label for="date_search">From Date </label><br>
  74. <input id="from_date" class="easyui-datebox from_date" data-options="formatter:myformatter,parser:myparser" name="from_date" style="width:150px">
  75. </div>
  77. <div class="col-lg-6 col-md-6" style="">
  78. <label for="date_search">To Date </label><br>
  79. <input id="to_date" class="easyui-datebox form-control" data-options="formatter:myformatter,parser:myparser" name="to_date" style="width:150px">
  80. </div>
  81. </div>
  82. </div>
  86. <div class="col-lg-1 col-md-1" style="">
  87. <button onclick="search()" style="margin-top: 30px; font-family: 'Nova Flat', serif, FontAwesome" class="btn btn-success btn-sm"><i class="fa fa-search"></i> search </button>
  88. </div>
  89. <div class="col-lg-2 col-md-2" style="">
  90. <button onclick="getCSV()" style="margin-top: 30px; font-family: 'Nova Flat', serif, FontAwesome" class="btn btn-success btn-sm"><i class="fa fa-search"></i> export to excel </button>
  91. </div>
  92. </div>
  94. <div class="row">
  96. {#<div id="tb" style="padding:2px 5px;">
  97. <fieldset>
  98. Date From: <input class="easyui-datebox" style="width:110px">
  99. To: <input class="easyui-datebox" style="width:110px">
  100. <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
  101. </fieldset>
  104. </div>#}
  105. <table id="transactions"
  106. class="table table-responsive"
  107. style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
  108. toolbar="#tb"
  109. singleSelect=true
  110. rownumbers=true
  111. pageSize=30
  112. fitColumns=true>
  114. <thead>
  115. <tr>
  116. </tr>
  117. </thead>
  118. </table>
  120. </div>
  121. </div>
  122. </div>
  123. {% endblock %}
  126. {% block javascripts %}
  127. {{ parent() }}
  128. <script >
  132. function search(){
  133. $('#transactions').datagrid('load',{
  134. from_date: $('#from_date').val(),
  135. to_date: $('#to_date').val()
  136. });
  138. console.log($('#from_date').val());
  139. console.log($('#to_date').val());
  140. }
  143. function myformatter(date){
  144. var y = date.getFullYear();
  145. var m = date.getMonth()+1;
  146. var d = date.getDate();
  147. return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  148. }
  149. function myparser(s){
  150. if (!s) return new Date();
  151. var ss = (s.split('-'));
  152. var y = parseInt(ss[0],10);
  153. var m = parseInt(ss[1],10);
  154. var d = parseInt(ss[2],10);
  155. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  156. return new Date(y,m-1,d);
  157. } else {
  158. return new Date();
  159. }
  160. }
  162. function getCSV(){
  164. $(".se-pre-con").fadeIn("slow");
  165. /*var fromDate = $('#from_date').val();
  166. var toDate = $('#to_date').val();
  168. var data = JSON.stringify({
  169. "from": $('#from_date').val(),
  170. "to": $('#to_date').val()
  171. });*/
  172. var fromDate = $('#from_date').val();
  173. var toDate = $('#to_date').val();
  175. if(fromDate == null || toDate == null || fromDate === '' || toDate === '' ){
  176. fromDate = 0;
  177. toDate = 0;
  178. }
  180. let filters = $('#transactions').datagrid('options').filterRules;
  181. console.log(JSON.stringify(filters));
  182. $.ajax({
  183. type: 'POST',
  184. // contentType: 'application/json',
  185. contentType: 'application/x-www-form-urlencoded',
  186. data: {
  187. filterRules: JSON.stringify(filters)
  188. },
  189. url: 'transactions/transaction-list/excel/'+fromDate+'/'+toDate ,
  190. dataType: "text",
  191. cache: false,
  192. success: function(data, textStatus, jqXHR){
  193. var min=4;
  194. var max=5;
  195. var random = Math.floor(Math.random() * (+max - +min)) + +min;
  197. $(".se-pre-con").fadeOut("slow");
  198. var s = window.open('reports/'+data,'data:application/vnd.ms-excel; charset=utf-8,');
  199. // var s = window.open(data, 'text')
  201. },
  202. error: function(jqXHR, textStatus, errorThrown){
  203. $(".se-pre-con").fadeOut("slow");
  204. alert('updatePerson error: ' + errorThrown);
  205. },
  206. complete: function () {
  207. $(".se-pre-con").fadeOut("slow");
  208. }
  209. });
  211. }
  217. $('#transactions').datagrid({
  218. url:'transactions/transaction-list',
  219. method: 'post',
  220. pageSize:20,
  221. singleSelect: true,
  222. rownumbers:true,
  223. remoteFilter:true,
  224. pagination:true,
  225. fitColumns:true,
  226. collapsible:true,
  227. showFooter: true,
  228. loadMsg: 'Loading Transaction',
  229. view: detailview,
  230. detailFormatter: function(index, row) {
  231. return '<div class="ddv" style="padding: 5px 0"></div>';
  232. },
  233. onLoadSuccess: function(){
  234. console.log( $(this).datagrid('getData').total);
  236. $(this).datagrid('freezeRow',$(this).datagrid('getData').total);
  237. },
  238. rowStyler: function(index,row){
  239. if (row.is_cancelled === "1"){
  240. console.log(row.is_cancelled);
  241. return 'background-color:#ff7518;color:#fff;font-weight:bold;';
  242. }
  243. },
  244. /*filterStringify: function(data){
  245. $.map(data, function(item){
  246. if (item.field == 'd.accountDate'){
  247. item.value = "'"+item.value+"'";//$.fn.datebox.defaults.parser(item.value).getTime();
  248. }
  249. });
  250. return JSON.stringify(data);
  251. },*/
  252. onExpandRow: function (index, row) {
  253. var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
  254. ddv.panel({
  255. height: 300,
  256. border: false,
  257. cache: false,
  258. href: 'transactions/details/' + row.id,
  259. onLoad: function () {
  261. $('#transactions').datagrid('fixDetailRowHeight', index);
  262. }
  263. })
  264. },
  265. columns: [[
  266. {field:'w.id',title:'WAYBILL',width:30,formatter:function(value,row,index){
  267. return row.waybill;
  268. }},
  269. {field:'d.account_date',title:'Date',width:40,formatter:function(value,row,index){
  271. // var date = new Date(row.account_date);
  272. return row.account_date;
  273. }},
  274. {field:'fs.id',title:'From',width:50,formatter:function(value,row,index){
  275. return row.from_station;
  276. }},
  278. {field:'ts.id',title:'To',width:50,formatter:function(value,row,index){
  279. return row.to_station;
  280. }},
  282. {field:'w.parcel_count',title:'Parcels',width:20,formatter:function(value,row,index){
  283. return row.percel_count;
  284. }},
  286. {field:'t.pin_number',title:'Buyer PIN',width:20,formatter:function(value,row,index){
  287. if(row.pin_number){
  288. return row.pin_number;
  289. }
  290. return 'NA';
  291. }},
  293. {field:'t.amount',title:'Amount',width:20,formatter:function(value,row,index){
  295. return row.amount.toLocaleString();
  296. }},
  297. {field:'t.expenses',title:'Expenses',width:20,formatter:function(value,row,index){
  298. return row.expenses.toLocaleString();
  299. }},
  300. {field:'t.tax_amount',title:'Tax',width:20,formatter:function(value,row,index){
  301. return row.tax_amount.toLocaleString();
  302. }},
  303. {field:'t.balance',title:'Balance',width:20,formatter:function(value,row,index){
  304. return row.balance.toLocaleString();
  305. }}
  306. ]]
  307. });
  310. $(function(){
  311. var transactionDataGrid = $('#transactions').datagrid();
  313. var isStationLoaded = 0;
  315. var isToStationLoaded = 0;
  317. transactionDataGrid.datagrid('enableFilter', [
  318. {
  319. field:'fs.id',
  320. type: 'combobox',
  321. options:{
  322. method: 'GET',
  323. mode:'remote',
  324. panelHeight: 'auto',
  325. valueField:'id',
  326. textField:'station_name',
  327. url:'/form/stations',
  329. onSelect:function(value){
  331. console.log(value.id);
  332. // alert(value.station_name);
  333. if (value.id === -1){
  334. transactionDataGrid.datagrid('removeFilterRule', 'w.fromStation');
  335. }else {
  336. transactionDataGrid.datagrid('addFilterRule', {
  337. field: 'w.from_station_id',
  338. op: 'equal',
  339. value: value.id
  340. });
  341. }
  342. transactionDataGrid.datagrid('doFilter');
  343. },
  344. onLoadSuccess: function(items){
  346. // if (items.length && isStationLoaded === 0){
  347. // isStationLoaded = 1;
  348. // var opts = $(this).combobox('options');
  349. // $(this).combobox('select', items[items.length-1][opts.valueField]);
  350. // }
  351. }
  353. }
  354. },
  355. {
  356. field:'ts.id',
  357. type: 'combobox',
  358. options:{
  359. method: 'GET',
  360. mode:'remote',
  361. panelHeight: 'auto',
  362. valueField:'id',
  363. textField:'station_name',
  364. url:'/form/stations',
  366. onSelect:function(value){
  367. console.log(value.id);
  368. if (value.id === -1){
  369. transactionDataGrid.datagrid('removeFilterRule', 'w.toStation');
  370. } else {
  371. transactionDataGrid.datagrid('addFilterRule', {
  372. field: 'w.to_station_id',
  373. op: 'equal',
  374. value: value.id
  375. });
  376. }
  378. transactionDataGrid.datagrid('doFilter');
  380. },
  381. onLoadSuccess: function(items){
  383. // if (items.length && isToStationLoaded === 0){
  384. // isToStationLoaded = 1;
  385. // var opts = $(this).combobox('options');
  386. // $(this).combobox('select', items[items.length-1][opts.valueField]);
  387. // }
  388. }
  390. }
  391. },
  392. {
  393. field:'d.accountDate',
  394. type:'datebox',
  395. options:{
  396. precision:1,
  397. formatter: function(date) {
  398. var y = date.getFullYear();
  399. var m = date.getMonth()+1;
  400. var d = date.getDate();
  401. return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
  402. },
  403. parser: function(s) {
  404. if (!s) return new Date();
  405. var ss = (s.split('-'));
  406. var y = parseInt(ss[0],10);
  407. var m = parseInt(ss[1],10);
  408. var d = parseInt(ss[2],10);
  409. if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
  410. return new Date(y,m-1,d);
  411. } else {
  412. return new Date();
  413. }
  414. }
  415. },
  416. op:['equal','less','greater']
  417. },
  418. {
  419. field:'w.parcel_count',
  420. type:'numberbox',
  421. options:{precision:1},
  422. op:['less','greater','equal']
  423. },
  424. {
  425. field:'t.amount',
  426. type:'numberbox',
  427. options:{precision:1},
  428. op:['less','greater','equal']
  429. }
  430. ]);
  432. });
  435. function formatAmount(val,row){
  437. return val.toLocaleString();
  438. }
  439. </script>
  440. {% endblock %}