From 268b8ea1c399ba37d8c309b9e455bbb32dfd49c5 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 30 Sep 2016 12:02:46 -0400
Subject: [PATCH] (js,html) Improve IMAP subscriptions manager

---
 UI/MailerUI/English.lproj/Localizable.strings |  3 +++
 .../MailerUI/UIxMailFolderSubscriptions.wox   | 20 +++++++++++-----
 .../js/Mailer/Account.service.js              | 10 +-------
 .../js/Mailer/MailboxesController.js          | 23 +++++++++++++------
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/UI/MailerUI/English.lproj/Localizable.strings b/UI/MailerUI/English.lproj/Localizable.strings
index 94ee8f7d2..cc9d5b822 100644
--- a/UI/MailerUI/English.lproj/Localizable.strings
+++ b/UI/MailerUI/English.lproj/Localizable.strings
@@ -367,5 +367,8 @@
 /* Subscriptions Dialog */
 "Manage Subscriptions" = "Manage Subscriptions";
 
+/* Label of filter input field in subscriptions dialog */
+"Filter" = "Filter";
+
 /* Hotkey to write a new message */
 "hotkey_compose" = "w";
\ No newline at end of file
diff --git a/UI/Templates/MailerUI/UIxMailFolderSubscriptions.wox b/UI/Templates/MailerUI/UIxMailFolderSubscriptions.wox
index 955a62378..9384fcafa 100644
--- a/UI/Templates/MailerUI/UIxMailFolderSubscriptions.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderSubscriptions.wox
@@ -22,15 +22,20 @@
     </md-toolbar>
 
     <md-dialog-content class="md-dialog-content" layout="column">
+      <div layout="row" layout-align="center center"
+           ng-if="subscriptions.loading">
+        <md-progress-circular class="md-accent"
+                              md-mode="indeterminate"><!-- progress --></md-progress-circular>
+      </div>
       <md-list>
-        <md-list-item ng-repeat="folder in subscriptions.account.$flattenMailboxes({all: true })"
+        <md-list-item ng-repeat="folder in subscriptions.account.$flattenMailboxes({all: true }) | filter:subscriptions.filter"
 		      md-item-size="48"
-		      ng-hide="subscriptions.app.metadataForFolder(folder).special">
+		      ng-hide="subscriptions.metadataForFolder(folder).special">
           <div ng-class="'sg-child-level-' + folder.level">
-            <md-icon>{{subscriptions.app.metadataForFolder(folder).icon}}</md-icon>
+            <md-icon>{{subscriptions.metadataForFolder(folder).icon}}</md-icon>
           </div>
           <p class="sg-item-name">
-            {{subscriptions.app.metadataForFolder(folder).name}}
+            {{subscriptions.metadataForFolder(folder).name}}
           </p>
 	  <md-checkbox class="md-secondary"
 		       ng-model="folder.subscribed"
@@ -42,8 +47,11 @@
       </md-list>
     </md-dialog-content>
 
-    <md-dialog-actions>
-      <md-button type="button" ng-click="subscriptions.close()"><var:string label:value="Close"/></md-button>
+    <md-dialog-actions ng-hide="subscriptions.loading">
+      <md-input-container class="md-flex" md-no-float="md-no-float">
+        <md-icon>search</md-icon>
+        <input ng-model="subscriptions.filter.name" type="search" label:placeholder="Filter"/>
+      </md-input-container>
     </md-dialog-actions>
 
   </md-dialog>
diff --git a/UI/WebServerResources/js/Mailer/Account.service.js b/UI/WebServerResources/js/Mailer/Account.service.js
index afadd5991..d242b1cc9 100644
--- a/UI/WebServerResources/js/Mailer/Account.service.js
+++ b/UI/WebServerResources/js/Mailer/Account.service.js
@@ -8,7 +8,7 @@
    * @constructor
    * @param {object} futureAccountData
    */
-    function Account(futureAccountData, fetchAll) {
+    function Account(futureAccountData) {
     // Data is immediately available
     if (typeof futureAccountData.then !== 'function') {
       angular.extend(this, futureAccountData);
@@ -24,14 +24,6 @@
       // The promise will be unwrapped first
       //this.$unwrap(futureAccountData);
     }
-
-    this.fetchAll = false;
-
-    // Check if we're displaying the IMAP subscription management dialog
-    if (angular.isDefined(fetchAll) && fetchAll) {
-      this.fetchAll = true;
-      this.$getMailboxes();
-    }
   }
 
   /**
diff --git a/UI/WebServerResources/js/Mailer/MailboxesController.js b/UI/WebServerResources/js/Mailer/MailboxesController.js
index 6a5ee28ec..698221cd6 100644
--- a/UI/WebServerResources/js/Mailer/MailboxesController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxesController.js
@@ -187,7 +187,7 @@
         clickOutsideToClose: true,
         escapeToClose: true,
         locals: {
-          srcApp: vm,
+          metadataForFolder: metadataForFolder,
           srcAccount: account
         }
       }).finally(function() {
@@ -197,16 +197,25 @@
       /**
        * @ngInject
        */
-      SubscriptionsDialogController.$inject = ['$scope', '$mdDialog', 'srcApp', 'srcAccount'];
-      function SubscriptionsDialogController($scope, $mdDialog, srcApp, srcAccount) {
+      SubscriptionsDialogController.$inject = ['$scope', '$mdDialog', 'metadataForFolder', 'srcAccount'];
+      function SubscriptionsDialogController($scope, $mdDialog, metadataForFolder, srcAccount) {
         var vm = this;
 
-        vm.app = srcApp;
-        vm.account = new Account({id: srcAccount.id,
-                                  name: srcAccount.name},
-                                 true);
+        vm.loading = true;
+        vm.filter = { name: '' };
+        vm.metadataForFolder = metadataForFolder;
+        vm.account = new Account({
+          id: srcAccount.id,
+          name: srcAccount.name
+        });
         vm.close = close;
 
+
+        vm.account.$getMailboxes().then(function() {
+          vm.loading = false;
+        });
+
+
         function close() {
           $mdDialog.cancel();
         }