From dc1836573d96768b4cc685c52c2c15aeac9f069e Mon Sep 17 00:00:00 2001
From: Vinoth Kannan <vinothkannan@vinkas.com>
Date: Tue, 24 Mar 2020 01:13:25 +0530
Subject: [PATCH] UX: display avatar flair in categories route topic list items
 (#9197)

---
 app/assets/javascripts/discourse/models/topic.js   | 14 ++++++++++++--
 .../components/latest-topic-list-item.hbs          | 11 +++++++++--
 .../templates/mobile/list/topic-list-item.hbr      |  2 +-
 .../stylesheets/desktop/latest-topic-list.scss     |  6 ++++++
 .../category_and_topic_lists_serializer.rb         | 11 +++++++++++
 5 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/models/topic.js b/app/assets/javascripts/discourse/models/topic.js
index a3c9ee26c66..ea118dbc7af 100644
--- a/app/assets/javascripts/discourse/models/topic.js
+++ b/app/assets/javascripts/discourse/models/topic.js
@@ -63,9 +63,19 @@ const Topic = RestModel.extend({
       const latest = posters.filter(
         p => p.extras && p.extras.indexOf("latest") >= 0
       )[0];
-      user = latest && latest.user;
+      user = latest;
     }
-    return user || this.creator;
+    return user || posters.firstObject;
+  },
+
+  @discourseComputed("lastPoster")
+  lastPosterUser(poster) {
+    return poster.user;
+  },
+
+  @discourseComputed("lastPoster")
+  lastPosterGroup(poster) {
+    return poster.primary_group;
   },
 
   @discourseComputed("posters.[]", "participants.[]", "allowed_user_count")
diff --git a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
index a1f459f725f..c071eaaef14 100644
--- a/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/latest-topic-list-item.hbs
@@ -1,7 +1,14 @@
 <div class='topic-poster'>
-  {{#user-link user=topic.lastPoster}}
-    {{avatar topic.lastPoster imageSize="large"}}
+  {{#user-link user=topic.lastPosterUser}}
+    {{avatar topic.lastPosterUser imageSize="large"}}
   {{/user-link}}
+  {{#if topic.lastPosterGroup}}
+    {{avatar-flair
+      flairURL=topic.lastPosterGroup.flair_url
+      flairBgColor=topic.lastPosterGroup.flair_bg_color
+      flairColor=topic.lastPosterGroup.flair_color
+      groupName=topic.lastPosterGroup.name}}
+  {{/if}}
 </div>
 <div class='main-link'>
   <div class='top-row'>
diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr b/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
index 727c8382d89..07acb21db6a 100644
--- a/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
@@ -1,7 +1,7 @@
 <td>
   {{~#unless expandPinned}}
   <div class='pull-left'>
-    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster imageSize="large"}}</a>
+    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
   </div>
   <div class='right'>
     {{else}}
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index 490023dc6f3..6169e0830fb 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -21,7 +21,13 @@
   align-items: center;
 
   .topic-poster {
+    position: relative;
     width: 60px;
+    .avatar-flair {
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+    }
   }
   .main-link {
     @extend .topic-list-main-link;
diff --git a/app/serializers/category_and_topic_lists_serializer.rb b/app/serializers/category_and_topic_lists_serializer.rb
index 568ac1255ad..edea6be090c 100644
--- a/app/serializers/category_and_topic_lists_serializer.rb
+++ b/app/serializers/category_and_topic_lists_serializer.rb
@@ -4,6 +4,7 @@ class CategoryAndTopicListsSerializer < ApplicationSerializer
   has_one :category_list, serializer: CategoryListSerializer, embed: :objects
   has_one :topic_list, serializer: TopicListSerializer, embed: :objects
   has_many :users, serializer: BasicUserSerializer, embed: :objects
+  has_many :primary_groups, serializer: PrimaryGroupSerializer, embed: :objects
 
   def users
     users = object.topic_list.topics.map do |t|
@@ -15,4 +16,14 @@ class CategoryAndTopicListsSerializer < ApplicationSerializer
     users
   end
 
+  def primary_groups
+    groups = object.topic_list.topics.map do |t|
+      t.posters.map { |poster| poster.try(:primary_group) }
+    end
+    groups.flatten!
+    groups.compact!
+    groups.uniq!(&:id)
+    groups
+  end
+
 end