mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
parent
48f01ba020
commit
09d2454841
4 changed files with 88 additions and 32 deletions
|
@ -40,7 +40,11 @@ module.directive('paginatedSelectableList', function () {
|
|||
disableAutoFocus: '='
|
||||
},
|
||||
template: paginatedSelectableListTemplate,
|
||||
controller: function ($scope) {
|
||||
controller: function ($scope, $filter) {
|
||||
function calculateHitsByQuery() {
|
||||
$scope.hitsByQuery = $filter('filter')($scope.hits, $scope.query);
|
||||
}
|
||||
|
||||
// Should specify either user-make-url or user-on-select
|
||||
if (!$scope.userMakeUrl && !$scope.userOnSelect) {
|
||||
throwError('paginatedSelectableList directive expects a makeUrl or onSelect function');
|
||||
|
@ -53,6 +57,8 @@ module.directive('paginatedSelectableList', function () {
|
|||
|
||||
$scope.perPage = $scope.perPage || 10;
|
||||
$scope.hits = $scope.list = _.sortBy($scope.list, $scope.accessor);
|
||||
$scope.$watchGroup(['hits', 'query'], calculateHitsByQuery);
|
||||
calculateHitsByQuery();
|
||||
$scope.hitCount = $scope.hits.length;
|
||||
|
||||
/**
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
ng-if="linkToTop"
|
||||
ng-click="paginate.goToTop()"
|
||||
data-test-subj="paginateControlsLinkToTop"
|
||||
>
|
||||
Scroll to top
|
||||
</button>
|
||||
i18n-id="common.ui.paginateControls.scrollTopButtonLabel"
|
||||
i18n-default-message="Scroll to top"
|
||||
></button>
|
||||
|
||||
<div
|
||||
class="pagination-other-pages"
|
||||
|
@ -85,7 +85,10 @@
|
|||
|
||||
<form class="form-inline pagination-size" ng-if="showSelector">
|
||||
<div class="form-group">
|
||||
<label>Page Size</label>
|
||||
<label
|
||||
i18n-id="common.ui.paginateControls.pageSizeLabel"
|
||||
i18n-default-message="Page Size"
|
||||
></label>
|
||||
<select
|
||||
ng-model="paginate.perPage"
|
||||
ng-options="opt.value as opt.title for opt in paginate.sizeOptions"
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
input-focus
|
||||
disable-input-focus="disableAutoFocus"
|
||||
ng-model="query"
|
||||
placeholder="Filter..."
|
||||
placeholder="{{ ::'common.ui.paginateSelectableList.searchPlaceholder' | i18n: {defaultMessage: 'Filter…'} }}"
|
||||
class="form-control"
|
||||
name="query"
|
||||
type="text"
|
||||
|
@ -21,15 +21,18 @@
|
|||
</div>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<p class="kuiText kuiSubduedText">
|
||||
{{ (hits | filter: query).length }} of {{ hitCount }}
|
||||
</p>
|
||||
<p
|
||||
class="kuiText kuiSubduedText"
|
||||
i18n-id="common.ui.paginateSelectableList.ofTotalHitCount"
|
||||
i18n-default-message="{matchingHits} of {hitCount}"
|
||||
i18n-values="{ hitCount, matchingHits: hitsByQuery.length }"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<paginate
|
||||
list="hits | filter: query"
|
||||
list="hitsByQuery"
|
||||
per-page="{{ perPage }}"
|
||||
class="kuiVerticalRhythm"
|
||||
>
|
||||
|
@ -38,12 +41,28 @@
|
|||
ng-click="sortHits(hits)"
|
||||
aria-live="assertive"
|
||||
>
|
||||
<span class="euiScreenReaderOnly">Sort by</span>
|
||||
Name
|
||||
<span class="euiScreenReaderOnly"
|
||||
i18n-id="common.ui.paginateSelectableList.sortByButtonLabelScreenReaderOnly"
|
||||
i18n-default-message="Sort by"
|
||||
></span>
|
||||
<span
|
||||
i18n-id="common.ui.paginateSelectableList.sortByButtonLabel"
|
||||
i18n-default-message="Name"
|
||||
></span>
|
||||
<span
|
||||
class="fa"
|
||||
ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
<span class="euiScreenReaderOnly">({{isAscending ? 'ascending' : 'descending'}})</span>
|
||||
ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'"
|
||||
>
|
||||
<span class="euiScreenReaderOnly"
|
||||
ng-if="isAscending"
|
||||
i18n-id="common.ui.paginateSelectableList.sortByButtonLabeAscendingScreenReaderOnly"
|
||||
i18n-default-message="ascending"
|
||||
></span>
|
||||
<span class="euiScreenReaderOnly"
|
||||
ng-if="!isAscending"
|
||||
i18n-id="common.ui.paginateSelectableList.sortByButtonLabeDescendingScreenReaderOnly"
|
||||
i18n-default-message="descending"
|
||||
></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul class="li-striped list-group list-group-menu">
|
||||
|
@ -60,8 +79,10 @@
|
|||
</div>
|
||||
</li>
|
||||
|
||||
<li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
|
||||
<p>No matches found.</p>
|
||||
<li class="list-group-item list-group-no-results" ng-if="hitsByQuery.length === 0">
|
||||
<p i18n-id="common.ui.paginateSelectableList.noMatchesFoundDescription"
|
||||
i18n-default-message="No matches found."
|
||||
></p>
|
||||
</li>
|
||||
</ul>
|
||||
</paginate>
|
||||
|
|
|
@ -22,27 +22,32 @@
|
|||
</div>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<p class="kuiText kuiSubduedText">
|
||||
{{ pageFirstItem }}-{{ pageLastItem }} of {{ finder.hitCount }}
|
||||
</p>
|
||||
|
||||
<p class="kuiText kuiSubduedText"
|
||||
i18n-id="common.ui.savedObjectFinder.pageItemsFromHitCountDescription"
|
||||
i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
|
||||
i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
|
||||
></p>
|
||||
<div class="kuiButtonGroup">
|
||||
<button
|
||||
class="kuiButton kuiButton--primary"
|
||||
ng-if="onAddNew"
|
||||
ng-click="onAddNew()"
|
||||
data-test-subj="addNewSavedObjectLink"
|
||||
>
|
||||
Add new {{ finder.properties.noun }}
|
||||
</button>
|
||||
i18n-id="common.ui.savedObjectFinder.addNewItemButtonLabel"
|
||||
i18n-default-message="Add new {item}"
|
||||
i18n-values="{item: finder.properties.noun}"
|
||||
i18n-description="{item} can be a type of object in Kibana, like 'visualization', 'dashboard', etc"
|
||||
></button>
|
||||
|
||||
<button
|
||||
class="kuiButton kuiButton--secondary"
|
||||
ng-if="!useLocalManagement"
|
||||
ng-click="finder.manageObjects(finder.properties.name)"
|
||||
>
|
||||
Manage {{ finder.properties.nouns }}
|
||||
</button>
|
||||
i18n-id="common.ui.savedObjectFinder.manageItemsButtonLabel"
|
||||
i18n-default-message="Manage {items}"
|
||||
i18n-values="{items: finder.properties.nouns}"
|
||||
i18n-description="{items} can be a type of object in Kibana, like 'visualizations', 'dashboards', etc"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -58,12 +63,28 @@
|
|||
ng-click="finder.sortHits(finder.hits)"
|
||||
aria-live="assertive"
|
||||
>
|
||||
<span class="euiScreenReaderOnly">Sort by</span>
|
||||
Name
|
||||
<span class="euiScreenReaderOnly"
|
||||
i18n-id="common.ui.savedObjectFinder.sortByButtonLabelScreenReaderOnly"
|
||||
i18n-default-message="Sort by"
|
||||
></span>
|
||||
<span
|
||||
i18n-id="common.ui.savedObjectFinder.sortByButtonLabel"
|
||||
i18n-default-message="Name"
|
||||
></span>
|
||||
<span
|
||||
class="fa"
|
||||
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
<span class="euiScreenReaderOnly">({{finder.isAscending ? 'ascending' : 'descending'}})</span>
|
||||
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
|
||||
>
|
||||
<span class="euiScreenReaderOnly"
|
||||
ng-if="finder.isAscending"
|
||||
i18n-id="common.ui.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
|
||||
i18n-default-message="ascending"
|
||||
></span>
|
||||
<span class="euiScreenReaderOnly"
|
||||
ng-if="!finder.isAscending"
|
||||
i18n-id="common.ui.savedObjectFinder.sortByButtonLabeDescendingScreenReaderOnly"
|
||||
i18n-default-message="descending"
|
||||
></span>
|
||||
</span>
|
||||
</button>
|
||||
<ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
|
||||
|
@ -85,8 +106,13 @@
|
|||
</li>
|
||||
<li
|
||||
class="list-group-item list-group-no-results"
|
||||
ng-if="finder.hits.length === 0">
|
||||
<p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
|
||||
ng-if="finder.hits.length === 0"
|
||||
>
|
||||
<p i18n-id="common.ui.savedObjectFinder.noMatchesFoundDescription"
|
||||
i18n-default-message="No matching {items} found."
|
||||
i18n-values="{items: finder.properties.nouns}"
|
||||
i18n-description="{items} can be a type of object in Kibana, like 'visualizations', 'dashboards', etc"
|
||||
></p>
|
||||
</li>
|
||||
</ul>
|
||||
</paginate>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue