From 321db95e31487caf6a1cbd641d1d1b6d70e20348 Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Mon, 1 May 2023 13:37:01 +0530
Subject: [PATCH] Add more visibility and control into the Admin Article page
 (#19345)

* Basic thumbsup, thumbsdown and vomit

* Refined UI of flags and vomits

* If check

* Optimised code and added a method in article.rb

* Removed public keyword

* Nit fixes
---
 app/assets/images/analytics.svg               |  3 ++
 app/models/article.rb                         |  6 +++-
 .../articles/_individual_article.html.erb     | 35 +++++++++++++++----
 3 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/images/analytics.svg

diff --git a/app/assets/images/analytics.svg b/app/assets/images/analytics.svg
new file mode 100644
index 000000000..15fee06f5
--- /dev/null
+++ b/app/assets/images/analytics.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="23" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6.99967H2.66667V12.9997H0V6.99967ZM9.33333 4.33301H12V12.9997H9.33333V4.33301ZM4.66667 0.333008H7.33333V12.9997H4.66667V0.333008Z" fill="#262626"/>
+</svg>
diff --git a/app/models/article.rb b/app/models/article.rb
index be9d12b4c..af55f08a8 100644
--- a/app/models/article.rb
+++ b/app/models/article.rb
@@ -332,7 +332,7 @@ class Article < ApplicationRecord
            :video, :user_id, :organization_id, :video_source_url, :video_code,
            :video_thumbnail_url, :video_closed_caption_track_url, :social_image,
            :published_from_feed, :crossposted_at, :published_at, :created_at,
-           :body_markdown, :email_digest_eligible, :processed_html, :co_author_ids)
+           :body_markdown, :email_digest_eligible, :processed_html, :co_author_ids, :score)
   }
 
   scope :sorting, lambda { |value|
@@ -598,6 +598,10 @@ class Article < ApplicationRecord
       score < -1
   end
 
+  def privileged_reaction_counts
+    @privileged_reaction_counts ||= reactions.privileged_category.group(:category).count
+  end
+
   private
 
   def collection_cleanup
diff --git a/app/views/admin/articles/_individual_article.html.erb b/app/views/admin/articles/_individual_article.html.erb
index e165cc131..311470e83 100644
--- a/app/views/admin/articles/_individual_article.html.erb
+++ b/app/views/admin/articles/_individual_article.html.erb
@@ -40,18 +40,41 @@
       </a>
     <% end %>
 
-    <h2 class="crayons-subtitle-1">
-      <a href="<%= article.path %>" target="_blank" rel="noopener" class="c-link c-link--branded">
-        <%= article.title %>
-      </a>
-    </h2>
+    <div class="flex justify-between gap-4 items-center">
+      <h2 class="crayons-subtitle-1">
+        <a href="<%= article.path %>" target="_blank" rel="noopener" class="c-link c-link--branded">
+          <%= article.title %>
+        </a>
+      </h2>
+      <div class="flex items-center gap-1">        
+        <span class="crayons-card crayons-card--secondary px-3 py-1 flex gap-2 items-center">
+          <%= crayons_icon_tag("twemoji/thumb-up", native: true, title: t("views.moderations.actions.thumb_up"), width: 16, height: 16) %>
+          <span class="fs-s fw-medium lh-base"><%= article.privileged_reaction_counts['thumbsup'] || '0' %></span>
+        </span>
+
+        <span class="crayons-card crayons-card--secondary px-3 py-1 flex gap-2 items-center">
+          <%= crayons_icon_tag("twemoji/thumb-down", native: true, title: t("views.moderations.actions.thumb_down"), width: 16, height: 16) %>
+          <span class="fs-s fw-medium lh-base"><%= article.privileged_reaction_counts['thumbsdown'] || '0' %></span>
+        </span>
+
+        <span class="crayons-card crayons-card--secondary px-3 py-1 flex gap-2 items-center">
+          <%= crayons_icon_tag("twemoji/suspicious", native: true, title: "Vomit", width: 16, height: 16) %>
+          <span class="fs-s fw-medium lh-base"><%= article.privileged_reaction_counts['vomit'] || '0' %></span>
+        </span>
+        
+        <span class="crayons-card crayons-card--secondary px-3 py-1 ml-3 flex gap-2 items-center">
+          <%= crayons_icon_tag("analytics", native: true, title: "Score", width: 16, height: 16) %>
+          <span class="fs-s fw-medium lh-base"><%= article.score %></span>
+        </span>
+      </div>
+    </div>
 
     <div class="-ml-1 fs-s flex items-center gap-4">
       <div class="flex gap-px">
         <% decorated_article.cached_tag_list_array.each do |tag| %>
           <a class="crayons-tag crayons-tag--monochrome" href='<%= tag_path(tag) %>'><span class="crayons-tag__prefix">#</span><%= tag %></a>
         <% end %>
-      </div>
+      </div>  
 
       <span>❤️&nbsp;<%= article.public_reactions_count %> likes</span>
       <span>💬&nbsp;<%= article.comments_count %> comments</span>