Add sort toggle component #366 and detect operator states #152

app/templates/bower.json

@@ -3,17 +3,17 @@
   "version": "0.0.0",
   "dependencies": {
     "jquery": "~2.1.4",
-    "angular": "~1.4.4",
-    "angular-animate": "~1.4.4",
+    "angular": "~1.6.5",
+    "angular-animate": "~1.6.5",
     "angular-bootstrap": "^1.1",
     "angular-bootstrap-confirm": "^2.3.0",
-    "angular-cookies": "~1.4.4",
+    "angular-cookies": "~1.6.5",
     "angular-google-maps": "2.3.2",
     "angular-highlightjs": "~0.6.0",
-    "angular-messages": "~1.4.4",
-    "angular-mocks": "~1.4.4",
-    "angular-sanitize": "~1.4.4",
-    "angular-ui-router": "~0.2.15",
+    "angular-messages": "~1.6.5",
+    "angular-mocks": "~1.6.5",
+    "angular-sanitize": "~1.6.5",
+    "angular-ui-router": "~0.3.1",
     "angular-ui-tinymce": "~0.0.9",
     "angular-x2js": "https://github.com/janmichaelyu/angular-x2js.git",
     "bootstrap": "~3.3.5",
@@ -49,15 +49,16 @@
     }
   },
   "devDependencies": {
-    "angular-mocks": "~1.4.4",
+    "angular-mocks": "~1.6.5",
     "bardjs": "~0.1.8",
     "sinon": "*"
   },
   "private": true,
   "resolutions": {
-    "angular": "~1.4.4",
+    "angular": "~1.6.5",
     "angular-bootstrap": "^1.1",
     "highcharts": "^4.2",
-    "ng-json-explorer": "f7236fa857"
+    "ng-json-explorer": "f7236fa857",
+    "angular-sanitize": "~1.6.5"
   }
 }

app/templates/rest-api/config/options/all.xml

@@ -79,6 +79,25 @@
     </state>
   </operator>
 
+  <operator name="sort">
+    <state name="score">
+      <sort-order>
+        <score/>
+      </sort-order>
+    </state>
+    <state name="eyeColorAsc">
+      <sort-order
+    direction="ascending" type="xs:string" collation="http://marklogic.com/collation/codepoint">
+        <path-index>eyeColor</path-index>
+      </sort-order>
+    </state>
+    <state name="eyeColorDsc">
+      <sort-order
+    direction="descending" type="xs:string" collation="http://marklogic.com/collation/codepoint">
+        <path-index>eyeColor</path-index>
+      </sort-order>
+    </state>
+  </operator>
   <!-- Annotations (allowed pretty much anywhere) allow adding text or elements to feed custom components with options that would normally not validate) -->
   <annotation>Delta options here</annotation>
 

app/templates/ui/app/search/ml-select.component.js

@@ -0,0 +1,23 @@
+(function () {
+  'use strict';
+
+  function MLSelectController() {
+    var ctrl = this;
+    ctrl.select = function(selectionName) {
+      ctrl.onSelect({selectionName: selectionName});
+    };
+  }
+
+  angular.module('app.search')
+    .component('mlSelect', {
+      templateUrl: 'app/search/ml-select.html',
+      controller: MLSelectController,
+      bindings: {
+        label: '=',
+        currentSelection: '=',
+        selectionList: '=',
+        onSelect: '&'
+      }
+    });
+
+})();

app/templates/ui/app/search/ml-select.component.spec.js

@@ -0,0 +1,44 @@
+/* jshint -W117, -W030 */
+(function () {
+  'use strict';
+
+  describe('Component: ml-select', function () {
+
+    var elem, controller, snippet;
+
+    beforeEach(function() {
+      bard.appModule('app.search');
+      bard.inject('$compile', '$rootScope', '$templateCache', '$componentController');
+
+      $templateCache.put( 'app/search/ml-select.html',
+        '<div class="ml-select"></div>'
+      );
+    });
+
+    beforeEach(function() {
+      var $scope = $rootScope.$new();
+      $scope.setSnippet = function(selectionName) {
+        snippet = selectionName;
+      };
+      elem = angular.element('<ml-select on-select="setSnippet(selectionName)"></ml-select>');
+      $compile(elem)($scope);
+      $scope.$digest();
+      var bindings = {onSelect: $scope.setSnippet};
+      controller = $componentController('mlSelect', { $scope: $scope }, bindings);
+
+      // flush promises
+      $rootScope.$apply();
+    });
+
+    it('should compile', function() {
+      expect(elem.children().hasClass('ml-select')).to.eq(true);
+    });
+
+    it('should set snippet', function() {
+      var type = 'xxx';
+      controller.onSelect(type);
+      expect(snippet).to.eq(type);
+    });
+
+  });
+})();

app/templates/ui/app/search/ml-snippet.html → app/templates/ui/app/search/ml-select.html

@@ -1,10 +1,10 @@
 <div class="btn-group" uib-dropdown>
   <button id="single-button" type="button" class="btn btn-sm btn-default" uib-dropdown-toggle>
-    Snippet Size: <i>{{snippetType || 'compact'}}</i> <span class="caret"></span>
+    {{$ctrl.label}}: <i>{{$ctrl.currentSelection || $ctrl.defaultValue}}</i> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
-    <li role="menuitem" ng-repeat="snippet in snippets track by $index">
-      <a href ng-click="$ctrl.setSnippetType(snippet)">{{snippet}}</a>
+    <li role="menuitem" ng-repeat="selection in $ctrl.selectionList track by $index">
+      <a href ng-click="$ctrl.select(selection)">{{selection}}</a>
     </li>
   </ul>
 </div>

app/templates/ui/app/search/search.controller.js

@@ -1,5 +1,5 @@
 /* global MLSearchController */
-(function () {
+(function() {
   'use strict';
 
   angular.module('app.search')
@@ -22,5 +22,27 @@
       ctrl.mlSearch.setSnippet(type);
       ctrl.search();
     };
+
+    ctrl.setSort = function(type) {
+      ctrl.mlSearch.setSort(type);
+      ctrl.search();
+    };
+
+    function listFromOperator(operatorArray, operatorType) {
+      return (_.filter(
+        operatorArray,
+        function(val) {
+          return val && val.state && val.state[0] && val.state[0][operatorType];
+        }
+      )[0] || { state: []}).state.map(function(state) {
+        return state.name;
+      });
+    }
+
+    ctrl.mlSearch.getStoredOptions().then(function(data) {
+      ctrl.sortList = listFromOperator(data.options.operator, 'sort-order');
+      ctrl.snippetList = listFromOperator(data.options.operator, 'transform-results');
+    });
+
   }
 }());

app/templates/ui/app/search/search.controller.spec.js

@@ -25,6 +25,13 @@
           data: {
             results: results
           }
+        }),
+        queryConfig: $q.when({
+          data: {
+            options: {
+              operator: []
+            }
+          }
         })
       });
 

app/templates/ui/app/search/search.html

@@ -3,21 +3,22 @@
     <ml-input qtext="$ctrl.qtext" search="$ctrl.search(qtext)" suggest="$ctrl.suggest(val)" template="fa" class="search"></ml-input>
   </div>
 </div>
-
 <div class="search row">
   <div class="col-xs-12 col-sm-4 col-md-3 facets-col">
     <ml-facets facets="$ctrl.response.facets" toggle="$ctrl.toggleFacet(facet, value)" active-facets="$ctrl.mlSearch.activeFacets" negate="$ctrl.toggleNegatedFacet(facet,value)"></ml-facets>
   </div>
   <div class="col-xs-12 col-sm-8 col-md-9 results-col">
     <h4 ng-if="$ctrl.response.total === 0">No results to show</h4>
-
     <div ng-if="$ctrl.response.total > 0" class="results">
       <div class="pagination-ctrls">
         <uib-pagination class="pagination-sm" ng-model="$ctrl.page" ng-change="$ctrl.search()" max-size="10" boundary-links="true" total-items="$ctrl.response.total" items-per-page="$ctrl.response['page-length']">
         </uib-pagination>
-        <ml-snippet set-snippet="$ctrl.setSnippet(type)"></ml-snippet>
+        <div class="col-sm-12 col-lg-5" id="search-operator-dropdowns">
+          <ml-select label="'Snippet Size'" current-selection="$ctrl.mlSearch.getSnippet() || 'compact'" selection-list="$ctrl.snippetList" on-select="$ctrl.setSnippet(selectionName)"></ml-select>
+          <ml-select label="'Sort'" current-selection="$ctrl.mlSearch.getSort() || 'score'" selection-list="$ctrl.sortList" on-select="$ctrl.setSort(selectionName)"></ml-select>
+        </div>
       </div>
-      <ml-metrics search="$ctrl.response" ></ml-metrics>
+      <ml-metrics search="$ctrl.response"></ml-metrics>
       <ml-results template="app/search/search-results.html" results="$ctrl.response.results"></ml-results>
     </div>
   </div>

app/templates/ui/app/search/search.module.js

@@ -6,7 +6,6 @@
     'ml.search',
 
     // html dependencies
-    'app.snippet',
     'ml.search.tpls',
     'ui.bootstrap',
     'ui.router'

app/templates/ui/styles/default.less

@@ -231,6 +231,13 @@ form[name=profileForm] {
     margin-top: 15px;
 }
 
+.pagination-ctrls #search-operator-dropdowns {
+  position:relative;
+  display: inline-block;
+  float:none;
+  padding-top: 10px;
+}
+
 .results .match .highlight {
   background-color: @brand-info;
   color: @gray-lighter;