mirror of https://gitee.com/bigwinds/arangodb
filter in documentsView
This commit is contained in:
parent
a8f50f1e50
commit
6a1ab815e9
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.thumbnails a.add {
|
||||
padding:40px 0;
|
||||
padding:40px 0;
|
||||
display:block;
|
||||
font-weight:bold;
|
||||
text-align:left;
|
||||
|
@ -87,6 +87,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#transparentHeader {
|
||||
height: 36px;
|
||||
margin-top: 20px !important;
|
||||
|
|
|
@ -39,6 +39,30 @@ table.dataTable td {
|
|||
margin-top: -65px !important;
|
||||
}
|
||||
|
||||
#filterHeader {
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: -10px;
|
||||
background-color:#686766;
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
color:#FFF;
|
||||
padding:0 20px;
|
||||
position:relative;
|
||||
}
|
||||
#filterHeader #sendFilter {
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: -10px;
|
||||
background-color:#686766;
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
color:#FFF;
|
||||
padding:0 20px;
|
||||
position:relative;
|
||||
float: right;
|
||||
}
|
||||
#filterHeader select {
|
||||
width: 100px;
|
||||
}
|
||||
#documentsStatus {
|
||||
padding-top: 10px;
|
||||
float:left;
|
||||
|
@ -106,15 +130,15 @@ table.dataTable thead th {
|
|||
}
|
||||
|
||||
#documentsTableID.dataTable tr,
|
||||
#logContent .dataTable tr {
|
||||
#logContent .dataTable tr {
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#documentsTableID .odd,
|
||||
#documentsTableID .odd,
|
||||
#documentsTableID .even,
|
||||
#logContent .odd,
|
||||
#logContent .odd,
|
||||
#logContent .even {
|
||||
margin-bottom: 5px;
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
|
@ -130,7 +154,7 @@ table.dataTable thead th {
|
|||
|
||||
#documentsTableID .odd:hover,
|
||||
#documentsTableID .even:hover,
|
||||
#logContent .odd:hover,
|
||||
#logContent .odd:hover,
|
||||
#logContent .even:hover {
|
||||
border: 1px solid #fbdb7e;
|
||||
cursor: pointer;
|
||||
|
@ -145,7 +169,7 @@ table.dataTable thead th {
|
|||
|
||||
#documentsTableID.dataTable tr.even td.sorting_1,
|
||||
#documentsTableID.dataTable tr.odd td.sorting_1,
|
||||
#logContent tr.even td.sorting_1,
|
||||
#logContent tr.even td.sorting_1,
|
||||
#logContent tr.odd td.sorting_1 {
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4, #e4e4e4);
|
||||
background-image: -ms-linear-gradient(top,#f4f4f4, #e4e4e4);
|
||||
|
@ -158,7 +182,7 @@ table.dataTable thead th {
|
|||
|
||||
#documentsTableID tr.even:hover td.sorting_1,
|
||||
#documentsTableID tr.odd:hover td.sorting_1,
|
||||
#logContent tr.even:hover td.sorting_1,
|
||||
#logContent tr.even:hover td.sorting_1,
|
||||
#logContent tr.odd:hover td.sorting_1 {
|
||||
background-image: -moz-linear-gradient(top, #e7e7e7, #d5d5d5);
|
||||
background-image: -ms-linear-gradient(top, #e7e7e7, #d5d5d5);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
|
||||
/*global require, exports, window, Backbone, arangoDocument, $*/
|
||||
/*global require, exports, window, Backbone, arangoDocument, _, $*/
|
||||
|
||||
window.arangoDocuments = Backbone.Collection.extend({
|
||||
currentPage: 1,
|
||||
|
@ -100,6 +100,61 @@ window.arangoDocuments = Backbone.Collection.extend({
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
/*
|
||||
POST /_api/cursor
|
||||
|
||||
{
|
||||
"query": "FOR u in mycollection FILTER @name1, @name2 return u",
|
||||
"count": false,
|
||||
"bindVars": {
|
||||
"name1": xy,
|
||||
"name2": xy
|
||||
}
|
||||
}
|
||||
*/
|
||||
getFilteredDocuments: function (colid, currpage, filter) {
|
||||
var self = this;
|
||||
this.collectionID = colid;
|
||||
this.currentPage = currpage;
|
||||
|
||||
var query =
|
||||
'{"query":"FOR u in ' + this.collectionID + ' FILTER'+ filter + ' RETURN u"}';
|
||||
console.log(query);
|
||||
$.ajax({
|
||||
cache: false,
|
||||
type: 'POST',
|
||||
async: false,
|
||||
url: '/_api/cursor',
|
||||
data: query,
|
||||
contentType: "application/json",
|
||||
success: function(data) {
|
||||
self.clearDocuments();
|
||||
console.log(data.result);
|
||||
self.documentsCount = data.result.length;
|
||||
if (self.documentsCount !== 0) {
|
||||
$.each(data.result, function(k, v) {
|
||||
window.arangoDocumentsStore.add({
|
||||
"id": v._id,
|
||||
"rev": v._rev,
|
||||
"key": v._key
|
||||
});
|
||||
});
|
||||
window.documentsView.drawTable();
|
||||
window.documentsView.renderPagination(1);
|
||||
}
|
||||
else {
|
||||
window.documentsView.initTable();
|
||||
window.documentsView.drawTable();
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
"use strict";
|
||||
}
|
||||
});
|
||||
},
|
||||
clearDocuments: function () {
|
||||
window.arangoDocumentsStore.reset();
|
||||
}
|
||||
|
|
|
@ -23,20 +23,21 @@ $(document).ready(function() {
|
|||
"applications/installed" : "applicationsInstalled",
|
||||
"applications/available" : "applicationsAvailable",
|
||||
"applications" : "applications",
|
||||
"application/documentation/:key" : "appDocumentation",
|
||||
"application/documentation/:key" : "appDocumentation",
|
||||
"graph" : "graph"
|
||||
|
||||
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
window.arangoCollectionsStore = new window.arangoCollections();
|
||||
window.arangoDocumentsStore = new window.arangoDocuments();
|
||||
window.arangoDocumentStore = new window.arangoDocument();
|
||||
|
||||
|
||||
window.collectionsView = new window.collectionsView({
|
||||
collection: window.arangoCollectionsStore
|
||||
});
|
||||
window.arangoCollectionsStore.fetch();
|
||||
|
||||
|
||||
window.collectionView = new window.collectionView({
|
||||
model: arangoCollection
|
||||
});
|
||||
|
@ -67,6 +68,7 @@ $(document).ready(function() {
|
|||
collection: window.arangoCollectionsStore
|
||||
});
|
||||
},
|
||||
|
||||
collections: function() {
|
||||
var naviView = this.naviView;
|
||||
window.arangoCollectionsStore.fetch({
|
||||
|
@ -76,16 +78,19 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
collection: function(colid) {
|
||||
window.collectionView.options.colId = colid;
|
||||
window.collectionView.render();
|
||||
},
|
||||
|
||||
newCollection: function() {
|
||||
if (!this.newCollectionView) {
|
||||
this.newCollectionView = new window.newCollectionView({});
|
||||
}
|
||||
this.newCollectionView.render();
|
||||
},
|
||||
|
||||
documents: function(colid, pageid) {
|
||||
if (!window.documentsView) {
|
||||
window.documentsView.initTable(colid, pageid);
|
||||
|
@ -97,6 +102,7 @@ $(document).ready(function() {
|
|||
window.documentsView.render();
|
||||
window.arangoDocumentsStore.getDocuments(colid, pageid);
|
||||
},
|
||||
|
||||
document: function(colid, docid) {
|
||||
if (!window.documentView) {
|
||||
window.documentView.initTable();
|
||||
|
@ -108,6 +114,7 @@ $(document).ready(function() {
|
|||
window.documentView.type = type;
|
||||
window.documentView.typeCheck(type);
|
||||
},
|
||||
|
||||
source: function(colid, docid) {
|
||||
window.documentSourceView.render();
|
||||
window.documentSourceView.colid = colid;
|
||||
|
@ -116,6 +123,7 @@ $(document).ready(function() {
|
|||
window.documentSourceView.type = type;
|
||||
window.documentSourceView.typeCheck(type);
|
||||
},
|
||||
|
||||
shell: function() {
|
||||
if (!this.shellView) {
|
||||
this.shellView = new window.shellView();
|
||||
|
@ -123,6 +131,7 @@ $(document).ready(function() {
|
|||
this.shellView.render();
|
||||
this.naviView.selectMenuItem('shell-menu');
|
||||
},
|
||||
|
||||
query: function() {
|
||||
if (!this.queryView) {
|
||||
this.queryView = new window.queryView();
|
||||
|
@ -130,6 +139,7 @@ $(document).ready(function() {
|
|||
this.queryView.render();
|
||||
this.naviView.selectMenuItem('query-menu');
|
||||
},
|
||||
|
||||
api: function() {
|
||||
if (!this.apiView) {
|
||||
this.apiView = new window.apiView();
|
||||
|
@ -137,6 +147,7 @@ $(document).ready(function() {
|
|||
this.apiView.render();
|
||||
this.naviView.selectMenuItem('api-menu');
|
||||
},
|
||||
|
||||
about: function() {
|
||||
if (!this.aboutView) {
|
||||
this.aboutView = new window.aboutView();
|
||||
|
@ -144,6 +155,7 @@ $(document).ready(function() {
|
|||
this.aboutView.render();
|
||||
this.naviView.selectMenuItem('about-menu');
|
||||
},
|
||||
|
||||
logs: function() {
|
||||
var self = this;
|
||||
window.arangoLogsStore.fetch({
|
||||
|
@ -157,6 +169,7 @@ $(document).ready(function() {
|
|||
});
|
||||
this.naviView.selectMenuItem('logs-menu');
|
||||
},
|
||||
|
||||
dashboard: function() {
|
||||
this.naviView.selectMenuItem('dashboard-menu');
|
||||
/*
|
||||
|
@ -222,7 +235,7 @@ $(document).ready(function() {
|
|||
this.applicationsInstalledView.reload();
|
||||
this.naviView.selectMenuItem('applications-menu');
|
||||
},
|
||||
|
||||
|
||||
applicationsInstalled: function() {
|
||||
if (this.foxxList === undefined) {
|
||||
this.foxxList = new window.FoxxCollection();
|
||||
|
@ -235,7 +248,7 @@ $(document).ready(function() {
|
|||
this.applicationsActiveView.reload();
|
||||
this.naviView.selectMenuItem('applications-menu');
|
||||
},
|
||||
|
||||
|
||||
applicationEdit: function(appkey) {
|
||||
if (this.foxxList === undefined) {
|
||||
var self = this;
|
||||
|
@ -253,7 +266,7 @@ $(document).ready(function() {
|
|||
editAppView.render();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
applicationInstall: function(appkey) {
|
||||
if (this.foxxList === undefined) {
|
||||
var self = this;
|
||||
|
@ -272,15 +285,14 @@ $(document).ready(function() {
|
|||
});
|
||||
installAppView.render();
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
appDocumentation: function(key) {
|
||||
var docuView = new window.AppDocumentationView({key: key});
|
||||
docuView.render();
|
||||
this.naviView.selectMenuItem('applications-menu');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.App = new window.Router();
|
||||
|
|
|
@ -1,66 +1,93 @@
|
|||
<ul class="thumbnails2">
|
||||
<div id="transparentHeader">
|
||||
<div id="documentsToolbar" class="pagination pagination-small pagination-right">
|
||||
<ul>
|
||||
<li class="enabled"><a id="collectionPrev"><i class="icon icon-white icon-chevron-left"></i></a></li>
|
||||
<li class="enabled"><a id="collectionNext"><i class="icon icon-white icon-chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="transparentHeader">
|
||||
<div id="documentsToolbar" class="pagination pagination-small pagination-right">
|
||||
<ul>
|
||||
<li class="enabled"><a id="filterCollection"><i class="icon icon-white icon-filter"></i></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="enabled"><a id="collectionPrev"><i class="icon icon-white icon-chevron-left"></i></a></li>
|
||||
<li class="enabled"><a id="collectionNext"><i class="icon icon-white icon-chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div id="filterHeader" style="display:none">
|
||||
<div id="queryline">
|
||||
<label for="attribute_name">attribute name:</label><input id="attribute_name" type="text">
|
||||
<select name="operator" id="operator">
|
||||
<option value=" == ">==</option>
|
||||
<option value=" != ">!=</option>
|
||||
<option value=" > "><</option>
|
||||
<option value=" < ">></option>
|
||||
</select>
|
||||
<label for="attribute_value">attribute value:</label><input id="attribute_value" type="text">
|
||||
<a id="addFilterItem"><i class="icon icon-white icon-plus"></i></a>
|
||||
<a id="femoveFilterItem"><i class="icon icon-white icon-minus"></i></a>
|
||||
</div>
|
||||
<div id="sendFilter">
|
||||
<button id="filterSend">Filter</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="documentsDiv">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="documentsTableID">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 490px">Content</th>
|
||||
<th style="width: 100px">_key</th>
|
||||
<th style="width: 10px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div id="documentsToolbarFL">
|
||||
<div id="documentsToolbarF" class="pagination pagination-small pagination-centered">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Modal -->
|
||||
<div id="docDeleteModal" style="display:none" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Delete Document?</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Theres no way back…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirmDeleteBtn" class="btn btn-danger" style="float:right" disabled="true">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Edge Modal -->
|
||||
<div id="edgeCreateModal" style="display:none" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Create Edge</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Please complete your task:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th class="collectionTh">_from:</th>
|
||||
<th><input type="text" id="new-document-from" name="from" value=""/></th>
|
||||
<th><a class="modalTooltips" title="Document _id: document handle of the linked vertex (incoming relation)"><i class="icon-info-sign"></i></a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="collectionTh">_to:</th>
|
||||
<th><input type="text" id="new-document-to" name="to" value=""/></th>
|
||||
<th><a class="modalTooltips" title="Document _id: document handle of the linked vertex (outgoing relation)"><i class="icon-info-sign"></i></a></th>
|
||||
</tr>
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="documentsTableID">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 490px">Content</th>
|
||||
<th style="width: 100px">_key</th>
|
||||
<th style="width: 10px"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirmCreateEdge" class="btn btn-success" style="float:right">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="documentsToolbarFL">
|
||||
<div id="documentsToolbarF" class="pagination pagination-small pagination-centered">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Modal -->
|
||||
<div id="docDeleteModal" style="display:none" class="modal hide fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Delete Document?</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Theres no way back…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirmDeleteBtn" class="btn btn-danger" style="float:right" disabled="true">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Edge Modal -->
|
||||
<div id="edgeCreateModal" style="display:none" class="modal hide fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Create Edge</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Please complete your task:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th class="collectionTh">_from:</th>
|
||||
<th><input type="text" id="new-document-from" name="from" value=""/></th>
|
||||
<th><a class="modalTooltips"
|
||||
title="Document _id: document handle of the linked vertex (incoming relation)"><i
|
||||
class="icon-info-sign"></i></a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="collectionTh">_to:</th>
|
||||
<th><input type="text" id="new-document-to" name="to" value=""/></th>
|
||||
<th><a class="modalTooltips"
|
||||
title="Document _id: document handle of the linked vertex (outgoing relation)"><i
|
||||
class="icon-info-sign"></i></a></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirmCreateEdge" class="btn btn-success" style="float:right">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -6,6 +6,7 @@ var documentsView = Backbone.View.extend({
|
|||
currentPage: 1,
|
||||
documentsPerPage: 10,
|
||||
totalPages: 1,
|
||||
filter : [],
|
||||
|
||||
collectionContext : {
|
||||
prev: null,
|
||||
|
@ -20,6 +21,9 @@ var documentsView = Backbone.View.extend({
|
|||
events: {
|
||||
"click #collectionPrev" : "prevCollection",
|
||||
"click #collectionNext" : "nextCollection",
|
||||
"click #filterCollection" : "filterCollection",
|
||||
"click #filterSend" : "sendFilter",
|
||||
"click #queryline #addFilterItem": "addFilterItem",
|
||||
"click #confirmCreateEdge" : "addEdge",
|
||||
"click #documentsTableID tr" : "clicked",
|
||||
"click #deleteDoc" : "remove",
|
||||
|
@ -38,7 +42,7 @@ var documentsView = Backbone.View.extend({
|
|||
if ($("#confirmDeleteBtn").attr("disabled") === false) {
|
||||
this.confirmDelete();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
nop: function(event) {
|
||||
|
@ -74,6 +78,29 @@ var documentsView = Backbone.View.extend({
|
|||
$('#collectionNext').parent().addClass('disabledPag');
|
||||
}
|
||||
},
|
||||
|
||||
filterCollection : function () {
|
||||
$('#filterHeader').slideToggle("slow");
|
||||
},
|
||||
|
||||
sendFilter : function () {
|
||||
this.filter.push(" u." + $('#attribute_name').val() + $('#operator').val()+ "'" +
|
||||
$('#attribute_value').val() + "' ");
|
||||
console.log(this.filter);
|
||||
window.documentsView.clearTable();
|
||||
window.arangoDocumentsStore.getFilteredDocuments(this.colid, 1, this.filter[0]);
|
||||
},
|
||||
|
||||
addFilterItem : function () {
|
||||
"use strict";
|
||||
// adds a line to the filter widget
|
||||
},
|
||||
|
||||
removeFilterItem : function (delline) {
|
||||
"use strict";
|
||||
// removes line delline from the filter widget
|
||||
},
|
||||
|
||||
addDocument: function () {
|
||||
var collid = window.location.hash.split("/")[1];
|
||||
var doctype = arangoHelper.collectionApiType(collid);
|
||||
|
|
Loading…
Reference in New Issue