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

Support custom confirmJs on postLink (with access to formName of parent::postLink) #381

Open
1 of 3 tasks
gludie opened this issue Mar 12, 2023 · 9 comments
Open
1 of 3 tasks

Comments

@gludie
Copy link

gludie commented Mar 12, 2023

This is a (multiple allowed):

  • bug

  • enhancement

  • feature-discussion (RFC)

  • BootstrapUI Version: 4.0.1

  • Bootstrap Framework Version: 5.2.3

  • jQuery: -

  • Platform and Target: -

What you did

For modal forms, it could be useful, to have the formName (created in core postLink) for later submit from the modal available.

  • Add (overload bootstrap-ui) FormHelper and add postLink
  • Take confirmJs from $options[]
  • Add confirmJs to templates

I tested it by overloading the helper of bootstrap-ui:
FormHelper.php:

namespace App\View\Helper;

use BootstrapUI\View\Helper\FormHelper as BootstrapFormHelper;

class FormHelper extends BootstrapFormHelper
{
    /**     
     * Wrapper function for postLink Helper to allow custom js on postlinks 
     * 
     * @param string $title
     * @param string|array|null $url
     * @param array $options
     *
     * @return string
     */
    public function postLink(string $title, $url = null, array $options = []): string
    {
        if (isset($options['confirmJs'])) {
            $this->setTemplates(['confirmJs' => $options['confirmJs']]);
            unset($options['confirmJs']);
        }

        return parent::postLink($title, $url, $options);
    }
}

Here a standard use-case to trigger the bootstrap modal related javascript code (showModal()) somewhere in a view template:

<?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $item->id], [
       'confirm' => __('Are you sure to delete item {0}?', $item->id),
       'title' => __('Delete'),
       'class' => 'btn btn-danger',
       'data-bs-toggle' => "modal",   
       'data-bs-target' => "#bootstrapModal", 
       'confirmJs' => 'addToModal("{{formName}}"); return false;', // --> suppress the standard confirm {{confirm}}
       ]) ?>

Advantage I would see:

  • no need to repeat and set always the template confirmJs before calling postLink in templates
  • keeps templates more readable
  • core helper untouched

Would you recommend to do a hint in the docs instead of going for this enhancement ? (I believe, using modal windows for confirm messages instead of standard ones is a very common use-case. We could also add the necessary js and modal part to the layout as an example ?)

*) credits to James McDonald for his video CakePHP 4 - Replacing the Default Javascript Confirm Dialog with a Bootstrap 5 Modal and Kevin Pfeifers comments

@gludie
Copy link
Author

gludie commented Mar 12, 2023

Add-on and similar for the html link helper (2 examples)

use BootstrapUI\View\Helper\HtmlHelper as BootstrapHtmlHelper;

class HtmlHelper extends BootstrapHtmlHelper
{
    public function linkModal($title, $url = null, array $options = []): string
    {
        // suppress the standard core confirm script
        $this->setTemplates(['confirmJs' => 'return false;']);
        
        return parent::link($title, $url, $options);
    }

    public function link($title, $url = null, array $options = []): string
    {
        if (isset($options['confirmJs'])) {
            $confirmJs = $options['confirmJs'];
            unset($options['confirmJs']);
            $this->setTemplates(['confirmJs' => $confirmJs]);
        }

        return parent::link($title, $url, $options);
    }

}

Usage:

<?= $this->Html->linkModal(
        __('Confirm link'),
        ['action' => 'index', uniqid('link')],
        [
            'confirm' => 'Do you want to go to this page ?',
            'class' => 'nav-link',
            'data-bs-toggle' => "modal",
            'data-bs-target' => "#bootstrapModal",
        ]
    ) ?>

@dereuromark
Copy link
Member

It would be easier to directly make PRs here

@gludie
Copy link
Author

gludie commented Mar 13, 2023 via email

@dereuromark
Copy link
Member

You can keep it open for now, no worries.
Maybe others would like to also give some early feedback.

@ADmad
Copy link
Member

ADmad commented Mar 13, 2023

no need to repeat and set always the template confirmJs before calling postLink in templates

Having to set ['confirmJs' => 'foo'] instead of already possible ['templates' => ['confirmJs' => 'foo'] isn't much of an improvement. String templates were introduced to avoid bloating helper functions with custom options.

@gludie
Copy link
Author

gludie commented Mar 13, 2023

agree, I am pretty sure to have checked this as well admad … problem I had was the missing handling of variables in templates, but will recheck if templates is supported for Forms postLink(…) …

@gludie
Copy link
Author

gludie commented Mar 13, 2023

as far as I can see now, templates is only supported for controls. Html and Form Helper do use core implementation for link and postLink. here the journey started. may be there is a smarter way than I did currently and use templates option of 'link' and postLink like it was introduced for controls. Let's see. Another possibility which came into my mind was to redefine core function _confirm.

@ADmad
Copy link
Member

ADmad commented Mar 13, 2023

Please open an issue for the core to allow using templates options for the link methods.

@ADmad
Copy link
Member

ADmad commented Mar 13, 2023

Or you can just load a templates file to override the default templates and avoid having to do so for each call.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants