From 3cbc435419cfa17fabd9cdbc15d383d539f6b28c Mon Sep 17 00:00:00 2001
From: Yuriy Bakhtin <yurybakh@gmail.com>
Date: Mon, 4 Mar 2024 15:01:55 +0100
Subject: [PATCH] Fix layout after change page of participants list

---
 docs/CHANGELOG.md                             |  1 +
 .../js/humhub.calendar.participation.Form.js  | 28 +++++++++----------
 .../humhub.calendar.participation.Form.min.js |  2 +-
 widgets/views/participantList.php             |  1 +
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 1c381e13..19832f7a 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -9,6 +9,7 @@ Changelog
 - Fix #453: Profile Calendar not available when adding an event from the global Calendar when the module is enabled in the profile
 - Enh #457: Strikethrough cancelled events in calendar view
 - Enh #460: Add cancelled status in ICS files
+- Fix #402: Fix layout after change page of participants list
 
 1.5.8 (January 19, 2024)
 ------------------------
diff --git a/resources/js/humhub.calendar.participation.Form.js b/resources/js/humhub.calendar.participation.Form.js
index 409a6cfb..ffa3f04d 100644
--- a/resources/js/humhub.calendar.participation.Form.js
+++ b/resources/js/humhub.calendar.participation.Form.js
@@ -10,6 +10,7 @@ humhub.module('calendar.participation.Form', function (module, require, $) {
     var client = require('client');
     var status = require('ui.status');
     var calendar = require('calendar');
+    var modal = require('ui.modal');
 
     var Form = Widget.extend();
 
@@ -32,22 +33,21 @@ humhub.module('calendar.participation.Form', function (module, require, $) {
                 }
             });
         }
+    }
 
-        var $modalBody = $('#globalModal .modal-body');
-        $modalBody.on('click', '#calendar-entry-participants-list .pagination a', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            var data = $(this).data();
+    Form.prototype.changeParticipantsListPage = function (evt) {
+        var that = this;
+        evt.preventDefault();
+        modal.footerLoader();
 
-            client.get(data.actionUrl).then(function(response) {
-                var $participantsList = $(response.html).filter('#calendar-entry-participants-list');
-                $modalBody.find('#calendar-entry-participants-list').replaceWith($participantsList);
-            }).catch(function(e) {
-                module.log.error(e, true);
-            }).finally(function () {
-                evt.finish();
-            });
+        client.get(evt).then(function(response) {
+            var $participantsList = $(response.html).filter('#calendar-entry-participants-list');
+            that.$.find('#calendar-entry-participants-list').replaceWith($participantsList);
+        }).catch(function(e) {
+            module.log.error(e, true);
+        }).finally(function () {
+            loader.reset(modal.global.getFooter());
+            evt.finish();
         });
     }
 
diff --git a/resources/js/humhub.calendar.participation.Form.min.js b/resources/js/humhub.calendar.participation.Form.min.js
index 526ec95c..322e415d 100644
--- a/resources/js/humhub.calendar.participation.Form.min.js
+++ b/resources/js/humhub.calendar.participation.Form.min.js
@@ -1 +1 @@
-humhub.module("calendar.participation.Form",function(r,t,s){var a=t("ui.widget").Widget,o=t("ui.loader"),c=t("client"),e=t("ui.status"),i=t("calendar"),n=a.extend();n.prototype.init=function(){var a=this;this.saveButton=s("#calendar-entry-participation-button-save"),this.nextButton=s("#calendar-entry-participation-button-next"),this.backButton=s("#calendar-entry-participation-button-back"),this.tabSettings=s("#calendar-entry-participation-tabs li:first"),this.tabParticipants=s("#calendar-entry-participation-tabs li:last"),this.isNewRecord=this.backButton.length,this.isNewRecord&&s("#calendar-entry-participation-tabs li a").click(function(){if(1<s("#calendar-entry-participation-tabs li:visible").length){var t=0===s(this).closest("li").index();a.saveButton.toggle(!t),a.nextButton.toggle(t)}});var i=s("#globalModal .modal-body");i.on("click","#calendar-entry-participants-list .pagination a",function(t){t.preventDefault(),t.stopPropagation();var a=s(this).data();c.get(a.actionUrl).then(function(t){var a=s(t.html).filter("#calendar-entry-participants-list");i.find("#calendar-entry-participants-list").replaceWith(a)}).catch(function(t){r.log.error(t,!0)}).finally(function(){evt.finish()})})},n.prototype.update=function(t){var a=t.$trigger.parent(),i=t.$trigger.parent().html(),n={entryId:this.data("entry-id"),userId:t.$trigger.closest("li").data("user-id"),status:t.$trigger.val()};o.set(a,{size:"10px",css:{padding:"0px"}}),c.post(this.data("update-url"),{data:n}).then(function(t){t.success&&(e.success(t.message),o.remove(a),a.html(i).find("select").val(n.status))}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},n.prototype.remove=function(t){var a=t.$trigger.closest("li"),i={entryId:this.data("entry-id"),userId:a.data("user-id")};c.post(this.data("remove-url"),{data:i}).then(function(t){t.success?(e.success(t.message),1===a.closest("ul").find("li[data-user-id]").length&&a.closest("ul").prev("p").show(),a.remove(),l(-1)):e.error(t.message)}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},n.prototype.add=function(t){var n=t.$trigger.closest(".calendar-entry-new-participants-form"),a={entryId:this.data("entry-id"),guids:n.find('select[name="CalendarEntryParticipationForm[newParticipants][]"]').val()},i=n.find('select[name="CalendarEntryParticipationForm[newParticipantStatus]"]');i.length&&(a.status=i.val()),c.post(t,{data:a}).then(function(t){if(t.html){var a=n.closest(".calendar-entry-participants").find("#calendar-entry-participants-list ul.media-list"),i=a.find("li").length;a.append(t.html),l(a.find("li").length-i)}t.success?e.success(t.success):t.warning?e.warn(t.warning):t.error&&e.error(t.error)}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},n.prototype.filterState=function(t){var a=t.$trigger,i=a.parent(),n=s("#globalModal"),e={id:this.data("entry-id"),state:a.data("state")};a.attr("data-active",""),o.set(i,{size:"10px",css:{padding:"0px"}}),c.get(this.data("filter-url"),{data:e}).then(function(t){n.find("#calendar-entry-participants-list").after(t.html).remove(),l(n.find("[name=calendar-entry-participants-count]").val(),!1),o.reset(i),i.find(".btn.active").removeClass("active"),i.find("[data-active]").addClass("active").removeAttr("data-active")}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},n.prototype.changeParticipationMode=function(t){var a=0==t.$trigger.val();a?this.$.find(".participationOnly").fadeOut("fast"):this.$.find(".participationOnly").fadeIn("fast"),this.tabParticipants.toggle(!a),this.isNewRecord&&(this.saveButton.toggle(a),this.nextButton.toggle(!a))};var l=function(t,a){var i=s("#globalModal").find(".calendar-entry-participants-count span");i.html(a||void 0===a?parseInt(i.html())+t:t)};n.prototype.next=function(t){this.tabParticipants.find("a").click(),this.nextButton.hide(),this.saveButton.show(),t.finish()},n.prototype.back=function(t){this.tabParticipants.hasClass("active")?(this.tabSettings.find("a").click(),this.saveButton.hide(),this.nextButton.show()):(o.set(t.$trigger,{size:"10px",css:{padding:"0px"}}),i.editModal(t)),t.finish()},r.export=n});
\ No newline at end of file
+humhub.module("calendar.participation.Form",function(r,t,s){var a=t("ui.widget").Widget,o=t("ui.loader"),c=t("client"),e=t("ui.status"),i=t("calendar"),n=t("ui.modal"),l=a.extend();l.prototype.init=function(){var a=this;this.saveButton=s("#calendar-entry-participation-button-save"),this.nextButton=s("#calendar-entry-participation-button-next"),this.backButton=s("#calendar-entry-participation-button-back"),this.tabSettings=s("#calendar-entry-participation-tabs li:first"),this.tabParticipants=s("#calendar-entry-participation-tabs li:last"),this.isNewRecord=this.backButton.length,this.isNewRecord&&s("#calendar-entry-participation-tabs li a").click(function(){if(1<s("#calendar-entry-participation-tabs li:visible").length){var t=0===s(this).closest("li").index();a.saveButton.toggle(!t),a.nextButton.toggle(t)}})},l.prototype.changeParticipantsListPage=function(t){var i=this;t.preventDefault(),n.footerLoader(),c.get(t).then(function(t){var a=s(t.html).filter("#calendar-entry-participants-list");i.$.find("#calendar-entry-participants-list").replaceWith(a)}).catch(function(t){r.log.error(t,!0)}).finally(function(){o.reset(n.global.getFooter()),t.finish()})},l.prototype.update=function(t){var a=t.$trigger.parent(),i=t.$trigger.parent().html(),n={entryId:this.data("entry-id"),userId:t.$trigger.closest("li").data("user-id"),status:t.$trigger.val()};o.set(a,{size:"10px",css:{padding:"0px"}}),c.post(this.data("update-url"),{data:n}).then(function(t){t.success&&(e.success(t.message),o.remove(a),a.html(i).find("select").val(n.status))}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},l.prototype.remove=function(t){var a=t.$trigger.closest("li"),i={entryId:this.data("entry-id"),userId:a.data("user-id")};c.post(this.data("remove-url"),{data:i}).then(function(t){t.success?(e.success(t.message),1===a.closest("ul").find("li[data-user-id]").length&&a.closest("ul").prev("p").show(),a.remove(),d(-1)):e.error(t.message)}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},l.prototype.add=function(t){var n=t.$trigger.closest(".calendar-entry-new-participants-form"),a={entryId:this.data("entry-id"),guids:n.find('select[name="CalendarEntryParticipationForm[newParticipants][]"]').val()},i=n.find('select[name="CalendarEntryParticipationForm[newParticipantStatus]"]');i.length&&(a.status=i.val()),c.post(t,{data:a}).then(function(t){if(t.html){var a=n.closest(".calendar-entry-participants").find("#calendar-entry-participants-list ul.media-list"),i=a.find("li").length;a.append(t.html),d(a.find("li").length-i)}t.success?e.success(t.success):t.warning?e.warn(t.warning):t.error&&e.error(t.error)}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},l.prototype.filterState=function(t){var a=t.$trigger,i=a.parent(),n=s("#globalModal"),e={id:this.data("entry-id"),state:a.data("state")};a.attr("data-active",""),o.set(i,{size:"10px",css:{padding:"0px"}}),c.get(this.data("filter-url"),{data:e}).then(function(t){n.find("#calendar-entry-participants-list").after(t.html).remove(),d(n.find("[name=calendar-entry-participants-count]").val(),!1),o.reset(i),i.find(".btn.active").removeClass("active"),i.find("[data-active]").addClass("active").removeAttr("data-active")}).catch(function(t){r.log.error(t,!0)}).finally(function(){t.finish()})},l.prototype.changeParticipationMode=function(t){var a=0==t.$trigger.val();a?this.$.find(".participationOnly").fadeOut("fast"):this.$.find(".participationOnly").fadeIn("fast"),this.tabParticipants.toggle(!a),this.isNewRecord&&(this.saveButton.toggle(a),this.nextButton.toggle(!a))};var d=function(t,a){var i=s("#globalModal").find(".calendar-entry-participants-count span");i.html(a||void 0===a?parseInt(i.html())+t:t)};l.prototype.next=function(t){this.tabParticipants.find("a").click(),this.nextButton.hide(),this.saveButton.show(),t.finish()},l.prototype.back=function(t){this.tabParticipants.hasClass("active")?(this.tabSettings.find("a").click(),this.saveButton.hide(),this.nextButton.show()):(o.set(t.$trigger,{size:"10px",css:{padding:"0px"}}),i.editModal(t)),t.finish()},r.export=l});
\ No newline at end of file
diff --git a/widgets/views/participantList.php b/widgets/views/participantList.php
index df761123..397414f0 100644
--- a/widgets/views/participantList.php
+++ b/widgets/views/participantList.php
@@ -50,6 +50,7 @@
     <div class="pagination-container">
         <?= AjaxLinkPager::widget([
             'pagination' => $pagination,
+            'linkOptions' => ['data' => ['action-click' => 'changeParticipantsListPage']]
         ]); ?>
         <?= Html::hiddenInput('calendar-entry-participants-count', $pagination->totalCount) ?>
     </div>