FIX: Update order when column is clicked (#40)

In #29209, we introduced a callback to the TableHeaderToggle's parent to update the column order. This commit is to update this component to use that callback.

javascripts/discourse/initializers/user-card-directory.js

@@ -108,6 +108,14 @@ export default {
         userCardShowUser(user) {
           DiscourseURL.routeTo(userPath(user.username_lower));
         },
+
+        @action
+        updateOrder(field, asc) {
+          this.setProperties({
+            order: field,
+            asc,
+          });
+        },
       });
     });
   },

javascripts/discourse/templates/users-as-card-directory.hbs

@@ -100,6 +100,7 @@
                           </span>
                           <span class="label">
                             <TableHeaderToggle
+                              @onToggle={{this.updateOrder}}
                               @field={{column.name}}
                               @icon={{column.icon}}
                               @order={{this.order}}

test/acceptance/users-test.js

@@ -1,4 +1,4 @@
-import { click, visit } from "@ember/test-helpers";
+import { click, currentURL, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
@@ -145,6 +145,16 @@ acceptance("User Card Directory", function (needs) {
       .exists({ count: 2 }, "has two cards showing");
   });
 
+  test("Updates the order when column is clicked", async function (assert) {
+    await visit("/u?order=post_count&period=yearly");
+    await click("#table-header-toggle-post_count");
+    assert.equal(
+      currentURL(),
+      "/u?asc=true&order=post_count&period=yearly",
+      "sorts by topic count"
+    );
+  });
+
   test("Can toggle between views", async function (assert) {
     await visit("/u?cards=no");
     assert