Merge pull request #2039 from getredash/filters

Improve filters UI
This commit is contained in:
Arik Fraimovich 2017-10-17 17:02:52 +03:00 committed by GitHub
commit fa213d72a7
3 changed files with 32 additions and 14 deletions

View File

@ -1,20 +1,34 @@
<div class="container bg-white p-5" ng-show="$ctrl.filters | notEmpty"> <div class="container bg-white p-5" ng-show="$ctrl.filters | notEmpty">
<div class="row"> <div class="row">
<div class="col-sm-6 m-t-5" ng-repeat="filter in $ctrl.filters"> <div class="col-sm-6 m-t-5" ng-repeat="filter in $ctrl.filters">
<ui-select ng-model="filter.current" ng-if="!filter.multiple" on-select="$ctrl.filterChangeListener(filter, $model)" on-remove="$ctrl.filterChangeListener(filter, $model)"> <label>{{filter.friendlyName}}</label>
<ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$select.selected | filterValue:filter}}</ui-select-match> </div>
</div>
<div class="row">
<div class="col-sm-6 m-t-5" ng-repeat="filter in $ctrl.filters">
<ui-select ng-model="filter.current" ng-if="!filter.multiple" on-select="$ctrl.filterChangeListener(filter, $model)" on-remove="$ctrl.filterChangeListener(filter, $model)"
remove-selected="false">
<ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{$select.selected | filterValue:filter}}</ui-select-match>
<ui-select-choices repeat="value in filter.values | filter: $select.search"> <ui-select-choices repeat="value in filter.values | filter: $select.search">
{{value | filterValue:filter }} {{value | filterValue:filter }}
</ui-select-choices> </ui-select-choices>
</ui-select> </ui-select>
<ui-select ng-model="filter.current" multiple ng-if="filter.multiple" on-select="$ctrl.filterChangeListener(filter, $model)" on-remove="$ctrl.filterChangeListener(filter, $model)"> <ui-select ng-model="filter.current" multiple ng-if="filter.multiple" on-select="$ctrl.filterChangeListener(filter, $model)"
<ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$item | filterValue:filter}}</ui-select-match> on-remove="$ctrl.filterChangeListener(filter, $model)" remove-selected="false">
<ui-select-choices repeat="value in filter.values | filter: $select.search"> <ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{$item | filterValue:filter}}</ui-select-match>
{{value | filterValue:filter }} <ui-select-choices repeat="value in filter.values | filter: $select.search" group-by="$ctrl.itemGroup">
<span ng-if="value == '*'">
Select All
</span>
<span ng-if="value == '-'">
Clear
</span>
<span ng-if="value != '*' && value != '-'">
{{value | filterValue:filter }}
</span>
</ui-select-choices> </ui-select-choices>
</ui-select> </ui-select>
</div> </div>
</div> </div>
</div> </div>

View File

@ -12,6 +12,14 @@ const FiltersComponent = {
this.filterChangeListener = (filter, modal) => { this.filterChangeListener = (filter, modal) => {
this.onChange({ filter, $modal: modal }); this.onChange({ filter, $modal: modal });
}; };
this.itemGroup = (item) => {
if (item === '*' || item === '-') {
return '';
}
return 'Values';
};
}, },
}; };

View File

@ -214,16 +214,11 @@ function QueryResultService($resource, $timeout, $q) {
if (filters) { if (filters) {
filters.forEach((filter) => { filters.forEach((filter) => {
if (filter.multiple && includes(filter.current, ALL_VALUES)) { if (filter.multiple && includes(filter.current, ALL_VALUES)) {
filter.current = filter.values.slice(1); filter.current = filter.values.slice(2);
}
if (filter.current.length === (filter.values.length - 1)) {
filter.values[0] = NONE_VALUES;
} }
if (filter.multiple && includes(filter.current, NONE_VALUES)) { if (filter.multiple && includes(filter.current, NONE_VALUES)) {
filter.current = []; filter.current = [];
filter.values[0] = ALL_VALUES;
} }
}); });
@ -399,6 +394,7 @@ function QueryResultService($resource, $timeout, $q) {
filters.forEach((filter) => { filters.forEach((filter) => {
if (filter.multiple) { if (filter.multiple) {
filter.values.unshift(ALL_VALUES); filter.values.unshift(ALL_VALUES);
filter.values.unshift(NONE_VALUES);
} }
}); });