FIX: Update for Discourse core changes (#3)

- Adds support for core's customizable user directory: https://meta.discourse.org/t/195263
- Adds a new theme component setting which allows the statistics to be hidden completely from the user cards
- Uses core's new group filter functionality
- Adds .discourse-compatibility so that this component can still be installed successfully on older Discourse versions

.discourse-compatibility

@@ -0,0 +1 @@
+2.8.0.beta1: d9ed154f9887dcf48e648d7fa8af76c65caa5006

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

@@ -29,34 +29,12 @@ export default {
           this._super(...arguments);
         },
 
-        stats: [
-          { name: "likes_received", icon: "heart" },
-          { name: "likes_given", icon: "heart" },
-          { name: "topic_count" },
-          { name: "post_count" },
-          { name: "topics_entered" },
-          { name: "posts_read" },
-          { name: "days_visited" }
-        ],
-
-        @discourseComputed("site.groups")
-        availableGroups(groups) {
-          return groups
-            .map(g => {
-              // prevents group "everyone" to be listed
-              if (g.id !== 0) {
-                return { name: g.name, value: g.name };
-              }
-            })
-            .filter(Boolean);
-        },
-
         @discourseComputed("model.content.@each")
         userCards(allUsers) {
           if (!allUsers) return [];
           const toLoad = [];
           if (settings.hide_current_user && this.currentUser) {
-            allUsers = allUsers.filter((u) => u.id !== this.currentUser.id)
+            allUsers = allUsers.filter((u) => u.id !== this.currentUser.id);
           }
           const userCardInfos = allUsers.map(u => {
             if (this.cachedUserCardInfo[u.id]) {

javascripts/discourse/templates/users.hbs

@@ -2,8 +2,7 @@
   {{#load-more selector=".user-card-directory .user-card-container" action=(action "loadMore")}}
     <div class="container">
       <div class="users-directory directory">
-        {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
+        {{plugin-outlet name="users-top" connectorTagName="div" args=(hash model=model)}}
-        
         <div class="directory-controls">
           <div class="period-controls">
             {{period-chooser period=period onChange=(action (mut period)) fullDay=false}}
@@ -14,20 +13,38 @@
               </div>
             {{/if}}
           </div>
-          <div class="filters">            
+          <div>
-            <span class="group-filter {{if group "active"}}">
+            <span class="total-rows">
-              {{combo-box content=availableGroups
+              {{#if model.totalRows}}
-                        value=group
+                {{i18n "directory.total_rows" count=model.totalRows}}
-                        options=(hash clearable=true none=(theme-prefix 'filter_by_group'))
+              {{/if}}
-                        valueAttribute="value"}}
-            </span>
-            <span class="username-filter">
-              {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
             </span>
+            {{input
+              value=(readonly nameInput)
+              input=(action "onUsernameFilterChanged" value="target.value")
+              placeholderKey="directory.filter_name"
+              class="filter-name no-blur"
+            }}
+            {{combo-box
+              class="directory-group-selector"
+              value=group
+              content=groupOptions
+              onChange=(action groupChanged)
+              options=(hash
+                none="directory.group.all"
+              )
+            }}
+            {{#if currentUser.staff}}
+              {{d-button
+                icon="wrench"
+                action=(action "showEditColumnsModal")
+                class="btn-default open-edit-columns-btn"
+              }}
+            {{/if}}
           </div>
         </div>
 
-        {{#conditional-loading-spinner condition=model.loading}}
+        {{#conditional-loading-spinner condition=isLoading}}
           {{#if userCards.length}}
           <div class="user-card-directory">
             {{#each userCards as |userCard|}}
@@ -38,24 +55,38 @@
                   loading=userCard.loading
                   username=userCard.user.username
                   }}
+                {{#if (theme-setting 'show_stats')}}
                 <div class='user-card-directory-footer'>
-                  {{#each stats as |stat|}}
+                  {{#each columns as |column|}}
                     <span class="stat stat-{{stat.name}}">
                       <span class="value">
-                        {{number (get userCard.directoryItem stat.name)}}
+                        {{#if (directory-column-is-user-field column=column)}}
+                          {{directory-item-user-field-value item=userCard.directoryItem column=column}}
+                        {{else}}
+                          {{directory-item-value item=userCard.directoryItem column=column}}
+                        {{/if}}
                       </span>
                       <span class="label">
-                        {{table-header-toggle field=stat.name order=order asc=asc icon=stat.icon tagName="span"}}
+                        {{table-header-toggle
+                          field=column.name
+                          icon=column.icon
+                          order=order
+                          asc=asc
+                          automatic=(directory-column-is-automatic column=column)
+                          translated=column.user_field_id
+                          onActiveRender=setActiveHeader
+                        }}
                       </span>
                     </span>
                   {{/each}}
                 </div>
+                {{/if}}
               </div>
             {{/each}}
             </div>
             {{conditional-loading-spinner condition=model.loadingMore}}
           {{else}}
-            <div class='clearfix'></div>
+            <div class="clearfix"></div>
             <p>{{i18n "directory.no_results"}}</p>
           {{/if}}
         {{/conditional-loading-spinner}}

locales/en.yml

@@ -3,4 +3,5 @@ en:
     description: Replaces the user directory with a grid of user cards
     settings:
       hide_current_user: Always hide the current user from the grid
+      show_stats: Show statistics under each user card
   filter_by_group: filter by group

settings.yml

@@ -1 +1,2 @@
 hide_current_user: false
+show_stats: true