[SCI-3166] Finalize global activities front end

app/assets/javascripts/global_activities/index.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-(function() {
+function globalActivitiesInit() {
   function initExpandCollapseAllButtons() {
     $('#global-activities-colapse-all').on('click', function() {
       $('.activities-group').collapse('hide');
@@ -13,40 +13,49 @@
   }
 
   function initExpandCollapseButton() {
-    $('.activities-group').on('hide.bs.collapse', function() {
+    $('.activities-group').on('hidden.bs.collapse', function() {
       $(this.dataset.buttonLink)
         .find('.fas').removeClass('fa-caret-down').addClass('fa-caret-right');
     });
-    $('.activities-group').on('show.bs.collapse', function() {
+    $('.activities-group').on('shown.bs.collapse', function() {
       $(this.dataset.buttonLink)
         .find('.fas').removeClass('fa-caret-right').addClass('fa-caret-down');
     });
   }
-
   function initShowMoreButton() {
     var moreButton = $('.btn-more-activities');
     moreButton.on('click', function(ev) {
+      var filters = GlobalActivitiesFilterPrepareArray();
       ev.preventDefault();
       animateSpinner(null, true);
+      filters.to_date = moreButton.data('next-date');
       $.ajax({
-        url: $('.global-activities_activities-list').data('activities-url'),
-        data: { from_date: moreButton.data('next-date') },
+        url: $('.ga-activities-list').data('activities-url'),
+        data: filters,
         dataType: 'json',
         type: 'POST',
         success: function(json) {
-          $('.global-activities_activities-list').html(json.activities_html);
+          $(json.activities_html).appendTo('.ga-activities-list');
           if (json.more_activities === true) {
-            moreButton.data('next-date', json.next_date);
+            moreButton.data('next-date', json.from);
           } else {
             moreButton.addClass('hidden');
           }
+          (new globalActivitiesInit()).updateCollapseButton();
           animateSpinner(null, false);
         }
       });
     });
   }
+  if (this) {
+    this.updateCollapseButton = function() {
+      initExpandCollapseButton();
+    };
+  }
 
   initExpandCollapseAllButtons();
   initExpandCollapseButton();
   initShowMoreButton();
-}());
+}
+
+globalActivitiesInit();

app/assets/javascripts/global_activities/side_pane.js

@@ -64,6 +64,7 @@ function GlobalActivitiesUpdateTopPaneTags(event) {
 }
 
 $(function() {
+  var updateRunning = false;
   var selectors = ['team', 'activity', 'user'];
   // Ajax request for object search
   var subjectAjaxQuery = {
@@ -96,10 +97,46 @@ $(function() {
   var subjectCustomDisplay = (state) => {
     return state.label + ': ' + state.text;
   };
+
+  // update_filter
+  var reloadActivities = function() {
+    var moreButton = $('.btn-more-activities');
+    if (updateRunning) return false;
+    updateRunning = true;
+    $('.ga-activities-list .activities-day').remove();
+    animateSpinner(null, true);
+    $.ajax({
+      url: $('.ga-activities-list').data('activities-url'),
+      data: GlobalActivitiesFilterPrepareArray(),
+      dataType: 'json',
+      type: 'POST',
+      success: function(json) {
+        $(json.activities_html).appendTo('.ga-activities-list');
+        if (json.more_activities === true) {
+          moreButton.removeClass('hidden');
+          moreButton.data('next-date', json.from);
+        } else {
+          moreButton.addClass('hidden');
+        }
+        (new globalActivitiesInit()).updateCollapseButton();
+        updateRunning = false;
+        animateSpinner(null, false);
+      },
+      error: function() {
+        updateRunning = false;
+        animateSpinner(null, false);
+      }
+    });
+  };
+
+
   // Common selection intialize
   $.each(selectors, (index, e) => {
     $('.ga-side .' + e + '-selector select').select2Multiple({ singleDisplay: true })
-      .on('change', function() { GlobalActivitiesUpdateTopPaneTags(); });
+      .on('change', function() {
+        GlobalActivitiesUpdateTopPaneTags();
+        reloadActivities();
+      });
     $('.ga-side .' + e + '-selector .clear').click(function() {
       $('.ga-side .' + e + '-selector select').select2MultipleClearAll();
     });
@@ -110,14 +147,20 @@ $(function() {
     customSelection: subjectCustomDisplay,
     unlimitedSize: true
   })
-    .on('change select2:select', function(e) { GlobalActivitiesUpdateTopPaneTags(e); });
+    .on('change select2:select', function(e) {
+      GlobalActivitiesUpdateTopPaneTags(e);
+      reloadActivities();
+    });
   $('.ga-side .subject-selector .clear').click(function() {
     $('.ga-side .subject-selector select').select2MultipleClearAll();
   });
 
   $('.ga-tags-container .clear-container span').click(function() {
+    updateRunning = true;
     $.each(selectors, (index, e) => { $('.ga-side .' + e + '-selector select').select2MultipleClearAll(); });
     $('.ga-side .subject-selector select').select2MultipleClearAll();
+    updateRunning = false;
+    reloadActivities();
   });
 
   $('#calendar-from-date').on('dp.change', function(e) {
@@ -125,6 +168,7 @@ $(function() {
     $('#calendar-to-date').data('DateTimePicker').minDate(e.date);
     dateContainer[0].dataset.periodSelect = $('#calendar-from-date').val() + ' - ' + $('#calendar-to-date').val();
     GlobalActivitiesUpdateTopPaneTags();
+    reloadActivities();
   });
 
   $('#calendar-to-date').on('dp.change', function(e) {
@@ -132,44 +176,48 @@ $(function() {
     $('#calendar-from-date').data('DateTimePicker').maxDate(e.date);
     dateContainer[0].dataset.periodSelect = $('#calendar-from-date').val() + ' - ' + $('#calendar-to-date').val();
     GlobalActivitiesUpdateTopPaneTags();
+    reloadActivities();
   });
 
   GlobalActivitiesUpdateTopPaneTags();
-});
 
-$('.date-selector .hot-button').click(function() {
-  var selectPeriod = this.dataset.period;
-  var dateContainer = $('.ga-side .date-selector.filter-block');
-  var fromDate = $('#calendar-from-date').data('DateTimePicker');
-  var toDate = $('#calendar-to-date').data('DateTimePicker');
-  var today = new Date();
-  var yesterday = new Date(new Date().setDate(today.getDate() - 1));
-  var weekDay = today.getDay();
-  var monday = new Date(new Date().setDate(today.getDate() - weekDay + (weekDay === 0 ? -6 : 1)));
-  var sunday = new Date(new Date().setDate(new Date(monday).getDate() + 6));
-  var lastWeek = new Date(new Date().setDate(today.getDate() - 6));
-  var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
-  var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-  var lastMonth = new Date(new Date().setDate(today.getDate() - 30));
-  if (selectPeriod === 'today') {
-    toDate.date(today);
-    fromDate.date(today);
-  } else if (selectPeriod === 'yesterday') {
-    fromDate.date(yesterday);
-    toDate.date(yesterday);
-  } else if (selectPeriod === 'this_week') {
-    toDate.date(sunday);
-    fromDate.date(monday);
-  } else if (selectPeriod === 'last_week') {
-    toDate.date(today);
-    fromDate.date(lastWeek);
-  } else if (selectPeriod === 'this_month') {
-    toDate.date(lastDay);
-    fromDate.date(firstDay);
-  } else if (selectPeriod === 'last_month') {
-    toDate.date(today);
-    fromDate.date(lastMonth);
-  }
-  dateContainer[0].dataset.periodSelect = this.innerHTML;
-  GlobalActivitiesUpdateTopPaneTags();
-});
+  $('.date-selector .hot-button').click(function() {
+    var selectPeriod = this.dataset.period;
+    var dateContainer = $('.ga-side .date-selector.filter-block');
+    var fromDate = $('#calendar-from-date').data('DateTimePicker');
+    var toDate = $('#calendar-to-date').data('DateTimePicker');
+    var today = new Date();
+    var yesterday = new Date(new Date().setDate(today.getDate() - 1));
+    var weekDay = today.getDay();
+    var monday = new Date(new Date().setDate(today.getDate() - weekDay + (weekDay === 0 ? -6 : 1)));
+    var sunday = new Date(new Date().setDate(new Date(monday).getDate() + 6));
+    var lastWeek = new Date(new Date().setDate(today.getDate() - 6));
+    var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+    var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+    var lastMonth = new Date(new Date().setDate(today.getDate() - 30));
+    updateRunning = true;
+    if (selectPeriod === 'today') {
+      toDate.date(today);
+      fromDate.date(today);
+    } else if (selectPeriod === 'yesterday') {
+      toDate.date(yesterday);
+      fromDate.date(yesterday);
+    } else if (selectPeriod === 'this_week') {
+      toDate.date(sunday);
+      fromDate.date(monday);
+    } else if (selectPeriod === 'last_week') {
+      toDate.date(today);
+      fromDate.date(lastWeek);
+    } else if (selectPeriod === 'this_month') {
+      toDate.date(lastDay);
+      fromDate.date(firstDay);
+    } else if (selectPeriod === 'last_month') {
+      toDate.date(today);
+      fromDate.date(lastMonth);
+    }
+    updateRunning = false;
+    dateContainer[0].dataset.periodSelect = this.innerHTML;
+    GlobalActivitiesUpdateTopPaneTags();
+    reloadActivities();
+  });
+});

app/assets/javascripts/select2_customization.js

@@ -2,6 +2,7 @@
 $.fn.extend({
   select2Multiple: function(config = {}) {
     // Adding ID to each block
+    if (this.next().find('.select2-selection').length > 0) return this;
     var templateSelection = (state) => {
       return $('<span class="select2-block-body" data-select-id="' + state.id + '">'
         + (config.customSelection !== undefined ? config.customSelection(state) : state.text)

app/assets/stylesheets/global_activities.scss

@@ -7,10 +7,16 @@
   padding: 1em;
 
   .ga-main {
+    border-right: 1px solid $gray-lighter;
+    padding-top: 10px;
 
     .ga-activities-list {
       grid-area: activities;
       min-height: 600px;
+
+      .activities-day {
+        margin-bottom: 10px
+      }
     }
 
     .activities-counter-label {
@@ -24,6 +30,15 @@
 
     .activities-group-expand-button {
       color: $color-emperor;
+
+      .fas {
+        display: inline-block;
+        width: 10px;
+      }
+    }
+
+    .activities-group{
+      margin-bottom: 0px;
     }
 
     .activity-card {
@@ -51,7 +66,7 @@
 }
 
 .ga-side {
-  border-left: 1px solid $gray-lighter;
+  
   float: right;
 
   .filter-block {

app/controllers/global_activities_controller.rb

@@ -9,15 +9,18 @@ class GlobalActivitiesController < ApplicationController
     @user_list = User.where(id: UserTeam.where(team: current_user.teams).select(:user_id))
                      .distinct
                      .pluck(:full_name, :id)
-    @grouped_activities, more_activities =
+    @grouped_activities, @more_activities =
       ActivitiesService.load_activities(current_user, teams, activity_filters)
+    last_day = @grouped_activities.keys.last
+    @next_date = (Date.parse(last_day) - 1.day).strftime("%Y-%m-%d") if last_day
     respond_to do |format|
       format.json do
         render json: {
-          activities_html: @grouped_activities,
-          from: @grouped_activities.keys.first,
-          to: @grouped_activities.keys.last,
-          more_activities: more_activities
+          activities_html: render_to_string(
+            partial: 'activity_list.html.erb'
+          ),
+          from: @next_date,
+          more_activities: @more_activities
         }
       end
       format.html do
@@ -59,8 +62,16 @@ class GlobalActivitiesController < ApplicationController
   private
 
   def activity_filters
+    begin 
+      params[:types]=JSON.parse(params[:types])
+      params[:users]=JSON.parse(params[:users])
+      params[:teams]=JSON.parse(params[:teams])
+      params[:subjects]=JSON.parse(params[:subjects])
+    rescue 
+    end
+
     params.permit(
-      :from_date, :to_date, types: [], subjects: [], users: [], teams: []
+      :from_date, :to_date, types: [], subjects: {}, users: [], teams: []
     )
   end
 

app/services/activities_service.rb

@@ -20,17 +20,21 @@ class ActivitiesService
 
     if filters[:from_date] && filters[:to_date]
       activities = query.where(
-        'created_at <= :from AND created_at >= :to',
+        'created_at >= :from AND created_at <= :to',
         from: Time.zone.parse(filters[:from_date]).beginning_of_day.utc,
         to: Time.zone.parse(filters[:to_date]).end_of_day.utc
       )
     elsif filters[:from_date] && !filters[:to_date]
       activities = query.where(
-        'created_at <= :from',
+        'created_at >= :from',
         from: Time.zone.parse(filters[:from_date]).beginning_of_day.utc
       )
     else
-      activities = query
+      activities = query.where(
+        'created_at >= :from AND created_at <= :to',
+        from: Time.now.beginning_of_day.utc,
+        to: Time.now.end_of_day.utc
+      )
     end
 
     activities = activities.order(created_at: :desc)
@@ -44,12 +48,12 @@ class ActivitiesService
 
     last_date = results.keys.last
     activities = query.where(
-      'created_at <= :from AND created_at >= :to',
+      'created_at >= :from AND created_at <= :to',
       from: Time.zone.parse(last_date).beginning_of_day.utc,
       to: Time.zone.parse(last_date).end_of_day.utc
     )
     more_left = query.where(
-      'created_at < :from',
+      'created_at > :from',
       from: Time.zone.parse(last_date).end_of_day.utc
     ).exists?
     results[last_date] = activities.to_a

app/views/global_activities/_activity.html.erb

@@ -1,18 +1,23 @@
 <div class="activity-card">
   <div class="row">
     <div class="col-xs-12">
-      <% if activity.owner.present? %>
-        <%= popover_for_user_name(activity.owner, activity.team, false, true) %>
+      <% if activity.old_activity?  %>
+              <%= activity.message.html_safe %>
       <% else %>
-        <strong><%= activity.owner_id %></strong>
+              <% if activity.owner.present? %>
+                <%= popover_for_user_name(activity.owner, activity.team, false, true) %>
+              <% else %>
+                <strong><%= activity.owner_id %></strong>
+              <% end %>
+              <%= generate_activity_content(activity) %>
       <% end %>
-      <%= generate_activity_content(activity) %>
     </div>
   </div>
   <div class="pull-left activity-timestamp">
     <%= activity.created_at.strftime('%H:%M') %>
   </div>
   <div class="row navigational-breadcrumbs">
+  <% unless activity.old_activity? %>
     <% if activity.subject_type.present? %>
       <%= render partial: "global_activities/references/#{activity.subject_type.underscore}.html.erb",
                  locals: { subject: activity.subject, breadcrumbs: activity.values[:breadcrumbs] } %>
@@ -20,5 +25,6 @@
       <%= render partial: "global_activities/references/result.html.erb",
                  locals: { subject: activity.subject, breadcrumbs: activity.values[:breadcrumbs] } %>
     <% end %>
+  <% end %>
   </div>
 </div>

app/views/global_activities/_activity_list.html.erb

@@ -1,8 +1,8 @@
 <% @grouped_activities.each do |date, activities| %>
-  <div class="row">
+  <div class="row activities-day">
     <div class="col-sm-4 col-md-2">
       <a class="activities-group-expand-button"
-         href="#"
+         href="javascript:void(0);"
          id="activities-group-<%= date %>-button"
          data-toggle="collapse"
          data-turbolinks="false"

db/schema.rb

@@ -10,7 +10,6 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-
 ActiveRecord::Schema.define(version: 20190227110801) do
 
   # These are extensions that must be enabled in order to support this database