Changes to Bootstrap break permission modal on long ressource lists after pagebreak

[lucs7]

Tested in: develop
Last working version: 2.8.6.2-2.4.1

Due to the changes move to bootstrap an issue was introduced that blocks changes in user permission for ressources not on page 1.
Instead of opening the permission modal, the page just scrolls up and nothing is show.

Maybe there is an easy fix, bit I did not find the issue yet
#443
@labmecanicatec

[lucs7]

Here is a small video to show the behaviour
https://github.com/user-attachments/assets/3c522637-f2f3-4956-b82c-b651fe675a4d

[labmecanicatec]

Hi @lucs7 , yes, it is a recurring problem in all tables (except in Blackout Times) that have two or more pages and it is due to the implementation of dataTables. For the moment, to make the application more functional, pagination should be disabled in all tables in lib/Common/SmartyPage.php by adding "paging": false, on line 644.
On the other hand, the update project is still in beta phase, so we ask @effgarces to undo the merge of the dev-bootstrap5 branch with develop, we continue working on this project and are willing to receive help.

[lucs7]

Thanks @labmecanicatec. To be honest I love the dev-bootstrap5 so much that I would rather turn of pagination. thanks for the solution.

[labmecanicatec]

Sorry @lucs7 , I meant on line 664

[lucs7]

I did solve it by commenting changing all tables to the report table setting

//        if ($tableId == 'report-results') {
            $pagination = '"paging": false,
                "lengthChange": false,
                "searching": false,
                "info": false,
                "ordering": false,';
//        } else {
//            $pagination = '"lengthMenu": [ [25, 50, 75, 100, -1], [ 25, 50, 75, 100, "' . $AllText . '"] ],';
//        }

[lucs7]

@labmecanicatec
I noticed that the behaviour is similar for the ressourceAdmin page which requires on line 712. What would be the best way to resolve the conflict between bootstraps and datatables?

[labmecanicatec]

Hi @lucs7 Are you referring to the SchedulesAdmin table? Basically removing pagination

[lucs7]

Yes, the pagination us in the ScheduleAdmins table which is certed through the CreateDataTableFilter in Smarty Page.php

  public function CreateDataTableFilter($params)
   {
       $tableId = $params['tableId'];
       $searchText = $this->Resources->GetString('Filter');
       $viewAllText = $this->Resources->GetString('All');
       $NoResultsFoundText = $this->Resources->GetString('NoResultsFound');
       $infoText = $this->Resources->GetString('Info');
       $lengthMenuText = $this->Resources->GetString('LengthMenu');
       return sprintf('');
       //     '<script>
       //    var table =  $("#' . $tableId . '").DataTable({
       //         "dom": \'<"d-flex justify-content-between my-1"fl><t>t<"d-flex justify-content-center"i><"d-flex justify-content-center"p><"clear">\',
       //         "lengthMenu": [ [10, 50, 75, 100, -1], [ 10, 50, 75, 100, "' . $viewAllText . '"] ],
       //         language: {
       //             search: "' . $searchText . '",
       //             info: "' . $searchText . '",
       //             infoEmpty: "' . $infoText . '",
       //             infoFiltered: "",
       //             lengthMenu: "' . $lengthMenuText . '",
       //             zeroRecords: "' . $NoResultsFoundText .
       //     '"
       //         },
       //     });
       // </script>
       // ' 
       // );
   }

We basically encounter the same behavior. Any links/buttons after the page break are not functional and just work as anchor links scrolling to the top of the page.

[labmecanicatec]

To disable pagination in SmartyPage.php:

public function CreateDataTableFilter($params)
{
$tableId = $params['tableId'];
$searchText = $this->Resources->GetString('Filter');
$viewAllText = $this->Resources->GetString('All');
$NoResultsFoundText = $this->Resources->GetString('NoResultsFound');
$infoText = $this->Resources->GetString('Info');
$lengthMenuText = $this->Resources->GetString('LengthMenu');

    if ($tableId == 'schedulesTable') {
        $pagination = '"paging": false,
            "lengthChange": false,
            "searching": true,
            "info": false,
            "ordering": false,';
    } else {
        $pagination = '"lengthMenu": [ [25, 50, 75, 100, -1], [ 25, 50, 75, 100, "' . $viewAllText . '"] ],';
    }
    return sprintf(
        '<script>
        console.log("tableId: ' . $tableId . '");
       var table =  $("#' . $tableId . '").DataTable({
            "dom": \'<"d-flex justify-content-between my-1"fl><t>t<"d-flex justify-content-center"i><"d-flex justify-content-center"p><"clear">\',
            ' . $pagination . '
            language: {
                search: "' . $searchText . '",
                info: "' . $searchText . '",
                infoEmpty: "' . $infoText . '",
                infoFiltered: "",
                lengthMenu: "' . $lengthMenuText . '",
                zeroRecords: "' . $NoResultsFoundText .
            '"
            },
        });
    </script>
    '
    );
}

To prevent the page from scrolling up when clicking the rename button, in Web/scripts/admin/schedule.js add e.preventDefault(); on line 98:

details.find('.renameButton').click(function (e) {
e.preventDefault();
e.stopPropagation();
details.find('.scheduleName').editable('toggle');
});

I hope to be of help, I apologize for the inconvenience and I want to solve these problems but my lack of time has prevented me from doing so.

[lucs7]

``thanks for leading me in the right direction. Js is much easier for me than php and I haven't had the time to really work myself deeper into the project structure.

As far as I understand the issue the datatables pagination rerenders the table which removes the event listeners created in ressource.js or schedule.js

I tried to change how the the event listeners are called through

`` $('#resourcesTable_wrapper').on('click', '.update', function (e) {
e.preventDefault();
var id = $(this).closest('.resourceDetails').attr('data-resourceId');
console.log('Resscourse: ' + id);
setActiveResourceId(id);
});

	$('#resourcesTable_wrapper').on('click', '.imageButton', function (e) {
		showChangeImage(e);
	});

	$('#resourcesTable_wrapper').on('click', '.renameButton', function (e) {
		e.stopPropagation();
		$(this).closest('.resourceDetails').find('.resourceName').editable('toggle');
	});

This seems to work over all pages but I am still testing.

[lucs7]

I created a pull request with updated js for the admin pages that should fix the Datatables integration
#473