New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Filter Parameters in Options #23348

Open
wants to merge 2 commits into
base: 4.0-dev
from

Conversation

Projects
None yet
5 participants
@PhocaCz
Copy link

PhocaCz commented Dec 26, 2018

This PR adds the ability to filter parameters in Joomla! configuration options

Filter Options

Filter Options

Summary of Changes

The following files were changed:
administrator\components\com_config\tmpl\component\default.php - linked layout file
administrator\components\com_config\tmpl\application\default.php - linked layout file
layouts\joomla\searchtools\filter_options.php - layout file displaying filter input field
administrator\language\en-GB\en-GB.ini - added one language string
build\media_src\com_config\css\filter-options.css - added CSS to display search results in Global Configuration in a better way (Global Configuration is problematic part because it includes columns)
build\media_src\com_config\js\config-filter-options.es6.js - main Javascript file (thanks to David Jardin and Benjamin Trenkle for overwriting it from jQuey to Vanilla JS).

Testing Instructions

Because the Javascript file and CSS file should be built by npm, this feature must be tested the following way:
https://docs.joomla.org/J4.x:Setting_Up_Your_Local_Environment

After building Javascript and CSS files, just go to Joomla! Global Configuration or Options of some component and type into the filter input field.

Expected result

You should be able to filter parameters in Joomla! options, see videos:

See YouTube video (Joomla! 4):
Filter Parameters in Options - Joomla! 4

You can test this feature in Joomla! 3.9 with help of the following system plugin:
https://www.phoca.cz/phoca-filter-options-system-plugin

See YouTube video (Joomla! 3.9 - there is no PR in Joomla! 3.9 but system plugin)
Phoca Filter Options - Joomla! 3.9

Possible Problems

  • For now, I don't know if file names and the file location match Joomla! convention rules, if not, this needs to be changed
  • Global Configuration is a problematic part, because of columns. This feature is based on manipulating design parts. Global configuration needs extra CSS and maybe it needs to be improved
  • A11y not tested yet
  • Possible improvement could be unification of HTML output (Global Configuration / Component Options => #configContent vs. #config-document) and changing HTML Output of Options so there will be less Javascript manipulation.
Filter Parameters in Options
This PR adds the ability to filter parameters in Joomla! configuration options

@infograf768 infograf768 changed the title Filter Parameters in Options [4.0] Filter Parameters in Options Dec 27, 2018

@@ -48,6 +49,9 @@
<!-- End Sidebar -->
<!-- Begin Content -->
<div class="col-md-10">

<?php echo LayoutHelper::render('joomla.searchtools.filter_options', array('view' => $this)); ?>

This comment has been minimized.

@infograf768

infograf768 Dec 27, 2018

Member

line 52 and 54: extraneous tabs

@infograf768

This comment has been minimized.

Copy link
Member

infograf768 commented Dec 27, 2018

This works (tested also with French) but it is extremely confusing.
The issue is simple: the result(s) do not display to which specific tab they belong.

Examples:

screen shot 2018-12-27 at 08 53 05

screen shot 2018-12-27 at 08 56 17

Also some UI issues for example in global config depending on the window size.

@PhocaCz

This comment has been minimized.

Copy link

PhocaCz commented Dec 27, 2018

This works (tested also with French) but it is extremely confusing.
The issue is simple: the result(s) do not display to which specific tab they belong.

Hi, thank you for testing,

in fact, it is much more easier to leave the tabs and display the filtered items in tabs, but:

  1. if some parameter will be found in second or other tab, you just will not see it there, because the tab will be not active

  2. there were some ideas about adding e.g. number of found items in each tab - nice but the main function which is really quickly filter the parameters (you know the name but not the position) will be lost

  3. another way could be to somehow group the parameters by tabs (including tab header) but:

    3a) it can happen that you will list 6 tab headers and the result will be at the bottom, so the main function to not scroll through the site will be even lost

    3b) maybe some Javascript function could be done, which only displays tab headers for tabs where parameter was found and not display for tabs where nothing was found (but this can take a lot of resources because of manipulating all the content, so maybe then the filter function will be slower, hard to say). And of course tab names take the place that is forfeited for searched parameters :-(

So, some extra smart function which will detect that there are the same parameter names in results and will add some info about tab name maybe could somehow solve it 💡

Anyway it is very "unhappy" to call two parameters in one component with the same name. Tabs which can differentiate between the parameters with the same name are only "design" feature, so listing the parameters in other way (not using tabs) can be even confusing when two parameters in one component have the same name 💡

@dgrammatiko

This comment has been minimized.

Copy link
Contributor

dgrammatiko commented Dec 27, 2018

The issue is simple: the result(s) do not display to which specific tab they belong.

The real issue is that a form should never be spawn into different tabs. This is stupid and inaccessible!

Other than that, this is a workaround Joomla's huge problem of messing data editing/creation with the display options. The solution is to completely separate those two different tasks (layout/data entry) and keep the only reference that is needed: the layout input!
All and all this is not solving something, more likely it makes things even worse...

My 2c

document.querySelectorAll(excludeTabs).forEach((elem) => {elem.classList.remove('disabled')});

/* Cancel canceling of columns ( :-) ) in Global Configuration */
document.querySelectorAll(tabRow).forEach((elem) => {elem.classList.remove('filter-options-col')});

This comment has been minimized.

@dgrammatiko

dgrammatiko Dec 27, 2018

Contributor

This doesn't work in IE, use: [].slice.call(document.querySelectorAll(tabRow)).forEach((elem) => {elem.classList.remove('filter-options-col')})

This comment has been minimized.

@dgrammatiko

dgrammatiko Dec 27, 2018

Contributor

Same goes for all the document.querySelectorAll() calls

This comment has been minimized.

@dgrammatiko

dgrammatiko Dec 27, 2018

Contributor

Also please lint the script: npm run lint:js, the code style is totally off

This comment has been minimized.

@PhocaCz

PhocaCz Dec 28, 2018

Hi, thank you for the comments:

"npm run lint:js" - are you able to update this documentation including the explanation why use "npm run lint:js" ... will be great.

https://docs.joomla.org/J4.x:Setting_Up_Your_Local_Environment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment