DEV: Plugin API to add directory columns (#13440)

app/assets/javascripts/discourse/app/components/table-header-toggle.js

@@ -9,6 +9,7 @@ export default Component.extend({
   chevronIcon: null,
   columnIcon: null,
   translated: false,
+  automatic: false,
   onActiveRender: null,
 
   toggleProperties() {
@@ -31,6 +32,9 @@ export default Component.extend({
   },
   didReceiveAttrs() {
     this._super(...arguments);
+    if (!this.automatic && !this.translated) {
+      this.set("labelKey", this.field);
+    }
     this.set("id", `table-header-toggle-${this.field.replace(/\s/g, "")}`);
     this.toggleChevron();
   },

app/assets/javascripts/discourse/app/controllers/edit-user-directory-columns.js

@@ -14,7 +14,7 @@ export default Controller.extend(ModalFunctionality, {
   labelKey: null,
 
   onShow() {
-    ajax("directory-columns.json")
+    ajax("edit-directory-columns.json")
       .then((response) => {
         this.setProperties({
           loading: false,
@@ -35,7 +35,7 @@ export default Controller.extend(ModalFunctionality, {
       ),
     };
 
-    ajax("directory-columns.json", { type: "PUT", data })
+    ajax("edit-directory-columns.json", { type: "PUT", data })
       .then(() => {
         reload();
       })
@@ -58,7 +58,7 @@ export default Controller.extend(ModalFunctionality, {
       .forEach((column, index) => {
         column.setProperties({
           position: column.automatic_position || index + 1,
-          enabled: column.automatic,
+          enabled: column.type === "automatic",
         });
       });
     this.set("columns", resetColumns);

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

@@ -28,13 +28,22 @@ export default Controller.extend({
     this.set("nameInput", params.name);
     this.set("order", params.order);
 
-    const custom_field_columns = this.columns.filter((c) => !c.automatic);
-    const user_field_ids = custom_field_columns
-      .map((c) => c.user_field_id)
-      .join("|");
+    const userFieldColumns = this.columns.filter(
+      (c) => c.type === "user_field"
+    );
+    const userFieldIds = userFieldColumns.map((c) => c.user_field_id).join("|");
+
+    const pluginColumns = this.columns.filter((c) => c.type === "plugin");
+    const pluginColumnIds = pluginColumns.map((c) => c.id).join("|");
 
     return this.store
-      .find("directoryItem", Object.assign(params, { user_field_ids }))
+      .find(
+        "directoryItem",
+        Object.assign(params, {
+          user_field_ids: userFieldIds,
+          plugin_column_ids: pluginColumnIds,
+        })
+      )
       .then((model) => {
         const lastUpdatedAt = model.get("resultSetMeta.last_updated_at");
         this.setProperties({

app/assets/javascripts/discourse/app/helpers/directory-item-helpers.js

@@ -0,0 +1,37 @@
+import { htmlSafe } from "@ember/template";
+import { number } from "discourse/lib/formatter";
+import { registerUnbound } from "discourse-common/lib/helpers";
+import I18n from "I18n";
+
+registerUnbound("mobile-directory-item-label", function (args) {
+  // Args should include key/values { item, column }
+  const count = args.item.get(args.column.name);
+  return htmlSafe(I18n.t(`directory.${args.column.name}`, { count }));
+});
+
+registerUnbound("directory-item-value", function (args) {
+  // Args should include key/values { item, column }
+  return htmlSafe(
+    `<span class='number'>${number(args.item.get(args.column.name))}</span>`
+  );
+});
+
+registerUnbound("directory-item-user-field-value", function (args) {
+  // Args should include key/values { item, column }
+  const value =
+    args.item.user && args.item.user.user_fields
+      ? args.item.user.user_fields[args.column.user_field_id]
+      : null;
+  const content = value || "-";
+  return htmlSafe(`<span class='user-field-value'>${content}</span>`);
+});
+
+registerUnbound("directory-column-is-automatic", function (args) {
+  // Args should include key/values { column }
+  return args.column.type === "automatic";
+});
+
+registerUnbound("directory-column-is-user-field", function (args) {
+  // Args should include key/values { column }
+  return args.column.type === "user_field";
+});

app/assets/javascripts/discourse/app/routes/users.js

@@ -1,6 +1,7 @@
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
-import PreloadStore from "discourse/lib/preload-store";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import { Promise } from "rsvp";
 
 export default DiscourseRoute.extend({
@@ -38,9 +39,12 @@ export default DiscourseRoute.extend({
   },
 
   model(params) {
-    const columns = PreloadStore.get("directoryColumns");
-    params.order = params.order || columns[0].name;
-    return { params, columns };
+    return ajax("directory-columns.json")
+      .then((response) => {
+        params.order = params.order || response.directory_columns[0].name;
+        return { params, columns: response.directory_columns };
+      })
+      .catch(popupAjaxError);
   },
 
   setupController(controller, model) {

app/assets/javascripts/discourse/app/templates/components/directory-item.hbs

@@ -1,10 +1,10 @@
 <td>{{user-info user=item.user}}</td>
 {{#each columns as |column|}}
   <td>
-    {{#if column.automatic}}
-      {{directory-item-value item=item column=column}}
-    {{else}}
+    {{#if (directory-column-is-user-field column=column)}}
       {{directory-item-user-field-value item=item column=column}}
+    {{else}}
+      {{directory-item-value item=item column=column}}
     {{/if}}
   </td>
 {{/each}}

app/assets/javascripts/discourse/app/templates/components/directory-table.hbs

@@ -7,6 +7,7 @@
         icon=column.icon
         order=order
         asc=asc
+        automatic=(directory-column-is-automatic column=column)
         translated=column.user_field_id
         onActiveRender=setActiveHeader
       }}

app/assets/javascripts/discourse/app/templates/group-index.hbs

@@ -35,11 +35,11 @@
                 {{d-button action=(action "bulkClearAll") label="topics.bulk.clear_all"}}
               </th>
             {{/if}}
-            {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username"}}
+            {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" class="username" automatic=true}}
             <th class="group-owner"></th>
-            {{table-header-toggle order=order asc=asc field="added_at" labelKey="groups.member_added"}}
-            {{table-header-toggle order=order asc=asc field="last_posted_at" labelKey="last_post"}}
-            {{table-header-toggle order=order asc=asc field="last_seen_at" labelKey="last_seen"}}
+            {{table-header-toggle order=order asc=asc field="added_at" labelKey="groups.member_added" automatic=true}}
+            {{table-header-toggle order=order asc=asc field="last_posted_at" labelKey="last_post" automatic=true}}
+            {{table-header-toggle order=order asc=asc field="last_seen_at" labelKey="last_seen" automatic=true}}
             <th>
               {{#if isBulk}}
                 {{group-member-dropdown

app/assets/javascripts/discourse/app/templates/group-requests.hbs

@@ -12,8 +12,8 @@
     {{#load-more selector=".group-members tr" action=(action "loadMore")}}
       <table class="group-members">
         <thead>
-          {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username"}}
-          {{table-header-toggle order=order asc=asc field="requested_at" labelKey="groups.member_requested"}}
+          {{table-header-toggle order=order asc=asc field="username_lower" labelKey="username" automatic=true}}
+          {{table-header-toggle order=order asc=asc field="requested_at" labelKey="groups.member_requested" automatic=true}}
           <th>{{i18n "groups.requests.reason"}}</th>
           <th></th>
           <th></th>

app/assets/javascripts/discourse/app/templates/mobile/components/directory-item.hbs

@@ -1,7 +1,7 @@
 {{user-info user=item.user}}
 
 {{#each columns as |column|}}
-  {{#if column.automatic}}
+  {{#if (directory-column-is-automatic column=column)}}
     <div class="user-stat">
       <span class="value">
         {{directory-item-value item=item column=column}}

app/assets/javascripts/discourse/app/templates/modal/edit-user-directory-columns.hbs

@@ -8,10 +8,12 @@
           <div class="left-content">
             <label class="column-name">
               {{input type="checkbox" checked=column.enabled}}
-              {{#if column.automatic}}
+              {{#if (directory-column-is-automatic column=column)}}
                 {{directory-table-header-title field=column.name labelKey=labelKey icon=column.icon}}
-              {{else}}
+              {{else if (directory-column-is-user-field column=column)}}
                 {{directory-table-header-title field=column.user_field.name translated=true}}
+              {{else}}
+                {{directory-table-header-title field=(i18n column.name) translated=true}}
               {{/if}}
             </label>
           </div>