Issue 3699 popover quick glance

app/app/urls.py

@@ -90,6 +90,7 @@
 
     # api views
     url(r'^api/v0.1/profile/(.*)?/keywords', dashboard.views.profile_keywords, name='profile_keywords'),
+    url(r'^api/v0.1/profile/(?P<handle>.*)', dashboard.views.profile_details, name='profile_details'),
     url(
         r'^api/v0.1/social_contribution_email',
         dashboard.views.social_contribution_email,

app/assets/v2/css/base.css

@@ -1587,6 +1587,10 @@ div.busyOverlay {
   max-width: 482px;
 }
 
+.popover_card {
+  border-radius: 5px;
+  border: 1px solid #E5E5E5;
+}
 /* Custom icons */
 
 .g-icon {

app/assets/v2/css/bounty.css

@@ -471,6 +471,30 @@ a.btn {
   margin-bottom: 2em;
 }
 
+.earned {
+  color: #8E2ABE;
+  font-size: 14px;
+  line-height: 13px;
+  font-weight: 600;
+}
+
+.username, .contributor-position, .in-progress, .current_status {
+  color: #0D0764;
+}
+
+.specialty {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 11px;
+}
+.completed-bounties {
+  color: #05B66A;
+}
+
+.abandoned-bounties, .removed-bounties {
+  color: #F5A623;
+}
+
 .code-snippet {
   background-color: #F2F6F9;
   padding: 1rem;

app/assets/v2/css/user_popover.css

@@ -0,0 +1,3 @@
+.popover-body {
+  padding: 0;
+}

app/assets/v2/js/user_popover.js

@@ -0,0 +1,124 @@
+let popoverData = [];
+
+const renderPopOverData = json => {
+  return `
+            <div class="popover-bounty__content">
+              <div class="d-flex justify-content-between mb-2">
+                <h2 class="title font-subheader font-weight-bold username">${
+  json.profile.handle
+}</h2>
+                <span class="text-muted specialty pt-2">Specialty: ${json.profile.keywords
+    .slice(0, 3)
+    .toString()}</span>
+                                  ${Object.keys(json.profile.organizations).map(
+    org =>
+      `<img src="/dynamic/avatar/${org}" alt="${org}" class="rounded-circle" width="24" height="24">`
+  )}
+              </div>
+              <span class="earned">~ ${
+  json.profile.total_earned
+} ETH earned</span>
+              <div class="statistics d-flex justify-content-between mt-2">
+                <div class="popover_card text-center mr-4 pt-2">
+                  <span class="contributor-position font-weight-semibold">#${
+  json.profile.position
+}</span>
+                  <p class="mt-2">Gitcoin Contributor</p>
+                </div>
+                <div class="contributions d-flex justify-content-between">
+                  <div class="popover_card text-center mr-2 pt-2">
+                    <span class="completed-bounties font-weight-semibold">${
+  json.statistics.work_completed
+}</span>
+                    <p class="mt-2">Bounties Completed</p>
+                  </div>
+                  <div class="popover_card text-center mr-2 pt-2">
+                    <span class="in-progress text-center font-weight-semibold">${
+  json.statistics.work_in_progress
+}</span>
+                    <p class="mt-2">Bounties In Progress</p>
+                  </div>
+                  <div class="popover_card text-center mr-2 pt-2">
+                    <span class="abandoned-bounties font-weight-semibold">${
+  json.statistics.work_abandoned
+}</span>
+                    <p class="mt-2">Bounties Abandoned</p>
+                  </div>
+                  <div class="popover_card text-center mr-2 pt-2">
+                    <span class="removed-bounties font-weight-semibold">${
+  json.statistics.work_removed
+}</span>
+                    <p class="mt-2">Bounties Removed</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="popover-bounty__footer">
+              <div class="d-flex justify-content-between">
+                <span class="title text-muted">Latest Activity
+                  <span class="current_status font-weight-semibold">${currentStatus(
+    json.recent_activity.activity_type
+  )}</span>
+                </span>
+                <span class="text-muted time-ago">${moment(
+    json.recent_activity.created,
+    'YYYYMMDD'
+  ).fromNow()}</span>
+              </div>
+              <p class="text-muted pt-2 activity-title">${
+  json.recent_activity.activity_metadata.title
+}</p>
+            </div>`;
+};
+
+const openContributorPopOver = (contributor, element) => {
+  let contributorURL = `/api/v0.1/profile/${contributor}`;
+
+  if (popoverData.filter(index => index[contributor]).length === 0) {
+    fetch(contributorURL, { method: 'GET' })
+      .then(response => response.json())
+      .then(response => {
+        element.popover({
+          placement: 'auto',
+          trigger: 'hover',
+          template:
+            '<div class="popover popover-bounty" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+          content: renderPopOverData(response),
+          html: true
+        });
+        $(element).popover('show');
+        popoverData.push({ [contributor]: response });
+      })
+      .catch(err => {
+        return _alert({ message: err }, 'error');
+      });
+  } else {
+    element.popover({
+      placement: 'auto',
+      trigger: 'hover',
+      template:
+        '<div class="popover popover-bounty" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+      content: renderPopOverData(
+        popoverData.filter(item => item[contributor])[0][contributor]
+      ),
+      html: true
+    });
+    $(element).popover('show');
+  }
+};
+
+const currentStatus = status => {
+  if (status === 'worker_applied') {
+    return 'Work Applied';
+  } else if (status === 'start_work') {
+    return 'Work Started';
+  } else if (status === 'worker_approved') {
+    return 'Worker Approved';
+  } else if (status === 'stop_work') {
+    return 'Stopped Work';
+  } else if (status === 'work_submitted') {
+    return 'Submitted Work';
+  }
+  return status;
+};

app/dashboard/models.py

@@ -2800,12 +2800,17 @@ def to_representation(self, instance):
             dict: The serialized Profile.
 
         """
+
         return {
             'id': instance.id,
             'handle': instance.handle,
             'github_url': instance.github_url,
             'avatar_url': instance.avatar_url,
-            'url': instance.get_relative_url()
+            'keywords': instance.keywords,
+            'url': instance.get_relative_url(),
+            'position': instance.get_contributor_leaderboard_index(),
+            'organizations': instance.get_who_works_with(),
+            'total_earned': instance.get_eth_sum()
         }
 
 

app/dashboard/templates/bounty/details.html

@@ -8,6 +8,7 @@
     <meta name="title" content="{{ card_title }} Bug Bounty | Gitcoin">
     <meta name="description" content="{{ card_desc | truncatechars:200 }}">
     <link rel="stylesheet" href="{% static "v2/css/bounty.css" %}">
+    <link rel="stylesheet" href="{% static "v2/css/user_popover.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/tag.css" %}">
   </head>
 
@@ -238,7 +239,7 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
       [[if activity_type != 'unknown_event']]
         <div class="row box activity">
           <div class="col-12 col-md-1">
-            <div class="activity-avatar">
+            <div class="activity-avatar bounty_row user-popover" data-username="[[:name]]" data-html="true" data-toggle="popover" data-container="body">
               <img class="avatar" src="/dynamic/avatar/[[:name]]"/>
             </div>
           </div>
@@ -448,13 +449,21 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
   <script src="{% static "v2/js/bootstrap.min.js" %}" crossorigin="anonymous"></script>
   <script src="{% static "v2/js/clipboard.js" %}"></script>
   <script>
-    var bootstrapTooltip = $.fn.tooltip.noConflict()
-    var bootstrapModal = $.fn.modal.noConflict()
-    $.fn.bootstrapModal = bootstrapModal
+    let bootstrapTooltip = $.fn.tooltip.noConflict()
+    let bootstrapModal = $.fn.modal.noConflict()
+  </script>
+  <script>
+    $.fn.runTooltip = bootstrapTooltip
+    $('[data-toggle="popover"]').popover()
+
+    $("body").on("mouseover", "[data-username] img", function(e) {
+      openContributorPopOver($(this).parent().data("username"), $(this));
+});
   </script>
   <script src="{% static "v2/js/pages/bounty_funder_payout_reminder.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_share.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_details.js" %}"></script>
+  <script src="{% static "v2/js/user_popover.js" %}"></script>
   <script src="{% static "v2/js/ipfs-api.js" %}"></script>
   <script src="{% static "v2/js/ipfs.js" %}"></script>
   <script src="{% static "v2/js/user-search.js" %}"></script>

app/dashboard/views.py

@@ -1566,9 +1566,44 @@ def quickstart(request):
     return TemplateResponse(request, 'quickstart.html', {})
 
 
-def profile_keywords(request, handle):
+def profile_details(request, handle):
     """Display profile keywords.
 
+    Args:
+        handle (str): The profile handle.
+
+    """
+    try:
+        profile = profile_helper(handle, True)
+        activity = Activity.objects.filter(profile=profile).order_by('-created_on').first()
+        count_work_completed = Activity.objects.filter(profile=profile, activity_type='work_done').count()
+        count_work_in_progress = Activity.objects.filter(profile=profile, activity_type='start_work').count()
+        count_work_abandoned = Activity.objects.filter(profile=profile, activity_type='stop_work').count()
+        count_work_removed = Activity.objects.filter(profile=profile, activity_type='bounty_removed_by_funder').count()
+
+    except (ProfileNotFoundException, ProfileHiddenException):
+        raise Http404
+
+    response = {
+        'profile': ProfileSerializer(profile).data,
+        'recent_activity': {
+            'activity_metadata': activity.metadata,
+            'activity_type': activity.activity_type,
+            'created': activity.created,
+        },
+        'statistics': {
+            'work_completed': count_work_completed,
+            'work_in_progress': count_work_in_progress,
+            'work_abandoned': count_work_abandoned,
+            'work_removed': count_work_removed
+        }
+    }
+    return JsonResponse(response, safe=False)
+
+
+def profile_keywords(request, handle):
+    """Display profile details.
+
     Args:
         handle (str): The profile handle.