Give better visual feedback if filters are active and add Clear All button

This commit is contained in:
Johannes Zellner
2022-08-08 17:15:56 +02:00
parent af7d106a99
commit 520b4e1147
3 changed files with 14 additions and 2 deletions

View File

@@ -199,7 +199,7 @@
<div class="input-group">
<input type="text" class="form-control" style="width: 300px" ng-show="installedApps.length > 8" placeholder="{{ 'apps.searchPlaceholder' | tr }}" id="appSearch" ng-model="appSearch"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-class="{ 'active': showFilter }" ng-click="showFilter = !showFilter"><i class="fas fa-filter"></i></button>
<button class="btn btn-default" type="button" ng-class="{ 'btn-warning': showFilter || selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains }" ng-click="showFilter = !showFilter"><i class="fas fa-filter"></i></button>
</span>
</div>
<div class="btn-group">
@@ -214,6 +214,7 @@
</div>
<div ng-show="showFilter" class="filter-bar">
<form class="form-inline">
<button class="btn btn-primary" ng-show="selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains" ng-click="clearAllFilter()">{{ 'apps.filter.clearAll' | tr }</button>
<multiselect ng-model="selectedGroup" ng-show="user.isAtLeastAdmin && installedApps.length > 1 && groups.length > 1" ms-header="{{ selectedGroup.name }}" options="group.name for group in groups" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
<multiselect ng-model="selectedState" ng-show="user.isAtLeastAdmin && installedApps.length > 1" ms-header="{{ 'apps.stateFilterHeader' | tr }}" ms-selected="{{ selectedState }}" options="state.label for state in states" data-multiple="false"></multiselect>
<multiselect ng-model="selectedTags" ng-show="user.isAtLeastAdmin && tags.length > 0" ms-header="{{ 'apps.tagsFilterHeaderAll' | tr }}" ms-selected="{{ 'apps.tagsFilterHeader' | tr:{ tags: selectedTags.join(', ') } }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>