From bc75a8e7b8a5474625ddb6ae25f197ecaa3a98f0 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 6 Jan 2020 15:27:31 +0100
Subject: [PATCH] Add search field in apps view

---
 src/js/index.js     | 9 +++++++++
 src/views/apps.html | 9 ++++++---
 src/views/apps.js   | 3 +++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/js/index.js b/src/js/index.js
index 9659f42bc..7c25e5ddb 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -272,6 +272,15 @@ app.filter('selectedDomainFilter', function () {
     };
 });
 
+app.filter('appSearchFilter', function () {
+    return function appSearchFilter(apps, appSearch) {
+        return apps.filter(function (app) {
+            if (!appSearch) return true;
+            return app.fqdn.indexOf(appSearch) !== -1;
+        });
+    };
+});
+
 app.filter('prettyDomains', function () {
     return function prettyDomains(domains) {
         return domains.map(function (d) { return d.domain; }).join(', ');
diff --git a/src/views/apps.html b/src/views/apps.html
index 4fdb0ff97..169fcdddc 100644
--- a/src/views/apps.html
+++ b/src/views/apps.html
@@ -66,15 +66,18 @@
       <h1 class="view-header">
         Your Apps
         <div class="pull-right">
-          <multiselect ng-model="selectedTags" ng-show="tags.length > 0" ms-header="All Tags" ms-selected="Tags: {{ selectedTags.join(', ') }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
-          <multiselect ng-model="selectedDomain" ng-show="filterDomains.length > 2" data-compare-by="domain" ms-selected="{{ selectedDomain.domain }}" options="domain.domain for domain in filterDomains" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+          <form class="form-inline">
+            <input type="text" class="form-control" placeholder="Search Apps" id="appSearch" ng-model="appSearch"/>
+            <multiselect ng-model="selectedTags" ng-show="tags.length > 0" ms-header="All Tags" ms-selected="Tags: {{ selectedTags.join(', ') }}" options="tag for tag in tags" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+            <multiselect ng-model="selectedDomain" ng-show="filterDomains.length > 2" data-compare-by="domain" ms-selected="{{ selectedDomain.domain }}" options="domain.domain for domain in filterDomains" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+          </form>
         </div>
       </h1>
     </div>
 
     <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
       <div class="app-grid">
-        <div class="grid-item" ng-repeat="app in installedApps | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | orderBy:'location'">
+        <div class="grid-item" ng-repeat="app in installedApps | selectedTagFilter:selectedTags | selectedDomainFilter:selectedDomain | appSearchFilter:appSearch | orderBy:'location'">
           <a ng-href="{{ app | applicationLink }}" ng-click="user.admin && ((app | installError) === true && showAppConfigure(app, 'repair')) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) || (app | installError) }">
             <div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}" tooltip-class="long nowrap">
               <div class="grid-item-top">
diff --git a/src/views/apps.js b/src/views/apps.js
index ba118d0fa..b818285a8 100644
--- a/src/views/apps.js
+++ b/src/views/apps.js
@@ -14,6 +14,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$timeout'
     $scope.config = Client.getConfig();
     $scope.user = Client.getUserInfo();
     $scope.domains = [];
+    $scope.appSearch = '';
 
     $scope.appPostInstallConfirm = {
         app: {},
@@ -59,6 +60,8 @@ angular.module('Application').controller('AppsController', ['$scope', '$timeout'
 
             $scope.domains = result;
             $scope.filterDomains = [ALL_DOMAINS_DOMAIN].concat(result);
+
+            setTimeout(function () { $('#appSearch').focus(); }, 1000);
         });
     });