Search on creation date (client)

docs-parent/TODO

@@ -1,4 +1,3 @@
 - Client/server side search on tags
-- Client side search on creation date
 - Client/server side edition of existing tag names
 - Server side reordering files

docs-web/src/main/webapp/index.html

@@ -45,8 +45,8 @@
       <div class="navbar-inner">
         <a class="brand" href="#">Sismics Docs</a>
         <ul class="nav" ng-show="!userInfo.anonymous">
-          <li ng-class="{active: $uiRoute}" ui-route="/document"><a href="#/document">Documents</a></li>
-          <li ng-class="{active: $uiRoute}" ui-route="/tag"><a href="#/tag">Tags</a></li>
+          <li ng-class="{active: $uiRoute}" ui-route="/document.*"><a href="#/document">Documents</a></li>
+          <li ng-class="{active: $uiRoute}" ui-route="/tag.*"><a href="#/tag">Tags</a></li>
         </ul>
       </div>
     </div>

docs-web/src/main/webapp/js/controller/Document.js

@@ -12,6 +12,19 @@ App.controller('Document', function($scope, $state, Restangular) {
   $scope.offset = 0;
   $scope.currentPage = 1;
   $scope.limit = 10;
+  $scope.isAdvancedSearchCollapsed = true;
+  
+  /**
+   * Initialize search criterias.
+   */
+  $scope.initSearch = function() {
+    $scope.search = {
+      query: '',
+      createDateMin: null,
+      createDateMax: null,
+    };
+  };
+  $scope.initSearch();
   
   /**
    * Load new documents page.
@@ -23,10 +36,13 @@ App.controller('Document', function($scope, $state, Restangular) {
       limit: $scope.limit,
       sort_column: $scope.sortColumn,
       asc: $scope.asc,
-      search: $scope.search
+      search: $scope.search.query,
+      create_date_min: $scope.isAdvancedSearchCollapsed || !$scope.search.createDateMin ? null : $scope.search.createDateMin.getTime(),
+      create_date_max: $scope.isAdvancedSearchCollapsed || !$scope.search.createDateMax ? null : $scope.search.createDateMax.getTime()
     })
     .then(function(data) {
-      $scope.documents = data;
+      $scope.documents = data.documents;
+      $scope.totalDocuments = data.total;
       $scope.numPages = Math.ceil(data.total / $scope.limit);
     });
   };
@@ -43,16 +59,20 @@ App.controller('Document', function($scope, $state, Restangular) {
   /**
    * Watch for current page change.
    */
-  $scope.$watch('currentPage', function() {
+  $scope.$watch('currentPage', function(prev, next) {
+    if (prev == next) {
+      return;
+    }
     $scope.offset = ($scope.currentPage - 1) * $scope.limit;
     $scope.pageDocuments();
   });
   
+  /**
+   * Watch for search change.
+   */
   $scope.$watch('search', function(prev, next) {
-    if (next) {
-      $scope.loadDocuments();
-    }
-  })
+    $scope.loadDocuments();
+  }, true);
   
   /**
    * Sort documents.

docs-web/src/main/webapp/partial/directive.selecttag.html

@@ -3,7 +3,7 @@
     <li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
   </ul>
   <p class="input-append">
-    <input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" ui-keypress="{ 'enter': 'addTag($event)' }" />
+    <input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" typeahead-on-select="addTag()" />
     <button type="submit" class="btn" ng-click="addTag()">Add</button>
   </p>
 </div>

docs-web/src/main/webapp/partial/document.default.html

@@ -1,5 +1,5 @@
 <h1>
-  {{ documents.total }} <small>document{{ documents.total > 1 ? 's' : '' }} in the database</small>
+  {{ totalDocuments }} <small>document{{ totalDocuments > 1 ? 's' : '' }} in the database</small>
 </h1>
 
 <blockquote class="pull-right">

docs-web/src/main/webapp/partial/document.edit.html

@@ -14,7 +14,7 @@
   <div class="control-group">
     <label class="control-label" for="inputCreateDate">Creation date</label>
     <div class="controls">
-      <input type="text" id="inputCreateDate" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" />
+      <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" />
     </div>
   </div>
   <div class="control-group">

docs-web/src/main/webapp/partial/document.html

@@ -4,10 +4,28 @@
       <p class="text-center">
         <button class="btn btn-primary" type="button" ng-click="addDocument()"><span class="icon-plus icon-white"></span> Add a document</button>
       </p>
-      <p class="input-prepend text-center input-block-level">
+      <p class="input-prepend input-append text-center input-block-level">
         <span class="add-on"><span class="icon-search"></span></span>
-        <input class="span10" type="text" placeholder="Search" ng-model="search" >
+        <input type="text" placeholder="Search" ng-model="search.query" />
+        <button class="btn" ng-click="isAdvancedSearchCollapsed = !isAdvancedSearchCollapsed">Advanced search <span class="caret"></span></button>
       </p>
+      <div collapse="isAdvancedSearchCollapsed">
+        <div class="well well-small">
+          <form class="form-horizontal">
+            <div class="control-group">
+              <label class="control-label" for="inputCreateDateMin">Creation date</label>
+              <div class="controls">
+                <input class="span4" ng-readonly="true" ng-change="loadDocuments()" type="text" id="inputCreateDateMin" datepicker-popup="yyyy-MM-dd" ng-model="search.createDateMin" starting-day="1" show-weeks="false" />
+                 to 
+                <input class="span4" ng-readonly="true" ng-change="loadDocuments()" type="text" id="inputCreateDateMax" datepicker-popup="yyyy-MM-dd" ng-model="search.createDateMax" starting-day="1" show-weeks="false" />
+              </div>
+            </div>
+            <div class="form-actions">
+              <button ng-click="initSearch()" class="btn btn-warning" type="submit">Reset search</button>
+            </div>
+          </form>
+        </div> 
+      </div>
       <table class="table table-striped table-hover table-documents">
         <thead>
           <tr>
@@ -16,7 +34,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents.documents">
+          <tr ng-click="viewDocument(document.id)" ng-repeat="document in documents">
             <td>{{ document.title }}</td>
             <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
           </tr>

docs-web/src/main/webapp/partial/tag.html

@@ -1,6 +1,6 @@
 <div class="container-fluid">
   <div class="row-fluid">
-    <div class="span3 well text-center">
+    <div class="span4 well text-center">
       
       <p class="input-prepend input-append">
         <span class="add-on"><span class="icon-plus"></span></span>

docs-web/src/main/webapp/style/main.less

@@ -13,13 +13,14 @@
 	cursor: pointer;
 }
 
-/*.thumbnails-file li.thumbnail-container {
-	&:nth-child(6n+1) {
-    margin-left: 0;
-	}
-}*/
-
-
 .thumbnails-file [class*="span"]:first-child {
     margin-left: 2.5641%;
+}
+
+.collapse[style="height: auto;"] {
+	overflow: visible;
+}
+
+input[readonly][datepicker-popup] {
+	cursor: pointer;
 }