add row controls and delete row button

This commit is contained in:
Max Ogden
2011-08-03 19:33:12 -04:00
parent 8e32984ff3
commit 7cbf23088c
4 changed files with 40 additions and 3 deletions

View File

@@ -85,6 +85,10 @@
<li><a data-action="deleteColumn" class="menuAction" href="JavaScript:void(0);">Delete this column</a></li> <li><a data-action="deleteColumn" class="menuAction" href="JavaScript:void(0);">Delete this column</a></li>
</script> </script>
<script type='text/mustache' class="rowActionsTemplate">
<li><a data-action="deleteRow" class="menuAction" href="JavaScript:void(0);">Delete this row</a></li>
</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="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="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
<script type='text/mustache' class="generatingTemplate"><div class="loading">Loading...</div></script> <script type='text/mustache' class="generatingTemplate"><div class="loading">Loading...</div></script>
@@ -135,6 +139,7 @@
<table class="data-table" cellspacing="0"> <table class="data-table" cellspacing="0">
<tbody> <tbody>
<tr> <tr>
<td class="column-header"></td>
{{#headers}} {{#headers}}
<td class="column-header"> <td class="column-header">
<div class="column-header-title"> <div class="column-header-title">
@@ -147,6 +152,7 @@
</tr> </tr>
{{#rows}} {{#rows}}
<tr data-id="{{id}}"> <tr data-id="{{id}}">
<td><a class="row-header-menu"></a></td>
{{#cells}} {{#cells}}
<td data-header="{{header}}"> <td data-header="{{header}}">
<div class="data-table-cell-content"> <div class="data-table-cell-content">

View File

@@ -27,6 +27,17 @@ var recline = function() {
deleteColumn: function() { deleteColumn: function() {
var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents."; var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
if (confirm(msg)) costco.deleteColumn(app.currentColumn); if (confirm(msg)) costco.deleteColumn(app.currentColumn);
},
deleteRow: function() {
var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
doc._deleted = true;
costco.uploadDocs([doc]).then(
function(updatedDocs) {
util.notify("Row deleted successfully");
recline.initializeTable(app.offset);
},
function(err) { util.notify("Errorz! " + err) }
)
} }
} }

View File

@@ -29,6 +29,12 @@ app.after = {
util.render('columnActions', 'menu'); util.render('columnActions', 'menu');
}); });
$('.row-header-menu').click(function(e) {
app.currentRow = $(e.target).parents('tr:first').attr('data-id');
util.position('menu', e);
util.render('rowActions', 'menu');
});
$('.data-table-cell-edit').click(function(e) { $('.data-table-cell-edit').click(function(e) {
var editing = $('.data-table-cell-editor-editor'); var editing = $('.data-table-cell-editor-editor');
if (editing.length > 0) { if (editing.length > 0) {
@@ -40,9 +46,8 @@ app.after = {
util.render('cellEditor', cell, {value: cell.text()}); util.render('cellEditor', cell, {value: cell.text()});
}) })
}, },
columnActions: function() { columnActions: function() { recline.handleMenuClick() },
recline.handleMenuClick(); rowActions: function() { recline.handleMenuClick() },
},
cellEditor: function() { cellEditor: function() {
$('.data-table-cell-editor .okButton').click(function(e) { $('.data-table-cell-editor .okButton').click(function(e) {
var cell = $(e.target); var cell = $(e.target);

View File

@@ -637,6 +637,21 @@ a.column-header-menu {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
a.row-header-menu:hover {
background-position: -17px 0px;
text-decoration: none;
}
a.row-header-menu {
float: left;
display: block;
margin: 0 0 -2px 0;
width: 17px;
height: 19px;
background-image: url(images/menu-dropdown.png);
background-repeat: no-repeat;
}
a.column-header-menu:hover { a.column-header-menu:hover {
background-position: -17px 0px; background-position: -17px 0px;
text-decoration: none; text-decoration: none;