PageRenderTime 40ms CodeModel.GetById 15ms RepoModel.GetById 0ms app.codeStats 0ms

/opensourcepos/application/views/procurement/invoice/purchase_invoice_grid.php

https://bitbucket.org/jit_bec/shopifine
PHP | 624 lines | 511 code | 91 blank | 22 comment | 12 complexity | 3266be42f648b4bc770191194a716f99 MD5 | raw file
Possible License(s): LGPL-3.0
  1. <html>
  2. <head>
  3. <?php $this->load->view("common/header"); ?>
  4. <!-- <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>-->
  5. <style>
  6. .column {
  7. float: left;
  8. padding: 1em;
  9. width:30%;
  10. }
  11. .extra-wide{
  12. width:95%;
  13. }
  14. .field{
  15. width:100%;
  16. }
  17. .ui-widget-header {height:12px;}
  18. .quote-column {
  19. float: left;
  20. padding-bottom: 0.5em;
  21. width: 95%;
  22. }
  23. .ui-combobox {
  24. width:14em;
  25. }
  26. .ui-combobox-input{
  27. width:12em;
  28. }
  29. #supplierOp-input{
  30. width:10em;
  31. }
  32. #warehouseOp-input{
  33. width:10em;
  34. }
  35. .calculated {
  36. color: green;
  37. font-size: 90%;
  38. }
  39. .row{
  40. width:95%;
  41. }
  42. .shopifine-ro-label {
  43. float: left;
  44. padding-right: 0.5em;
  45. width: 50%;
  46. word-wrap: break-word;
  47. color:#2E6E9E;
  48. }
  49. .shopifine-output {
  50. float: right;
  51. width: 45%;
  52. word-wrap: break-word;
  53. font-weight:bold;
  54. }
  55. .ui-tabs {
  56. height: 80%;
  57. margin: 0 auto;
  58. width: 70%;
  59. left:0;
  60. }
  61. #notetab {
  62. height:30em;
  63. }
  64. #details {
  65. height:12em;
  66. }
  67. .ui-tabs-nav{
  68. height:22px;
  69. }
  70. .labeldiv {
  71. color: #2E6E9E;
  72. float: left;
  73. font-size: 110%;
  74. font-weight: bold;
  75. margin-right: .5em;
  76. width: 35%;
  77. word-wrap: break-word;
  78. }
  79. .valuediv {
  80. float: left;
  81. font-weight: bold;
  82. width: 45%;
  83. word-wrap: break-word;
  84. }
  85. label.error {
  86. margin-right: .5em;
  87. }
  88. #status-message-li{
  89. color: red;
  90. font-size: 110%;
  91. font-style: italic;
  92. margin: 0 auto;
  93. width: 80%;
  94. }
  95. .table-grid {
  96. padding-top: 2em;
  97. }
  98. .help-message {
  99. color: green;
  100. float: right;
  101. font-size: 90%;
  102. font-style: italic;
  103. width: 65%;
  104. }
  105. </style>
  106. <script type="text/javascript">
  107. $(function() {
  108. $.validator.addMethod('tallyamount', function (value, el) {
  109. var already_paid = parseFloat($("#amount_paid_form").text());
  110. var pay_amount = parseFloat($("#amount").val());
  111. var total_invoiced_value = parseFloat($("#total_value_form").text());
  112. var total_paid= already_paid + pay_amount;
  113. if (total_paid>total_invoiced_value){
  114. return false;
  115. }
  116. else {
  117. return true;
  118. }
  119. },"Total Payment Exceeds Invoiced ");
  120. $("#paymentForm").validate({rules:{
  121. amount:{
  122. required:true,
  123. number:true,
  124. minStrict:0,
  125. tallyamount:true
  126. }
  127. }}
  128. );
  129. // Main Request For Quotation Grid
  130. function invFormatter ( cellvalue, options, rowObject )
  131. {
  132. // format the cellvalue to new format
  133. return 'PINV-' + cellvalue;
  134. }
  135. function poFormatter ( cellvalue, options, rowObject )
  136. {
  137. // format the cellvalue to new format
  138. return 'PO-' + cellvalue;
  139. }
  140. var myGrid = $("#orders");
  141. myGrid.jqGrid({
  142. url:'index.php/procurement/populateInvoicesToPay',
  143. datatype: 'json',
  144. mtype: 'GET',
  145. colNames:['Invoice Reference','Total Value','Amount Paid','Status','Invoiced By','Order Id','Order Ref'],
  146. colModel :[
  147. {name:'reference', index:'reference', width:120, align:'right',editable:false,formatter:invFormatter},
  148. {name:'total_value', index:'total_value',editable:false,align:'right',width:100},
  149. {name:'amount_paid', index:'amount_paid',editable:false,align:'right',width:120},
  150. {name:'status', index:'status',editable:false,align:'right'},
  151. {name:'invoiced_by', index:'invoiced_by', width:100, align:'right',editable:false},
  152. {name:'order_id', index:'order_id',hidden:true},
  153. {name:'order_reference', index:'order_reference',editable:false, width:100, align:'right',formatter:poFormatter}
  154. ],
  155. pager: '#pager',
  156. rowNum:10,
  157. rowList:[5,10,20],
  158. sortname: 'id',
  159. sortorder: 'desc',
  160. viewrecords: true,
  161. gridview: true,
  162. ignoreCase:true,
  163. rownumbers:true,
  164. height:'auto',
  165. width:680,
  166. caption: 'Invoices',
  167. onSelectRow: function (){
  168. $( "#dialog-form" ).dialog("open");
  169. },
  170. jsonReader : {
  171. root:"quotedata",
  172. page: "page",
  173. total: "total",
  174. records: "records",
  175. cell: "dprow",
  176. id: "id"
  177. },
  178. subGrid:true,
  179. subGridRowExpanded: function(subgrid_id, row_id) {
  180. // we pass two parameters
  181. // subgrid_id is a id of the div tag created whitin a table data
  182. // the id of this elemenet is a combination of the "sg_" + id of the row
  183. // the row_id is the id of the row
  184. // If we wan to pass additinal parameters to the url we can use
  185. // a method getRowData(row_id) - which returns associative array in type name-value
  186. // here we can easy construct the flowing
  187. var subgrid_table_id, pager_id;
  188. subgrid_table_id = subgrid_id+"_t";
  189. pager_id = "p_"+subgrid_table_id;
  190. $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
  191. jQuery("#"+subgrid_table_id).jqGrid({
  192. url:'index.php/procurement/populateInvoiceItems?invoiceId='+row_id,
  193. datatype: 'json',
  194. colNames:['Product Id','Product','Invoiced Quantity','Invoiced Value'/*,'Owner','Status','Order Id','Order Ref','Quote Ref','Owner','Needed By Date'*/],
  195. colModel :[
  196. // {name:'reference', index:'reference', width:80, align:'right',editable:false},
  197. {name:'product_id', index:'product_id',editable:false,align:'right',hidden:true},
  198. {name:'name', index:'name', width:140, align:'right',editable:false},
  199. // {name:'estimated_value', index:'estimated_value', width:100, align:'right',editable:false,editoptions:{size:"20",maxlength:"30"}},
  200. // {name:'owner', index:'owner', width:140, align:'right',editable:true,editoptions:{size:"20",maxlength:"30"}},
  201. {name:'invoiced_quantiy', index:'invoiced_quantiy', width:100, align:'right',editable:false,editoptions:{size:"20",maxlength:"30"}},
  202. {name:'total_invoiced_value', index:'total_invoiced_value',editable:false,align:'right'}
  203. ],
  204. rowNum:20,
  205. pager: pager_id,
  206. sortname: 'id',
  207. sortorder: "asc",
  208. height: '100%',
  209. jsonReader : {
  210. root:"invoiceitemdata",
  211. page: "page",
  212. total: "total",
  213. records: "records",
  214. cell: "dprow",
  215. id: "id"
  216. }
  217. });
  218. jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false,search:false,view:true});
  219. }
  220. }).navGrid("#pager",{edit:false,add:false,view:false,del:false,search:false},{height:280,reloadAfterSubmit:false,closeAfterEdit:true,recreateForm:true,checkOnSubmit:true},{},{},{},{});
  221. myGrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch : "cn"});
  222. //$("#del_orders").insertAfter("#add_orders");
  223. $( "#dialog-form" ).dialog({
  224. autoOpen: false,
  225. height: 'auto',
  226. width: '55%',
  227. position:[300,25],
  228. modal: true,
  229. buttons: {
  230. Cancel: function() {
  231. $( this ).dialog( "close" );
  232. }
  233. },
  234. open: function(event,ui){
  235. var invoice_id = myGrid.getGridParam('selrow');
  236. $("#payments").jqGrid({
  237. url:'index.php/procurement/populatePayments',
  238. datatype: 'json',
  239. mtype: 'POST',
  240. postData:{invoiceId: myGrid.getGridParam('selrow')},
  241. colNames:['Payment Reference','Payment Type','Amount','Comments'],
  242. colModel :[
  243. {name:'payment_reference', index:'payment_reference',editable:false},
  244. {name:'payment_type', index:'payment_type',editable:false, width:160, align:'right'},
  245. {name:'amount', index:'amount', editable:false,width:60, align:'right'},
  246. {name:'comments', index:'comments', editable:false,width:200, align:'right'}
  247. // {name:'comments', index:'comments',editable:true, width:180, align:'right'}
  248. ],
  249. pager: '#pagerPk',
  250. rowNum:10,
  251. rowList:[5,10,20],
  252. sortname: 'id',
  253. sortorder: 'desc',
  254. viewrecords: true,
  255. gridview: true,
  256. ignoreCase:true,
  257. rownumbers:true,
  258. multiselect:true,
  259. height:'auto',
  260. width:'50%',
  261. caption: 'Line Items',
  262. jsonReader : {
  263. root:"quoteitemdata",
  264. page: "page",
  265. total: "total",
  266. records: "records",
  267. cell: "dprow",
  268. id: "id"
  269. }
  270. }).navGrid("#pagerPk",{edit:false,add:false,del:false,search:false,view:true},{},{},{},{},{});
  271. $("#payments").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch : "cn"});
  272. $("#payments").jqGrid('navButtonAdd','#pagerPk',{
  273. caption:"",
  274. title:"Add Payment Details",
  275. buttonicon:"ui-icon-plus",
  276. id:"add_payments",
  277. onClickButton : function () {
  278. var total_value = parseFloat($("#total_value").text());
  279. var amount_paid = parseFloat($("#amount_paid").text());
  280. if (total_value==amount_paid){
  281. $( "#modal-error-payment" ).dialog( "open" );
  282. }
  283. else {
  284. $( "#dialog-form-item" ).data('oper','add').dialog( "open" );
  285. }
  286. }
  287. });
  288. $("#payments").jqGrid('navButtonAdd','#pagerPk',{
  289. caption:"",
  290. title:"Edit Payment Details",
  291. buttonicon:"ui-icon-pencil",
  292. id:"edit_payments",
  293. onClickButton : function () {
  294. var noOfRows = $("#payments").getGridParam('selarrrow').length;
  295. if (noOfRows!=1){
  296. $( "#modal-warning" ).dialog( "open" );
  297. }
  298. else {
  299. $( "#dialog-form-item" ).data('oper','edit').dialog( "open" );
  300. }
  301. }
  302. });
  303. console.log(invoice_id);
  304. $("#invoice").text(myGrid.getCell(invoice_id,'reference'));
  305. $("#total_value").text(myGrid.getCell(invoice_id,'total_value'));
  306. $("#order_ref").text(myGrid.getCell(invoice_id,'order_reference'));
  307. $("#amount_paid").text(myGrid.getCell(invoice_id,'amount_paid'));
  308. },
  309. close: function(event,ui) {
  310. $("#estValue").text("");
  311. $("#curPrice").text("");
  312. $("#status-message-li").empty();
  313. $("#payments").jqGrid("GridUnload");
  314. }
  315. });
  316. $( "#modal-error-payment" ).dialog({
  317. autoOpen:false,
  318. height: 80,
  319. modal: true
  320. });
  321. $( "#modal-warning" ).dialog({
  322. autoOpen:false,
  323. height: 80,
  324. modal: true
  325. });
  326. $( "#dialog-form-item" ).dialog({
  327. autoOpen: false,
  328. height: 'auto',
  329. width: '35%',
  330. position:[450,25],
  331. modal: true,
  332. buttons: {
  333. "Register Payment": function() {
  334. var isvalid = $("#paymentForm").valid();
  335. var invoice_id = myGrid.getGridParam('selrow');
  336. console.log ("data " +" " + invoice_id);
  337. if (isvalid){
  338. $.ajax({
  339. url:"index.php/procurement/registerPayment",
  340. type:"POST",
  341. data:{
  342. invoice_id:invoice_id,
  343. payment_type:$("#payment_type").val(),
  344. payment_ref:$("#payment_ref").val(),
  345. amount:$("#amount").val(),
  346. total_value:parseFloat($("#amount").val())+parseFloat($("#amount_paid_form").text()),
  347. oper: $("#oper").val(),
  348. payment_id:$("#payment_id").val(),
  349. comments:$("#bankcomments").val(),
  350. total_invoiced:parseFloat($("#total_value_form").text())
  351. },
  352. success:function (response){
  353. console.log("ssuccess" + response)
  354. $("#amount_paid").text(response)
  355. $("#payments").trigger("reloadGrid");
  356. },
  357. error :function (response){
  358. //console.log(response)
  359. //$("#amount_paid").text(response)
  360. }
  361. })
  362. $( this ).dialog( "close" );
  363. }
  364. },
  365. Cancel: function() {
  366. $( this ).dialog( "close" );
  367. }
  368. },
  369. open: function(event,ui){
  370. var oper = $(this).data("oper");
  371. if (oper=='add'){
  372. $("#oper").val(oper);
  373. }
  374. else if (oper=='edit'){
  375. var pay_id = $("#payments").getGridParam('selrow');
  376. $("#oper").val(oper);
  377. $("#payment_id").val(pay_id);
  378. $("#payment_ref").val($("#payments").getCell(pay_id,'payment_reference'));
  379. $("#payment_type").val($("#payments").getCell(pay_id,'payment_type'));
  380. $("#amount").val($("#payments").getCell(pay_id,'amount'));
  381. $("#payment_ref").attr('disabled',true);
  382. $("#payment_type").attr('disabled',true);
  383. }
  384. $("#total_value_form").text($("#total_value").text());
  385. $("#amount_paid_form").text($("#amount_paid").text());
  386. },
  387. close: function(event,ui) {
  388. $("#paymentForm").data('validator').resetForm();
  389. $('#paymentForm')[0].reset();
  390. $("#total_value_form").text("");
  391. $("#amount_paid_form").text("");
  392. $("#payment_ref").attr("disabled",false);
  393. $("#payment_type").attr('disabled',false);
  394. $("#status-message-li").empty();
  395. }
  396. });
  397. $("#payment_type").change(function(){
  398. if ($(this).val()!='cash'){
  399. $("#comments").addClass("required");
  400. $("#payment_ref").addClass("required");
  401. $("#payment_ref").val("");
  402. $("#payment_ref").attr("disabled",false);
  403. }
  404. else {
  405. $("#comments").removeClass("required");
  406. $("#payment_ref").removeClass("required");
  407. $("#payment_ref").val("Cash");
  408. $("#payment_ref").attr("disabled",true);
  409. }
  410. })
  411. });
  412. </script>
  413. </head>
  414. <body>
  415. <?php $this->load->view("common/menubar"); ?>
  416. <div id="modal-warning" title="Warning">
  417. <p>Please Select One Row</p>
  418. </div>
  419. <div id="modal-error-payment" title="Error">
  420. <p>Total Amount Paid Is Same As Invoiced Amount. No More Payment Allowed</p>
  421. </div>
  422. <div style="display: block;height: 100%;" class="shopifine-ui-dialog ui-widget ui-widget-content ui-corner-all" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
  423. <?php $this->load->view("common/message"); ?>
  424. <div class="table-grid">
  425. <h1 id="table header">Invoices To Pay</h1>
  426. <table id="orders"><tr><td/></tr></table>
  427. <div id="pager"></div>
  428. </div>
  429. </div>
  430. <div id ="dialog-form">
  431. <h1 id="formHeader">Add Payments For Invoice #: <span id="invoice" name ="invoice" ></span> </h1>
  432. <div id ="status-message-li" class="ui-corner-all">
  433. </div>
  434. <div class="row ">
  435. <div class="column ">
  436. <div class="field">
  437. <div class="labeldiv">Total Value:</div>
  438. <div class="valuediv" id="total_value" name ="total_value" ></div>
  439. </div>
  440. </div>
  441. <div class="column ">
  442. <div class="field">
  443. <div class="labeldiv">Amount Paid :</div>
  444. <div class="valuediv" name="amount_paid" id="amount_paid" ></div>
  445. </div>
  446. </div>
  447. <div class="column ">
  448. <div class="field">
  449. <div class="labeldiv">Order Reference:</div>
  450. <div class="valuediv" name="order_ref" id="order_ref" ></div>
  451. </div>
  452. </div>
  453. </div>
  454. <div id ="status-message-li" class="ui-corner-all">
  455. </div>
  456. <div class="table-grid">
  457. <h1 id="table header">Payment Details</h1>
  458. <table id="payments"><tr><td/></tr></table>
  459. <div id="pagerPk"></div>
  460. </div>
  461. </div>
  462. <div id ="dialog-form-item">
  463. <h1 id="formHeader">Receive Items</h1>
  464. <form id="paymentForm">
  465. <fieldset>
  466. <div class="row single-column-row">
  467. <div class="column quote-column single-column">
  468. <div class="field">
  469. <div class="labeldiv">Total Value:</div>
  470. <div class="valuediv" id="total_value_form" name="total_value_form" ></div>
  471. </div>
  472. </div>
  473. </div>
  474. <div class="row single-column-row">
  475. <div class="column quote-column single-column">
  476. <div class="field">
  477. <div class="labeldiv">Amount Paid:</div>
  478. <div class="valuediv" id="amount_paid_form" name="amount_paid_form" ></div>
  479. </div>
  480. </div>
  481. </div>
  482. <div class="row single-column-row">
  483. <div class="column quote-column single-column">
  484. <div class="field">
  485. <label for="payment_type" class="labeldiv">Payment Type:</label>
  486. <select id="payment_type" name ="payment_type" class="required">
  487. <option value="">Choose..</option>
  488. <option value="cash">Cash</option>
  489. <option value="cheque">Cheque</option>
  490. <option value="draft">Draft</option>
  491. <option value="online">Online</option>
  492. </select>
  493. </div>
  494. </div>
  495. </div>
  496. <div class="row single-column-row">
  497. <div class="column quote-column single-column">
  498. <div class="field">
  499. <label for="payment_ref" class="labeldiv">Payment Reference:</label>
  500. <input id="payment_ref" name="payment_ref" class="required"/>
  501. <div id ="receipt-help" class="ui-corner-all help-message">
  502. (Provide Cheque Number/Draft Number/Online Transaction Id)
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. <div class="row single-column-row">
  508. <div class="column quote-column single-column">
  509. <div class="field">
  510. <label for="amount" class="labeldiv">Amount:</label>
  511. <input id="amount" name="amount" />
  512. </div>
  513. </div>
  514. </div>
  515. <div class="row single-column-row">
  516. <div class="column quote-column single-column">
  517. <div class="field">
  518. <label for="comments" class="labeldiv">Bank Details:</label>
  519. <textarea id="bankcomments" name="bankcomments" row="5" col="40"></textarea>
  520. <div id ="receipt-help" class="ui-corner-all help-message">
  521. (Provide Account # , Branch Etc:)
  522. </div>
  523. </div>
  524. </div>
  525. </div>
  526. <input id="oper" name="oper" type="hidden" value=""/>
  527. <input id="payment_id" name="payment_id" type="hidden" value=""/>
  528. </fieldset>
  529. </form>
  530. </div>
  531. <?php $this->load->view("partial/footer"); ?>
  532. </body>
  533. </html>