filter in documentsView

html/admin/css/collectionsView.css

@@ -87,6 +87,7 @@
   cursor: pointer;
 }
 
+
 #transparentHeader {
   height: 36px;
   margin-top: 20px !important;

html/admin/css/documentsView.css

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

html/admin/js/collections/arangoDocuments.js

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

html/admin/js/routers/router.js

@@ -23,10 +23,11 @@ $(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();
@@ -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');
       /*
@@ -280,7 +293,6 @@ $(document).ready(function() {
       docuView.render();
       this.naviView.selectMenuItem('applications-menu');
     }
-
   });
 
   window.App = new window.Router();

html/admin/js/templates/documentsView.ejs

@@ -1,66 +1,93 @@
 <ul class="thumbnails2">
-  <div id="transparentHeader">
+    <div id="transparentHeader">
-    <div id="documentsToolbar" class="pagination pagination-small pagination-right">
+        <div id="documentsToolbar" class="pagination pagination-small pagination-right">
-		<ul>
+            <ul>
-			<li class="enabled"><a id="collectionPrev"><i class="icon icon-white icon-chevron-left"></i></a></li>
+                <li class="enabled"><a id="filterCollection"><i class="icon icon-white icon-filter"></i></a></li>
-			<li class="enabled"><a id="collectionNext"><i class="icon icon-white icon-chevron-right"></i></a></li>
+            </ul>
-		</ul>
+            <ul>
-	</div>
+                <li class="enabled"><a id="collectionPrev"><i class="icon icon-white icon-chevron-left"></i></a></li>
-  </div>
+                <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">
+    <table cellpadding="0" cellspacing="0" border="0" class="display" id="documentsTableID">
-  <thead>
+        <thead>
-    <tr>
+        <tr>
-      <th style="width: 490px">Content</th>
+            <th style="width: 490px">Content</th>
-      <th style="width: 100px">_key</th>
+            <th style="width: 100px">_key</th>
-      <th style="width: 10px"></th>
+            <th style="width: 10px"></th>
-    </tr>
+        </tr>
-  </thead>
+        </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>
-  </div>
+
-  <div class="modal-footer">
+    <div id="documentsToolbarFL">
-    <button id="confirmCreateEdge" class="btn btn-success" style="float:right">Create</button>
+        <div id="documentsToolbarF" class="pagination pagination-small pagination-centered">
-  </div>
+        </div>
-</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>

html/admin/js/views/documentsView.js

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