adding back sort functionality to saved object and paginated selectable list directives and updating the styling, making makeUrl and onSelect functions mutually exclusive
This commit is contained in:
parent
3aa06ab5b0
commit
041c2f6f41
|
@ -22,29 +22,29 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
|
|||
|
||||
$scope.hitCount = $scope.hits.length;
|
||||
|
||||
/**
|
||||
* Boolean that keeps track of whether hits are sorted ascending (true)
|
||||
* or descending (false) by title
|
||||
* @type {Boolean}
|
||||
*/
|
||||
$scope.isAscending = true;
|
||||
|
||||
/**
|
||||
* Sorts saved object finder hits either ascending or descending
|
||||
* @param {Array} hits Array of saved finder object hits
|
||||
* @return {Array} Array sorted either ascending or descending
|
||||
*/
|
||||
$scope.sortHits = function (hits) {
|
||||
$scope.isAscending = !$scope.isAscending;
|
||||
$scope.list = $scope.isAscending ? hits.sort() : hits.reverse();
|
||||
};
|
||||
|
||||
$scope.makeUrl = function (hit) {
|
||||
if ($scope.userMakeUrl) {
|
||||
return $scope.userMakeUrl(hit);
|
||||
}
|
||||
return '#';
|
||||
return $scope.userMakeUrl(hit);
|
||||
};
|
||||
|
||||
$scope.onSelect = function (hit, $event) {
|
||||
if ($scope.userOnSelect) {
|
||||
return $scope.userOnSelect(hit, $event);
|
||||
}
|
||||
|
||||
var url = $scope.makeUrl(hit);
|
||||
if (!url || url === '#' || url.charAt(0) !== '#') return;
|
||||
|
||||
$event.preventDefault();
|
||||
|
||||
// we want the '/path', not '#/path'
|
||||
kbnUrl.change(url.substr(1));
|
||||
};
|
||||
|
||||
$scope.preventClick = function ($event) {
|
||||
$event.preventDefault();
|
||||
return $scope.userOnSelect(hit, $event);
|
||||
};
|
||||
|
||||
$scope.$watch('query', function (val) {
|
||||
|
|
|
@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
|
|||
|
||||
filterResults();
|
||||
|
||||
/**
|
||||
* Boolean that keeps track of whether hits are sorted ascending (true)
|
||||
* or descending (false) by title
|
||||
* @type {Boolean}
|
||||
*/
|
||||
self.isAscending = true;
|
||||
|
||||
/**
|
||||
* Sorts saved object finder hits either ascending or descending
|
||||
* @param {Array} hits Array of saved finder object hits
|
||||
* @return {Array} Array sorted either ascending or descending
|
||||
*/
|
||||
self.sortHits = function (hits) {
|
||||
self.isAscending = !self.isAscending;
|
||||
self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse();
|
||||
};
|
||||
|
||||
/**
|
||||
* Passed the hit objects and will determine if the
|
||||
* hit should have a url in the UI, returns it if so
|
||||
|
|
|
@ -22,13 +22,25 @@
|
|||
</form>
|
||||
<paginate list="hits" per-page="{{perPage}}">
|
||||
<ul class="li-striped list-group list-group-menu">
|
||||
<li class="list-group-item list-group-menu-item">
|
||||
<span class="paginate-heading">
|
||||
Name
|
||||
<i
|
||||
class="fa"
|
||||
ng-click="sortHits(hits)"
|
||||
ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item list-group-menu-item"
|
||||
ng-repeat="hit in page | filter: query | orderBy: hit.toString()"
|
||||
ng-click="onSelect(hit, $event)">
|
||||
<a ng-href="{{makeUrl(hit)}}" ng-click="preventClick($event)">
|
||||
ng-repeat="hit in page | filter: query | orderBy: hit.toString()">
|
||||
<a ng-if="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
|
||||
<span>{{hit}}</span>
|
||||
</a>
|
||||
<div ng-if="userOnSelect" ng-click="onSelect(hit, $event)">
|
||||
<span>{{hit}}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item list-group-no-results" ng-if="hits.length === 0">
|
||||
<p ng-bind="'No matches found.'"></p>
|
||||
|
|
|
@ -26,6 +26,16 @@
|
|||
</form>
|
||||
<paginate list="finder.hits" per-page="20">
|
||||
<ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
|
||||
<li class="list-group-item list-group-menu-item">
|
||||
<span class="paginate-heading">
|
||||
Name
|
||||
<i
|
||||
class="fa"
|
||||
ng-click="finder.sortHits(finder.hits)"
|
||||
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item list-group-menu-item"
|
||||
ng-class="{'active': finder.selector.index === $index && finder.selector.enabled}"
|
||||
|
|
|
@ -348,11 +348,11 @@ paginated-selectable-list {
|
|||
}
|
||||
|
||||
li:nth-child(odd) {
|
||||
background-color: @white;
|
||||
background-color: @kibanaGray6;
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
background-color: @kibanaGray6;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
.paginate-heading {
|
||||
|
|
Loading…
Reference in a new issue