UX: Load topic filter results while typing (#101)

This matches the user sidebar filter behaviour

assets/javascripts/discourse-assign/controllers/group-assigned-show.js.es6

@@ -1,15 +1,38 @@
 import UserTopicsList from "discourse/controllers/user-topics-list";
+import { debounce } from "@ember/runloop";
+import { INPUT_DELAY } from "discourse-common/config/environment";
 
 export default UserTopicsList.extend({
   user: Ember.inject.controller(),
   taskActions: Ember.inject.service(),
   order: null,
   ascending: false,
-  searchTerm: null,
   q: "",
 
   queryParams: ["order", "ascending", "q"],
 
+  _setSearchTerm(searchTerm) {
+    this.set("q", searchTerm);
+    this.refreshModel();
+  },
+
+  refreshModel() {
+    this.set("loading", true);
+    this.store
+      .findFiltered("topicList", {
+        filter: this.model.filter,
+        params: {
+          order: this.order,
+          ascending: this.ascending,
+          q: this.q
+        }
+      })
+      .then(result => this.set("model", result))
+      .finally(() => {
+        this.set("loading", false);
+      });
+  },
+
   actions: {
     unassign(topic) {
       this.taskActions
@@ -24,13 +47,15 @@ export default UserTopicsList.extend({
       if (sortBy === this.order) {
         this.toggleProperty("ascending");
         this.model.refreshSort(sortBy, this.ascending);
+        this.refreshModel();
       } else {
         this.setProperties({ order: sortBy, ascending: false });
         this.model.refreshSort(sortBy, false);
+        this.refreshModel();
       }
     },
-    search() {
+    onChangeFilter(value) {
-      this.set("q", this.searchTerm);
+      debounce(this, this._setSearchTerm, value, INPUT_DELAY * 2);
     }
   }
 });

assets/javascripts/discourse-assign/routes/group-assigned-show.js.es6

@@ -2,12 +2,6 @@ import DiscourseRoute from "discourse/routes/discourse";
 import { findOrResetCachedTopicList } from "discourse/lib/cached-topic-list";
 
 export default DiscourseRoute.extend({
-  queryParams: {
-    order: { refreshModel: true },
-    ascending: { refreshModel: true },
-    q: { refreshModel: true }
-  },
-
   beforeModel(transition) {
     if (!(transition.hasOwnProperty("from") && transition.from)) {
       return;
@@ -39,6 +33,13 @@ export default DiscourseRoute.extend({
         });
   },
 
+  setupController(controller, model) {
+    controller.setProperties({
+      model,
+      searchTerm: this.currentModel.params.q
+    });
+  },
+
   renderTemplate() {
     this.render("group-topics-list");
   }

assets/javascripts/discourse/templates/group-topics-list.hbs

@@ -1,14 +1,9 @@
 <div class="form-horizontal bookmark-search-form">
   {{input type="text"
       value=searchTerm
-      enter=(action "search")
       placeholder=(i18n "discourse_assign.topic_search_placeholder")
+      input=(action "onChangeFilter" value="target.value")
       autocomplete="discourse"}}
-  {{d-button
-      class="btn-primary"
-      enter=(action "search")
-      type="button"
-      icon="search"}}
 </div>
 {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list tr" action=(action "loadMore")}}
   {{basic-assigned-topic-list topicList=model