From 771d59337254cd365335af0e9010b9f372b22483 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 28 Feb 2020 15:01:48 +0000
Subject: [PATCH] Initial commit

---
 .gitignore                                    |  2 +
 about.json                                    | 10 ++++
 common/common.scss                            | 17 ++++++
 .../components/user-card-static.js.es6        | 11 ++++
 .../initializers/user-card-directory.js.es6   | 59 +++++++++++++++++++
 javascripts/discourse/templates/users.hbs     | 34 +++++++++++
 locales/en.yml                                |  3 +
 7 files changed, 136 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 about.json
 create mode 100644 common/common.scss
 create mode 100644 javascripts/discourse/components/user-card-static.js.es6
 create mode 100644 javascripts/discourse/initializers/user-card-directory.js.es6
 create mode 100644 javascripts/discourse/templates/users.hbs
 create mode 100644 locales/en.yml

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c94d134
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.discourse-site
+HELP
diff --git a/about.json b/about.json
new file mode 100644
index 0000000..356cd2d
--- /dev/null
+++ b/about.json
@@ -0,0 +1,10 @@
+{
+  "name": "User Card Directory",
+  "about_url": null,
+  "license_url": null,
+  "assets": {
+  },
+  "color_schemes": {
+  },
+  "component": true
+}
diff --git a/common/common.scss b/common/common.scss
new file mode 100644
index 0000000..e35c580
--- /dev/null
+++ b/common/common.scss
@@ -0,0 +1,17 @@
+
+.user-card-directory {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  
+    .user-card {
+      position: relative;
+      left: auto;
+      width: 100%;
+    }
+  
+    .user-card-container {
+      width: calc(50% - 40px);
+      margin: 50px 20px 10px 20px;
+    }
+  }
\ No newline at end of file
diff --git a/javascripts/discourse/components/user-card-static.js.es6 b/javascripts/discourse/components/user-card-static.js.es6
new file mode 100644
index 0000000..ee3c815
--- /dev/null
+++ b/javascripts/discourse/components/user-card-static.js.es6
@@ -0,0 +1,11 @@
+import UserCardContents from "discourse/components/user-card-contents";
+
+export default UserCardContents.extend({
+  layoutName: "components/user-card-contents",
+  elementId: null,
+  // Overriding functions which cause the user card to show/hide based on mouse/keyboard events:
+  cleanUp() {},
+  didInsertElement() {},
+  willDestroyElement() {},
+  keyUp() {}
+});
diff --git a/javascripts/discourse/initializers/user-card-directory.js.es6 b/javascripts/discourse/initializers/user-card-directory.js.es6
new file mode 100644
index 0000000..5cf620f
--- /dev/null
+++ b/javascripts/discourse/initializers/user-card-directory.js.es6
@@ -0,0 +1,59 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import discourseComputed from "discourse-common/utils/decorators";
+import User from "discourse/models/user";
+import EmberObject from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+
+export default {
+  name: "user-card-directory",
+  initialize(){
+    withPluginApi("0.8.7", api => {
+      api.modifyClass("controller:users", {
+        cachedUserCardInfo: {},
+        
+        @discourseComputed("model.content.@each")
+        userCards(allUsers) {
+            const toLoad = [];
+            const userCardInfos = allUsers.map(u => {
+              if (this.cachedUserCardInfo[u.id]) {
+                  return this.cachedUserCardInfo[u.id];
+              }
+
+              const userCardInfo = this.cachedUserCardInfo[u.id] = EmberObject.create({
+                  user: User.create(u.user),
+                  loading: true
+              });
+
+              toLoad.push(userCardInfo);
+
+              return userCardInfo;
+            });
+
+            const loadMax = 50;
+
+            while (toLoad.length > 0) {
+              const thisBatch = toLoad.splice(0, loadMax);
+              const promise = ajax("/user-cards.json", {
+                  data: { user_ids: thisBatch.map(uc => uc.user.id).join(",") }
+              });
+              thisBatch.forEach(uc => {
+                  const convertedPromise = promise.then(data => {
+                    // Find the correct user from users, and put it in the user attribute
+                    // Use Object.assign to avoid contaminating the source object
+                    return Object.assign({}, data, {
+                        user: data.users.find(u => u.id === uc.user.id)
+                    });
+                  });
+                  return uc.user
+                    .findDetails({ existingRequest: convertedPromise })
+                    .then(() => uc.set("loading", false));
+              });
+            }
+
+            return userCardInfos;
+        }
+
+      });
+    });
+  }
+}
diff --git a/javascripts/discourse/templates/users.hbs b/javascripts/discourse/templates/users.hbs
new file mode 100644
index 0000000..e576f2c
--- /dev/null
+++ b/javascripts/discourse/templates/users.hbs
@@ -0,0 +1,34 @@
+{{#d-section pageClass="users"}}
+  {{#load-more selector=".user-card-directory .user-card-container" action=(action "loadMore")}}
+    <div class="container">
+      <div class='directory'>
+        {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
+        <div class='clearfix'>
+          {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
+        </div>
+
+        {{#conditional-loading-spinner condition=model.loading}}
+          {{#if userCards.length}}
+          <div class="user-card-directory">
+            {{#each userCards as |userCard|}}
+              <div class="user-card-container">
+                {{user-card-static
+                  user=userCard.user
+                  visible=true
+                  loading=userCard.loading
+                  username=userCard.user.username
+                  }}
+              </div>
+            {{/each}}
+            </div>
+            {{conditional-loading-spinner condition=model.loadingMore}}
+          {{else}}
+            <div class='clearfix'></div>
+            <p>{{i18n "directory.no_results"}}</p>
+          {{/if}}
+        {{/conditional-loading-spinner}}
+
+      </div>
+    </div>
+  {{/load-more}}
+{{/d-section}}
diff --git a/locales/en.yml b/locales/en.yml
new file mode 100644
index 0000000..70619cd
--- /dev/null
+++ b/locales/en.yml
@@ -0,0 +1,3 @@
+en:
+  theme_metadata:
+    description: Replaces the user directory with a grid of user cards
\ No newline at end of file