mokhosh / filament-kanban

Add kanban boards to your Filament pages
https://filamentphp.com/plugins/mokhosh-kanban
MIT License
228 stars 32 forks source link

Adding panel limit or possible pagination #17

Closed neverender24 closed 4 months ago

neverender24 commented 4 months ago

What happened?

Hi, this is not a bug rather a question, on how I can possibly add a limit. Right now, My cards in done panel are more than 20. I want to only display 10 of it per panel. Are there any work arounds?

How to reproduce the bug

none

Package Version

2

PHP Version

8.2

Laravel Version

10

Which operating systems does with happen with?

No response

Which browsers does with happen with?

No response

Notes

No response

mokhosh commented 4 months ago

Technically you can do this, but it would be very weird, because as you move cards between your columns, things will appear and disappear out of nowhere.

You could do something like this maybe:

protected function records(): Collection
{
    $tasks = collect();

    foreach (ClientSubstatus::cases() as $status) {
        $tasks->push(...Task::where('status', $status)->take(10)->get());
    }

    return $tasks;
}

Or maybe you can come up with one query that limits per status on a database level, but this has the UX issue that I mentioned.

The more sensible thing would be to limit the total number of tasks instead of per status.

PLGUPICTO commented 4 months ago

I have found temporary solution by making the cards limit. But I made it in the blade side. This one limit the panel to 10. The 10 is just static for now, plan to make it dynamic where user can select limit.

<div class="md:w-[24rem] flex-shrink-1 min-h-full flex flex-col">
    @include(static::$headerView)

    <div
        id="{{ $status['id'] }}"
        class="flex flex-col flex-1 gap-2 p-3 bg-gray-200 dark:bg-gray-800 rounded-xl"
    >
        @foreach($status['records'] as $record)

        @php
            $limit++
        @endphp

            @if($limit <= 10)
                @include(static::$recordView)
            @endif
        @endforeach
    </div>
</div>

It's not the best solution, I will just find a way to make it more dynamic. Cool plugin by the way. Thank you!!!

mokhosh commented 4 months ago

Yup, it still has the bad UX issue.

You can use the code I provided above, and add protected int $countPerBoard = 10 to your board and use that in take. It's cleaner than loading everything and then limiting in the view.