[POC] datatable as a component for multiple cruds #5688

pxpm · 2024-10-11T12:59:56Z

This is a very early POC about something me and @tabacitu are exploring.

What we are trying to achieve here, can be summed up in the following way:

re-usable Datatable
multiple CrudPanel instances in the same request.

They way Backpack was built from start, although simple, comes with some limitations. Now that we want to introduce more advanced features we'd need to do major refactors of the software, that would take months for us to develop, and a lot of time for our users to upgrade.

We are always exploring the possibility of changing something internal that would allow us to do more advanced things, without the cost for the developers that use our software.

That said, one of the most requested features and needs we had, was to have a "relation table", without having to develop a new table from scratch, given how much effort we already spent on the Datatable/columns, and the huge amount of features we have on both of them.

Without much to add for the moment, we will need to decide on the direction we would like to take, here is a screenshot of somewhat we want to achieve:

All of that, with the simplicity we aim for our software:

// in MonsterCrudController.php
$this->crud->addColumn([
            'name'        => 'crudColumn',
            'type'        => 'crud_column',
            'controller'  => IconCrudController::class,
        ]);

// in IconCrudController.php
protected function setupListOperation()
    {
        $this->crud->addColumns(['name', 'icon']);
        $this->crud->addFilter([
            'type'  => 'text',
            'name'  => 'name',
            'label' => 'Name',
        ]);
    }

At the moment there are 0 breaking changes, but also stuff that does no properly work. This is very very wip, we may find something that would require a major breaking change that we are not willing to do for the next version .. but it's a start. 👍

[ci skip] [skip ci]

tabacitu

Let's

Polish with the comments here.
Set up a demo

used a column in ShowOperation
used as a widget in ShowOperation
used in a dashboard as an x-component

src/BackpackServiceProvider.php

tabacitu · 2025-03-26T14:46:41Z

src/resources/views/crud/columns/crud_column.blade.php

Let's call this a datatable

$this->crud->addColumn([ 'name' => 'crudColumn', 'type' => 'crud_column', 'controller' => IconCrudController::class, // OPTIONAL: // 'afterSetup' => function($crud) { $crud->addClause(); } ]);

tabacitu · 2025-03-26T14:50:03Z

src/resources/views/crud/list.blade.php

-                <div id="datatable_button_stack" class="float-right float-end text-right hidden-xs"></div>
-            </div>
-        @endif
+      <x-datatable :crud="$crud" />

    </div>


Todo: let's write in the upgrade guide that the list.blade.php and datatables_logic.blade.php files have been turned into a datatable component - if they've made any changes to them, they can delete them from their project and re-do the changes in the component view (after publishing).

tabacitu · 2025-03-26T14:54:51Z

src/resources/views/crud/datatable/datatables_logic.blade.php

+    }
+@endif
+
+window.crud = {


Need to test two datatables on the same page.

tabacitu · 2025-03-26T15:00:04Z

src/resources/views/crud/datatable/datatables_logic.blade.php

@@ -0,0 +1,520 @@
+@php


Ok let's do it. Let's clean up this file a bit - let's take it step-by-step. First: let's remove the PHP from this file.

src/app/Library/Datatable/Datatable.php

src/app/Library/CrudPanel/CrudButton.php

tabacitu · 2025-03-26T15:30:07Z

src/BackpackManager.php

+
+        $crud = $this->crud($controller);
+
+        $crud->setOperation('list');


🚩 why hard-coded for the list operatin? In the future, we should be able to use BackpackManager to load a Form component, right?

Maybe....

getOperationFromController(string $controller, string $operation)

Or maybe we move this line to a separate method?! 🤷‍♂️

tabacitu · 2025-03-26T15:33:14Z

src/BackpackManager.php

+        return isset($this->cruds[$controller]);
+    }
+
+    public function getControllerCrud(string $controller): CrudPanel


let's think more about the names 🤷‍♂️

[ci skip] [skip ci]

tabacitu · 2025-04-29T09:25:43Z

src/resources/views/crud/inc/filters_navbar.blade.php

@@ -62,16 +62,19 @@ function updatePageUrl(filterName, filterValue, currentUrl = null) {
    }

    if(typeof updateDatatablesOnFilterChange !== 'function') {


Todo: after the review, we should probably move this JS logic from the FILTERS blade file... to the DATATABLES blade file. Right? I mean... filters are a general-purpose feature... that is supported by whatever operation wants to support them.

DataTables - as a component and as an operation... chooses to support the filters. So the logic that says "when filter does X datatables does Y" should probably live in the DATATABLE, not in the FILTERS.

But right now it's ok here, just to keep the diff minimal. We can create a different PR that moves code around. Like a cleanup PR.

src/BackpackManager.php

tabacitu · 2025-04-29T09:44:09Z

src/Backpack.php

@@ -0,0 +1,16 @@
+<?php


Help me understand... what will this facade facilitate - what kind of calls? I'm wondering whether we need a Facade at all... or whether we should change its name.

Is it to do stuff like Backpack::getActiveController and Backpack::getCrud()? If so... I think we're better of doing CrudManager::getActiveController() and CrudManager::getCrud().

I wouldn't expand this feature so much as to identify it with the Backpack name. It would prevent us from using the Backpack class for anything else in the future.

src/BackpackServiceProvider.php

tabacitu · 2025-04-29T09:53:54Z

src/app/Http/Controllers/CrudController.php

+        Backpack::setControllerCrud(get_class($this), $crudPanel);
+    }
+
+    private function triggerControllerHooks()


I think this is a bad name for this function. Sure, it triggers the controller hooks... but that's just the SMALL part of what it does. What it does MORE IMPORTANTLY is to... setup the crud controller? O what is it? Cause I see it's calling the general-purpose setup methods like setupDefaults() and setup() but it's also calling setupConfigurationForCurrentOperation() which is an operation-thing.

Perhaps we call this method:

Suggested change

private function triggerControllerHooks()

private function setupCrudController()

If you don't have a better name for it.

tabacitu · 2025-04-29T09:56:02Z

src/app/Http/Controllers/CrudController.php

-            LifecycleHook::trigger('crud:before_setup', [$this]);
-            $this->setup();
-            LifecycleHook::trigger('crud:after_setup', [$this]);
+            $this->initialized = true;


Something's fishy here. I see that we have a function called initializeCrud() but we are also doing $this->initialized=true outside of it. That is fishy. How can we refactor this bit of code so it's cleaner?

I have a feeling we could/should move ALL of the logic in the constructor to the initializeCrud() method.

And maybe we call it initialize() - with an optional parameter. Since it sets the initialized property on the CrudController... it isn't initializing the CRUD... but the CrudController, right?

[ci skip] [skip ci]

tabacitu added the Priority: SHOULD label Oct 14, 2024

tabacitu assigned tabacitu and pxpm Oct 14, 2024

pxpm added the v7 label Oct 21, 2024

tabacitu added the BLOCKED label Nov 7, 2024

pxpm force-pushed the datatable-single-component branch from d84d59a to 65aa57b Compare March 12, 2025 10:01

pxpm changed the base branch from main to next March 12, 2025 10:01

pxpm force-pushed the next branch from ff93a9f to fed8db0 Compare March 24, 2025 15:17

pxpm and others added 8 commits March 24, 2025 15:17

wip

831be33

wip

3a61e54

Apply fixes from StyleCI

f8fec3f

[ci skip] [skip ci]

Apply fixes from StyleCI

c222441

[ci skip] [skip ci]

wip

5e59690

wip

792da51

wip

dd89d3d

Apply fixes from StyleCI

d8b8d16

[ci skip] [skip ci]

pxpm force-pushed the datatable-single-component branch from 39a4912 to d8b8d16 Compare March 24, 2025 15:17

tabacitu requested changes Mar 26, 2025

View reviewed changes

wip

f9b3117

pxpm added Priority: MUST and removed Priority: SHOULD BLOCKED labels Mar 27, 2025

pxpm and others added 4 commits March 28, 2025 12:14

wip

e6490ab

wip

2e58485

wip

f1fdd91

Apply fixes from StyleCI

693849b

[ci skip] [skip ci]

tabacitu moved this to In Review in Backpack v7.0 Apr 3, 2025

tabacitu moved this from In Review to In Progress in Backpack v7.0 Apr 3, 2025

pxpm added 2 commits April 4, 2025 14:02

wip

861be11

wip

7357fc2

pxpm and others added 4 commits April 7, 2025 16:20

wip

74c0bab

Apply fixes from StyleCI

3ffacd9

[ci skip] [skip ci]

wip

60dbf9d

Apply fixes from StyleCI

863f179

[ci skip] [skip ci]

tabacitu reviewed Apr 29, 2025

View reviewed changes

pxpm and others added 5 commits May 2, 2025 12:06

wip

49cc789

Apply fixes from StyleCI

868c74c

[ci skip] [skip ci]

wip

b255686

wip

6a92d63

Apply fixes from StyleCI

9760254

[ci skip] [skip ci]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[POC] datatable as a component for multiple cruds #5688

[POC] datatable as a component for multiple cruds #5688

pxpm commented Oct 11, 2024

tabacitu left a comment

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Mar 26, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025

tabacitu Apr 29, 2025 •

edited

Loading


		$crud = $this->crud($controller);

		$crud->setOperation('list');

		@@ -62,16 +62,19 @@ function updatePageUrl(filterName, filterValue, currentUrl = null) {
		}

		if(typeof updateDatatablesOnFilterChange !== 'function') {

	private function triggerControllerHooks()
	private function setupCrudController()

[POC] datatable as a component for multiple cruds #5688

Are you sure you want to change the base?

[POC] datatable as a component for multiple cruds #5688

Conversation

pxpm commented Oct 11, 2024

tabacitu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tabacitu Apr 29, 2025 • edited Loading

Choose a reason for hiding this comment

tabacitu Apr 29, 2025 •

edited

Loading