Table Triable Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require aldaflux/table-triable-bundle
   

   Ensure your composer.json meets the PHP (>=5.3.2) and Symfony (>=3.0) requirements.

2. Enable the Bundle: Add to config/bundles.php:

   return [
       // ...
       Aldaflux\TableTriableBundle\AldafluxTableTriableBundle::class => ['all' => true],
   ];
   

3. Basic Twig Integration: Include the CSS/JS in your base template (base.html.twig):

   {% stylesheets '@AldafluxTableTriableBundle/Resources/public/css/*' %}
       <link href="{{ asset_url }}" rel="stylesheet" />
   {% endstylesheets %}
   
   {% javascripts
       '@AldafluxTableTriableBundle/Resources/public/js/*'
   %}
       <script src="{{ asset_url }}"></script>
   {% endjavascripts %}
   

4. First Use Case: Add a triable link to a DataTable row (e.g., in a Twig template):

   <a href="{{ path('delete_item', {'id': item.id}) }}"
      class="btn btn-danger triable-link"
      data-confirm="Are you sure you want to delete this item?"
      data-confirm-cancel="Cancel"
      data-confirm-ok="Delete">
      Delete
   </a>
   

Implementation Patterns

Core Workflow

1. Markup Integration: Use the triable-link class on anchor tags (<a>) to enable confirmation dialogs. Required attributes:

   • data-confirm: Confirmation message.
   • data-confirm-ok: Text for the "OK" button (default: "OK").
   • data-confirm-cancel: Text for the "Cancel" button (default: "Cancel").

2. DataTables Compatibility: The bundle includes DataTables JS/CSS. Extend your DataTable initialization:

   $('#example').DataTable({
       // ... your config ...
   });
   // Initialize triable links after DataTable loads
   $('.triable-link').triable();
   

3. Dynamic Confirmation Messages: Use Twig variables for dynamic messages:

   <a href="{{ path('archive_item', {'id': item.id}) }}"
      class="triable-link"
      data-confirm="Archive '{{ item.name }}'? This cannot be undone."
      data-confirm-ok="Archive">
      Archive
   </a>
   

4. Symfony Route Integration: Pair with Symfony routes (e.g., delete_item):

   # config/routes.yaml
   delete_item:
       path: /items/{id}/delete
       controller: App\Controller\ItemController::delete
       methods: [DELETE]
   

5. Custom Templates: Override the default confirmation modal by extending the Twig template:

   {% extends '@AldafluxTableTriableBundle/Resources/views/confirmation_modal.html.twig' %}
   {% block modal_title %}Custom Title{% endblock %}
   

Gotchas and Tips

Pitfalls

1. JavaScript Dependency:

   • Ensure tableExtension.js loads after DataTables JS. Use {% javascripts %} blocks or <script> tags in order.
   • If using Bootstrap 4, include the provided CSS before your custom styles to avoid specificity issues.

2. CSRF Protection:

   • The bundle does not handle CSRF tokens. Add them manually to forms/links:

     <a href="{{ path('delete_item', {'id': item.id}) }}?{{ csrf_token() }}"
        class="triable-link"
        data-confirm="...">
     

3. PHP Version Mismatch:

   • The bundle requires PHP >=5.3.2. Test locally with php -v before deployment.

4. DataTables Version Conflicts:

   • The bundle bundles DataTables 1.10.19. If your project uses a different version, exclude the bundled JS/CSS and integrate your own:

     // Disable auto-initialization
     $('.triable-link').triable({ autoInit: false });
     // Manually initialize after your DataTable setup
     $('.triable-link').triable();
     

Debugging Tips

1. Check Console for Errors:

   • Open browser dev tools (F12) and look for 404 errors on JS/CSS files. Verify paths in base.html.twig.

2. Verify Initialization:

   • Confirm tableExtension.js runs by checking for the triable function:

     console.log(typeof $.fn.triable); // Should log "function"
     

3. Override Defaults:

   • Customize behavior via options:

     $('.triable-link').triable({
         modalClass: 'custom-modal',
         onConfirm: function(url) { console.log('Redirecting to:', url); }
     });
     

Extension Points

1. Custom Confirmation Logic:

   • Extend the triable function in a separate JS file:

     $.fn.triable.defaults.onConfirm = function(url) {
         if (confirm('Custom logic check?')) {
             window.location.href = url;
         }
     };
     

2. Server-Side Validation:

   • Use Symfony’s AbstractController to validate actions before processing:

     public function delete(Item $item, Request $request): Response
     {
         if (!$request->isXmlHttpRequest()) {
             throw $this->createAccessDeniedException();
         }
         // Proceed with deletion
     }
     

3. Localization:

   • Override Twig templates for multi-language support:

     {% trans choice with {'%name%': item.name} %}
         Are you sure you want to delete '%name%'?
     {% endtrans %}