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

Author: ryanjdew

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 renamed to 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/ml-snippet.directive.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/ml-snippet.directive.spec.js

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