Skip to content
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

Add clickable row option for grid actions #15859

Merged
merged 6 commits into from Oct 11, 2019
Next

Add clickable_row option on row LinkAction

  • Loading branch information
jolelievre committed Oct 7, 2019
commit ffcef5585913d44576d3096b1e534b517d017477
@@ -35,6 +35,23 @@ export default class LinkRowActionExtension {
* @param {Grid} grid
*/
extend(grid) {
$('tr', grid.getContainer()).each(function () {
const $parentRow = $(this);

$('.js-link-row-action[data-clickable-row=1]:first', $parentRow).each(function () {
const $rowLink = $(this);

const $parentCell = $rowLink.closest('td');
const clickableCells = $('td.data-type, td.identifier-type, td.badge-type', $parentRow)
.not($parentCell)
;

clickableCells.addClass('cursor-pointer').click(() => {
This conversation was marked as resolved by PierreRambaud

This comment has been minimized.

Copy link
@PierreRambaud

PierreRambaud Oct 8, 2019

Contributor

What if you click on a checkbox, or a link in the cell?

This comment has been minimized.

Copy link
@jolelievre

jolelievre Oct 8, 2019

Author Contributor

Which is why I only apply the click on some of the cells: td.data-type, td.identifier-type, td.badge-type This way toggle cells, checkboxes or actions still work correctly

This comment has been minimized.

Copy link
@PierreRambaud

PierreRambaud Oct 8, 2019

Contributor

Can you add a little comment to say that?
And are you sure with theses type you're not able to add link? :trollface:

Other solution could be to get the clicked element and be sure it's a td or a text.

This comment has been minimized.

Copy link
@jolelievre

jolelievre Oct 8, 2019

Author Contributor

Yes link are added using a LinkColumn to the definition which includes a link-type cell
So if you choose not to use the correct type, and override an existing template to include a link where there shouldn't be one... then you probably deserve it!!

I tried to check the event at first but the behaviour was "random" sometimes there's a div, sometimes it's the td which trigger the event, when it's a button you have other use cases Anyway it resulted in overly complex checks that still would allow false positive whereas this method is simpler to understand and (I think) guaranties the expected behaviour (we can always add additional types if need be)

This comment has been minimized.

Copy link
@jolelievre

jolelievre Oct 8, 2019

Author Contributor

Comment added

document.location = $rowLink.attr('href');
});
});
});
This conversation was marked as resolved by sarjon

This comment has been minimized.

Copy link
@sarjon

sarjon Oct 8, 2019

Contributor

It would be nice to wrap it into more meaningful function.

This comment has been minimized.

Copy link
@jolelievre

jolelievre Oct 8, 2019

Author Contributor

Yep, done


grid.getContainer().on('click', '.js-link-row-action', (event) => {
const confirmMessage = $(event.currentTarget).data('confirm-message');

@@ -54,12 +54,14 @@ protected function configureOptions(OptionsResolver $resolver)
->setDefaults([
'confirm_message' => '',
'accessibility_checker' => null,
'clickable_row' => false,
])
->setAllowedTypes('route', 'string')
->setAllowedTypes('route_param_name', 'string')
->setAllowedTypes('route_param_field', 'string')
->setAllowedTypes('confirm_message', 'string')
->setAllowedTypes('accessibility_checker', [AccessibilityCheckerInterface::class, 'callable', 'null'])
->setAllowedTypes('clickable_row', 'boolean')
;
}
@@ -37,6 +37,7 @@
data-placement="top"
data-original-title="{{ action.name }}"
{% endif %}
data-clickable-row="{{ action.options.clickable_row|default(false) }}"
>
{% if action.icon is not empty %}
<i class="material-icons">{{ action.icon }}</i>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.