(js) Fix handling of mail tags in msg viewer

NEWS

@@ -20,13 +20,15 @@ Bug fixes
  - [web] properly null-terminate IS8601-formatted dates (#3539)
  - [web] display CC/BCC fields in message editor when initialized with values
  - [web] fixed message initialization in popup window (#3583)
+ - [web] create chip (recipient) on blur (#3470)
  - [web] fixed position of warning when JavaScript is disabled (#3449)
- - [eas] properly unfold long mail headers (#3152)
  - [web] respect the LDAP attributes mapping in the list view
  - [web] handle empty body data when forwarding mails (#3581)
- - [eas] correctly set EAS message class for S/MIME messages (#3576)
  - [web] show repeating events when we ask for "All" or "Future" events (#69)
  - [web] show the To instead of From when we are in the Sent folder (#3547)
+ - [web] fixed handling of mail tags in mail viewer
+ - [eas] properly unfold long mail headers (#3152)
+ - [eas] correctly set EAS message class for S/MIME messages (#3576)
  - [dav] we now handle the default classifications for tasks (#3541)
  - [eas] handle FilterType changes using EAS (#3543)
 

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -168,22 +168,17 @@
           </div>
           <div class="sg-padded hide-xs" ng-show="viewer.showFlags">
             <md-chips class="sg-readonly"
-                      ng-model="viewer.message.flags"
-                      md-transform-chip="$chip.name"
-                      md-on-remove="viewer.message.removeTag($chip)">
+                      ng-model="viewer.message.flags">
               <md-chip-template>
-                <span class="sg-chip-color" style="z-index: 1">
+                <span class="sg-chip-color">
                   <span ng-style="{ 'background-color': viewer.service.$tags[$chip][1] }"><!-- color --></span>
                 </span>
-                <span>{{viewer.service.$tags[$chip][0]}}</span>
+                <span>{{viewer.service.$tags[$chip][0] || $chip}}</span>
               </md-chip-template>
               <md-autocomplete
-                  md-selected-item="viewer.tags.selected"
-                  md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
                   md-search-text="viewer.tags.searchText"
-                  md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
-                  md-item-text="tag.description"
-                  md-autoselect="true"
+                  md-items="tag in viewer.service.filterTags(viewer.tags.searchText, viewer.message.flags)"
+                  md-no-cache="true"
                   label:placeholder="Add a tag">
                 <md-item-template>
                   <div layout="row" layout-align="start center">

UI/WebServerResources/js/Mailer/Message.service.js

@@ -81,16 +81,18 @@
    * @param {string} search - the search string to match
    * @returns a collection of strings
    */
-  Message.filterTags = function(query) {
+  Message.filterTags = function(query, excludedTags) {
     var re = new RegExp(query, 'i'),
         results = [];
 
     _.forEach(_.keys(Message.$tags), function(tag) {
       var pair = Message.$tags[tag];
       if (pair[0].search(re) != -1) {
-        results.push({ name: tag, description: pair[0], color: pair[1] });
+        if (!_.includes(excludedTags, tag))
+          results.push({ name: tag, description: pair[0], color: pair[1] });
       }
     });
+
     return results;
   };
 

UI/WebServerResources/js/Mailer/MessageController.js

@@ -64,6 +64,31 @@
         }
       });
     }
+    else {
+      // Flatten new tags when coming from the predefined list of tags (Message.$tags) and
+      // sync tags with server when adding or removing a tag.
+      $scope.$watchCollection('viewer.message.flags', function(newTags, oldTags) {
+        var tags;
+        if (newTags || oldTags) {
+          _.forEach(newTags, function(tag, i) {
+            if (angular.isObject(tag))
+              newTags[i] = tag.name;
+          });
+          if (newTags.length > oldTags.length) {
+            tags = _.difference(newTags, oldTags);
+            _.forEach(tags, function(tag) {
+              vm.message.addTag(tag);
+            });
+          }
+          else if (newTags.length < oldTags.length) {
+            tags = _.difference(oldTags, newTags);
+            _.forEach(tags, function(tag) {
+              vm.message.removeTag(tag);
+            });
+          }
+        }
+      });
+    }
 
     /**
      * If this is a popup window, retrieve the matching controllers (mailbox and message) of the parent window.