Fix tagging user profiles and add JS ajax function (publiclab#6886)

* add correct url to user tag form and add test for adding user tag with JS

* fix styling of delete button on badges in tags

* uncomment tests

app/assets/javascripts/tagging.js

@@ -47,7 +47,7 @@ function initTagForm(deletion_path, selector) {
       var tag_id = tag[1];
       $('.tags-list:first').append("<p id='tag_"+tag_id+"' class='badge badge-primary'> \
         <a class='tag-name' style='color:white;' href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
-        data-remote='true' href='"+deletion_path+"/"+tag_id+"' style='color:white' data-tag-id='"+tag_id+"' \
+        data-remote='true' href='"+deletion_path+"/"+tag_id+"' data-tag-id='"+tag_id+"' \
         data-method='delete'><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a></p> ")
       el.find('.tag-input').val("")
       el.find('.control-group').removeClass('has-error')

app/assets/stylesheets/tags.css

@@ -7,3 +7,16 @@
 .popover-content {
   padding: 9px 14px;
 }
+
+.tags-list .badge a {
+  color: white;
+}
+
+.tags-list .badge i {
+  margin-left: 0;
+}
+
+.tags-list i:hover{
+  transition-duration: .2s;
+  transform: scale(1.2);
+}

app/views/tag/_tagging.html.erb

@@ -52,7 +52,7 @@ $(function () {
   <span style="float:left;color:#666;margin-top:14px;margin-left:5px;">Add tags</a> 
 <% end %>
 
-<%= render partial: 'tag/form', locals: { node: @node ||= nil, user: user ||= nil } %>
+<%= render partial: 'tag/form', locals: { node: @node ||= nil, user: user ||= nil, url: url ||= nil } %>
 
 <% end %>
 

app/views/tag/_tags.html.erb

@@ -14,13 +14,13 @@
         <a class="show-more-tags" href="javascript:void(0);"><p style="float:left; color:#666; margin-top:14px; margin-left:5px;"><u><%= tags.length - 2 %> more</u> &nbsp </p></a>
       <% end %>
 
-      <p class="badge <%= badge_name %> pop more-tags" style="display:none;cursor:pointer;margin-bottom:3px;" id="tag_<%= tag.tid %>" data-toggle="popover" data-trigger="focus" data-count=0 data-placement="top" data-content="<p style='text-align:center;'><a href='/tag/<%= tag.name %>'><%= Tag.tagged_node_count(tag.name) || 0 %> notes</a> - <a href='/contributors/<%= tag.name %>'><%= Tag.contributors(tag.name).count %> people <br></a></p> <p style='text-align:center;font-size:12px;'><%if tag.description %><%= tag.description %> |<% end %> created by <a href='/profile/<%= tag.try(:author).try(:username) %>'><%= tag.try(:author).try(:username) %></a> <%= time_ago_in_words(Time.at(tag.date)) %> ago </p><div style='text-align:center;' class='text-center'><a href='/subscribe/tag/<%= tag.name %>' class='btn btn-primary'>Follow</a></div>" data-html="true" title="<%= tag.name %>">
-       <%= tag.name %>
+      <p class="badge <%= badge_name %> pop more-tags" style="display:none;cursor:pointer;margin-bottom:3px;" id="tag_<%= tag.tid %>" data-toggle="popover" data-trigger="focus" data-count=0 data-placement="top" data-content="<p style='text-align:center;'><a href='/tag/<%= tag.name %>'><%= Tag.tagged_node_count(tag.name) || 0 %> notes</a> - <a href='/contributors/<%= tag.name %>'><%= Tag.contributors(tag.name).count %> people <br></a></p> <p style='text-align:center;font-size:12px;'><%if tag.description %><%= tag.description %> |<% end %> created by <a href='/profile/<%= tag.try(:author).try(:username) %>'><%= tag.try(:author).try(:username) %></a> <%= time_ago_in_words(Time.at(tag.date)) %> ago </p><div class='text-center'><a href='/subscribe/tag/<%= tag.name %>' class='btn btn-primary'>Follow</a></div>" data-html="true" title="<%= tag.name %>">
+        <a class='tag-name' href='/tag/<%= tag.name %>'><%= tag.name %></a>
         <% if logged_in_as(['admin', 'moderator']) || (current_user && ( current_user.uid ==  @node.uid || current_user.uid == tag.uid)) %>
           <% if tag.name.include? ':' %>
-            <a data-confirm="This is a power tag (see https://publiclab.org/wiki/power-tags) -- and may drive a specific function on this page. Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete" style="color:white;">x</a>
+            <a data-confirm="This is a power tag (see https://publiclab.org/wiki/power-tags) -- and may drive a specific function on this page. Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete"><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a>
           <% else %>
-            <a data-confirm="Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete" style="color:white">x</a>
+            <a data-confirm="Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/tag/delete/<%= @node.id %>/<%= tag.tid %>" data-tag-id="<%= tag.tid %>" data-method="delete"><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a>
           <% end %>
         <% end %>
       </p>
@@ -38,16 +38,20 @@
 
   <% elsif tag.class == UserTag && (tag.name[0..4] != "oauth" || (logged_in_as(['admin', 'moderator']) || (current_user && current_user.uid == tag.uid))) %>
 
-    <li style="width: 100%;"><span id="tag_<%= tag.id %>" class="badge <%= badge_name %> pop" style="cursor:pointer" data-toggle="popover" data-trigger="manual" data-count=0 data-placement="top" data-content="<a href='/contributors/<%= tag.name %>'><%= Tag.tagged_node_count(tag.name) || 0 %> notes - <%= Tag.contributors(tag.name).count %> people <br></a>" data-html="true" title="<%= tag.name %>">
-      <% if tag.name[0..4] != "oauth" %>
-        <%= tag.name %>
-      <% else %>
-        <%= tag.name[0..5] + tag.name.split(':')[1] %>
-      <% end %>
+    <li style="width: 100%;">
+    <span id="tag_<%= tag.id %>" class="badge <%= badge_name %> pop" style="cursor:pointer" data-toggle="popover" data-trigger="manual" data-count=0 data-placement="top" data-content="<a href='/contributors/<%= tag.name %>'><%= Tag.tagged_node_count(tag.name) || 0 %> notes - <%= Tag.contributors(tag.name).count %> people <br></a>" data-html="true" title="<%= tag.name %>">
+      <a class='tag-name' href='/tag/<%= tag.name %>'>
+        <% if tag.name[0..4] != "oauth" %>
+          <%= tag.name %>
+        <% else %>
+          <%= tag.name[0..5] + tag.name.split(':')[1] %>
+        <% end %>
+      </a>
       <% if logged_in_as(['admin', 'moderator']) || (current_user && current_user.uid == tag.uid) %>
-        <a data-confirm="Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/profile/tags/delete/<%= user.id %>?name=<%= tag.name %>" data-method="delete">x</a>
+        <a data-confirm="Are you sure you want to delete it?" class="tag-delete" data-remote="true" href="/profile/tags/delete/<%= user.id %>?name=<%= tag.name %>" data-method="delete"><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a>
       <% end %>
-    </span></li>
+    </span>
+    </li>
 
   <% end %>
 <% end %>

test/system/tag_test.rb

@@ -45,4 +45,29 @@ class TagTest < ApplicationSystemTestCase
 
   end
 
+  test 'adding a tag to a user profile' do
+    visit '/'
+
+    click_on 'Login'
+
+    fill_in("username-login", with: "jeff")
+    fill_in("password-signup", with: "secretive")
+    click_on "Log in"
+
+    visit "/profile/jeff"
+
+    # run the javascript function
+    page.evaluate_script("addTag('specialgroup', '/profile/tags/create/2')")
+
+    visit "/profile/jeff" # refresh page
+
+    find('#tags-section').click
+
+    # check that the tag showed up on the page - check last tag in list
+    within('.tags-list') do
+      assert_equal('specialgroup', all('.tag-name').last.text.rstrip.lstrip)
+    end
+
+  end
+
 end