knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement cell editing

Browse Source
This commit is contained in:
Max Ogden 2011-07-05 18:38:15 -07:00
parent e68d44c7dd
commit c07d6264fb
7 changed files with 82 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
attachments/pages/index.html
View File

@ -19,15 +19,15 @@
<body> <body>
<div class="container"> <div class="container">
<div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div> <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> <li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
</ul> </ul>
<div id="header"> <div id="header">
<a href="http://github.com/maxogden/removalist"><img id="couchLogo" src="images/couch.png"/></a> <a href="http://github.com/maxogden/removalist"><img id="couchLogo" src="images/couch.png"/></a>
<div id="project-title"></div> <div class="project-title"></div>
<div id="project-controls"></div> <div class="project-controls"></div>
</div> </div>
<div id="main_content"></div> <div class="main_content"></div>
</div> </div>
<div id="notification-container"> <div id="notification-container">
@ -39,53 +39,28 @@
<div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> <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 ui-draggable" style="display: none; z-index: 102; top: 101px; ">
<div class="dialog-frame" style="width: 700px; visibility: visible; "> <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>
</div> </div>
<script type='text/mustache' id="dbTemplate"> <script type='text/mustache' class="actionsTemplate">
<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">
<a class="button" id="export-button" href="javascript:{}"><span class="button-menu">Export</span></a> <a class="button" id="export-button" href="javascript:{}"><span class="button-menu">Export</span></a>
</script> </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="csv" href="JavaScript:void(0);">CSV</a></li>
<li><a class="json" href="JavaScript:void(0);">JSON</a></li> <li><a class="json" href="JavaScript:void(0);">JSON</a></li>
</script> </script>
<script type='text/mustache' id="columnActionsTemplate"> <script type='text/mustache' class="columnActionsTemplate">
<li><a class="transform" href="JavaScript:void(0);">Transform...</a></li> <li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
</script> </script>
<script type='text/mustache' id="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script> <script type='text/mustache' class="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' class="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="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="right-panel">
<div id="tool-panel"> <div id="tool-panel">
<div id="summary-bar"> <div id="summary-bar">
@ -122,14 +97,14 @@
<a href="javascript:{}" class="last action">last »</a> <a href="javascript:{}" class="last action">last »</a>
</div> </div>
</div> </div>
<div id="dataTableContainer" class="data-table-container"> <div class="data-table-container">
</div> </div>
</div> </div>
</div> </div>
</script> </script>
<script type='text/mustache' id="dataTableTemplate"> <script type='text/mustache' class="dataTableTemplate">
<table class="data-table" cellspacing="0"> <table class="data-table" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
@ -144,11 +119,12 @@
{{/headers}} {{/headers}}
</tr> </tr>
{{#rows}} {{#rows}}
<tr> <tr data-id="{{id}}">
{{#cells}} {{#cells}}
<td> <td data-header="{{header}}">
<div class="data-table-cell-content"> <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> </div>
</td> </td>
{{/cells}} {{/cells}}
@ -158,7 +134,7 @@
</table> </table>
</script> </script>
<script type='text/mustache' id="bulkEditTemplate"> <script type='text/mustache' class="bulkEditTemplate">
<div class="dialog-header"> <div class="dialog-header">
Functional transform on column {{name}} Functional transform on column {{name}}
</div> </div>
@ -191,7 +167,7 @@
<div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> <div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
<span>Preview</span> <span>Preview</span>
<div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <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> </div>
</div> </div>
@ -211,8 +187,22 @@
<button class="cancelButton button">Cancel</button> <button class="cancelButton button">Cancel</button>
</div> </div>
</script> </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"> <div class="expression-preview-table-wrapper">
<table> <table>
<tbody> <tbody>

2
attachments/script/costco.js
View File

@ -43,7 +43,7 @@ var costco = function() {
if(preview) preview.push({before: doc[app.currentColumn], after: updated[app.currentColumn]}); 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; return toUpdate;
} }

6
attachments/script/removalist.js
View File

@ -35,12 +35,12 @@ var removalist = function() {
value = row.value[header]; value = row.value[header];
if (typeof(value) == "object") value = JSON.stringify(value); 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, rows: tableRows,
headers: app.headers headers: app.headers
}) })

30
attachments/script/site.js
View File

@ -31,6 +31,32 @@ app.after = {
util.position('menu', e); util.position('menu', e);
util.render('columnActions', 'menu'); 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() { actions: function() {
$('.button').click(function(e) { $('.button').click(function(e) {
@ -41,10 +67,10 @@ app.after = {
exportActions: removalist.handleMenuClick, exportActions: removalist.handleMenuClick,
columnActions: removalist.handleMenuClick, columnActions: removalist.handleMenuClick,
bulkEdit: function() { bulkEdit: function() {
$('.cancelButton').click(function(e) { $('.dialog-body .cancelButton').click(function(e) {
util.hide('dialog'); util.hide('dialog');
}) })
$('.okButton').click(function(e) { $('.dialog-body .okButton').click(function(e) {
var funcText = $('.expression-preview-code').val(); var funcText = $('.expression-preview-code').val();
util.hide('dialog'); util.hide('dialog');
util.notify("Updating documents...", {persist: true, loader: true}); util.notify("Updating documents...", {persist: true, loader: true});

8
attachments/script/util.js
View File

@ -50,8 +50,12 @@ var util = function() {
function render( template, target, options ) { function render( template, target, options ) {
if ( !options ) options = {data: {}}; if ( !options ) options = {data: {}};
if ( !options.data ) options = {data: options}; if ( !options.data ) options = {data: options};
var html = $.mustache( $( "#" + template + "Template" ).html(), options.data ), var html = $.mustache( $( "." + template + "Template:first" ).html(), options.data );
targetDom = $( "#" + target ); if (target instanceof jQuery) {
var targetDom = target;
} else {
var targetDom = $( "." + target + ":first" );
}
if( options.append ) { if( options.append ) {
targetDom.append( html ); targetDom.append( html );
} else { } else {

11
attachments/style/data-table.css
View File

@ -363,6 +363,7 @@ img {
.hidden { .hidden {
display: none; display: none;
visibility: hidden !important;
} }
.fbs-pane, .fbs-flyout-pane { .fbs-pane, .fbs-flyout-pane {
@ -420,13 +421,13 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
display: none; display: none;
} }
#project-title { .project-title {
float: left; float: left;
padding: 2px 0 0 0; padding: 2px 0 0 0;
font-size: 1.6em; font-size: 1.6em;
} }
#project-controls { .project-controls {
margin: 3px 2px 0px 0px; margin: 3px 2px 0px 0px;
display: block; display: block;
float: right; float: right;
@ -598,6 +599,10 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
.data-table td:hover .data-table-cell-edit {
visibility: visible;
}
table.data-table > tbody > tr.even > td { table.data-table > tbody > tr.even > td {
background: #f2f2f2; background: #f2f2f2;
} }
@ -781,6 +786,7 @@ a.data-table-flag-off {
} }
.data-table-cell-editor, .data-table-topic-popup { .data-table-cell-editor, .data-table-topic-popup {
overflow: auto;
border: 1px solid #bcf; border: 1px solid #bcf;
background: #e3e9ff; background: #e3e9ff;
padding: 5px; padding: 5px;
@ -794,6 +800,7 @@ a.data-table-flag-off {
} }
.data-table-cell-editor-editor { .data-table-cell-editor-editor {
overflow: hidden;
display: block; display: block;
width: 98%; width: 98%;
height: 3em; height: 3em;

BIN
attachments/style/images/edit-map.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB