From 520b4e11476ace5e13879ab1399171fb23be2176 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 8 Aug 2022 17:15:56 +0200
Subject: [PATCH] Give better visual feedback if filters are active and add
 Clear All button

---
 src/translation/en.json | 5 ++++-
 src/views/apps.html     | 3 ++-
 src/views/apps.js       | 8 ++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/translation/en.json b/src/translation/en.json
index 2568df998..be12d88d5 100644
--- a/src/translation/en.json
+++ b/src/translation/en.json
@@ -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…",
diff --git a/src/views/apps.html b/src/views/apps.html
index d21fa2cf5..90a1b1fac 100644
--- a/src/views/apps.html
+++ b/src/views/apps.html
@@ -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>
diff --git a/src/views/apps.js b/src/views/apps.js
index 35ec28038..acf3737f0 100644
--- a/src/views/apps.js
+++ b/src/views/apps.js
@@ -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: '',