#158: advanced search form (wip)

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

@@ -5,7 +5,7 @@
  */
 angular.module('docs').controller('Document', function ($scope, $rootScope, $timeout, $state, Restangular, $q) {
   /**
-   * Documents table sort status.
+   * Scope variables.
    */
   $scope.sortColumn = 3;
   $scope.asc = false;
@@ -15,6 +15,9 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
   $scope.search = $state.params.search ? $state.params.search : '';
   $scope.searchOpened = false;
   $scope.setSearch = function (search) { $scope.search = search };
+  $scope.searchDropdownAnchor = angular.element(document.querySelector('.search-dropdown-anchor'));
+  $scope.paginationShown = true;
+  $scope.advsearch = {};
 
   // A timeout promise is used to slow down search requests to the server
   // We keep track of it for cancellation purpose
@@ -149,21 +152,57 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
     return deferred.promise;
   };
 
-  // Hack to reload the pagination directive after language change
+  /**
-  $scope.paginationShown = true;
+   * Hack to reload the pagination directive after language change.
+   */
   $rootScope.$on('$translateChangeSuccess', function () {
     $scope.paginationShown = false;
     $timeout(function () {
       $scope.paginationShown = true;
     });
-  })
+  });
 
-  // Advanced search
+  /**
-  $scope.searchDropdownAnchor = angular.element(document.querySelector('.search-dropdown-anchor'));
+   * Open the advanced search panel.
+   */
   $scope.openSearch = function () {
     var opened = $scope.searchOpened;
     $timeout(function () {
       $scope.searchOpened = !opened;
     });
-  }
+  };
+
+  /**
+   * Start the advanced search.
+   */
+  $scope.startSearch = function () {
+    var search = '';
+    if (!_.isEmpty($scope.advsearch.search_simple)) {
+      search += $scope.advsearch.search_simple + ' ';
+    }
+    if (!_.isEmpty($scope.advsearch.search_fulltext)) {
+      search += 'full:' + $scope.advsearch.search_fulltext + ' ';
+    }
+    if (!_.isEmpty($scope.advsearch.creator)) {
+      search += 'by:' + $scope.advsearch.creator + ' ';
+    }
+    if (!_.isEmpty($scope.advsearch.language)) {
+      search += 'lang:' + $scope.advsearch.language + ' ';
+    }
+    $scope.advsearch.after_date;
+    $scope.advsearch.before_date;
+    if (!_.isEmpty($scope.advsearch.tags)) {
+      search += _.reduce($scope.advsearch.tags, function(s, t) {
+          return s + 'tag:' + t + ' ';
+        }, '');
+    }
+    $scope.search = search;
+    $scope.searchOpened = false;
+  };
+
+  $scope.clearSearch = function () {
+    $scope.advsearch = {};
+    $scope.search = '';
+    $scope.searchOpened = false;
+  };
 });

docs-web/src/main/webapp/src/app/docs/directive/SelectTag.js

@@ -40,6 +40,7 @@ angular.module('docs').directive('selectTag', function() {
         // Add the new tag
         if (tag) {
           if (!duplicate) {
+            if (!$scope.tags) $scope.tags = [];
             $scope.tags.push(tag);
           }
           $scope.input = '';

docs-web/src/main/webapp/src/locale/en.json

@@ -22,6 +22,15 @@
     "logout": "Logout"
   },
   "document": {
+    "search_simple": "Simple search",
+    "search_fulltext": "Fulltext search",
+    "search_creator": "Creator",
+    "search_language": "Language",
+    "search_before_date": "Before this date",
+    "search_after_date": "After this date",
+    "search_tags": "Tags",
+    "search_clear": "Clear",
+    "any_language": "Any language",
     "add_document": "Add a document",
     "tags": "Tags",
     "no_tags": "No tags",

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

@@ -20,7 +20,7 @@
           <input type="search" class="form-control" ng-attr-placeholder="{{ 'document.search' | translate }}" ng-model="search" />
           <span class="input-group-addon pointer" ng-click="openSearch()">
             <div uib-dropdown
-                 auto-close="outsideClick" is-open="searchOpened" dropdown-append-to="searchDropdownAnchor">
+                 auto-close="disabled" is-open="searchOpened" dropdown-append-to="searchDropdownAnchor">
               <span class="btn-open-search">
                 <span class="glyphicon glyphicon-search"></span>
                 <span class="caret"></span>
@@ -61,12 +61,49 @@
                     </div>
                   </div>
 
+                  <div class="form-group">
+                    <label class="control-label sr-only" for="inputSearchAfterDate">{{ 'document.search_after_date' | translate }}</label>
+                    <div class="col-sm-12">
+                      <input type="text" id="inputSearchAfterDate"
+                             ng-attr-placeholder="{{ 'document.search_after_date' | translate }}"
+                             current-text="{{ 'directive.datepicker.current' | translate }}"
+                             clear-text="{{ 'directive.datepicker.clear' | translate }}"
+                             close-text="{{ 'directive.datepicker.close' | translate }}"
+                             datepicker-append-to-body="true"
+                             ng-readonly="true" uib-datepicker-popup="{{ dateFormat }}" class="form-control"
+                             ng-model="advsearch.after_date" datepicker-options="{ startingDay:1, showWeeks: false }"
+                             ng-click="datepickerAfterOpened = true" is-open="datepickerAfterOpened" />
+                    </div>
+                  </div>
+
+                  <div class="form-group">
+                    <label class="control-label sr-only" for="inputSearchBeforeDate">{{ 'document.search_before_date' | translate }}</label>
+                    <div class="col-sm-12">
+                      <input type="text" id="inputSearchBeforeDate"
+                             ng-attr-placeholder="{{ 'document.search_before_date' | translate }}"
+                             current-text="{{ 'directive.datepicker.current' | translate }}"
+                             clear-text="{{ 'directive.datepicker.clear' | translate }}"
+                             close-text="{{ 'directive.datepicker.close' | translate }}"
+                             datepicker-append-to-body="true"
+                             ng-readonly="true" uib-datepicker-popup="{{ dateFormat }}" class="form-control"
+                             ng-model="advsearch.before_date" datepicker-options="{ startingDay:1, showWeeks: false }"
+                             ng-click="datepickerBeforeOpened = true" is-open="datepickerBeforeOpened" />
+                    </div>
+                  </div>
+
+                  <div class="form-group">
+                    <label class="control-label sr-only" for="inputSearchTags">{{ 'document.search_tags' | translate }}</label>
+                    <div class="col-sm-12">
+                      <select-tag tags="advsearch.tags" ref="inputSearchTags"></select-tag>
+                    </div>
+                  </div>
+
                   <div class="form-group text-center">
-                    <button type="submit" class="btn btn-primary">
+                    <button type="submit" ng-click="startSearch()" class="btn btn-primary">
                       <span class="glyphicon glyphicon-search"></span> {{ 'document.search' | translate }}
                     </button>
-                    <button class="btn" ng-click="advsearch = {}">
+                    <button class="btn" ng-click="clearSearch()">
-                      {{ 'document.clear' | translate }}
+                      {{ 'document.search_clear' | translate }}
                     </button>
                   </div>
                 </form>

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

@@ -54,6 +54,7 @@
   .row-full {
     overflow: hidden;
     margin-top: -20px !important;
+    min-height: 80vh;
   }
 
   .well-full {