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>
<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>

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) util.render('editPreview', 'editPreview', {rows: preview});
if(preview) util.render('editPreview', 'expression-preview-container', {rows: preview});
return toUpdate;
}

6
attachments/script/removalist.js
View File

@ -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
})

30
attachments/script/site.js
View File

@ -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});

8
attachments/script/util.js
View File

@ -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 {

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

@ -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;

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