FEATURE: Add ignore duration selection for user notifications preferences page (#7269)

* FEATURE: Introducing new UI for tracking User's ignored or muted states

app/assets/javascripts/discourse/components/user-selector.js.es6

@@ -94,11 +94,20 @@ export default TextField.extend({
             }
             return i.username ? i.username : i;
           });
+
+          let previouslySelected = [];
+          if (Array.isArray(self.get("usernames"))) {
+            previouslySelected = self.get("usernames");
+          } else {
+            if (self.get("usernames")) {
+              previouslySelected = self.get("usernames").split(",");
+            }
+          }
           self.set("usernames", items.join(","));
           self.set("hasGroups", hasGroups);
-
           selected = items;
-          if (self.get("onChangeCallback")) self.onChangeCallback();
+          if (self.get("onChangeCallback"))
+            self.onChangeCallback(previouslySelected, selected);
         },
 
         reverseTransform(i) {

app/assets/javascripts/discourse/controllers/preferences/users.js.es6

@@ -1,10 +1,44 @@
 import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import showModal from "discourse/lib/show-modal";
+import User from "discourse/models/user";
 
 export default Ember.Controller.extend(PreferencesTabController, {
   saveAttrNames: ["muted_usernames", "ignored_usernames"],
-
+  ignoredUsernames: Ember.computed.alias("model.ignored_usernames"),
   actions: {
+    ignoredUsernamesChanged(previous, current) {
+      if (current.length > previous.length) {
+        const username = current.pop();
+        if (username) {
+          User.findByUsername(username).then(user => {
+            if (user.get("ignored")) {
+              return;
+            }
+            const controller = showModal("ignore-duration", {
+              model: user
+            });
+            controller.setProperties({
+              onClose: () => {
+                if (!user.get("ignored")) {
+                  const usernames = this.get("ignoredUsernames")
+                    .split(",")
+                    .removeAt(
+                      this.get("ignoredUsernames").split(",").length - 1
+                    )
+                    .join(",");
+                  this.set("ignoredUsernames", usernames);
+                }
+              }
+            });
+          });
+        }
+      } else {
+        return this.get("model")
+          .save(["ignored_usernames"])
+          .catch(popupAjaxError);
+      }
+    },
     save() {
       this.set("saved", false);
       return this.get("model")

app/assets/javascripts/discourse/lib/autocomplete.js.es6

@@ -97,7 +97,7 @@ export default function(options) {
     prevTerm = null;
   }
 
-  function addInputSelectedItem(item) {
+  function addInputSelectedItem(item, triggerChangeCallback) {
     var transformed,
       transformedItem = item;
 
@@ -131,7 +131,7 @@ export default function(options) {
       return d[0];
     });
 
-    if (options.onChangeItems) {
+    if (options.onChangeItems && triggerChangeCallback) {
       options.onChangeItems(inputSelectedItems);
     }
 
@@ -164,7 +164,7 @@ export default function(options) {
         if (options.single) {
           me.hide();
         }
-        addInputSelectedItem(term);
+        addInputSelectedItem(term, true);
       } else {
         if (options.transformComplete) {
           term = options.transformComplete(term);
@@ -229,7 +229,7 @@ export default function(options) {
         if (options.single) {
           me.hide();
         }
-        addInputSelectedItem(x);
+        addInputSelectedItem(x, false);
       }
     });
 
@@ -238,7 +238,7 @@ export default function(options) {
         if (options.single) {
           me.hide();
         }
-        addInputSelectedItem(item);
+        addInputSelectedItem(item, true);
       });
     }
 

app/assets/javascripts/discourse/templates/preferences/users.hbs

@@ -10,7 +10,9 @@
     <div class="controls tracking-controls">
       <label>{{d-icon "eye-slash" class="icon"}} {{i18n 'user.ignored_users'}}</label>
       {{user-selector excludeCurrentUser=true
-                      usernames=model.ignored_usernames class="user-selector"}}
+                      usernames=model.ignored_usernames
+                      onChangeCallback=(action "ignoredUsernamesChanged")
+                      class="user-selector"}}
     </div>
     <div class="instructions">{{i18n 'user.ignored_users_instructions'}}</div>
   {{/if}}