[Add-on][Done] KanbanOperation

[svenk2002]

Introduction

I noticed there was no straightforward way to add a Kanban view to your data, so I developed a new Kanban feature that allows you to easily update the status of a task, among other things.

How it works

1. Functionality:

   • Adds a Kanban view to your CRUD panel
   • Allows dragging and dropping items between columns
   • Supports customizable columns and fields
   • Provides routes for fetching and updating Kanban items
   • Search on title inside the Kanban

2. Implementation:
   To implement the Kanban operation in your CRUD controller, you need to use the KanbanOperation trait and configure it. Here's how you can do it:

use App\Http\Controllers\Admin\Operations\KanbanOperation;

class TaskCrudController extends CrudController
{

    use KanbanOperation;

  protected function setupKanbanOperation()

    {
        CRUD::set('kanban.columns', [
            'pending' => 'in afwachting',
            'approved' => 'actief',
            'completed' => 'voltooid',
        ]);
    }

    protected function getKanbanFieldsMap(): array
    {
        return [
            'id' => 'id',
            'title' => 'name',
        ];
    }
}

In this implementation:

1. We use the KanbanOperation trait in the controller.

2. We override the setupKanbanOperation() method to customize the Kanban columns. In this case, we're setting three columns: 'pending', 'approved', and 'completed', with their respective Dutch translations.

3. We override the getKanbanFieldsMap() method to define which fields from your model should be used for the Kanban items. Here, we're mapping the 'id' and 'name' fields from your model to the expected Kanban item fields.

By default, the addon uses the 'status' field to determine which column an item belongs to. If your model uses a different field name for this purpose, you can set it like this:

    protected function getKanbanFieldsMap(): array
    {
       CRUD::set('kanban.column_field', 'your_status_field_name');
    }

After implementing this, you should see a new Kanban view option in your CRUD panel, allowing you to manage your entries in a Kanban board format.

[jcastroa87]

Hello @svenk2002

Thanks for sharing this with community.

Cheers.

[svenk2002]

Almost finished with the first version

Below is a demo video showing the current progress:

demo.mp4

I've also added a new feature to allow setting up a specific:

CRUD::set('kanban.flow', [
    'backlog' => ['pending'],
    'pending' => ['in_progress', 'backlog'],
    'in_progress' => ['done', 'pending'],
    'done' => ['in_progress'],
]);

[pxpm]

Almost finished with the first version

Below is a demo video showing the current progress:

demo.mp4
I've also added a new feature to allow setting up a specific:

CRUD::set('kanban.flow', [
    'backlog' => ['pending'],
    'pending' => ['in_progress', 'backlog'],
    'in_progress' => ['done', 'pending'],
    'done' => ['in_progress'],
]);

Just WOW! This is looking very very good.
My early feedback is that instead of using new functions like getKanbanFieldsMap(), use an operation setting like you did for kaban.flow. You are then setting the kanban.column_field, so I think that can also be done in setupKabanOperation, no need for a separate function.

I am wondering if it could be easier if we did a "complete column definition" in one place, instead of having two separate configs for columns/flow. Eg:

protected function setupKabanOperation()
{
    CRUD::setOperationSetting('columns', [
        'column1' => [
              'label' => 'My Column Label',
              'flow' => ['column2'],
              'onAdd' => fn($entry, $from) => // do something when an entry is added into this column
              'onRemove' => fn($entry, $to) => // do something when an entry is removed from this column
          ],
         'column2' => [ //.... ],
     ]);
}

Another question, does the edit button on task list is "hardcoded", or is it using the same "actions" that are on List table ? If I have Preview | Edit on the table, does it show Preview | Edit on the card ?

Good job @svenk2002 👍

[svenk2002]

Almost finished with the first version

Below is a demo video showing the current progress:
demo.mp4
I've also added a new feature to allow setting up a specific:

CRUD::set('kanban.flow', [
    'backlog' => ['pending'],
    'pending' => ['in_progress', 'backlog'],
    'in_progress' => ['done', 'pending'],
    'done' => ['in_progress'],
]);

Just WOW! This is looking very very good. My early feedback is that instead of using new functions like getKanbanFieldsMap(), use an operation setting like you did for kaban.flow. You are then setting the kanban.column_field, so I think that can also be done in setupKabanOperation, no need for a separate function.

I am wondering if it could be easier if we did a "complete column definition" in one place, instead of having two separate configs for columns/flow. Eg:

protected function setupKabanOperation()
{
    CRUD::setOperationSetting('columns', [
        'column1' => [
              'label' => 'My Column Label',
              'flow' => ['column2'],
              'onAdd' => fn($entry, $from) => // do something when an entry is added into this column
              'onRemove' => fn($entry, $to) => // do something when an entry is removed from this column
          ],
         'column2' => [ //.... ],
     ]);
}

Another question, does the edit button on task list is "hardcoded", or is it using the same "actions" that are on List table ? If I have Preview | Edit on the table, does it show Preview | Edit on the card ?

Good job @svenk2002 👍

@pxpm
Great feedback! I've already set up the column definition as you suggested, and the idea of implementing onAdd and onRemove callbacks is indeed a great one—I'll plan to incorporate that later on.

Regarding the edit button on the task list, it's currently using the same actions as the List table. So, if you have "Preview | Edit" on the table, it should reflect the same on the card as well.

Thanks again!

[svenk2002]

First version🥳

The first version of the Kanban operation is ready! You can check out the repository here:
https://github.com/svenk2002/kanban-operation

For now, the basic functionality is in place. Things I plan to work on later include:

• Making filters functional
• Implementing the onUpdate callback

Feel free to take a look and share any feedback you may have!