jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/translation/en.json
View File

@@ -26,7 +26,10 @@
},
"addAppAction": "Add App",
"addAppproxyAction": "Add Appproxy",
"addApplinkAction": "Add Applink"
"addApplinkAction": "Add Applink",
"filter": {
"clearAll": "Clear All"
}
},
"main": {
"offline": "Cloudron is offline. Reconnecting…",

3
src/views/apps.html
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>

8
src/views/apps.js
View File

@@ -29,6 +29,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
$scope.groups = [ GROUP_ACCESS_UNSET ];
$scope.APP_TYPES = APP_TYPES;
$scope.showFilter = false;
$scope.filterActive = false;
$scope.allUsers = [];
$scope.allGroups = [];
@@ -70,6 +71,13 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
else localStorage.selectedDomain = newVal.domain;
});
$scope.clearAllFilter = function () {
$scope.selectedState = $scope.states[0];
$scope.selectedTags = [];
$scope.selectedGroup = GROUP_ACCESS_UNSET;
$scope.selectedDomain = ALL_DOMAINS_DOMAIN;
};
$scope.appPostInstallConfirm = {
app: {},
message: '',