From c07d6264fb4a0e7f677b97b6087e7ba2dd8f960c Mon Sep 17 00:00:00 2001
From: Max Ogden <max@maxogden.com>
Date: Tue, 5 Jul 2011 18:38:15 -0700
Subject: [PATCH] implement cell editing

---
 attachments/pages/index.html          |  80 +++++++++++---------------
 attachments/script/costco.js          |   2 +-
 attachments/script/removalist.js      |   6 +-
 attachments/script/site.js            |  30 +++++++++-
 attachments/script/util.js            |   8 ++-
 attachments/style/data-table.css      |  11 +++-
 attachments/style/images/edit-map.png | Bin 0 -> 1569 bytes
 7 files changed, 82 insertions(+), 55 deletions(-)
 create mode 100755 attachments/style/images/edit-map.png
diff --git a/attachments/pages/index.html b/attachments/pages/index.html
index 00e94255..f221e964 100644
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@@ -19,15 +19,15 @@
 <body>
 	<div class="container">
 	  <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
-    <ul class="menu" id="menu">
+    <ul class="menu">
     	<li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
     </ul>
     <div id="header">
       <a href="http://github.com/maxogden/removalist"><img id="couchLogo" src="images/couch.png"/></a>
-      <div id="project-title"></div>
-      <div id="project-controls"></div>
+      <div class="project-title"></div>
+      <div class="project-controls"></div>
     </div>
-		<div id="main_content"></div>
+		<div class="main_content"></div>
 	</div>
 	
 	<div id="notification-container">
@@ -39,53 +39,28 @@
   <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
   <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; ">
   	<div class="dialog-frame" style="width: 700px; visibility: visible; ">
-  		<div id="dialog-content" class="dialog-border"></div>
+  		<div class="dialog-content dialog-border"></div>
   	</div>
   </div>
   
-  <script type='text/mustache' id="dbTemplate">
-    <div id="database" class="single_database">
-      <div class="group" id="current-head-database">
-        <table width="100%" cellspacing="0" cellpadding="0">
-          <tbody>
-            <tr class="database_oneline action">
-              <td class="date">
-                <nobr>db</nobr>
-              </td>
-              <td class="message">
-                <code><a href="http://{{host}}/{{db_name}}">http://{{host}}/<strong>{{db_name}}</strong></a> </code>
-              </td>
-              <td class="database">
-                size&nbsp;{{disk_size}}
-              </td>
-              <td class="tree">
-                docs&nbsp;<a href="http://{{host}}/{{db_name}}/_all_docs?include_docs=true" hotkey="t">{{doc_count}}</a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </script>
-  
-  <script type='text/mustache' id="actionsTemplate">
+  <script type='text/mustache' class="actionsTemplate">
     <a class="button" id="export-button" href="javascript:{}"><span class="button-menu">Export</span></a>
   </script>
   
-  <script type='text/mustache' id="exportActionsTemplate">
+  <script type='text/mustache' class="exportActionsTemplate">
     <li><a class="csv" href="JavaScript:void(0);">CSV</a></li>
     <li><a class="json" href="JavaScript:void(0);">JSON</a></li>
   </script>
   
-  <script type='text/mustache' id="columnActionsTemplate">
+  <script type='text/mustache' class="columnActionsTemplate">
     <li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
   </script>
 
-  <script type='text/mustache' id="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script>
-  <script type='text/mustache' id="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
-  <script type='text/mustache' id="generatingTemplate"><div class="loading">Loading...</div></script>
+  <script type='text/mustache' class="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script>
+  <script type='text/mustache' class="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
+  <script type='text/mustache' class="generatingTemplate"><div class="loading">Loading...</div></script>
   
-  <script type='text/mustache' id="tableContainerTemplate">
+  <script type='text/mustache' class="tableContainerTemplate">
     <div id="right-panel">
       <div id="tool-panel">
         <div id="summary-bar">
@@ -122,14 +97,14 @@
             <a href="javascript:{}" class="last action">last »</a>
           </div>
         </div>
-        <div id="dataTableContainer" class="data-table-container">
+        <div class="data-table-container">
 
         </div>
       </div>
     </div>
   </script>
   
-  <script type='text/mustache' id="dataTableTemplate">
+  <script type='text/mustache' class="dataTableTemplate">
     <table class="data-table" cellspacing="0">
       <tbody>
         <tr>
@@ -144,11 +119,12 @@
           {{/headers}}
         </tr>
         {{#rows}}
-        <tr>
+        <tr data-id="{{id}}">
           {{#cells}}
-          <td>
+          <td data-header="{{header}}">
             <div class="data-table-cell-content">
-              <span>{{.}}</span>
+              <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a>
+              <div class="data-table-cell-value">{{value}}</div>
             </div>
           </td>
           {{/cells}}
@@ -158,7 +134,7 @@
     </table>
   </script>
   
-  <script type='text/mustache' id="bulkEditTemplate">
+  <script type='text/mustache' class="bulkEditTemplate">
     <div class="dialog-header">
   		Functional transform on column {{name}}
   	</div>
@@ -191,7 +167,7 @@
   								<div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
   									<span>Preview</span>
   									<div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
-  										<div id="editPreview" class="expression-preview-container" style="width: 652px; ">
+  										<div class="expression-preview-container" style="width: 652px; ">
   										</div>
   									</div>
   								</div>
@@ -211,8 +187,22 @@
   		<button class="cancelButton button">Cancel</button>
   	</div>
   </script>
+  
+  <script type='text/mustache' class="cellEditorTemplate">
+    <div class="menu-container data-table-cell-editor">
+      <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea>
+      <div id="data-table-cell-editor-actions">
+        <div class="data-table-cell-editor-action">
+          <button class="okButton button">Update</button>
+        </div>
+        <div class="data-table-cell-editor-action">
+          <button class="cancelButton button">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </script>
  
-  <script type='text/mustache' id="editPreviewTemplate">
+  <script type='text/mustache' class="editPreviewTemplate">
   	<div class="expression-preview-table-wrapper">
   		<table>
   		<tbody>
diff --git a/attachments/script/costco.js b/attachments/script/costco.js
index 7c9946da..a0d15653 100644
--- a/attachments/script/costco.js
+++ b/attachments/script/costco.js
@@ -43,7 +43,7 @@ var costco = function() {
       if(preview) preview.push({before: doc[app.currentColumn], after: updated[app.currentColumn]});
     });
     
-    if(preview) util.render('editPreview', 'editPreview', {rows: preview});
+    if(preview) util.render('editPreview', 'expression-preview-container', {rows: preview});
     return toUpdate;
   }
 
diff --git a/attachments/script/removalist.js b/attachments/script/removalist.js
index dfc3f1b9..14b69b0a 100644
--- a/attachments/script/removalist.js
+++ b/attachments/script/removalist.js
@@ -35,12 +35,12 @@ var removalist = function() {
           value = row.value[header];
           if (typeof(value) == "object") value = JSON.stringify(value);
         }
-        cells.push(value);
+        cells.push({header: header, value: value});
       })
-      tableRows.push({cells: cells});
+      tableRows.push({id: row.value._id, cells: cells});
     })
     
-    util.render('dataTable', 'dataTableContainer', {
+    util.render('dataTable', 'data-table-container', {
       rows: tableRows,
       headers: app.headers
     })
diff --git a/attachments/script/site.js b/attachments/script/site.js
index b4ee471e..a2b4a50f 100644
--- a/attachments/script/site.js
+++ b/attachments/script/site.js
@@ -31,6 +31,32 @@ app.after = {
       util.position('menu', e);
       util.render('columnActions', 'menu');
     });
+    
+    $('.data-table-cell-edit').click(function(e) {
+      var editing = $('.data-table-cell-editor-editor');
+      if (editing.length > 0) {
+        editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
+      }
+      $(e.target).addClass("hidden");
+      var cell = $(e.target).siblings('.data-table-cell-value');
+      util.render('cellEditor', cell, {value: cell.text()});
+    })
+  },
+  cellEditor: function() {
+    $('.data-table-cell-editor .okButton').click(function(e) {
+      var cell = $(e.target);
+      var rowId = cell.parents('tr').attr('data-id');
+      var header = cell.parents('td').attr('data-header');
+      var doc = _.find(app.cache, function(cacheDoc) {
+        return cacheDoc._id === rowId;
+      });
+      doc[header] = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
+      util.notify("Updating row...", {persist: true, loader: true});
+      couch.request({type: "PUT", url: app.baseURL + "api/" + doc._id, data: JSON.stringify(doc)}).then(function(response) {
+        util.notify("Row updated successfully");
+        removalist.fetchRows(false, app.offset);
+      })
+    })
   },
   actions: function() {
     $('.button').click(function(e) { 
@@ -41,10 +67,10 @@ app.after = {
   exportActions: removalist.handleMenuClick,
   columnActions: removalist.handleMenuClick,
   bulkEdit: function() {
-    $('.cancelButton').click(function(e) {
+    $('.dialog-body .cancelButton').click(function(e) {
       util.hide('dialog');
     })
-    $('.okButton').click(function(e) {
+    $('.dialog-body .okButton').click(function(e) {
       var funcText = $('.expression-preview-code').val();
       util.hide('dialog');
       util.notify("Updating documents...", {persist: true, loader: true});
diff --git a/attachments/script/util.js b/attachments/script/util.js
index 0c99142d..c8713896 100644
--- a/attachments/script/util.js
+++ b/attachments/script/util.js
@@ -50,8 +50,12 @@ var util = function() {
   function render( template, target, options ) {
     if ( !options ) options = {data: {}};
     if ( !options.data ) options = {data: options};
-    var html = $.mustache( $( "#" + template + "Template" ).html(), options.data ),
-        targetDom = $( "#" + target );
+    var html = $.mustache( $( "." + template + "Template:first" ).html(), options.data );
+    if (target instanceof jQuery) {
+      var targetDom = target;
+    } else {
+      var targetDom = $( "." + target + ":first" );      
+    }
     if( options.append ) {
       targetDom.append( html );
     } else {
diff --git a/attachments/style/data-table.css b/attachments/style/data-table.css
index 1819b7c1..1de7f4fd 100644
--- a/attachments/style/data-table.css
+++ b/attachments/style/data-table.css
@@ -363,6 +363,7 @@ img {
 
 .hidden {
   display: none;
+  visibility: hidden !important;
 }
 
 .fbs-pane, .fbs-flyout-pane {
@@ -420,13 +421,13 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   display: none;
 }
 
-#project-title {
+.project-title {
   float: left;
   padding: 2px 0 0 0;
   font-size: 1.6em;
 }
 
-#project-controls {
+.project-controls {
   margin: 3px 2px 0px 0px;
   display: block;
   float: right;
@@ -598,6 +599,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   border-right: 1px solid #ddd;
 }
 
+.data-table td:hover .data-table-cell-edit {
+  visibility: visible;
+}
+
 table.data-table > tbody > tr.even > td {
   background: #f2f2f2;
 }
@@ -781,6 +786,7 @@ a.data-table-flag-off {
 }
 
 .data-table-cell-editor, .data-table-topic-popup {
+  overflow: auto;
   border: 1px solid #bcf;
   background: #e3e9ff;
   padding: 5px;
@@ -794,6 +800,7 @@ a.data-table-flag-off {
 }
 
 .data-table-cell-editor-editor {
+  overflow: hidden;
   display: block;
   width: 98%;
   height: 3em;
diff --git a/attachments/style/images/edit-map.png b/attachments/style/images/edit-map.png
new file mode 100755
index 0000000000000000000000000000000000000000..dea0ed1ef4e1a8d301f58c9a24ce7ed3ea297bb6
GIT binary patch
literal 1569
zcmeAS@N?(olHy`uVBq!ia0vp^MnEjU!3HElqIG(Jlw^r(L`iUdT1k0gQ7VIDN`6wR
zf@f}GdTLN=VoGJ<$y6H#24<zqkcg59UmvUF{9L_6kQ%*;+ybC(1_m4Zih{)C?9>v4
zq}24xJX@vryZ0+8WTx0Eg`4^s_!c;)W@LI)6{QAO`Gq7`WhYyvDB0U7*i={n4aiL`
zNmQuF&B-gas<2f8n`;GRgM{^!6u?SKvTc<hj*9RNP;kyKN>wn`Gtf;oFf&jvGt@IQ
zHZeCh*HJJsFf`CNFw!?P(ls=<GB&a@Fi?O3C7^9ZDQQ+gE^bh}fIM5JjFOT9D}DX)
z@^Za$W4-*MbbUihOG}U$Mn<|o6}rWhc_oPzx_QOQFcVx-i<65o3raHc^AtcPCMM;V
zme?u*T?+9+ZUNlbykclD0Rv3GBC$Z<P|pD5C742AU;IjQbK$CsOM+4n?!{_waY$uB
zs(w&vaeir0GBD!OltES%SUDG^CYIzEh2-bwz(O$~BfliSI3vG6!8zDe!8b8EGY`ZE
ztM~P_^2{qPNz6-5^>ndS0-B(gnVDi`Y3yQQ>}q7{VqjotXz1c*X=!fZ;%w&ZVrt;#
zXl&>R)9aF-T$-DjR|3<Ug3xP*Q!gkf<Q4#Jc1bPDEK5ysE6UGR0DIXg6SrH8aheC!
zn}XXdCOGx#10ACeiddwGh6w>v4~Pj*wm=R%;iu*SQ+p9GSx?XmOJ`tUn(FD|7*cU7
z>CgZF_J<1?bQF?q9W(#tu!_6m?23$UnhJWSKZ#p%JhBkKzi_5(b#*A;CI{9qhK(#!
znNRX$ty8gmlhDL9A%)RkiX=~{rQwY?YkGL1xMWUvsTOSDWJ=HgMh9oohDyts5;ZzM
z4BjLxH1RN#{e9xY%iHz_w+}Y3zmQaG%jT~OFumcOZkJr~@0<CISP3n*Z)c_n&z~^$
zkNd}t6%5?XyE*ll<;{%`PrklivTWYJBOgA0uNV3FdHepw5lKr<9W8i%(|<u)7@K6E
z*@hWQ#mo<X%#Pn^<>lKpccGqNlVi|~sSoe0&FAs$jx(tF_mAJT=IFlf8dXZNtP*^2
ze-0gB=&4jT)!PuUYP-SVH*50~y<%ogF#Qqv(Rk0lAM7%x7Njt7CC)f}<K~P8x!*iu
z?rcU5{0&F!YX6@8@cFvE!M`7G_0L^+dul@3j;~MDEv8iNm~l{%r&ywc|C2<A8>h~K
z$Bs$o@BK~u!DJ%cl4!`n`qbwI->;wCLd*+h1WZe6KRtK%-`<CM22c1KoY=S-jw)z$
zHX5v3!dfJt5qThq;fX?Zt=tY74K)YF`}=>1hW%Y2!BWZ4a&gi$?sGPuetgw8Sf*;h
z?XxWX;v}t|4V;!PjvE<Hv9GuPllUOPb%|AgPs1lBjW(GDiXGeyNunanJDfyBq=TGv
z9z0>~l9gaM%CaJb>8OCt&WB73QrJ#wOUN}&b*PE)d9Y`Z&QUg>?-MS)IMAw}aDM0P
zPls%~w8b1x21#$_aAQn0p4VhtQoc*%#>EX=_`LkK%l~IcubAOpcvMLva*^mko}LA2
zTpQAsM_RK+oHuaFE}M0eaaDSP;io3IvONb5F54#CW6*zu@uRF(bOC#o9y2f<$>^<(
gS8GdTVqoH7aNjQEEY|+vJ*d$3boFyt=akR{0GM<+9{>OV

literal 0
HcmV?d00001

