Paginated selectable list directive #6550
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -194,5 +194,3 @@ uiModules.get('kibana') | |
| template: paginateControlsTemplate | ||
| }; | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import _ from 'lodash'; | ||
| import uiModules from 'ui/modules'; | ||
| import paginatedSelectableListTemplate from 'ui/partials/paginated_selectable_list.html'; | ||
|
|
||
| const module = uiModules.get('kibana'); | ||
|
|
||
| module.directive('paginatedSelectableList', function (kbnUrl) { | ||
|
|
||
| return { | ||
| restrict: 'E', | ||
| scope: { | ||
| perPage: '=', | ||
| list: '=', | ||
| userMakeUrl: '=', | ||
| userOnSelect: '=' | ||
| }, | ||
| template: paginatedSelectableListTemplate, | ||
| controller: function ($scope, $element, $filter) { | ||
| $scope.perPage = $scope.perPage || 10; | ||
|
|
||
| $scope.hits = $scope.list.sort() || []; | ||
|
There was a problem hiding this comment. This would only do anything useful if $scope.list was an array of strings. If the user of the directive wants sorting they need to pass in a property or a sort function. There was a problem hiding this comment. Actually, re-reading this, the entire directive appear that this assume you always pass in a list of strings. I think it would be more likely that we'd have a list of objects and we'd want to pass that in. I mentioned that here: #6156 (comment) |
||
|
|
||
| $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.hits = $scope.isAscending ? hits.sort() : hits.reverse(); | ||
|
There was a problem hiding this comment. See above note on sorting |
||
| }; | ||
|
|
||
| $scope.makeUrl = function (hit) { | ||
| return $scope.userMakeUrl(hit); | ||
| }; | ||
|
|
||
| $scope.onSelect = function (hit, $event) { | ||
| return $scope.userOnSelect(hit, $event); | ||
| }; | ||
|
|
||
| $scope.$watch('query', function (val) { | ||
|
There was a problem hiding this comment. You can get rid of this watcher, this can be done in the view, see notes starting here: https://github.com/elastic/kibana/pull/6550/files#r56722858 |
||
| $scope.hits = $filter('filter')($scope.list, val); | ||
| $scope.hitCount = $scope.hits.length; | ||
| }); | ||
| } | ||
| }; | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <form role="form" class="form-inline"> | ||
| <div class="container-fluid"> | ||
| <div class="row"> | ||
| <div class="input-group form-group finder-form col-md-9"> | ||
| <span class="input-group-addon"> | ||
| <i class="fa fa-search"></i> | ||
| </span> | ||
| <input | ||
| input-focus | ||
| ng-model="query" | ||
| placeholder="Filter..." | ||
| class="form-control" | ||
| name="query" | ||
| type="text" | ||
| autocomplete="off" /> | ||
| </div> | ||
| <div class="finder-hit-count col-md-3"> | ||
| <span>{{hitCount}} of {{hitCount}}</span> | ||
|
There was a problem hiding this comment. This will always show |
||
| </div> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| <paginate list="hits" per-page="{{perPage}}"> | ||
|
There was a problem hiding this comment. Make this |
||
| <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 | ||
|
There was a problem hiding this comment. The entire |
||
| class="list-group-item list-group-menu-item" | ||
| ng-repeat="hit in page | filter: query"> | ||
|
There was a problem hiding this comment. remove this filter, it can go on the |
||
| <a ng-if="userMakeUrl" kbn-href="{{makeUrl(hit)}}"> | ||
| <div><span>{{hit}}</span></div> | ||
|
There was a problem hiding this comment. Why is this |
||
| </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"> | ||
|
There was a problem hiding this comment. Small nit-pick, use ng-show here instead of ng-if. |
||
| <p ng-bind="'No matches found.'"></p> | ||
|
There was a problem hiding this comment.
|
||
| </li> | ||
| </ul> | ||
| </paginate> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this list-group-item-menu class still in use?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see
list-group-menu-itemin use, but I don't see a style of it it (note the menu->item item->menu swap in the name). In any case it looks like everywhere it is usedlist-group-itemis already a class on the element. Seems like it could go right?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, that can go.