Add sortByDisplayProperty setting

Author: pkempenaers

src/app/component/dropdown-menu/dropdown-menu.template.html

@@ -9,7 +9,7 @@
  ng-keydown="$ctrl.searchKeydown($event)" />
 </div>
 <ul>
-<dropdown-tree-option-row ng-repeat="option in $ctrl.options track by $index"
+<dropdown-tree-option-row ng-repeat="option in $ctrl.options | orderBy:$ctrl.settings.displayProperty:false:$ctrl.customCompare track by $index"
 option="option"
 settings="$ctrl.settings"
 option-clicked="$ctrl.optionClicked(option)"
@@ -18,7 +18,8 @@
 focus-previous="$ctrl.focusPrevious()"
 catch-keydown="$ctrl.catchKeydown(event)"
 reset-focus-counter="$ctrl.resetFocusCounter(element)"
-search-text="{{$ctrl.searchText}}">
+search-text="{{$ctrl.searchText}}"
+custom-compare="$ctrl.customCompare">
 </dropdown-tree-option-row>
 </ul>
 </div>

src/app/component/dropdownTree.controller.js

@@ -58,9 +58,24 @@
 foldersOpen: true,
 openFolderWhenInnerSelected: false,
 closeOnSelectionLimitReached: false,
+sortByDisplayProperty: false,
 };
 
 this.settings = angular.extend({}, this.defaultSettings);
+
+const vm = this;
+function customCompare(a, b) {
+if (!vm.settings.sortByDisplayProperty) {
+return 0;
+}
+if (a.value < b.value) {
+return -1;
+} else if (a.value > b.value) {
+return 1;
+}
+return 0;
+}
+vm.customCompare = customCompare;
 }
 
 $onChanges(changes) {

src/app/component/option-row/option-row.component.js

@@ -14,6 +14,7 @@ export default function optionRowComponent() {
 catchKeydown: '&',
 resetFocusCounter: '&',
 searchText: '@',
+customCompare: '<',
 },
 };
 

src/app/component/option-row/option-row.template.html

@@ -20,7 +20,7 @@
 </div>
 <ul class="children"
  ng-if="$ctrl.isFolder() && ($ctrl.isOpen || ($ctrl.shouldBeVisible() && $ctrl.searchText.length !== 0))">
-<dropdown-tree-option-row ng-repeat="option in $ctrl.getChildOptions() track by $index"
+<dropdown-tree-option-row ng-repeat="option in $ctrl.getChildOptions() | orderBy:$ctrl.settings.displayProperty:false:$ctrl.customCompare track by $index"
 option="option"
 settings="$ctrl.settings"
 option-clicked="$ctrl.innerClicked(option)"

src/app/main/main.controller.js

@@ -8,16 +8,24 @@
 $onInit() {
 this.options = [
 {
-name: 'testoption',
+name: 'b',
 label: 'testoption label',
 },
 {
-name: 'test folder',
+name: 'a',
 label: 'test folder label',
 children: [
 {
-name: 'test child option',
-label: 'test child option label',
+name: 'c',
+label: 'test child option c',
+},
+{
+name: 'f',
+label: 'test child option f',
+},
+{
+name: 'd',
+label: 'test child option d',
 },
 ],
 childoptions: [

src/app/main/main.template.html

@@ -129,6 +129,14 @@ <h3>Example settings</h3>
 closeOnSelectionLimitReached
 </label>
 </div>
+<div>
+<label>
+<input type="checkbox"
+ ng-model="$ctrl.settings.sortByDisplayProperty"
+ ng-change="$ctrl.changeSettings()" />
+sortByDisplayProperty
+</label>
+</div>
 </div>
 </div>
 </div>
@@ -309,6 +317,14 @@ <h3>Settings</h3>
 Only applicable when selectionLimit different from 0. Will close the dropdown when selection reaches the specified selectionLimit
 </td>
 </tr>
+<tr>
+<td>sortByDisplayProperty</td>
+<td>false</td>
+<td>boolean</td>
+<td>
+Will sort the options by the displayProperty
+</td>
+</tr>
 </tbody>
 </table>
 </div>