Pending

User tests: Successful: Unsuccessful:

avatar LadySolveig
LadySolveig
21 Nov 2024

Pull Request for Issue # .

Summary of Changes

This PR replaces submit() with requestSubmit() method to make it possible to work with the submit event in other places after submission of the searchtool filters. (e. g. submit form and only partly reload page via ajax).

You can find more information here https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes

It also adds a joomla:updated event event listener for this use case to reinitialize functionality after only partly reloading the page.

Testing Instructions

Preparation

const testSearchtools = () => {
  const searchtools = document.querySelector('.js-stools');
  if (!searchtools) {
    return;
  }

  document.addEventListener('submit', event => {
    console.log('Test searchtools submit', event.target);
  });

  // Cleanup
  document.removeEventListener('DOMContentLoaded', testSearchtools);
};

// Execute on DOM Loaded Event
document.addEventListener('DOMContentLoaded', testSearchtools);
  • Add this code snippet at the bottom of your backend template javascript file.
    e. g. media/templates/administrator/atum/js/template.js

  • Activate debug mode in backend.

  • (Optional) Load sampledata via sample data plugin to have items to search and filter :)

  • Open articles listview in backend and open your browser dev tools.

  • Test filter, search and order functionality
    grafik

After testing and checking the result before applying this PR

  • Fetch the pr and run npm ci

  • ReAdd code snippet to your backend template.

  • Test filter, search and order functionality as before and check again the console log.

  • Additional check filter and search functionality in other listviews to make sure all works as before.

Actual result BEFORE applying this Pull Request

Nothing should be shown in your browser developement console log.

Expected result AFTER applying this Pull Request

You should see something like this in your browser developement console log.
grafik

[Important] Search and filter should work as before!

Link to documentations

Please select:

  • Documentation link for docs.joomla.org:

  • No documentation changes for docs.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

avatar LadySolveig LadySolveig - open - 21 Nov 2024
avatar LadySolveig LadySolveig - change - 21 Nov 2024
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 21 Nov 2024
Category JavaScript Repository NPM Change
avatar LadySolveig
LadySolveig - comment - 21 Nov 2024

I would appreciate your feedback on whether this change makes sense to you. 🙂 @dgrammatiko @Fedik

avatar Fedik
Fedik - comment - 21 Nov 2024

Seems makes sense.
But we probabbly still should add a check if(form.requestSubmit), because in Safari it available only from 2022y

avatar LadySolveig
LadySolveig - comment - 21 Nov 2024

Thanks for the suggestion, will add the additional check tomorrow. 👍🏼

Add a Comment

Login with GitHub to post a comment