WIP #217 #218 #219 Use ActivityPanelComponent on homepage

app/components/activity_panel_component.html.erb

@@ -1,9 +1,13 @@
-<div class="bg-gray-200 shadow-lg rounded-lg">
-  <div class="border-b border-gray-200 px-2 py-2">
-    <a href="<%= user_path(@review.user) %>"><img class="inline-block h-14 w-14 rounded-full" src="<%= @review.user.avatar_image %>" alt=""></a>
-    <a href="<%= user_path(@review.user) %>"><b><%= @review.user.nickname %></b></a> <%= @review.display_status %>
+<div class="bg-purple-50 shadow-lg rounded-lg">
+  <div class="border-b border-purple-200 px-2 py-4">
+    <a href="<%= user_path(@review.user) %>"><img class="inline-block h-8 w-8 rounded-full" src="<%= @review.user.avatar_image %>" alt=""></a>
+    <a href="<%= user_path(@review.user) %>" class="border-dashed border-b border-transparent hover:border-purple-500"><b><%= @review.user.nickname %></b></a> <%= @review.display_status %> 
+    a <%= ItemType.display_name_singular(@review.item.item_type_id) %> in 
+    <% @review.item.topics.each do |topic| %>
+      <a href='<%= topic_path(topic) %>' class="flex-shrink-0 px-1 py-0.5 text-purple-500 bg-purple-100 border border-purple-200 rounded hover:bg-purple-200 hover:text-black font-semibold"><%= topic.display_name %></a>
+    <% end %>
   </div>
   <div class="bg-white rounded-b-lg">
-    <%= render ItemPanelComponent.new(item: @review.item, user: @user, hide_item_type: true, hide_topics: true) %>
+    <%= render ItemPanelComponent.new(item: @review.item, user: @user, is_embedded: true) %>
   </div>
 </div>

app/components/five_star_component.html.erb

@@ -1,6 +1,8 @@
+<div class="min-w-max-content border border-gray-300 rounded flex flex-row items-stretch bg-white shadow-md review-rating-<%= @review.item.id %>">
+
 <%= form_with(
   model: @review, 
-  class: "text-2xl px-3 pr-4 flex-1 flex justify-center items-center min-w-max-content border bg-red-100 border-yellow-300 rounded review-rating-#{@review.item.id}",
+  class: "text-2xl px-3 pr-4 flex-1 flex justify-center items-center min-w-max-content border bg-red-100 border-yellow-300 rounded",
   html: {
     "x-data" => "{ val: #{@review.overall_score.to_json}, orig: #{@review.overall_score.to_json} }", 
     "@click" => "orig = val; $nextTick(() => { Rails.fire($el,'submit') });",
@@ -11,16 +13,25 @@
 
   <input type="number" name="review[overall_score]" :value="orig" class="hidden" />
 
-  <span class="cursor-pointer text-gray-400 hover:text-gray-700 px-1" @mouseenter="val = null" @mouseleave="val = orig">×</span>
+  <% if @review.overall_score %>
+  <span class="cursor-pointer text-gray-400 hover:text-gray-700 px-1" @mouseenter="val = null" @mouseleave="val = orig" title="clear your rating">×</span>
+  <% end %>
 
 
   <template x-for="item in [1,2,3,4,5]">
     <span 
       @mouseenter="val = item" 
       @mouseleave="val = orig"
       class="cursor-pointer text-gray-300"
-      :class="{'text-yellow-400': (val >= item)}">★</span>
+      :class="{'text-yellow-400': (val >= item)}" title="add your rating">★</span>
   </template>
 
   <input type="hidden" name="review[item_id]" value="<%= @review.item_id %>" />
-<% end %>
+<% end %>
+
+<div class="px-2 flex flex-col">
+  <div class="text-base font-semibold text-yellow-400">★ <span class="text-gray-900"><%= @review.item.overall_score || "-" %></span></div>
+  <div class="text-xs leading-none whitespace-pre font-normal text-gray-500"><%= pluralize(@review.item.reviews.with_rating.count, "rating") %></div>
+</div>
+
+</div>

app/components/item_panel_component.html.erb

@@ -1,20 +1,19 @@
 <main class="bg-white shadow-xl rounded-lg">
 
-<article class="px-4 py-5 sm:p-6">
+<article class="px-4 py-4">
 
+  <% if !@is_embedded %>
   <div class="mb-4 text-sm text-gray-900">
-    <% unless @hide_item_type %>
     <a href="/item_types/<%= @item.item_type_id %>" class="text-gray-500 hover:text-black font-semibold">
-      <%= ItemType.display_name_singular(@item.item_type_id) %>
+      <%= ItemType.display_name_singular(@item.item_type_id).capitalize %>
     </a>
     <span class="text-gray-400 mx-1">in</span>
-    <% end %>
-    <% unless @hide_topics %>
-      <% @item.topics.each do |topic| %>
-        <a href='<%= topic_path(topic) %>' class="flex-shrink-0 px-1 py-0.5 text-gray-500 bg-gray-100 border border-gray-200 rounded hover:bg-gray-200 hover:text-black font-semibold"><%= topic.display_name %></a>
-      <% end %>
+
+    <% @item.topics.each do |topic| %>
+      <a href='<%= topic_path(topic) %>' class="flex-shrink-0 px-1 py-0.5 text-gray-500 bg-gray-100 border border-gray-200 rounded hover:bg-gray-200 hover:text-black font-semibold"><%= topic.display_name %></a>
     <% end %>
   </div>
+  <% end %>
 
   <% if !@item.image_might_be_landscape? && @item.image_url.present? %>
     <!-- non-video (book) with a cover image -->
@@ -26,8 +25,8 @@
 
   <% if @item.primary_link %>
   <a href="<%= @item.primary_link.url %>" target='_blank' class="">
-      <h1 class="inline text-xl font-bold"><%= @item.display_name %></h1>
-      <p class="inline whitespace-nowrap">
+      <h1 class="inline text-xl font-bold border-dashed border-b border-transparent hover:border-purple-500"><%= @item.display_name %></h1>
+      <p class="inline whitespace-no-wrap">
         <span class="text-gray-500 text-sm">
           (<%= @item.primary_link.top_domain %>)
         </span>
@@ -42,7 +41,20 @@
   <h1 class="text-xl font-bold"><%= @item.display_name %></h1>
   <% end %>
 
-  <p class="my-2"><%= @item.authors.map { |au| link_to(au.name, au, class: "text-purple-600 hover:text-purple-800 tracking-light") }.to_sentence.html_safe %></p>
+  <p class="my-2">
+  <% @item.authors.each do |au| %>
+    <%= link_to(au, class: "text-purple-600 hover:text-purple-800 tracking-light") do %>
+      <% if au.image_url.present? %>
+          <img src="<%= au.image_url %>" alt="<%= au.name %>" class="inline h-8 w-8 rounded-full object-cover object-center">
+      <% else %>
+      <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-purple-900">
+          <span class="text-sm font-bold leading-none text-white"><%= au.initials %></span>
+      </span>
+      <% end %>
+      <span class="mr-4"><%= au.name %></span>
+    <% end %>
+  <% end %>
+  </p>
 
   <% if @item.embed_url %>
     <iframe width="100%" height="500" class="w-full" src="<%= @item.embed_url %>"></iframe>
@@ -56,13 +68,12 @@
   </p>
   <% end %>
 
-  <div class="text-justify text-sm text-gray-500 prose max-w-full"><%= @item.display_description %></div>
+  <div class="text-justify text-sm text-gray-500 prose max-w-full">
+      <%= @item.display_description %>
+  </div>
 
   <div class="clear-both mt-6 flex flex-col space-y-2 sm:flex-row sm:justify-between sm:items-stretch sm:space-y-0 sm:space-x-2">
-    <div class="min-w-max-content border border-gray-300 rounded flex flex-row items-stretch bg-white shadow-md">
-        <%= render FiveStarComponent.new(review: Review.find_or_initialize_by(item_id: @item.id, user: @user)) %>
-        <%= render StarRatingComponent.new(item: @item) %>
-    </div>
+    <%= render FiveStarComponent.new(review: Review.find_or_initialize_by(item_id: @item.id, user: @user)) %>
     <%= render SplitButtonComponent.new(item: @item, user: @user, isopen: false) %>
   </div>
 
@@ -123,9 +134,9 @@
 
 <!-- card footer -->
 <footer class="bg-gray-50 rounded-b-lg px-4 py-4 sm:px-6 flex flex-wrap items-center">
-  <div class="text-xs text-gray-500 hover:text-gray-700">
-    Added <% if @item.user %>by <%= link_to @item.user.nickname, @item.user, class: "hover:underline" %><% end %> 
-    <%= link_to (time_ago_in_words(@item.created_at) + " ago"), @item, class: "hover:underline", title: @item.created_at.to_s %>
+  <div class="text-xs text-gray-500">
+    Added <% if @item.user %>by <%= link_to @item.user.nickname, @item.user, class: "hover:underline hover:text-gray-700" %><% end %> 
+    <%= link_to (time_ago_in_words(@item.created_at) + " ago"), @item, class: "hover:underline hover:text-gray-700", title: @item.created_at.to_s %>
   </div>
   <div x-data="{ isopen: false }" class="relative flex flex-grow justify-end space-x-4">
     <button @click="isopen = !isopen" aria-haspopup="true" class="w-8 h-8 bg-gray-50 inline-flex items-center justify-center text-gray-400 rounded-full hover:text-gray-500 hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">

app/components/item_panel_component.rb

@@ -1,9 +1,7 @@
 class ItemPanelComponent < ViewComponent::Base
-  def initialize(item:, user:, hide_item_type: false, hide_topics: false, is_embedded: false)
+  def initialize(item:, user:, is_embedded: false)
     @item = item
     @user = user
-    @hide_item_type = hide_item_type
-    @hide_topics = hide_topics
     @is_embedded = is_embedded
     @reviews = (@item.reviews.where("notes is not null").take(2) + @item.idea_set.recommendations.where("notes is not null").take(2)).select { |r| r.notes.presence }
   end

app/controllers/reviews_controller.rb

@@ -20,6 +20,11 @@ def update
 			else
 				@review.status = params[:review][:status]
 			end
+		else # status not passed in request but might change due to rating
+			if params[:review].has_key?(:overall_score) and @review.overall_score.nil? and @review.status.nil?
+				# rating changing from null to something
+				@review.status = 'learned'
+			end
 		end
 		@review.inspirational_score = params[:review][:inspirational_score] if params[:review].has_key?(:inspirational_score)
 		@review.educational_score = params[:review][:educational_score] if params[:review].has_key?(:educational_score)
@@ -62,6 +67,14 @@ def create
 		@review.overall_score = params[:review][:overall_score]
 		@review.notes = params[:review][:notes]
 		@review.private_notes = params[:review][:private_notes]
+
+		unless params[:review].has_key?(:status) # status not passed in request but might change due to rating
+			if params[:review].has_key?(:overall_score)
+				# rating changing from null to something
+				@review.status = 'learned'
+			end
+		end
+
 		respond_to do |format|
 			if @review.save
 				format.html { redirect_to item_path(@review.item) }

app/models/item.rb

@@ -106,6 +106,10 @@ def authors
     self.idea_set.person_idea_sets.where(role: 'creator').collect(&:person)
   end
 
+  def creators
+    self.idea_set.person_idea_sets.where(role: 'creator').collect(&:person)
+  end
+
   def as_json(options = {})
     {
       id: self.id,

app/models/item_type.rb

@@ -36,13 +36,14 @@ def icon
 
 	def self.display_name_singular(item_type_id)
 		{
-			'cert' => "Certification",
-			'chat' => 'Forum',
-			'learning_plan' => 'Syllabus',
+			'cert' => "certification",
+			'chat' => 'forum',
+			'learning_plan' => 'syllabus',
 			'qna' => "Q&A site",
-			'thing' => "Thing or Toy",
-			'webconf' => "Online conference",
-			'webmeet' => "Online meetup"
-		}[item_type_id.to_sym] || item_type_id.capitalize
+			'thing' => "thing or toy",
+			'webconf' => "online conference",
+			'webmeet' => "online meetup",
+			'flashcard' => "flashcard deck"
+		}[item_type_id] || item_type_id.sub("_"," ")
 	end
 end

app/models/person.rb

@@ -61,6 +61,10 @@ def display_name
 		self.name
 	end
 
+	def initials
+		self.name.split(" ")[0..1].flatten.map(&:first).join
+	end
+
 	def to_param
 		self.id.to_s + "-" + self.name.to_s.parameterize
 	end

app/models/review.rb

@@ -50,7 +50,10 @@ def update_item_ratings
   		avg_score = self.item.reviews.where("#{quality_score} is not null").average(quality_score)
   		self.item.write_attribute(quality_score, avg_score.to_f) if avg_score
   		self.item.save
-  	end
+    end
+    avg_score = self.item.reviews.where("overall_score is not null").average(:overall_score)
+    self.item.overall_score = avg_score
+    self.item.save
   end
 
   def update_points
@@ -150,9 +153,13 @@ def self.display_rating(score)
   end
 
   def display_status
-    return "wants to learn" if self.status.to_s == 'want_to_learn'
-    return "started learning" if self.status.to_s == 'learning'
-    return "finished learning" if self.status.to_s == 'learned'
+    msg = ""
+    msg = "wants to learn" if self.status.to_s == 'want_to_learn'
+    msg = "started learning" if self.status.to_s == 'learning'
+    msg = "finished learning" if self.status.to_s == 'learned'
+    msg += " and" if msg.present? and self.overall_score.present?
+    msg += (" rated " + ("★" * self.overall_score.to_i) + ("☆" * (5 - self.overall_score.to_i))) if self.overall_score.present?
+    return msg
   end
 
   def display_rating

app/views/dashboard/show.html+tailwind.erb

@@ -11,71 +11,24 @@
 	<% end %>
 
 </div>
-<% else %>
-
-<div class="bg-white rounded-lg shadow-lg">
-  <div class="max-w-screen-xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
-      Lifelong learning with friends
-    </h2>
-    <h4 class="mt-4 font-regular tracking-tight text-gray-600"> 
-		<% if current_user.try(:can_see_metrics?) %>
-		  <%= Topic.count %> topics.
-		  <%= ItemType.count %> formats.
-		  <%= Item.count %> learning resources.
-		  <%= User.count %> users.
-		  <%= Review.count %> reviews.
-		<% end %><br/>
-		Find new sources of knowledge curated by lifelong learners like you. Discover leading experts and great content like talks, books, articles and podcasts. Share with friends and like-minded peers.
-    </h4>
-    <div class="mt-8 flex justify-center">
-      <div class="inline-flex rounded-md shadow">
-        <a href="/topics" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
-          Explore Topics
-        </a>
-      </div>
-      <div class="ml-3 inline-flex">
-        <a href="/about" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out">
-          Learn more
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
 
 <% end %>
 
-<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4 mt-4 font-semibold">Join our peer learning groups</h3>
-
-<div class="overflow-auto whitespace-no-wrap md:grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:overflow-hidden md:gap-6 mb-4">
-
-			<%= link_to Item.find_by_name('Syllabus: Machine Learning for Managers'), class:"inline-block max-w-xs rounded-md overflow-hidden mr-3 md:mr-0 transition duration-200 transform hover:scale-105" do %>
-				<img src="https://images.unsplash.com/photo-1521185496955-15097b20c5fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" alt="machine-learning" class="w-full h-24 object-cover object-center">
-				<h1 class="bg-gray-800 py-2 px-4 text-white font-semibold text-lg">Machine Learning for Managers</h1>
-			<% end %>
-			<%= link_to Item.find_by_name('Syllabus: Scratch programming for kids'), class:"inline-block max-w-xs rounded-md overflow-hidden mr-3 md:mr-0 transition duration-200 transform hover:scale-105" do %>
-				<img src="https://images.unsplash.com/photo-1584697964190-7383cbee8277?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" alt="scratch-programming" class="w-full h-24 object-cover object-center">
-				<h1 class="bg-gray-800 py-2 px-4 text-white font-semibold text-lg">Scratch Programming for Kids</h1>
-			<% end %>
-			<%= link_to Item.find_by_name('Syllabus: Personal Finance'), class:"inline-block max-w-xs rounded-md overflow-hidden mr-3 md:mr-0 transition duration-200 transform hover:scale-105" do %>
-				<img src="https://images.unsplash.com/photo-1550565118-3a14e8d0386f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" alt="personal finance" class="w-full h-24 object-cover object-center">
-				<h1 class="bg-gray-800 py-2 px-4 text-white font-semibold text-lg">Personal Finance</h1>
-			<% end %>
-			<!-- <%= link_to Item.find_by_name('Syllabus: Cooking with Food Science'), class:"inline-block max-w-xs rounded-md overflow-hidden mr-3 md:mr-0 transition duration-200 transform hover:scale-105" do %>
-				<img src="https://images.unsplash.com/photo-1466637574441-749b8f19452f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" alt="cooking" class="w-full h-24 object-cover object-center">
-				<h1 class="bg-gray-800 py-2 px-4 text-white font-semibold text-lg">Cooking with Food Science</h1>
-			<% end %> -->
-			<%= link_to Item.find_by_name('Syllabus: Fiction Writing for Beginners'), class:"inline-block max-w-xs rounded-md overflow-hidden mr-3 md:mr-0 transition duration-200 transform hover:scale-105" do %>
-				<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" alt="fiction-writing" class="w-full h-24 object-cover object-center">
-				<h1 class="bg-gray-800 py-2 px-4 text-white font-semibold text-lg">Fiction Writing for Beginners</h1>
-			<% end %>
-
-</div>
 
 <% if @following_reviews.any? %>
 <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4 font-semibold">Activity</h3>
 
-<div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-4 lg:max-w-none mb-4">
-    <%= render partial: 'dashboard/review', collection: @following_reviews %>
+<div class="my-4 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-6 lg:max-w-full lg:grid-flow-col-dense lg:grid-cols-3">
+	<section class="space-y-6 lg:col-start-1 lg:col-span-2" aria-labelledby="applicant-information-title">
+	  <% @following_reviews.each do |rev| %>
+		<%= render ActivityPanelComponent.new(review: rev, user: current_user) %>
+	  <% end %>
+	</section>
+
+	<!-- <section aria-labelledby="timeline-title" class="lg:col-start-3 lg:col-span-1">
+		<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6 mb-8">
+			<p>Aside</p>
+		</div>
+	</section> -->
 </div>
 <% end %>