From af2d5c38f37becfc2bef6c6139ab20de65840eeb Mon Sep 17 00:00:00 2001
From: abijah <abijah@97e9348a-65ac-dc4b-aefc-98561f571b83>
Date: Sun, 14 Jun 2009 05:04:41 +0000
Subject: [PATCH] Moved all the jqGrid logic into a separate element, in
 anticipation of moving all lists to jqGrid

git-svn-id: file:///svn-source/pmgr/branches/ledger_transactions_20090605@115 97e9348a-65ac-dc4b-aefc-98561f571b83
---
 site/views/elements/customers.ctp | 182 +-------------------------
 site/views/elements/jqGrid.ctp    | 210 ++++++++++++++++++++++++++++++
 2 files changed, 213 insertions(+), 179 deletions(-)
 create mode 100644 site/views/elements/jqGrid.ctp

diff --git a/site/views/elements/customers.ctp b/site/views/elements/customers.ctp
index c3f501e..faeb05a 100644
--- a/site/views/elements/customers.ctp
+++ b/site/views/elements/customers.ctp
@@ -1,25 +1,5 @@
 <?php /* -*- mode:PHP -*- */
 
-if (!isset($caption))
-  $caption = '<H2>'.$this->pageTitle.'</H2>';
-
-if (!isset($limit))
-  $limit = 20;
-
-if (!isset($limitOptions))
-  $limitOptions = array(10, 20, 50, 200);
-
-if (!isset($height))
-  $height = 'auto';
-
-// Do some prework to bring in the appropriate libraries
-$imgpath = '/pmgr/site/css/jqGrid/basic/images';
-$html->css('jqGrid/basic/grid', null, null, false);
-$html->css('jqGrid/jqModal', null, null, false);
-$javascript->link('jqGrid/jquery.jqGrid.js', false);
-$javascript->link('jqGrid/js/jqModal', false);
-$javascript->link('jqGrid/js/jqDnR', false);
-
 // Define the table columns
 $cols = array();
 $cols['ID']          = array('index' => 'Customer.id',                'width' => '30',  'align' => 'center');
@@ -39,99 +19,13 @@ foreach (array_intersect_key($cols, array('Comment'=>1)) AS $k => $v)
 foreach (array_intersect_key($cols, array('Last Name'=>1, 'First Name'=>1)) AS $k => $v)
   $cols[$k]['search'] = true;
 
-// Create the javascript code for jqGrid to create each table column
-$colModels = array();
-foreach ($cols AS $col) {
-  $col['name'] = $col['index'];
-  $colModels[] =
-    '{ ' . implode(", ",
-		   array_map(create_function
-			     ('$k, $v',
-			      'return "$k:".($v===false?"false":($v===true?"true":"\'$v\'"));'),
-			     array_keys($col),
-			     array_values($col))) .
-    '}';
-}
+echo $this->element('jqGrid',
+		    array('jqGridColumns' => $cols));
 
-// Save just the column indices (fields)
-$colFields= array_map(create_function('$col', 'return $col["index"];'), $cols);
-
-// Define the URL to fetch data from.
-// To prevent having to keep the controller and the view
-// in sync on which fields need to be queried by the
-// controller in order to be accessible to the view,
-// we'll just pass the desired fields to the controller
-// as part of the data fetch.
-
-$url = $html->url(array('controller' => 'customers',
-			'action'     => 'jqGridData',
-			'debug'      => 0,
-			));
-
-// OK, now that everything is in place, get out of PHP mode,
-// and add the javascript code (along with a touch of HTML)
-// to kick this thing off.
 ?>
 
-<script type="text/javascript"><!--
-
-jQuery(document).ready(function(){ 
-  jQuery("#customer-list").jqGrid({
-    url: '<?php echo $url; ?>',
-    datatype: 'xml',
-    mtype: 'GET',
-    postData: { action: '<?php echo $action; ?>',
-   	        fields: '<?php echo serialize($colFields); ?>' },
-    colNames: [ '<?php echo implode("', '", array_keys($cols)); ?>' ],
-    colModel: [ <?php echo "\n   " . implode(",\n   ", $colModels); ?> ],
-    pager: jQuery('#customer-pager'),
-    height: '<?php echo $height; ?>',
-    rowNum: <?php echo $limit; ?>,
-    rowList: [<?php echo implode(",",$limitOptions); ?>],
-    sortname: 'Customer.id',
-    sortorder: "ASC",
-    viewrecords: true,
-    imgpath: '<?php echo $imgpath; ?>',
-    caption: <?php echo $caption ? "'$caption'" : "null"; ?>,
-/*     toolbar : [true,"bottom"],  */
-  }); 
-
-/*   jQuery("#t_customer-list").height(25).hide() */
-/*     .filterGrid("#customer-list", { */
-/*       gridModel:true, */
-/* 	  gridToolbar:true, */
-/* 	  autosearch:true, */
-/* 	  }); */
-
-/*   jQuery("#customer-list").navGrid('#customer-pager', */
-/* 				   { view:false,   */
-/* 				     edit:false, */
-/* 				       add:false, */
-/* 				       del:false, */
-/* 				       search:false, */
-/* 				       refresh:false}) */
-/*     .navButtonAdd("#customer-pager",{ */
-/*       caption:"Search", */
-/* 	  title:"Toggle Search", */
-/* 	  buttonimg:'<?php echo $imgpath; ?>' + '/find.gif', */
-/* 	  onClickButton:function(){ */
-/* 	  if(jQuery("#t_customer-list").css("display")=="none") { */
-/* 	    jQuery("#t_customer-list").css("display",""); */
-/* 	  } else { */
-/* 	    jQuery("#t_customer-list").css("display","none"); */
-/* 	  } */
-/* 	} */
-/*       }); */
-
-});
-
---></script>
-
-<table id="customer-list" class="scroll"></table> 
-<div id="customer-pager" class="scroll" style="text-align:center;"></div> 
-
 <div>Search By:<BR>
-<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">Enable Autosearch<BR>
+<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)" CHECKED>Enable Autosearch<BR>
 
 Last Name<BR>
 <input type="text" CLASS="filt-text" id="filt_last_name" name="PrimaryContact.last_name" />
@@ -147,73 +41,3 @@ First Name<BR>
 
 </div>
 
-<div ID="debug"></div>
-
-<script type="text/javascript"><!--
-
-var timeoutHnd;
-function handleFiltKeydown(e){
-/*   $('#debug').append("KEYDOWN: id:"+id+"<BR>"); */
-
-  if (e.which == 8 || e.which == 46 || /* Backspace / Delete */
-      e.which == 32 || /* Space */
-      (65 <= e.which && e.which < 65 + 26) || /* Upper Case */
-      (97 <= e.which && e.which < 97 + 26))   /* Lower Case */
-    {
-      var id = $(this).attr('id');
-      if(timeoutHnd)
-	clearTimeout(timeoutHnd);
-      timeoutHnd = setTimeout(function()
-			      {gridFilter(id)},
-			      500);
-    }
-}
-
-function enableAutosubmit(state) {
-   jQuery(".filt-submit").attr("disabled",state);
-   if (state) {
-     $(".filt-text").keydown(handleFiltKeydown);
-/*      $('#debug').append("BIND: id:"+id+"<BR>"); */
-   }
-   else {
-     $(".filt-text").unbind('keydown', handleFiltKeydown);
-/*      $('#debug').append("UNBIND: id:"+id+"<BR>"); */
-   }
-} 
-
-function gridRestore() {
-/*   $('#debug').append("RESTORE<BR>"); */
-  $('.filt-text').val('');
-  jQuery("#customer-list").removePostDataItem('filt');
-  jQuery("#customer-list").removePostDataItem('filtField');
-  jQuery("#customer-list").removePostDataItem('filtValue');
-  jQuery("#customer-list")
-    .setGridParam({ page: 1 })
-    .trigger("reloadGrid");
-}
-
-function gridFilter(id) {
-  var field = jQuery("#"+id).attr('name');
-  var value = jQuery("#"+id).val();
-/*   $('#debug').append("RELOAD: field:"+field+"; value:"+value+"<BR>"); */
-  jQuery("#customer-list").setPostDataItem('filt', true);
-  jQuery("#customer-list").setPostDataItem('filtField', field);
-  jQuery("#customer-list").setPostDataItem('filtValue', value);
-
-  $('.filt-text').each(function(){
-      if ($(this).attr('id') != id)
-	$(this).val('');
-    });
-  
-  jQuery("#customer-list")
-    .setGridParam({ page: 1 })
-    .trigger("reloadGrid");
-}
-
-$('.filt-submit').click(function(){
-    gridFilter($(this).attr('id').replace(/^submit_/, ''));
-  });	    
-
-
---></script>
-
diff --git a/site/views/elements/jqGrid.ctp b/site/views/elements/jqGrid.ctp
new file mode 100644
index 0000000..b12aae3
--- /dev/null
+++ b/site/views/elements/jqGrid.ctp
@@ -0,0 +1,210 @@
+<?php /* -*- mode:PHP -*- */
+
+if (!isset($caption))
+  $caption = '<H2>'.$this->pageTitle.'</H2>';
+
+if (!isset($limit))
+  $limit = 20;
+
+if (!isset($limitOptions))
+  $limitOptions = array(10, 20, 50, 200);
+
+if (!isset($height))
+  $height = 'auto';
+
+if (!isset($gridId))
+  $gridId = $this->params['controller'] . '-jqGrid';
+
+// Do some prework to bring in the appropriate libraries
+$imgpath = '/pmgr/site/css/jqGrid/basic/images';
+$html->css('jqGrid/basic/grid', null, null, false);
+$html->css('jqGrid/jqModal', null, null, false);
+$javascript->link('jqGrid/jquery.jqGrid.js', false);
+$javascript->link('jqGrid/js/jqModal', false);
+$javascript->link('jqGrid/js/jqDnR', false);
+
+// Create the javascript code for jqGrid to create each table column
+$colModels = array();
+foreach ($jqGridColumns AS $col) {
+  $col['name'] = $col['index'];
+  $colModels[] =
+    '{ ' . implode(", ",
+		   array_map(create_function
+			     ('$k, $v',
+			      'return "$k:".($v===false?"false":($v===true?"true":"\'$v\'"));'),
+			     array_keys($col),
+			     array_values($col))) .
+    '}';
+}
+
+// Save just the column indices (fields)
+$colFields= array_map(create_function('$col', 'return $col["index"];'), $jqGridColumns);
+
+// Define the URL to fetch data from.
+// To prevent having to keep the controller and the view
+// in sync on which fields need to be queried by the
+// controller in order to be accessible to the view,
+// we'll just pass the desired fields to the controller
+// as part of the data fetch.
+
+$url = $html->url(array('action'     => 'jqGridData',
+			'debug'      => 0,
+			));
+
+// OK, now that everything is in place, get out of PHP mode,
+// and add the javascript code (along with a touch of HTML)
+// to kick this thing off.
+?>
+
+<script type="text/javascript"><!--
+
+jQuery(document).ready(function(){ 
+  jQuery('#<?php echo $gridId; ?>').jqGrid({
+    url: '<?php echo $url; ?>',
+    datatype: 'xml',
+    mtype: 'GET',
+    postData: { action: '<?php echo $action; ?>',
+   	        fields: '<?php echo serialize($colFields); ?>' },
+    colNames: [ '<?php echo implode("', '", array_keys($jqGridColumns)); ?>' ],
+    colModel: [ <?php echo "\n   " . implode(",\n   ", $colModels); ?> ],
+    pager: jQuery('#<?php echo $gridId; ?>-pager'),
+    height: '<?php echo $height; ?>',
+    rowNum: <?php echo $limit; ?>,
+    rowList: [<?php echo implode(",",$limitOptions); ?>],
+/*     sortname: 'Customer.id', */
+/*     sortorder: "ASC", */
+    viewrecords: true,
+    imgpath: '<?php echo $imgpath; ?>',
+    caption: <?php echo $caption ? "'$caption'" : "null"; ?>,
+/*     toolbar : [true,"bottom"],  */
+  }); 
+
+/*   jQuery('#t_<?php echo $gridId; ?>').height(25).hide() */
+/*     .filterGrid('#<?php echo $gridId; ?>', { */
+/*       gridModel:true, */
+/* 	  gridToolbar:true, */
+/* 	  autosearch:true, */
+/* 	  }); */
+
+/*   jQuery('#<?php echo $gridId; ?>').navGrid('#<?php echo $gridId; ?>-pager', */
+/* 				   { view:false,   */
+/* 				     edit:false, */
+/* 				       add:false, */
+/* 				       del:false, */
+/* 				       search:false, */
+/* 				       refresh:false}) */
+/*     .navButtonAdd('#<?php echo $gridId; ?>-pager',{ */
+/*       caption:"Search", */
+/* 	  title:"Toggle Search", */
+/* 	  buttonimg:'<?php echo $imgpath; ?>' + '/find.gif', */
+/* 	  onClickButton:function(){ */
+/* 	  if(jQuery('#t_<?php echo $gridId; ?>').css("display")=="none") { */
+/* 	    jQuery('#t_<?php echo $gridId; ?>').css("display",""); */
+/* 	  } else { */
+/* 	    jQuery('#t_<?php echo $gridId; ?>').css("display","none"); */
+/* 	  } */
+/* 	} */
+/*       }); */
+
+});
+
+--></script>
+
+<table id="<?php echo $gridId; ?>" class="scroll"></table> 
+<div id="<?php echo $gridId; ?>-pager" class="scroll" style="text-align:center;"></div> 
+
+<script type="text/javascript"><!--
+
+/************************************************************************
+ *
+ * Example search boxes that work with the javascript form this element
+
+<div>Search By:<BR>
+<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">Enable Autosearch<BR>
+
+Last Name<BR>
+<input type="text" CLASS="filt-text" id="filt_last_name" name="PrimaryContact.last_name" />
+<button CLASS="filt-submit" ID="submit_filt_last_name" style="margin-left:30px;">Search</button><BR>
+
+First Name<BR>
+<input type="text" CLASS="filt-text" id="filt_first_name" name="PrimaryContact.first_name" />
+<button CLASS="filt-submit" ID="submit_filt_first_name" style="margin-left:30px;">Search</button><BR>
+
+<div>
+<button CLASS="filt-clear" ONCLICK="gridRestore()">Clear</button>
+</div>
+
+</div>
+
+ *
+ */
+
+
+var timeoutHnd;
+function handleFiltKeydown(e){
+/*   $('#debug').append("KEYDOWN: id:"+id+"<BR>"); */
+
+  if (e.which == 8 || e.which == 46 || /* Backspace / Delete */
+      e.which == 32 || /* Space */
+      (65 <= e.which && e.which < 65 + 26) || /* Upper Case */
+      (97 <= e.which && e.which < 97 + 26))   /* Lower Case */
+    {
+      var id = $(this).attr('id');
+      if(timeoutHnd)
+	clearTimeout(timeoutHnd);
+      timeoutHnd = setTimeout(function()
+			      {gridFilter(id)},
+			      500);
+    }
+}
+
+function enableAutosubmit(state) {
+   jQuery(".filt-submit").attr("disabled",state);
+   if (state) {
+     $(".filt-text").keydown(handleFiltKeydown);
+/*      $('#debug').append("BIND: id:"+id+"<BR>"); */
+   }
+   else {
+     $(".filt-text").unbind('keydown', handleFiltKeydown);
+/*      $('#debug').append("UNBIND: id:"+id+"<BR>"); */
+   }
+} 
+
+function gridRestore() {
+/*   $('#debug').append("RESTORE<BR>"); */
+  $('.filt-text').val('');
+  jQuery('#<?php echo $gridId; ?>').removePostDataItem('filt');
+  jQuery('#<?php echo $gridId; ?>').removePostDataItem('filtField');
+  jQuery('#<?php echo $gridId; ?>').removePostDataItem('filtValue');
+  jQuery('#<?php echo $gridId; ?>')
+    .setGridParam({ page: 1 })
+    .trigger("reloadGrid");
+}
+
+function gridFilter(id) {
+  var field = jQuery("#"+id).attr('name');
+  var value = jQuery("#"+id).val();
+/*   $('#debug').append("RELOAD: field:"+field+"; value:"+value+"<BR>"); */
+  jQuery('#<?php echo $gridId; ?>').setPostDataItem('filt', true);
+  jQuery('#<?php echo $gridId; ?>').setPostDataItem('filtField', field);
+  jQuery('#<?php echo $gridId; ?>').setPostDataItem('filtValue', value);
+
+  $('.filt-text').each(function(){
+      if ($(this).attr('id') != id)
+	$(this).val('');
+    });
+  
+  jQuery('#<?php echo $gridId; ?>')
+    .setGridParam({ page: 1 })
+    .trigger("reloadGrid");
+}
+
+jQuery(document).ready(function(){ 
+    $('.filt-submit').click(function(){
+	gridFilter($(this).attr('id').replace(/^submit_/, ''));
+      });
+    enableAutosubmit(true);
+  });
+
+--></script>
+