DEV: Standardize table sorting verbiage (#9757)

DEV: Standardize table sorting verbiage (#9757)

  • DEV: Standardize table sorting verbiage

This commit creates a common component that tables can use to make their headers sortable. This commit also standardizes on using desc as the default and passing in the asc=true flag to adjust the sorting direction.

  • Add deprecation warnings

Adds deprecation warnings if using previous params and maintains backwards compatibility. Set the default sort value for group members to be asc.

  • switch group requests to use common table-header-toggle

  • update fixture

diff --git a/app/assets/javascripts/admin/components/admin-directory-toggle.js b/app/assets/javascripts/admin/components/admin-directory-toggle.js
deleted file mode 100644
index 093f298..0000000
--- a/app/assets/javascripts/admin/components/admin-directory-toggle.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default Component.extend({
-  tagName: "th",
-  classNames: ["sortable"],
-  chevronIcon: null,
-  toggleProperties() {
-    if (this.order === this.field) {
-      this.set("ascending", this.ascending ? null : true);
-    } else {
-      this.setProperties({ order: this.field, ascending: null });
-    }
-  },
-  toggleChevron() {
-    if (this.order === this.field) {
-      let chevron = iconHTML(this.ascending ? "chevron-up" : "chevron-down");
-      this.set("chevronIcon", `${chevron}`.htmlSafe());
-    } else {
-      this.set("chevronIcon", null);
-    }
-  },
-  click() {
-    this.toggleProperties();
-  },
-  didReceiveAttrs() {
-    this._super(...arguments);
-    this.toggleChevron();
-  }
-});
diff --git a/app/assets/javascripts/admin/controllers/admin-users-list-show.js b/app/assets/javascripts/admin/controllers/admin-users-list-show.js
index 23deb83..9f82545 100644
--- a/app/assets/javascripts/admin/controllers/admin-users-list-show.js
+++ b/app/assets/javascripts/admin/controllers/admin-users-list-show.js
@@ -11,7 +11,7 @@ export default Controller.extend(CanCheckEmails, {
   model: null,
   query: null,
   order: null,
-  ascending: null,
+  asc: null,
   showEmails: false,
   refreshing: false,
   listFilter: null,
@@ -54,7 +54,7 @@ export default Controller.extend(CanCheckEmails, {
       filter: this.listFilter,
       show_emails: this.showEmails,
       order: this.order,
-      ascending: this.ascending,
+      asc: this.asc,
       page: this._page
     })
       .then(result => {
diff --git a/app/assets/javascripts/admin/routes/admin-users-list-show.js b/app/assets/javascripts/admin/routes/admin-users-list-show.js
index 764fe4a..c16591d 100644
--- a/app/assets/javascripts/admin/routes/admin-users-list-show.js
+++ b/app/assets/javascripts/admin/routes/admin-users-list-show.js
@@ -3,7 +3,7 @@ import DiscourseRoute from "discourse/routes/discourse";
 export default DiscourseRoute.extend({
   queryParams: {
     order: { refreshModel: true },
-    ascending: { refreshModel: true }
+    asc: { refreshModel: true }
   },
 
   // TODO: this has been introduced to fix a bug in admin-users-list-show
@@ -18,7 +18,7 @@ export default DiscourseRoute.extend({
       if (controller) {
         controller.setProperties({
           order: transition.to.queryParams.order,
-          ascending: transition.to.queryParams.ascending,
+          asc: transition.to.queryParams.asc,
           query: params.filter,
           refreshing: false
         });
diff --git a/app/assets/javascripts/admin/templates/components/admin-directory-toggle.hbs b/app/assets/javascripts/admin/templates/components/admin-directory-toggle.hbs
deleted file mode 100644
index 7ea6974..0000000
--- a/app/assets/javascripts/admin/templates/components/admin-directory-toggle.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<span class="header-contents">{{i18n this.i18nKey}}{{chevronIcon}}</span>
diff --git a/app/assets/javascripts/admin/templates/users-list-show.hbs b/app/assets/javascripts/admin/templates/users-list-show.hbs
index e96f794..ff66a92 100644
--- a/app/assets/javascripts/admin/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/templates/users-list-show.hbs
@@ -23,14 +23,14 @@
   {{#if model}}
     <table class="table users-list grid">
       <thead>
-        {{admin-directory-toggle field="username" i18nKey="username" order=order ascending=ascending}}
-        {{admin-directory-toggle field="email" i18nKey="email" order=order ascending=ascending}}
-        {{admin-directory-toggle field="last_emailed" i18nKey="admin.users.last_emailed" order=order ascending=ascending}}
-        {{admin-directory-toggle field="seen" i18nKey="last_seen" order=order ascending=ascending}}
-        {{admin-directory-toggle field="topics_viewed" i18nKey="admin.user.topics_entered" order=order ascending=ascending}}
-        {{admin-directory-toggle field="posts_read" i18nKey="admin.user.posts_read_count" order=order ascending=ascending}}
-        {{admin-directory-toggle field="read_time" i18nKey="admin.user.time_read" order=order ascending=ascending}}
-        {{admin-directory-toggle field="created" i18nKey="created" order=order ascending=ascending}}
+        {{table-header-toggle field="username" labelKey="username" order=order asc=asc}}
+        {{table-header-toggle field="email" labelKey="email" order=order asc=asc}}
+        {{table-header-toggle field="last_emailed" labelKey="admin.users.last_emailed" order=order asc=asc}}
+        {{table-header-toggle field="seen" labelKey="last_seen" order=order asc=asc}}
+        {{table-header-toggle field="topics_viewed" labelKey="admin.user.topics_entered" order=order asc=asc}}
+        {{table-header-toggle field="posts_read" labelKey="admin.user.posts_read_count" order=order asc=asc}}
+        {{table-header-toggle field="read_time" labelKey="admin.user.time_read" order=order asc=asc}}
+        {{table-header-toggle field="created" labelKey="created" order=order asc=asc}}
         {{#if siteSettings.must_approve_users}}
           <th>{{i18n "admin.users.approved"}}</th>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/directory-toggle.js b/app/assets/javascripts/discourse/app/components/directory-toggle.js
deleted file mode 100644
index a2e288c..0000000
--- a/app/assets/javascripts/discourse/app/components/directory-toggle.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
-import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default Component.extend({
-  tagName: "th",
-  classNames: ["sortable"],
-  attributeBindings: ["title"],
-  labelKey: null,
-  chevronIcon: null,
-  columnIcon: null,
-
-  @discourseComputed("field", "labelKey")
-  title(field, labelKey) {
-    if (!labelKey) {
-      labelKey = `directory.${this.field}`;
-    }
-
-    return I18n.t(labelKey + "_long", { defaultValue: I18n.t(labelKey) });
-  },
-
-  toggleProperties() {
-    if (this.order === this.field) {
-      this.set("asc", this.asc ? null : true);
-    } else {
-      this.setProperties({ order: this.field, asc: null });
-    }
-  },
-  toggleChevron() {
-    if (this.order === this.field) {
-      let chevron = iconHTML(this.asc ? "chevron-up" : "chevron-down");
-      this.set("chevronIcon", `${chevron}`.htmlSafe());
-    } else {
-      this.set("chevronIcon", null);
-    }
-  },
-  click() {
-    this.toggleProperties();
-  },
-  didReceiveAttrs() {
-    this._super(...arguments);
-    this.toggleChevron();
-  },
-  init() {
-    this._super(...arguments);
-    if (this.icon) {
-      let columnIcon = iconHTML(this.icon);
-      this.set("columnIcon", `${columnIcon}`.htmlSafe());
-    }
-  }
-});
diff --git a/app/assets/javascripts/discourse/app/components/group-index-toggle.js b/app/assets/javascripts/discourse/app/components/group-index-toggle.js
deleted file mode 100644
index f84b9b3..0000000
--- a/app/assets/javascripts/discourse/app/components/group-index-toggle.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
-
-export default Component.extend({
-  tagName: "th",
-  classNames: ["sortable"],
-  chevronIcon: null,
-  toggleProperties() {
-    if (this.order === this.field) {
-      this.set("desc", this.desc ? null : true);
-    } else {
-      this.setProperties({ order: this.field, desc: null });
-    }
-  },
-  toggleChevron() {
-    if (this.order === this.field) {

[... diff too long, it was truncated ...]

GitHub sha: 1a2b9435

1 Like

This commit appears in #9757 which was approved by eviltrout. It was merged by blake.