Skip to content

Commit

Permalink
V Collection - rearrange buttons to handle renaming long collections
Browse files Browse the repository at this point in the history
  • Loading branch information
@wulfsolter
wulfsolter committed Nov 17, 2015
1 parent 105cffb commit ec8c771
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 89 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -2,7 +2,7 @@
"author": "https://github.com/andzdroid",
"name": "mongo-express",
"description": "Web-based admin interface for MongoDB",
"version": "0.27.0",
"version": "0.27.1",
"bin" : {
"mongo-express" : "./app.js"
},
Expand Down
173 changes: 85 additions & 88 deletions views/collection.html
View file
Expand Up @@ -272,20 +272,30 @@ <h2>Indexes</h2>
#}

<div class="row">
{% if !settings.read_only %}
{% if !settings.read_only %}
<div class="span9">
<h2>Rename Collection</h2>
<form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" class="well form-inline">
<input type="hidden" name="_method" value="put">
<div class="input-prepend">
<span class="add-on">{{ dbName }} . </span>
<input class="input-medium" type="text" id="collection" name="collection" placeholder="{{ collectionName }}">
</div>
<button type="submit" class="btn btn-primary">
<i class="icon-tag icon-white"></i>
Rename
</button>
</form>
</div>
{% endif %}

<div class="span4">
<h2>Rename Collection</h2>
<form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" class="well form-inline">
<input type="hidden" name="_method" value="put">
<div class="input-prepend">
<span class="add-on">{{ dbName }} . </span>
<input class="input-medium" type="text" id="collection" name="collection" placeholder="{{ collectionName }}">
</div>
<button type="submit" class="btn btn-primary">
<i class="icon-tag icon-white"></i>
Rename
</button>
</form>
<h2>Export Collection</h2>
<div class="well">
<a href="{{ baseHref }}db/{{ dbName }}/export/{{ collectionName }}" class="btn btn-warning span2">
<i class="icon-download icon-white"></i> Export
</a>
</div>
</div>

<div class="span1">
Expand All @@ -294,85 +304,72 @@ <h2>&nbsp;</h2>
</div>

<div class="span4">
<h2>Delete Collection</h2>
<form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" id="db-{{ dbName }}-{{ collectionName }}" class="well">
<input type="hidden" name="_method" value="delete">
<input type="submit" class="hidden" />
<button class="btn btn-danger deleteButton" title="Warning" collection-name="{{ collectionName }}" childof="db-{{ dbName }}-{{ collectionName }}">
<i class="icon-trash icon-white"></i>
Delete
</button>
</form>

<script>
$( document ).ready( function() {
$( '.deleteButton' ).popover({ placement: "left", title: "Warning", content: "Are you sure you want to delete this collection? All documents will be deleted." });

$( '.deleteButton' ).on( 'click', function( event ) {
event.preventDefault();
var target = $( this );
var parentForm = $( '#' + target.attr( 'childof' ) );

$( '#confirmation-input' ).attr( 'shouldbe', target.attr( 'collection-name' ) );
$( '#modal-collection-name' ).text( target.attr( 'collection-name' ) );
$( '#confirm-deletion' ).modal({ backdrop: 'static', keyboard: false })
.one( 'click', '#delete', function() {
var input = $( '#confirmation-input' );
if ( input.val().toLowerCase() === input.attr( 'shouldbe' ).toLowerCase() ) {
parentForm.trigger( 'submit' );
} else {
// wrong collection name
}
});
});
});
</script>
<h2>Export Collection --jsonArray</h2>
<div class="well">
<a href="{{ baseHref }}db/{{ dbName }}/expArr/{{ collectionName }}" class="btn btn-warning span2">
<i class="icon-download icon-white"></i> Export
</a>
</div>
</div>
{% endif %}

<div id="confirm-deletion" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Delete collection</h4>
</div>
<div class="modal-body">
<p>
Be careful! You are about to delete whole <strong><span id="modal-collection-name"></span></strong> collection.
</p>
<p>
<label for="confirmation-input">Type the collection name to proceed.</label>
<input type="text" id="confirmation-input" name="confirmation-input" shouldbe="" value="" />
</p>
</div>

<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Cancel</button>
</div>
</div>

<div class="span4">
<h2>Export Collection</h2>
<div class="well">
<a href="{{ baseHref }}db/{{ dbName }}/export/{{ collectionName }}" class="btn btn-warning span2">
<i class="icon-download icon-white"></i> Export
</a>
</div>
</div>
{% if !settings.read_only %}
<div class="span9">
<h2>Delete Collection</h2>
<form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" id="db-{{ dbName }}-{{ collectionName }}" class="well">
<input type="hidden" name="_method" value="delete">
<input type="submit" class="hidden" />
<button class="btn btn-danger deleteButton" title="Warning" collection-name="{{ collectionName }}" childof="db-{{ dbName }}-{{ collectionName }}">
<i class="icon-trash icon-white"></i>
Delete
</button>
</form>

<script>
$( document ).ready( function() {
$( '.deleteButton' ).popover({ placement: "left", title: "Warning", content: "Are you sure you want to delete this collection? All documents will be deleted." });

$( '.deleteButton' ).on( 'click', function( event ) {
event.preventDefault();
var target = $( this );
var parentForm = $( '#' + target.attr( 'childof' ) );

$( '#confirmation-input' ).attr( 'shouldbe', target.attr( 'collection-name' ) );
$( '#modal-collection-name' ).text( target.attr( 'collection-name' ) );
$( '#confirm-deletion' ).modal({ backdrop: 'static', keyboard: false })
.one( 'click', '#delete', function() {
var input = $( '#confirmation-input' );
if ( input.val().toLowerCase() === input.attr( 'shouldbe' ).toLowerCase() ) {
parentForm.trigger( 'submit' );
} else {
// wrong collection name
}
});
});
});
</script>
</div>

<div class="span1">
<!-- spacing for visual balance -->
<h2>&nbsp;</h2>
</div>
<div id="confirm-deletion" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Delete collection</h4>
</div>
<div class="modal-body">
<p>
Be careful! You are about to delete whole <strong><span id="modal-collection-name"></span></strong> collection.
</p>
<p>
<label for="confirmation-input">Type the collection name to proceed.</label>
<input type="text" id="confirmation-input" name="confirmation-input" shouldbe="" value="" />
</p>
</div>

<div class="span4">
<h2>Export Collection --jsonArray</h2>
<div class="well">
<a href="{{ baseHref }}db/{{ dbName }}/expArr/{{ collectionName }}" class="btn btn-warning span2">
<i class="icon-download icon-white"></i> Export
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Cancel</button>
</div>
</div>
{% endif %}
{% endblock %}

{% block sidebar %}
Expand Down

0 comments on commit ec8c771

Please sign in to comment.