fixes #2386 update filters in users activity logs (#2399)

* Add an action filter and a date filter. * Additional filters on a specific object (photo/album/group) are available from their dedicated administration page. * Performances of the page was improved : instead of loading 100k lines in activity table, we loop on 500 activity lines until 100 aggregated lines are found for the current page.
2026-06-02 04:15:05 +02:00 · 2025-08-08 15:17:50 +02:00
parent 2465654752
commit 4dc2fc9f8d
16 changed files with 1238 additions and 740 deletions
@@ -402,6 +402,7 @@ SELECT
        'tag_selection' => $tag_selection,
        'U_DOWNLOAD' => 'action.php?id='.$row['id'].'&amp;part=e&amp;pwg_token='.get_pwg_token().'&amp;download',
        'U_HISTORY' => get_root_url().'admin.php?page=history&amp;filter_image_id='.$row['id'],
+        'U_ACTIVITY' => get_root_url().'admin.php?page=user_activity&photo='.$row['id'],
        'U_DELETE' => $admin_url_start.'&amp;delete=1&amp;pwg_token='.get_pwg_token(),
        'U_SYNC' => $admin_url_start.'&amp;sync_metadata=1',
        'PATH'=>$row['path'],
@@ -199,6 +199,7 @@ $template->assign(
    'U_ADD_PHOTOS_ALBUM' => $base_url.'photos_add&amp;album='.$category['id'],
    'U_CHILDREN' => $cat_list_url.'&amp;parent_id='.$category['id'],
    'U_MOVE' => $base_url.'albums&amp;parent_id='.$category['id'],
+    'U_ACTIVITY' => get_root_url().'admin.php?page=user_activity&album='.$category['id'],
    )
  );
 
@@ -102,6 +102,8 @@ SELECT u.'. $conf['user_fields']['username'].' AS username
      )
    );

+  $template->assign('U_ACTIVITY', get_root_url().'admin.php?page=user_activity&group='.$row['id']);
+
  $group_counter++;
 }

@@ -247,6 +247,7 @@ $template->assign(
    'U_SYNC' => $admin_url_start.'&amp;sync_metadata=1',
    'U_DELETE' => $admin_url_start.'&amp;delete=1&amp;pwg_token='.get_pwg_token(),
    'U_HISTORY' => get_root_url().'admin.php?page=history&amp;filter_image_id='.$_GET['image_id'],
+    'U_ACTIVITY' => get_root_url().'admin.php?page=user_activity&photo='.$_GET['image_id'],

    'PATH'=>$row['path'],

@@ -442,6 +442,23 @@ label>p.group_select {
  color:#3c3c3c;
 }

+/* Activity Tab in user manager */
+
+.activity-date-selecter{
+  background-color: #f9f9f9;
+  color : #3C3C3C;
+  border: 2px solid #D3D3D3;
+}
+
+.activity-filter-container{
+  color: #777777;
+  background-color: #FFFFFF;
+}
+
+.selectize-control.user-selecter.single .selectize-input, .selectize-control.action-selecter.single .selectize-input{
+    border-color: #D3D3D3 !important;
+}
+
 /* Selection mode */

 .slider {
@@ -0,0 +1,712 @@
+//{*<-- Getting and Displaying Activities -->*}
+
+if (additional_filt_type)
+{
+    object_filter = additional_filt_type;
+}
+
+get_user_activity(activity_page, uid_filter, action_filter, object_filter, [date_min_filter, date_max_filter], additional_filt_value);
+
+function get_user_activity(page, uid, action, object, date, id) {
+
+    $.ajax({
+        url: "ws.php?format=json&method=pwg.activity.getList",
+        type: "POST",
+        dataType: "json",
+        data: {
+            page: page - 1,
+            uid: uid,
+            action : action,
+            object : object,
+            offset : page_offsets[page - 1],
+            date_min : date[0],
+            date_max : date[1],
+            id : additional_filt_value
+        },
+        beforeSend: () => {
+          $('.tab').contents(':not(#-1):not(.loading)').remove();
+          $(".loading").show();
+          $('.pagination-arrow.rigth').addClass('unavailable');
+          $('.pagination-arrow.left').addClass('unavailable');
+          $(".pagination-item-container").hide();
+          $(".user-update-spinner").addClass("icon-spin6");
+        },
+        success: (data) => {
+            /* console log to help debug
+            {* console.log(data); *}*/
+            uid_filter = uid;
+            action_filter = action;
+            object_filter = object;
+            date_min_filter = date[0];
+            date_max_filter = date[1];
+
+            //setCreationDate(data.result['result_lines'][data.result['result_lines'].length-1].date, data.result['result_lines'][0].date);
+            $(".loading").hide();
+            
+            if (data.result['result_lines'].length > 0)
+            {
+                data.result['result_lines'].forEach(line => {
+                    lineConstructor(line);
+                });
+            }
+            else
+            {
+                emptyLine();
+            }
+
+            current_page_offset = page_offsets[page - 1];
+            end_page = data.result['end_page'];
+            if (!(page_offsets.includes(data.result['page_offset'])))
+            {
+                page_offsets.push(data.result['page_offset']);
+            }
+            
+            $(".user-update-spinner").removeClass("icon-spin6");
+            $(".pagination-item-container").show();
+            update_pagination_menu();
+        }, 
+        error: (e) => {
+            console.log("ajax call failed");
+            console.log(e);
+        }
+    })
+}
+
+function lineConstructor(line) {
+    let newLine = $("#-1").clone();
+
+    $(".tab-title").show();
+    $(".activity-noresult").hide();
+    newLine.removeClass("hide");
+
+    /* console log to help debug 
+    {* console.log(line); *}*/
+    newLine.attr("id", line.id);
+
+    var final_albumInfos;
+
+    //{* Determines wich string need to be placed in the line constructed *}
+
+    if (line.counter > 1) {
+        // pluriel
+        switch (line.action) {
+            case "edit":
+            newLine.find(".action-type").addClass("icon-blue");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-pencil");
+
+            newLine.find(".action-name").html(actionType_edit);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_users_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+    
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_albums_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_groups_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photos_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tags_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+                
+            break;
+
+            case "add":
+            newLine.find(".action-type").addClass("icon-green");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-plus");
+
+            newLine.find(".action-name").html(actionType_add);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_users_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_albums_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_groups_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photos_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tags_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            break;
+
+            case "delete":
+            newLine.find(".action-type").addClass("icon-red");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-trash-1");
+
+            newLine.find(".action-name").html(actionType_delete);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_users_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_albums_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_groups_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photos_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tags_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            break;
+
+            case "move":
+            newLine.find(".action-type").addClass("icon-yellow");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-move");
+
+            newLine.find(".action-name").html(actionType_move);
+                switch (line.object) {
+                    case "album":
+                    final_albumInfos = actionInfos_albums_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_groups_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photos_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tags_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            break;
+
+            case "login":
+            newLine.find(".action-type").addClass("icon-purple");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-key");
+            newLine.find(".action-section").addClass("icon-user-1");
+
+            newLine.find(".action-name").html(actionType_login);
+
+            final_albumInfos = actionInfos_users_logged_in.replace('%d', line.counter);
+
+            break;
+
+            case "logout":
+            newLine.find(".action-type").addClass("icon-purple");
+            if (line.user_id != 2) {
+              newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            } else {
+              newLine.find(".user-pic").addClass(color_icons[line.object_id[0] % 5]);
+            }
+            newLine.find(".action-icon").addClass("icon-logout");
+            newLine.find(".action-section").addClass("icon-user-1");
+
+            newLine.find(".action-name").html(actionType_logout);
+
+            final_albumInfos = actionInfos_users_logged_out.replace('%d', line.counter);
+
+            break;
+
+            default:
+            newLine.find(".action-type").addClass("icon-purple");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            break;
+        }
+    } else {
+        // singulier
+        switch (line.action) {
+            case "edit":
+            newLine.find(".action-type").addClass("icon-blue");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-pencil");
+
+            newLine.find(".action-name").html(actionType_edit);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_user_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_album_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_group_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photo_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tag_edited.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            
+            break;
+            case "add":
+            newLine.find(".action-type").addClass("icon-green");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-plus");
+
+            newLine.find(".action-name").html(actionType_add);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_user_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_album_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_group_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photo_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tag_added.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+
+                    break;
+                }
+
+            break;
+            case "delete":
+            newLine.find(".action-type").addClass("icon-red");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-trash-1");
+
+            newLine.find(".action-name").html(actionType_delete);
+                switch (line.object) {
+                    case "user":
+                    final_albumInfos = actionInfos_user_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-user-1");
+
+                    break;
+                    case "album":
+                    final_albumInfos = actionInfos_album_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_group_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photo_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tag_deleted.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            break;
+            case "move":
+            newLine.find(".action-type").addClass("icon-yellow");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-move");
+
+            newLine.find(".action-name").html(actionType_move);
+                switch (line.object) {
+                    case "album":
+                    final_albumInfos = actionInfos_album_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-folder-open");
+
+                    break;
+                    case "group":
+                    final_albumInfos = actionInfos_group_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-users-1");
+
+                    break;
+                    case "photo":
+                    final_albumInfos = actionInfos_photo_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-picture");
+
+                    break;
+                    case "tag":
+                    final_albumInfos = actionInfos_tag_moved.replace('%d', line.counter);
+                    newLine.find(".action-section").addClass("icon-tags");
+
+                    break;
+                    default:
+                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
+                    break;
+                }
+
+            break;
+            case "login":
+            newLine.find(".action-type").addClass("icon-purple");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            newLine.find(".action-icon").addClass("icon-key");
+            newLine.find(".action-section").addClass("icon-user-1");
+
+            newLine.find(".action-name").html(actionType_login);
+
+            final_albumInfos = actionInfos_user_logged_in.replace('%d', line.counter);
+
+            break;
+            case "logout":
+            newLine.find(".action-type").addClass("icon-purple");
+            if (line.user_id != 2) {
+              newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            } else {
+              newLine.find(".user-pic").addClass(color_icons[line.object_id[0] % 5]);
+            }
+            newLine.find(".action-icon").addClass("icon-logout");
+            newLine.find(".action-section").addClass("icon-user-1");
+
+            newLine.find(".action-name").html(actionType_logout);
+          
+            final_albumInfos = actionInfos_user_logged_out.replace('%d', line.counter);
+
+            break;
+
+            default:
+            newLine.find(".action-type").addClass("icon-purple");
+            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
+            break;
+        }
+    }
+
+    newLine.find(".action-infos-test").html(final_albumInfos);
+
+    /* Action_section */
+    newLine.find(".nb_items").html(line.counter);
+    
+    /* Date_section */
+    newLine.find(".date-day").html(line.date);
+    newLine.find(".date-hour").html(line.hour);
+
+    /* User _Section */
+    newLine.find(".user-name").html(line.username);
+    newLine.find(".user-pic").html(get_initials(line.username));
+
+    /* Detail_section */
+    newLine.find(".detail-item-1").html(line.ip_address);
+    newLine.find(".detail-item-1").attr("title", "IP");
+
+    if (line.detailsType == "script") {
+        newLine.find(".detail-item-2").html(line.details.script);
+        newLine.find(".detail-item-2").attr('title', 'Script');
+    } else if (line.detailsType == "method") {
+        newLine.find(".detail-item-2").html(line.details.method);
+        newLine.find(".detail-item-2").attr('title', 'API Method');
+    }   
+    
+    if (line.details.agent) {
+        newLine.find(".detail-item-3").html(line.details.agent);
+        newLine.find(".detail-item-3").attr('title', line.details.agent);
+    } else if (line.details.users_string && line.action != "logout" && line.action != "login") {
+        newLine.find(".detail-item-3").html(line.details.users_string);
+        newLine.find(".detail-item-3").attr('title', users_key + ": " +line.details.users_string);
+    } else {
+        newLine.find(".detail-item-3").remove();
+    }
+
+    newLine.addClass("uid-" + line.user_id);
+
+    displayLine(newLine);
+}
+
+function displayLine(line) {
+    $(".tab").append(line);
+}
+
+function emptyLine() {
+    $(".tab-title").hide();
+    $(".activity-noresult").show();
+}
+
+function get_initials(username) {
+    let words = username.toUpperCase().split(" ");
+    let res = words[0][0];
+
+    if (words.length > 1 && words[1][0] !== undefined ) {
+        res += words[1][0];
+    }
+    return res;
+}
+
+function setCreationDate(startDate, endDate) {
+    $(".start-date").html(startDate)
+
+    $(".end-date").html(endDate)
+}
+
+//{* Pagination *}
+
+function move_to_page(page) {
+    if (page < 0)
+        return;
+    actual_page = page;
+    update_pagination_menu(page);
+    get_user_activity(page, uid_filter, action_filter, object_filter, [date_min_filter, date_max_filter], additional_filt_value);
+}
+
+$('.pagination-arrow.rigth').on('click', () => {
+    move_to_page(actual_page + 1);
+})
+
+$('.pagination-arrow.left').on('click', () => {
+    move_to_page(actual_page - 1);
+})
+
+function update_pagination_menu(page) {
+    updateArrows();
+    update_pagination_items();
+    if (end_page && actual_page == 1) {
+        $('.pagination-container').hide();
+    } else {
+        $('.pagination-container').show();
+    }
+}
+
+function updateArrows() {
+    if (actual_page == 1) {
+        $('.pagination-arrow.left').addClass('unavailable');
+    } else {
+        $('.pagination-arrow.left').removeClass('unavailable');
+    }   
+    if (end_page) {
+        $('.pagination-arrow.rigth').addClass('unavailable');
+    } else {
+        $('.pagination-arrow.rigth').removeClass('unavailable');
+    }
+}
+
+function update_pagination_items() {
+    $('.pagination-item-container a').remove();
+    $('.pagination-item-container span').remove();
+
+    append_pagination_item(1);
+
+    if (actual_page > 2) {
+        append_pagination_item();
+    }
+    if (actual_page != 1) {
+        append_pagination_item(actual_page)
+    }
+    if (!end_page) {
+        append_pagination_item();
+    }   
+}
+
+function append_pagination_item(page = null) {
+    if (page != null) {
+        let new_tag = $(page_item.replace(/%d/g, page));
+        $('.pagination-item-container').append(new_tag);
+        if (actual_page == page) {
+            new_tag.addClass('actual');
+        }
+        new_tag.on('click', () => {
+            move_to_page(new_tag.data('page'));
+        })
+    } else {
+        $('.pagination-item-container').append($(page_ellipsis));
+    }
+}
+
+function page_reset(){
+    activity_page = 1;
+    current_page_offset = 0;
+    page_offsets = [0];
+    actual_page = 1;
+    end_page = false;
+}
+
+
+$(document).ready(function () {
+    $("h1").append(`<span class='badge-number'>`+ (nb_users - 1) +`</span>`);
+
+    $('select.user-selecter').on('change', function (user) {
+        if ($(".user-selecter .selectize-input").hasClass("full")) {
+            page_reset();
+            if ($(".user-selecter .selectize-input .item").data("value") == 'none')
+            {
+                //{* call ajax sur activity list sans uid *}
+                get_user_activity(1, undefined, action_filter, object_filter, [date_min_filter, date_max_filter], additional_filt_value);
+            }
+            else
+            {
+                //{* call ajax sur activity list avec uid en param *}
+                get_user_activity(1, $(".user-selecter .selectize-input .item").data("value"), action_filter, object_filter, [date_min_filter, date_max_filter], additional_filt_value);
+            }
+        }
+    });
+
+    $('select.action-selecter').on('change', function (user) {
+        if ($(".action-selecter .selectize-input").hasClass("full")) {
+            page_reset();
+            if ($(".action-selecter .selectize-input .item").data("value") == 'none')
+            {
+                //{* call ajax sur activity list sans action et object *}
+                if (additional_filt_type)
+                {
+                    get_user_activity(1, uid_filter, undefined, object_filter, [date_min_filter, date_max_filter], additional_filt_value);
+                }
+                else
+                {
+                    get_user_activity(1, uid_filter, undefined, undefined, [date_min_filter, date_max_filter], additional_filt_value);
+                }
+            }
+            else
+            {
+                //{* call ajax sur activity list avec action et object en param *}
+                object =  $(".action-selecter .selectize-input .item").data("value").split("/")[0];
+                action =  $(".action-selecter .selectize-input .item").data("value").split("/")[1];
+                get_user_activity(1, uid_filter, action, object, [date_min_filter, date_max_filter], additional_filt_value);
+            }
+        }
+    });
+
+    $('#date_min_activity').on('change', function(user) {
+        if ($('#date_min_activity').val()=='')
+        {
+            document.getElementById('date_max_activity').setAttribute("min", date_min);
+        }
+        else
+        {
+            document.getElementById('date_max_activity').setAttribute("min", $('#date_min_activity').val());
+        }
+        get_user_activity(activity_page, uid_filter, action_filter, object_filter, [$('#date_min_activity').val(), date_max_filter], additional_filt_value);
+    })
+    
+    $('#date_max_activity').on('change', function(user) {
+        if ($('#date_max_activity').val()=='')
+        {
+            document.getElementById('date_min_activity').setAttribute("max", date_max);
+        }
+        else
+        {
+            document.getElementById('date_min_activity').setAttribute("max", $('#date_max_activity').val());
+        }
+        get_user_activity(activity_page, uid_filter, action_filter, object_filter, [date_min_filter, $('#date_max_activity').val()], additional_filt_value);
+    })
+
+    jQuery('.user-selecter').selectize();
+    jQuery('.user-selecter')[0].selectize.setValue(null);
+
+    jQuery('.action-selecter').selectize();
+    jQuery('.action-selecter')[0].selectize.setValue(null);
+
+    if (additional_filt_type)
+    {
+        $("#activityMoreFilters").addClass("extend-padding"); 
+    }
+    else
+    {
+        $("#activityMoreFiltersContent").hide();
+    }
+    //var used to prevent the user to interfere with the collapsible when it's toggling, to avoid some problems
+    var toggleTriggered = false;
+    $("#activityMoreFilters").on("click", function(){
+        if ($("#activityMoreFiltersContent").css('display') == 'none' && toggleTriggered == false)
+        {
+            toggleTriggered = true;
+            $("#activityMoreFilters").addClass("extend-padding");
+            $("#activityMoreFiltersContent").slideToggle(function(){
+                toggleTriggered = false;
+            });
+        }
+        else if ($("#activityMoreFiltersContent").css('display') == 'flex' && toggleTriggered == false)
+        {
+            toggleTriggered = true;
+            $("#activityMoreFiltersContent").slideToggle(function(){
+                $("#activityMoreFilters").removeClass("extend-padding");
+                toggleTriggered = false;
+            });
+        }
+    })
+});
@@ -150,9 +150,10 @@ pluginValues = [];
 			<img src="{$element.TN_SRC}" alt="imagename" class="media-box-embed" style="{if $element.FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
 			<div class="media-hover">
 				<div class='picture-preview-actions'>
-					<a class="preview-box icon-zoom-square tiptip" href="{$element.FILE_SRC}" title="Zoom"></a>
-					<a class="icon-download tiptip" href="{$element.U_DOWNLOAD}" title="Download"></a>
-					<a class="icon-signal tiptip" href="{$element.U_HISTORY}" title="Visit history"></a>
+					<a class="preview-box icon-zoom-square tiptip" href="{$element.FILE_SRC}" title="{'Zoom'|@translate}"></a>
+					<a class="icon-download tiptip" href="{$element.U_DOWNLOAD}" title="{'Download'|@translate}"></a>
+					<a class="icon-signal tiptip" href="{$element.U_HISTORY}" title="{'Visit history'|@translate}"></a>
+					<a class="icon-pulse tiptip" href="{$element.U_ACTIVITY}" title="{'Activity'|@translate}"></a>
 					<a target="_blank" class="icon-pencil tiptip" href="{$element.U_EDIT}" title="{'Edit photo'|@translate}"></a>
 					{if !url_is_remote($element.PATH)}
 					<a class="icon-arrows-cw tiptip action-sync-metadata" title="{'Synchronize metadata'|@translate}"></a>
@@ -45,6 +45,8 @@ const str_modal_ab = '{'New parent album'|@translate}';

    <div class="cat-modify-actions">

+      <a class="icon-pulse tiptip" href="{$U_ACTIVITY}" title="{'Activity'|@translate}"></a>
+
      {if isset($U_MANAGE_ELEMENTS) }
        <a class="icon-th tiptip" href="{$U_MANAGE_ELEMENTS}" title="{'Manage album photos'|@translate}"></a>
      {/if}
@@ -87,6 +87,7 @@ usersCache.selectize(jQuery('select.UserSearch'));
          <div class="icon-docs dropdown-option" id="GroupDuplicate" value="duplicate">{'Duplicate'|@translate}</div>
          <div class="icon-trash dropdown-option" id="GroupDelete" value="delete">{'Delete'|@translate}</div>
          <div class="icon-star dropdown-option" id="GroupDefault" value="delete"></div>
+          <a class="icon-pulse dropdown-option" href="{$U_ACTIVITY}">{'Activity'|@translate}</a>
        </div>
      </div>

@@ -102,6 +102,7 @@ const str_assoc_album_ab = '{'Associate to album'|translate|escape:javascript}';
      <a class="preview-box icon-zoom-square" href="{$FILE_SRC}" title="{'Zoom'|translate}"></a>
      <a class="icon-download" href="{$U_DOWNLOAD}" title="{'Download'|translate}"></a>
      <a class="icon-signal" href="{$U_HISTORY}" title="{'Visit history'|translate}"></a>
+      <a class="icon-pulse" href="{$U_ACTIVITY}" title="{'Activity'|translate}"></a>
      {if !url_is_remote($PATH)}
      <a class="icon-arrows-cw" href="{$U_SYNC}" title="{'Synchronize metadata'|@translate}"></a>
      <a class="icon-trash" title="{'delete photo'|@translate}" id='action-delete-picture'></a>
@@ -13,12 +13,26 @@ var usersCache = new UsersCache({
  serverId: '{$CACHE_KEYS._hash}',
  rootUrl: '{$ROOT_URL}'
 });
+const nb_users = {$nb_users};
+
+const additional_filt_type = '{$ADDITIONAL_FILT.type}';
+const additional_filt_value = {if $ADDITIONAL_FILT.type} {$ADDITIONAL_FILT.value} {else} null {/if};

 const color_icons = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
 var activity_page = 1;
+let current_page_offset = 0;
+let page_offsets = [0];
 let actual_page = 1;
-let max_page = 1;
+let end_page = false;
 let uid_filter;
+let action_filter;
+let object_filter;
+let date_min_filter = '{$ACTIVITY_DATES.min}';
+let date_max_filter = '{$ACTIVITY_DATES.max}';
+
+const date_min = '{$ACTIVITY_DATES.min}';
+const date_max = '{$ACTIVITY_DATES.max}';
+
 const page_ellipsis = '<span>...</span>'
 const page_item = '<a data-page="%d">%d</a>';
 var create_selecter = true;
@@ -98,624 +112,109 @@ var actionInfos_tags_deleted = "{'%d tags deleted'|translate}";
 var actionInfos_tags_edited = "{'%d tags edited'|translate}";
 var actionInfos_tags_moved = "{'%d tags moved'|translate}";

-{*<-- Getting and Displaying Activities -->*}
-
-get_user_activity(activity_page, uid_filter);
-
-function get_user_activity(page, uid) {
-    $.ajax({
-        url: "ws.php?format=json&method=pwg.activity.getList",
-        type: "POST",
-        dataType: "json",
-        data: {
-            page: page - 1,
-            uid: uid,
-        },
-        beforeSend: () => {
-          $('.tab').contents(':not(#-1):not(.loading)').remove();
-          $(".loading").show();
-          $('.pagination-arrow.rigth').addClass('unavailable');
-          $('.pagination-arrow.left').addClass('unavailable');
-          $(".pagination-item-container").hide();
-          $(".user-update-spinner").addClass("icon-spin6");
-        },
-        success: (data) => {
-            /* console log to help debug */
-            {* console.log(data); *}
-            uid_filter = uid;
-
-            setCreationDate(data.result['result_lines'][data.result['result_lines'].length-1].date, data.result['result_lines'][0].date);
-            $(".loading").hide();
-
-            data.result['result_lines'].forEach(line => {
-                lineConstructor(line);
-            });
-
-            max_page = data.result['max_page'];
-            $(".user-update-spinner").removeClass("icon-spin6");
-            $(".pagination-item-container").show();
-            update_pagination_menu();
-        }, 
-        error: (e) => {
-            console.log("ajax call failed");
-            console.log(e);
-        }
-    })
-}
-
-function lineConstructor(line) {
-    let newLine = $("#-1").clone();
-
-    newLine.removeClass("hide");
-
-    /* console log to help debug */
-    {* console.log(line); *}
-    newLine.attr("id", line.id);
-
-    var final_albumInfos;
-
-    {* Determines wich string need to be placed in the line constructed *}
-
-    if (line.counter > 1) {
-        // pluriel
-        switch (line.action) {
-            case "edit":
-            newLine.find(".action-type").addClass("icon-blue");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-pencil");
-
-            newLine.find(".action-name").html(actionType_edit);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_users_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-    
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_albums_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_groups_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photos_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tags_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-                
-            break;
-
-            case "add":
-            newLine.find(".action-type").addClass("icon-green");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-plus");
-
-            newLine.find(".action-name").html(actionType_add);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_users_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_albums_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_groups_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photos_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tags_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            break;
-
-            case "delete":
-            newLine.find(".action-type").addClass("icon-red");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-trash-1");
-
-            newLine.find(".action-name").html(actionType_delete);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_users_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_albums_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_groups_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photos_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tags_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            break;
-
-            case "move":
-            newLine.find(".action-type").addClass("icon-yellow");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-move");
-
-            newLine.find(".action-name").html(actionType_move);
-                switch (line.object) {
-                    case "album":
-                    final_albumInfos = actionInfos_albums_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_groups_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photos_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tags_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            break;
-
-            case "login":
-            newLine.find(".action-type").addClass("icon-purple");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-key");
-            newLine.find(".action-section").addClass("icon-user-1");
-
-            newLine.find(".action-name").html(actionType_login);
-
-            final_albumInfos = actionInfos_users_logged_in.replace('%d', line.counter);
-
-            break;
-
-            case "logout":
-            newLine.find(".action-type").addClass("icon-purple");
-            if (line.user_id != 2) {
-              newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            } else {
-              newLine.find(".user-pic").addClass(color_icons[line.object_id[0] % 5]);
-            }
-            newLine.find(".action-icon").addClass("icon-logout");
-            newLine.find(".action-section").addClass("icon-user-1");
-
-            newLine.find(".action-name").html(actionType_logout);
-
-            final_albumInfos = actionInfos_users_logged_out.replace('%d', line.counter);
-
-            break;
-
-            default:
-            newLine.find(".action-type").addClass("icon-purple");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            break;
-        }
-    } else {
-        // singulier
-        switch (line.action) {
-            case "edit":
-            newLine.find(".action-type").addClass("icon-blue");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-pencil");
-
-            newLine.find(".action-name").html(actionType_edit);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_user_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_album_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_group_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photo_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tag_edited.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            
-            break;
-            case "add":
-            newLine.find(".action-type").addClass("icon-green");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-plus");
-
-            newLine.find(".action-name").html(actionType_add);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_user_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_album_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_group_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photo_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tag_added.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-
-                    break;
-                }
-
-            break;
-            case "delete":
-            newLine.find(".action-type").addClass("icon-red");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-trash-1");
-
-            newLine.find(".action-name").html(actionType_delete);
-                switch (line.object) {
-                    case "user":
-                    final_albumInfos = actionInfos_user_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-user-1");
-
-                    break;
-                    case "album":
-                    final_albumInfos = actionInfos_album_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_group_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photo_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tag_deleted.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            break;
-            case "move":
-            newLine.find(".action-type").addClass("icon-yellow");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-move");
-
-            newLine.find(".action-name").html(actionType_move);
-                switch (line.object) {
-                    case "album":
-                    final_albumInfos = actionInfos_album_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-folder-open");
-
-                    break;
-                    case "group":
-                    final_albumInfos = actionInfos_group_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-users-1");
-
-                    break;
-                    case "photo":
-                    final_albumInfos = actionInfos_photo_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-picture");
-
-                    break;
-                    case "tag":
-                    final_albumInfos = actionInfos_tag_moved.replace('%d', line.counter);
-                    newLine.find(".action-section").addClass("icon-tags");
-
-                    break;
-                    default:
-                     final_albumInfos = line.counter + " " +line.object + " " + line.action;
-                    break;
-                }
-
-            break;
-            case "login":
-            newLine.find(".action-type").addClass("icon-purple");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            newLine.find(".action-icon").addClass("icon-key");
-            newLine.find(".action-section").addClass("icon-user-1");
-
-            newLine.find(".action-name").html(actionType_login);
-
-            final_albumInfos = actionInfos_user_logged_in.replace('%d', line.counter);
-
-            break;
-            case "logout":
-            newLine.find(".action-type").addClass("icon-purple");
-            if (line.user_id != 2) {
-              newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            } else {
-              newLine.find(".user-pic").addClass(color_icons[line.object_id[0] % 5]);
-            }
-            newLine.find(".action-icon").addClass("icon-logout");
-            newLine.find(".action-section").addClass("icon-user-1");
-
-            newLine.find(".action-name").html(actionType_logout);
-          
-            final_albumInfos = actionInfos_user_logged_out.replace('%d', line.counter);
-
-            break;
-
-            default:
-            newLine.find(".action-type").addClass("icon-purple");
-            newLine.find(".user-pic").addClass(color_icons[line.user_id % 5]);
-            break;
-        }
-    }
-
-    newLine.find(".action-infos-test").html(final_albumInfos);
-
-    /* Action_section */
-    newLine.find(".nb_items").html(line.counter);
-    
-    /* Date_section */
-    newLine.find(".date-day").html(line.date);
-    newLine.find(".date-hour").html(line.hour);
-
-    /* User _Section */
-    newLine.find(".user-name").html(line.username);
-    newLine.find(".user-pic").html(get_initials(line.username));
-
-    /* Detail_section */
-    newLine.find(".detail-item-1").html(line.ip_address);
-    newLine.find(".detail-item-1").attr("title", "IP");
-
-    if (line.detailsType == "script") {
-        newLine.find(".detail-item-2").html(line.details.script);
-        newLine.find(".detail-item-2").attr('title', 'Script');
-    } else if (line.detailsType == "method") {
-        newLine.find(".detail-item-2").html(line.details.method);
-        newLine.find(".detail-item-2").attr('title', 'API Method');
-    }   
-    
-    if (line.details.agent) {
-        newLine.find(".detail-item-3").html(line.details.agent);
-        newLine.find(".detail-item-3").attr('title', line.details.agent);
-    } else if (line.details.users_string && line.action != "logout" && line.action != "login") {
-        newLine.find(".detail-item-3").html(line.details.users_string);
-        newLine.find(".detail-item-3").attr('title', users_key + ": " +line.details.users_string);
-    } else {
-        newLine.find(".detail-item-3").remove();
-    }
-
-    newLine.addClass("uid-" + line.user_id);
-
-    displayLine(newLine);
-}
-
-function displayLine(line) {
-    $(".tab").append(line);
-}
-
-function get_initials(username) {
-    let words = username.toUpperCase().split(" ");
-    let res = words[0][0];
-
-    if (words.length > 1 && words[1][0] !== undefined ) {
-        res += words[1][0];
-    }
-    return res;
-}
-
-function setCreationDate(startDate, endDate) {
-    $(".start-date").html(startDate)
-
-    $(".end-date").html(endDate)
-}
-
-{* Pagination *}
-
-function move_to_page(page) {
-    if (page < 0 || page > max_page)
-        return;
-    actual_page = page;
-    update_pagination_menu();
-    get_user_activity(page, uid_filter);
-}
-
-$('.pagination-arrow.rigth').on('click', () => {
-    move_to_page(actual_page + 1);
-})
-
-$('.pagination-arrow.left').on('click', () => {
-    move_to_page(actual_page - 1);
-})
-
-function update_pagination_menu() {
-    {* max_page = Math.ceil(nb_filtered_users / per_page); *}
-    updateArrows();
-    update_pagination_items();
-    if (max_page <= 1) {
-        $('.pagination-container').hide();
-    } else {
-        $('.pagination-container').show();
-    }
-}
-
-function updateArrows() {
-    if (actual_page == 1) {
-        $('.pagination-arrow.left').addClass('unavailable');
-    } else {
-        $('.pagination-arrow.left').removeClass('unavailable');
-    }   
-    if (actual_page == max_page) {
-        $('.pagination-arrow.rigth').addClass('unavailable');
-    } else {
-        $('.pagination-arrow.rigth').removeClass('unavailable');
-    }
-}
-
-function update_pagination_items() {
-    $('.pagination-item-container a').remove();
-    $('.pagination-item-container span').remove();
-
-    append_pagination_item(1);
-
-    if (actual_page > 2) {
-        append_pagination_item();
-    }
-    if (actual_page != 1 && actual_page != max_page) {
-        append_pagination_item(actual_page)
-    }
-    if (actual_page < (max_page - 1)) {
-        append_pagination_item();
-    }   
-    append_pagination_item(max_page);
-
-}
-
-function append_pagination_item(page = null) {
-    if (page != null) {
-        let new_tag = $(page_item.replace(/%d/g, page));
-        $('.pagination-item-container').append(new_tag);
-        if (actual_page == page) {
-            new_tag.addClass('actual');
-        }
-        new_tag.on('click', () => {
-            move_to_page(new_tag.data('page'));
-        })
-    } else {
-        $('.pagination-item-container').append($(page_ellipsis));
-    }
-}
-
-
-$(document).ready(function () {
-    $("h1").append(`<span class='badge-number'>`+{$nb_users - 1}+`</span>`);
-
-    $('select').on('change', function (user) {
-        if ($(".selectize-input").hasClass("full")) {
-          {* call ajax sur activity list avec uid en param *}
-          get_user_activity(1, $(".selectize-input .item").data("value"));
-        }
-    });
-
-    jQuery('.user-selecter').selectize();
-    jQuery(".user-selecter")[0].selectize.setValue(null);
-
-    jQuery(".cancel-icon").click(function() {
-      jQuery(".user-selecter")[0].selectize.clear(true);
-      $(".line").css('display', 'flex');
-    });
-});
-
 {/footer_script}

+{combine_script id='user_activity' load='async' require='jquery' path='admin/themes/default/js/user_activity.js'}
 <div class="container"> 
+    <div>
+        <div class="activity-header">
+            <div class="user_activity_end_options">
+                <a class="download_csv tiptip" title="{'Download all activities'|translate}" href="admin.php?page=user_activity&type=download_logs"> 
+                    <i class="icon-download"> </i>
+                </a>
+                <div id="activityMoreFilters" class="activity-more-filters">
+                    <span class="icon-filter"></span>{'Filters'|@translate}
+                </div>
+            </div>
+        </div>
+        <div id="activityMoreFiltersContent" class="activity-more-filters-content">
+            <div class="activity-select">
+                <span class="activity-select"> {'User'|translate} </span>
+            
+                <select class="user-selecter" placeholder="---" single>
+                    <option value="none">
+                        <span class='username_filter'>---</span>
+                    </option>
+                    {foreach from=$ulist item=$user}
+                        <option value="{$user.id}">
+                            <span class='username_filter'>{$user.username}</span>
+                            <span class='nb_lines_str'>
+                                {'(%d)'|translate:$user.nb_lines}
+                            </span>
+                        </option>
+                    {/foreach}
+                </select>
+            </div>

-    <div class="activity-header">
-        <div class="select-user">
-            <span class="select-user-title"> {'Selected user'|translate} </span>
+            <div class="activity-select">
+                <span class="activity-select"> {'Action'|translate} </span>
            
-            <select class="user-selecter" placeholder="{'none'|translate}" single style="width:250px; height: 10px;">
-            {foreach from=$ulist item=$user}
-            <option value="{$user.id}"> <span class='username_filter'>{$user.username}</span><span class='nb_lines_str'> ({if $user.nb_lines == 1}{'%d Activity'|translate:$user.nb_lines}{else}{'%d Activities'|translate:$user.nb_lines}{/if}) </span></option>
-            {/foreach}
-            </select>
+                <select class="action-selecter" placeholder="---" single>
+                    <option value="none">
+                        <span class='action_filter'>---</span>
+                    </option>
+                    {foreach from=$ACTIONS item=$action}
+                        <option value="{$action.value}">
+                            <span class='action_filter'>
+                                {ucfirst($action.object)|translate}
+                                /
+                                {if $action.action == 'delete'}
+                                    {'deletion'|translate : $action.object}
+                                {else}
+                                    {$action.action|translate}
+                                {/if}
+                                {' (%d)'|translate : $action.counter}
+                            </span>
+                        </option>
+                    {/foreach}
+                </select>
+            </div>
            
-            <span class="icon-cancel cancel-icon"> </span>
+            <div class="activity-select">
+                <span class="activity-select">{'Start-Date'|translate}</span>
+                <input 
+                    class="activity-date-selecter"
+                    type="date"
+                    id="date_min_activity"
+                    value={$ACTIVITY_DATES.min}
+                    min={$ACTIVITY_DATES.min}
+                    max={$ACTIVITY_DATES.max}
+                />
+            </div>
+
+            <div class="activity-select">
+                <span class="activity-select">{'End-Date'|translate}</span>
+                <input 
+                    class="activity-date-selecter"
+                    type="date"
+                    id="date_max_activity"
+                    value={$ACTIVITY_DATES.max}
+                    min={$ACTIVITY_DATES.min}
+                    max={$ACTIVITY_DATES.max}
+                />
+            </div>
+
+            {if $ADDITIONAL_FILT.type}
+            <div class="additional-filters-section">
+                <div class="additional-filters-info">
+                    {'Additional filters'|translate}
+                </div>
+                <div class="additional-filters">
+                    <div class="activity-filter-container">
+                    {if $ADDITIONAL_FILT.type == 'photo'}
+                        <span class="icon-picture">{$ADDITIONAL_FILT.name}</span>
+                    {else if $ADDITIONAL_FILT.type == 'album'}
+                        <span class="icon-folder-open">{$ADDITIONAL_FILT.name}</span>
+                    {else}
+                        <span class="icon-group">{$ADDITIONAL_FILT.name}</span>
+                    {/if}
+                    </div>
+                </div>
+            </div>
+            {/if}
        </div>
-        <div class="acivity-time">
-            <span class="acivity-time-text"> {'Activity time from'|translate}</span>
-            <span class="start-date">
-                <span class="icon-spin6 animate-spin"></span>
-            </span>
-            <span class="acivity-time-text"> {'to'|translate}</span>
-            <span class="end-date">
-                <span class="icon-spin6 animate-spin"></span>
-            </span>
-        </div>
-        <a class="download_csv tiptip" title="{'Download all activities'|translate}" href="admin.php?page=user_activity&type=download_logs"> 
-            <i class="icon-download"> </i>
-        </a>
    </div>
-{if max_page != 1}
+
  <div class="pagination-container">
      <div class="pagination-arrow left">
        <span class="icon-left-open"></span>
@@ -727,7 +226,11 @@ $(document).ready(function () {
        <span class="icon-left-open"></span>
      </div>
    </div>
-{/if}
+
+    <div class="activity-noresult">
+        {'No results'|translate}
+    </div>
+
    

    <div class="tab-title">
@@ -937,30 +440,105 @@ $(document).ready(function () {
    display: flex;
    flex-direction: row;

-    align-items: center;
-
-    height: 100px;
+    margin-top: 38px;
    width: 100%;
 }

-.select-user span {
+div:has(> .activity-header) {
+    margin-bottom: 38px;
+}
+
+.activity-select span {
    font-size: 15px;
    font-weight: bold;
-
-    margin-right: 20px;
 }

-.acivity-time {
-    margin: 0 25px;
+.user-selecter, .action-selecter {
+    width: 230px;
+    margin-top: 10px;
 }

-.user-selecter {
-    width: 150px;
+.actions-filters{
+    margin-left: 25%;
 }

+.user_activity_end_options{
+    margin-left: auto;
+    display: flex;
+}
+
+.activity-noresult{
+    opacity: 0.3;
+    text-align: center;
+    font-weight: bold;
+    font-size: 32px;
+    display: none;
+}
+
+.activity-more-filters{
+    margin-left: 14px;
+    padding: 4px 16px 4px 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.activity-more-filters.extend-padding{
+    padding-bottom: 10px;
+}
+
+.activity-more-filters, .activity-more-filters-content{
+    background-color: #F3F3F3;
+}
+
+.activity-more-filters-content{
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    font-weight: normal;
+    padding : 23px 0px 22px 24px;
+    width: auto;
+}
+
+.activity-period-info{
+    margin-bottom : 30px;
+    font-weight: bold;
+}
+
+.additional-filters-section{
+    margin-left: 5%;
+}
+
+.additional-filters-info{
+    margin-bottom : 18px;
+    font-weight: bold;
+}
+
+.additional-filters{
+    display: flex;
+}
+
+.activity-filter-container span::before{
+    margin-right: 6px;
+}
+
+.activity-filter-container .icon-cancel{
+    margin-left: 5px;
+}
+
+.activity-date-selecter{
+    display: block;
+    height: 25.5px;
+    width: 130px;
+    margin-top: 10px;
+    font-size: 12px;
+    font-weight: bold;
+}

 /* Selectize */
-.selectize-control.single.user-selecter {
+.selectize-control.single.user-selecter, .selectize-control.single.action-selecter {
    height: 30px;
 }

@@ -7253,17 +7253,16 @@ color:#FF7B00;

 /* Activity Tab in user manager */

-.select-user {
-  background: #fafafa;
+.activity-select {
  height: 50%;
+  text-align: left;
+  margin-right: 20px;
+}

-  display: flex;
-  align-items: center;
-
-  padding: 0 20px;
-
-  box-shadow: 0px 2px 4px #00000024;
-  border-radius: 5px;
+.activity-filter-container{
+    border-radius: 20px;
+    padding: 4px 10px;
+    margin-right: 6px;
 }

 .start-date, 
@@ -7275,11 +7274,6 @@ color:#FF7B00;
    white-space: nowrap;
 }

-.acivity-time-text {
-  font-size: 13px;
-  font-weight: bold;
-}
-
 .line {
  background: #fafafa;
  box-shadow: 0px 2px 4px #00000024;
@@ -7311,7 +7305,6 @@ color:#FF7B00;
 }

 .download_csv {
-  margin-left: auto;
  height: 25px;
  width: 30px;
  background: #dddddd;
@@ -1915,23 +1915,28 @@ background:#6C2D2D!important;

 /* Activity Tab in user manager */

-.select-user {
-  background: #555555;
-  height: 50%;
-
-  display: flex;
-  align-items: center;
-
-  padding: 0 20px;
-
-  box-shadow: 0px 2px 4px #00000024;
-  border-radius: 5px;
+.activity-more-filters, .activity-more-filters-content {
+  background-color: #343434 !important;
 }

-.select-user-title {
+.selectize-control.user-selecter.single .selectize-input, .selectize-control.action-selecter.single .selectize-input {
+  border-color: #555555 !important;
+}
+
+.activity-select-title {
  color: #bbbbbb;
 }

+.activity-date-selecter {
+  background-color: #555555;
+  color: #D5D5D5;
+}
+
+.activity-filter-container{
+  background-color: #555555;
+  color: #D5D5D5;
+}
+
 .start-date, 
 .end-date {
    padding: 5px 10px;
@@ -1941,12 +1946,6 @@ background:#6C2D2D!important;
    color: #bbbbbb;
 }

-.acivity-time-text {
-  font-size: 13px;
-  font-weight: bold;
-  color: #bbbbbb;
-}
-
 /* Strange why this is different from light mode */
 .compactView .user-container-initials-wrapper > span {
  height: 40px !important;
@@ -1988,7 +1987,6 @@ background:#6C2D2D!important;
 }

 .download_csv {
-  margin-left: auto;
  height: 25px;
  width: 30px;
  background: #555555;
@@ -142,6 +142,105 @@ SELECT COUNT(*)
 list($nb_users) = pwg_db_fetch_row(pwg_query($query));
 $template->assign('nb_users', $nb_users);

+$query = '
+SELECT
+    occured_on
+  FROM '.ACTIVITY_TABLE.'
+  WHERE object != \'system\'
+  ;';
+
+$result = query2array($query);
+
+$dates = array();
+
+foreach($result as $time){
+  list($date, $hour) = explode(' ', $time['occured_on']);
+  $dates[] = date_format(date_create($date),"Y-m-d");
+}
+
+$dates = array_unique($dates);
+$list_dates['allDates'] = implode(',',$dates);
+$list_dates['min'] = $dates[0];
+$list_dates['max'] = end($dates);
+
+$template->assign('ACTIVITY_DATES', $list_dates);
+
+$additional_filt_type = false;
+$additional_filt_name = null;
+$additional_filt_value = null;
+
+if(isset($_GET['photo']))
+{
+  $query = '
+  SELECT
+    name
+  FROM '.IMAGES_TABLE.'
+  WHERE id = '.$_GET['photo'].';';
+
+  $additional_filt_type = 'photo';
+  $additional_filt_name = query2array($query)[0]['name'];
+  $additional_filt_value = $_GET['photo'];
+}
+else if (isset($_GET['album']))
+{
+  $query = '
+  SELECT
+    name
+  FROM '.CATEGORIES_TABLE.'
+  WHERE id = '.$_GET['album'].';';
+
+  $additional_filt_type = 'album';
+  $additional_filt_name = query2array($query)[0]['name'];
+  $additional_filt_value = $_GET['album'];
+}
+else if (isset($_GET['group']))
+{
+  $query = '
+  SELECT
+    name
+  FROM '.GROUPS_TABLE.'
+  WHERE id = '.$_GET['group'].';';
+
+  $additional_filt_type = 'group';
+  $additional_filt_name = query2array($query)[0]['name'];
+  $additional_filt_value = $_GET['group'];
+}
+
+$template->assign('ADDITIONAL_FILT', array(
+  'type' => $additional_filt_type,
+  'name' => $additional_filt_name,
+  'value' => $additional_filt_value
+));
+
+$query = '
+SELECT
+    object, 
+    action, 
+    count(*) AS counter
+  FROM '.ACTIVITY_TABLE.'
+  WHERE object != \'system\'';
+
+  if ($additional_filt_type)
+  {
+    $query .= '
+    AND object = "'.$additional_filt_type.'"';
+  }
+
+  $query .= '
+  GROUP BY 
+    action,
+    object
+  ORDER BY object ASC
+  ;';
+
+
+$actions = query2array($query);
+foreach($actions as &$action){
+  $action['value'] = $action['object'].'/'.$action['action'];
+}
+
+$template->assign('ACTIONS', $actions);
+
 $template->assign_var_from_handle('ADMIN_CONTENT', 'user_activity');

 ?>
@@ -811,7 +811,7 @@ $conf['dashboard_activity_nb_weeks'] = 4;
 // 'all' = do not filter, display all
 // 'admins_only' = only display connections of admin users
 // 'none' = don't even display connections of admin users
-$conf['activity_display_connections'] = 'admins_only';
+$conf['activity_display_connections'] = 'all';

 // On album mover page, number of seconds before auto openning album when
 // dragging an album. In milliseconds. 3 seconds by default.
@@ -459,12 +459,77 @@ function ws_getActivityList($param, &$service)
  
  $output_lines = array();
  $current_key = '';
-  $page_size = 100000; //We will fetch X lines in database =/= lines displayed due to line concatenation
-  $page_offset = $param['page']*$page_size;
+  $page_size = 100; //We will fetch X lines in database =/= lines displayed due to line concatenation
+  //$page_offset = $param['page']*$page_size;
+  $page_offset = $param['offset'];

  $user_ids = array();

-  $query = '
+  $line_id = 0;
+
+  
+
+  if (!empty($param['date_min'])) {
+    $min = date_format(date_create($param['date_min']), "Y-m-d H:i:s");
+    $max = date_format(date_create($param['date_max']), "Y-m-d 23:59:59");
+  }
+
+  if (!empty($param['date_max'])) {
+    $max = date_format(date_create($param['date_max']), "Y-m-d 23:59:59");
+  }
+
+  if (isset($param['uid'])) {
+    $query = '
+  SELECT
+      count(*)
+    FROM '.ACTIVITY_TABLE.'
+    WHERE object != \'system\'
+    AND performed_by = '.$param['uid'];
+  } else {
+    $query = '
+  SELECT
+      count(*)
+    FROM '.ACTIVITY_TABLE.'
+    WHERE object != \'system\'';
+  }
+
+  if (isset($param['action']))
+  {
+    $query .= '
+    AND action = "'.$param['action'].'"';
+  }
+
+  if (isset($param['object']))
+  {
+    $query .= '
+    AND object = "'.$param['object'].'"';
+  }
+
+  if (!empty($param['date_min']))
+  {
+    $query .= '
+    AND occured_on >= "'.$min.'"';
+  }
+
+  if (!empty($param['date_max']))
+  {
+    $query .= '
+    AND occured_on <= "'.$max.'"';
+  }
+
+  if (!empty($param['id']))
+  {
+    $query .= '
+    AND object_id = '.$param['id'];
+  }
+
+  $query .= ';';
+
+  $max_line = (pwg_db_fetch_row(pwg_query($query))[0]);
+  
+  while(sizeof($output_lines) < $page_size and !($page_offset >= $max_line))
+  {
+    $query = '
 SELECT
    activity_id,
    performed_by,
@@ -479,11 +544,43 @@ SELECT
  FROM '.ACTIVITY_TABLE.'
  WHERE object != \'system\'';

-  if (isset($param['uid']))
+    if (isset($param['uid']))
+    {
+      $query.= '
+      AND performed_by = '.$param['uid'];
+    }
+
+    if (isset($param['action']))
+    {
+      $query .= '
+      AND action = "'.$param['action'].'"';
+    }
+
+    if (isset($param['object']))
+    {
+      $query .= '
+      AND object = "'.$param['object'].'"';
+    }
+
+  if (!empty($param['date_min']))
  {
-    $query.= '
-    AND performed_by = '.$param['uid'];
+    $query .= '
+    AND occured_on >= "'.$min.'"';
  }
+
+  if (!empty($param['date_max']))
+  {
+    $query .= '
+    AND occured_on <= "'.$max.'"';
+  }
+
+  if (!empty($param['id']))
+  {
+    $id = pwg_db_real_escape_string(stripslashes($param['id']));
+    $query .= '
+    AND object_id = '.$id;
+  }
+
  elseif ('none' == $conf['activity_display_connections'])
  {
    $query.= '
@@ -496,67 +593,77 @@ SELECT
    AND NOT (action IN (\'login\', \'logout\') AND object_id NOT IN ('.implode(',', get_admins()).'))';
  }

-  $query.= '
+    $query.= '
  ORDER BY activity_id DESC
-  LIMIT '.$page_size.' OFFSET '.$page_offset.'
+  LIMIT '.($page_size * 5).' OFFSET '.$page_offset.'
 ;';

-  $line_id = 0;
-  $result = pwg_query($query);
-  while ($row = pwg_db_fetch_assoc($result))
-  {
-    $row['details'] = str_replace('`groups`', 'groups', $row['details']);
-    $row['details'] = str_replace('`rank`', 'rank', $row['details']);
-    $details = @unserialize($row['details']);
+    $result = pwg_query($query);

-    if (isset($row['user_agent']))
+    while ($row = pwg_db_fetch_assoc($result))
    {
-      $details['agent'] = $row['user_agent'];
-    }
-
-    if (isset($details['method']))
-    {
-      $detailsType = 'method';
-    }
-    if (isset($details['script']))
-    {
-      $detailsType = 'script';
-    }
-
-    $line_key = $row['session_idx'].'~'.$row['object'].'~'.$row['action'].'~'; // idx~photo~add
-  
-    if ($line_key === $current_key)
-    {
-      // I increment the counter of the previous line
-      $output_lines[count($output_lines)-1]['counter']++;
-      $output_lines[count($output_lines)-1]['object_id'][] = $row['object_id'];
-    }
-    else
-    {
-      list($date, $hour) = explode(' ', $row['occured_on']);
-      // New line
-      $output_lines[] = array(
-        'id' => $line_id,
-        'object' => $row['object'],
-        'object_id' => array($row['object_id']),
-        'action' => $row['action'],
-        'ip_address' => $row['ip_address'],
-        'date' => format_date($date),
-        'hour' => $hour,
-        'user_id' => $row['performed_by'],
-        'detailsType' => $detailsType,
-        'details' => $details,
-        'counter' => 1, 
-      );
-
-      $user_ids[ $row['performed_by'] ] = 1;
-      if ('user' == $row['object'])
+      if (sizeof($output_lines) < $page_size)
      {
-        $user_ids[ $row['object_id'] ] = 1;
-      }
+        $page_offset++;

-      $current_key = $line_key;
-      $line_id++;
+        $row['details'] = str_replace('`groups`', 'groups', $row['details']);
+        $row['details'] = str_replace('`rank`', 'rank', $row['details']);
+        $details = @unserialize($row['details']);
+
+        if (isset($row['user_agent']))
+        {
+          $details['agent'] = $row['user_agent'];
+        }
+
+        if (isset($details['method']))
+        {
+          $detailsType = 'method';
+        }
+        if (isset($details['script']))
+        {
+          $detailsType = 'script';
+        }
+
+        $line_key = $row['session_idx'].'~'.$row['object'].'~'.$row['action'].'~'; // idx~photo~add
+  
+        if ($line_key === $current_key)
+        {
+          // I increment the counter of the previous line
+          $output_lines[count($output_lines)-1]['counter']++;
+          $output_lines[count($output_lines)-1]['object_id'][] = $row['object_id'];
+        }
+        else
+        {
+          list($date, $hour) = explode(' ', $row['occured_on']);
+          // New line
+          $output_lines[] = array(
+            'id' => $line_id,
+            'object' => $row['object'],
+            'object_id' => array($row['object_id']),
+            'action' => $row['action'],
+            'ip_address' => $row['ip_address'],
+            'date' => format_date($date),
+            'hour' => $hour,
+            'user_id' => $row['performed_by'],
+            'detailsType' => $detailsType,
+            'details' => $details,
+            'counter' => 1, 
+          );
+
+          $user_ids[ $row['performed_by'] ] = 1;
+          if ('user' == $row['object'])
+          {
+            $user_ids[ $row['object_id'] ] = 1;
+          }
+
+          $current_key = $line_key;
+          $line_id++;
+        }
+      }
+      else
+      {
+        break;
+      }
    }
  }

@@ -596,27 +703,11 @@ SELECT
    }
  }

-  if (isset($param['uid'])) {
-    $query = '
-  SELECT
-      count(*)
-    FROM '.ACTIVITY_TABLE.'
-    WHERE performed_by = '.$param['uid'].'
-  ;';
-  } else {
-    $query = '
-  SELECT
-      count(*)
-    FROM '.ACTIVITY_TABLE.'
-  ;';
-  }
-
-  $result = (pwg_db_fetch_row(pwg_query($query))[0])/$page_size;
-
  return array(
    'result_lines' => $output_lines,
-    'max_page' => floor($result),
-    'params' => $param,
+    'page_offset' => $page_offset,
+    'end_page' => ($page_offset >= $max_line),
+    'params' => $param
  );
 }