From 010ada35b7a01be761cea78206ecec5f95906051 Mon Sep 17 00:00:00 2001
From: Natalie Tay <natalie.tay@discourse.org>
Date: Thu, 17 Oct 2024 00:15:53 +0800
Subject: [PATCH] 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.
---
 .../discourse/initializers/user-card-directory.js    |  8 ++++++++
 .../discourse/templates/users-as-card-directory.hbs  |  1 +
 test/acceptance/users-test.js                        | 12 +++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/javascripts/discourse/initializers/user-card-directory.js b/javascripts/discourse/initializers/user-card-directory.js
index 8356f10..42f1292 100644
--- a/javascripts/discourse/initializers/user-card-directory.js
+++ b/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,
+          });
+        },
       });
     });
   },
diff --git a/javascripts/discourse/templates/users-as-card-directory.hbs b/javascripts/discourse/templates/users-as-card-directory.hbs
index a038891..c5f02b1 100644
--- a/javascripts/discourse/templates/users-as-card-directory.hbs
+++ b/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}}
diff --git a/test/acceptance/users-test.js b/test/acceptance/users-test.js
index ea19bb8..3bbe1ff 100644
--- a/test/acceptance/users-test.js
+++ b/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