1
0
Fork 0

filter in documentsView

This commit is contained in:
Thomas Richter 2013-07-19 10:58:35 +02:00
parent a8f50f1e50
commit 6a1ab815e9
6 changed files with 226 additions and 80 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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=" > ">&lt;</option>
<option value=" < ">&gt;</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>

View File

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