From 8b1b93889928cf9ab74940f16a6d8e850a955321 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 2 Jun 2020 14:22:20 -0400
Subject: [PATCH] refactor(preferences): replace comma-separated list of
 addresses by md-chips

---
 .../English.lproj/Localizable.strings         |  2 +-
 UI/PreferencesUI/UIxPreferences.m             | 32 +-----------
 UI/Templates/PreferencesUI/UIxPreferences.wox | 52 +++++++++++++++----
 .../js/Preferences/Preferences.service.js     | 18 +++----
 4 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/UI/PreferencesUI/English.lproj/Localizable.strings b/UI/PreferencesUI/English.lproj/Localizable.strings
index 106b00d9a..9e7fd8e31 100644
--- a/UI/PreferencesUI/English.lproj/Localizable.strings
+++ b/UI/PreferencesUI/English.lproj/Localizable.strings
@@ -40,7 +40,7 @@
 "Auto reply subject" = "Auto reply subject";
 "You can write ${subject} to insert the original subject" = "You can write ${subject} to insert the original subject";
 "Auto reply message" = "Auto reply message";
-"Email addresses (separated by commas)" = "Email addresses (separated by commas)";
+"Email addresses" = "Email addresses";
 "Add default email addresses" = "Add default email addresses";
 "Days between responses" = "Days between responses";
 "Do not send responses to mailing lists" = "Do not send responses to mailing lists";
diff --git a/UI/PreferencesUI/UIxPreferences.m b/UI/PreferencesUI/UIxPreferences.m
index 99acd901d..740ae5e6e 100644
--- a/UI/PreferencesUI/UIxPreferences.m
+++ b/UI/PreferencesUI/UIxPreferences.m
@@ -793,23 +793,9 @@ static NSArray *reminderValues = nil;
 //
 // Used internally
 //
-- (NSString *) _defaultEmailAddresses
+- (NSString *) defaultEmailAddresses
 {
-  NSArray *addressesList;
-  NSMutableArray *uniqueAddressesList;
-  NSString *address;
-  unsigned int i;
-
-  uniqueAddressesList = [NSMutableArray array];
-  addressesList = [NSMutableArray arrayWithArray: [user allEmails]];
-  for (i = 0; i < [addressesList count]; i++)
-    {
-      address = [addressesList objectAtIndex: i];
-      if (![uniqueAddressesList containsObject: address])
-	[uniqueAddressesList addObject: address];
-    }
-
-  return [uniqueAddressesList componentsJoinedByString: @", "];
+  return [[[user allEmails] uniqueObjects] jsonRepresentation];
 }
 
 //
@@ -877,20 +863,6 @@ static NSArray *reminderValues = nil;
   return [defaultCategoriesColors jsonRepresentation];
 }
 
-//
-// Used by templates
-//
-- (NSString *) autoReplyEmailAddresses
-{
-  NSArray *addressesList;
-
-  addressesList = [vacationOptions objectForKey: @"autoReplyEmailAddresses"];
-
-  return (addressesList
-          ? [addressesList componentsJoinedByString: @", "]
-          : [self _defaultEmailAddresses]);
-}
-
 //
 // Used by templates
 //
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 0aefc6f27..1c69a94e3 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -18,7 +18,7 @@
     var forwardEnabled = <var:string value="forwardEnabled" const:escapeHTML="NO"/>;
     var vacationEnabled = <var:string value="isVacationEnabled" const:escapeHTML="NO"/>;
     var timeZonesList = <var:string value="timeZonesList" const:escapeHTML="NO"/>;
-    var defaultEmailAddresses = '<var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>';
+    var defaultEmailAddresses = <var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>;
     var defaultCalendarCategories = <var:string value="defaultCalendarCategoriesColors" const:escapeHTML="NO"/>;
     var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
     var forwardConstraintsDomains = <var:string value="forwardConstraintsDomains" const:escapeHTML="NO"/>;
@@ -969,14 +969,37 @@
 
                 <div layout="row" layout-align="start center">
                   <md-input-container class="md-block md-flex">
-                    <label><var:string label:value="Email addresses (separated by commas)"/></label>
-                    <textarea name="autoReplyEmailAddresses"
-                              required="required"
-                              id="autoReplyEmailAddresses"
-                              ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
+                    <label><var:string label:value="Email addresses"/></label>
+                    <md-chips
+                        id="autoReplyEmailAddresses"
+                        name="autoReplyEmailAddresses"
+                        ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"
+                        ng-required="app.preferences.defaults.Vacation.enabled == 1"
+                        md-separator-keys="app.emailSeparatorKeys"
+                        md-add-on-blur="true"
+                        md-autocomplete-snap="width">
+                      <md-autocomplete
+                          md-menu-class="md-2-line"
+                          md-search-text="app.addressesSearchText"
+                          md-items="address in app.filterEmailAddresses(app.addressesSearchText)"
+                          md-no-cache="true"
+                          md-min-length="0"
+                          md-autofocus="true"
+                          md-autoselect="true"
+                          label:placeholder="Add an address">
+                        <md-item-template>
+                          <div class="sg-tile-content">
+                            <div class="sg-md-subhead">
+                              <div md-highlight-text="app.addressesSearchText"
+                                   md-highlight-flags="gi">{{ address }}</div>
+                            </div>
+                          </div>
+                        </md-item-template>
+                      </md-autocomplete>
+                    </md-chips>
                   </md-input-container>
                   <md-button ng-click="app.addDefaultEmailAddresses(preferencesForm)">
-                    <var:string label:value="Add default email addresses" type="button"/>
+                    <var:string label:value="Add default email addresses"/>
                   </md-button>
                 </div>
 
@@ -1091,10 +1114,17 @@
 
               <div flex-offset="5" ng-show="app.preferences.defaults.Forward.enabled == 1">
                 <md-input-container class="md-block md-flex">
-                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
-                  <textarea name="forwardAddress"
-                            id="forwardAddress"
-                            ng-model="app.preferences.defaults.Forward.forwardAddress" />
+                  <label><var:string label:value="Email addresses"/></label>
+                    <md-chips
+                        id="forwardAddress"
+                        name="forwardAddress"
+                        ng-model="app.preferences.defaults.Forward.forwardAddress"
+                        ng-required="app.preferences.defaults.Forward.enabled == 1"
+                        md-separator-keys="app.emailSeparatorKeys"
+                        md-add-on-blur="true"
+                        md-autocomplete-snap="width">
+                      <!-- forward addresses -->
+                    </md-chips>
                 </md-input-container>
 
                 <div>
diff --git a/UI/WebServerResources/js/Preferences/Preferences.service.js b/UI/WebServerResources/js/Preferences/Preferences.service.js
index d3682f2a2..d808987be 100644
--- a/UI/WebServerResources/js/Preferences/Preferences.service.js
+++ b/UI/WebServerResources/js/Preferences/Preferences.service.js
@@ -85,15 +85,14 @@
           data.Vacation.endDate.addDays(1);
         }
         if (data.Vacation.autoReplyEmailAddresses &&
-            angular.isArray(data.Vacation.autoReplyEmailAddresses) &&
+            angular.isString(data.Vacation.autoReplyEmailAddresses) &&
             data.Vacation.autoReplyEmailAddresses.length)
-          data.Vacation.autoReplyEmailAddresses = data.Vacation.autoReplyEmailAddresses.join(",");
-        else
-          delete data.Vacation.autoReplyEmailAddresses;
+          data.Vacation.autoReplyEmailAddresses = data.Vacation.autoReplyEmailAddresses.split(/, */);
       } else
         data.Vacation = {};
 
-      if (angular.isUndefined(data.Vacation.autoReplyEmailAddresses) &&
+      if ((angular.isUndefined(data.Vacation.autoReplyEmailAddresses) ||
+          data.Vacation.autoReplyEmailAddresses.length == 0) &&
           angular.isDefined(window.defaultEmailAddresses))
         data.Vacation.autoReplyEmailAddresses = window.defaultEmailAddresses;
 
@@ -110,9 +109,8 @@
         data.Vacation.endDate = new Date();
       }
 
-      if (data.Forward && data.Forward.forwardAddress &&
-          angular.isArray(data.Forward.forwardAddress))
-        data.Forward.forwardAddress = data.Forward.forwardAddress.join(",");
+      if (data.Forward && angular.isUndefined(data.Forward.forwardAddress))
+        data.Forward.forwardAddress = [];
 
       // Split calendar categories colors keys and values
       if (angular.isUndefined(data.SOGoCalendarCategories))
@@ -360,13 +358,13 @@
       }
 
       if (preferences.defaults.Vacation.autoReplyEmailAddresses)
-        preferences.defaults.Vacation.autoReplyEmailAddresses = _.filter(preferences.defaults.Vacation.autoReplyEmailAddresses.split(","), function(v) { return v.length; });
+        preferences.defaults.Vacation.autoReplyEmailAddresses = _.compact(preferences.defaults.Vacation.autoReplyEmailAddresses);
       else
         preferences.defaults.Vacation.autoReplyEmailAddresses = [];
     }
 
     if (preferences.defaults.Forward && preferences.defaults.Forward.forwardAddress)
-      preferences.defaults.Forward.forwardAddress = preferences.defaults.Forward.forwardAddress.split(",");
+      preferences.defaults.Forward.forwardAddress = _.compact(preferences.defaults.Forward.forwardAddress);
 
     // Merge back calendar categories colors keys and values
     preferences.defaults.SOGoCalendarCategoriesColors = {};