From b5f3a1254b415ae848175ba6391bc4111cdd1bbe Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 6 Dec 2016 00:26:14 -0500
Subject: [PATCH] If vault has too many sites, only show a folder list

---
 src/_locales/en/messages.json          |  4 ++--
 src/popup/app/vault/vaultController.js | 33 ++++++++++++++++----------
 src/popup/app/vault/views/vault.html   | 22 +++++++++++++----
 src/popup/less/components.less         |  1 +
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 225dbed3..7c042f77 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -312,8 +312,8 @@
     "description": "Edit"
   },
   "noSitesInList": {
-    "message": "There are no sites in list.",
-    "description": "There are no sites in list."
+    "message": "There are no sites to list.",
+    "description": "There are no sites to list."
   },
   "siteInformation": {
     "message": "Site Information",
diff --git a/src/popup/app/vault/vaultController.js b/src/popup/app/vault/vaultController.js
index 569abad3..4b68acc6 100644
--- a/src/popup/app/vault/vaultController.js
+++ b/src/popup/app/vault/vaultController.js
@@ -75,23 +75,28 @@
         };
 
         $scope.searchSites = function () {
-            if (!$scope.searchText) {
+            if (!$scope.searchText || $scope.searchText.length < 3) {
                 return;
             }
 
-            return function (site) {
-                var searchTerm = $scope.searchText.toLowerCase();
-                if (site.name && site.name.toLowerCase().indexOf(searchTerm) !== -1) {
-                    return true;
-                }
-                if (site.username && site.username.toLowerCase().indexOf(searchTerm) !== -1) {
-                    return true;
-                }
-
-                return false;
-            };
+            return searchSite;
         };
 
+        function searchSite(site) {
+            var searchTerm = $scope.searchText.toLowerCase();
+            if (site.name && site.name.toLowerCase().indexOf(searchTerm) !== -1) {
+                return true;
+            }
+            if (site.username && site.username.toLowerCase().indexOf(searchTerm) !== -1) {
+                return true;
+            }
+            if (site.uri && site.uri.toLowerCase().indexOf(searchTerm) !== -1) {
+                return true;
+            }
+
+            return false;
+        }
+
         $scope.addSite = function () {
             $state.go('addSite', {
                 animation: 'in-slide-up',
@@ -109,6 +114,10 @@
             });
         };
 
+        $scope.viewFolder = function (folder) {
+            // TODO: vault folder page
+        };
+
         $scope.clipboardError = function (e) {
             toastr.info(i18n.browserNotSupportClipboard);
         };
diff --git a/src/popup/app/vault/views/vault.html b/src/popup/app/vault/views/vault.html
index e9d9e69b..27eee639 100644
--- a/src/popup/app/vault/views/vault.html
+++ b/src/popup/app/vault/views/vault.html
@@ -8,17 +8,31 @@
     </div>
 </div>
 <div class="content content-tabs">
-    <div ng-if="vaultSites.length">
+    <div ng-if="vaultSites.length && vaultSites.length >= 100 && vaultFolders.length && (!searchText || searchText.length < 3)">
+        <div class="list">
+            <div class="list-section">
+                <div class="list-section-header">
+                    {{i18n.folders}}
+                </div>
+                <a href="javascript:void(0)" ng-click="viewFolder(folder)" class="list-section-item"
+                   ng-repeat="folder in vaultFolders | orderBy: folderSort">
+                    {{folder.name}}
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div ng-if="vaultSites.length && (vaultSites.length < 100 || (searchText && searchText.length >= 3))">
         <div class="list">
             <div class="list-grouped" ng-repeat="folder in vaultFolders | orderBy: folderSort" ng-show="vaultFolders.length">
-                <div ng-if="(vaultSites |  filter: { folderId: folder.id } | filter: searchSites()).length">
+                <div ng-if="(vaultSites | filter: { folderId: folder.id } | filter: searchSites()).length">
                     <div class="list-grouped-header">
                         <i class="fa fa-folder-open"></i> {{folder.name}}
                     </div>
                     <a href="javascript:void(0)" ng-click="viewSite(site)"
                        class="list-grouped-item condensed" title="{{i18n.edit}} {{site.name}}"
-                       ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id }
-                            | filter: searchSites() | orderBy: ['name', 'username'])">
+                       ng-repeat="site in vaultSites | filter: { folderId: folder.id }
+                            | filter: searchSites() | orderBy: ['name', 'username']">
                         <span class="btn-list" ng-click="$event.stopPropagation()" title="{{i18n.copyPassword}}" ngclipboard
                               ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
                               data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
diff --git a/src/popup/less/components.less b/src/popup/less/components.less
index a3bd0941..d483e71f 100644
--- a/src/popup/less/components.less
+++ b/src/popup/less/components.less
@@ -431,5 +431,6 @@
         display: block;
         text-align: center;
         padding: 0 10px;
+        width: 100%;
     }
 }