Download the PHP package leonardo-max/livewire-kanban-board without Composer
On this page you can find all versions of the php package leonardo-max/livewire-kanban-board. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download leonardo-max/livewire-kanban-board
More information about leonardo-max/livewire-kanban-board
Files in leonardo-max/livewire-kanban-board
Package livewire-kanban-board
Short Description Livewire component to show models/data according to its current status on a Kanban board
License MIT
Homepage https://github.com/leonardo-max/livewire-kanban-board
Informations about the package livewire-kanban-board
Livewire Status Board
Livewire component to show records/data according to their current status on a Kanban board.
Preview
Installation
You can install the package via composer:
Requirements
This package uses laravel/laravel
(https://laravel.com/) and livewire/livewire
(https://livewire.laravel.com/) under the hood.
It also uses Bootstrap CSS (https://getbootstrap.com/) for base styling.
Please make sure you include both of this dependencies before using this component.
Usage
In order to use this component, you must create a new Livewire component that extends from
LivewireKanbanBoard
You can use make:livewire
to create a new component. For example.
In the SalesOrdersKanbanBoard
class, instead of extending from the base Livewire Component
class,
extend from LivewireKanbanBoard
. Also, remove the render
method.
You'll have a class similar to this snippet.
In this class, you must override the following methods to display data
As you may have noticed, both methods return a Collection. statuses()
refers to all the different status values
your data may have in different points of time. records()
on the other hand, stand for the data you want to show
that could be in any of those previously defined statuses()
collection.
To show how these two methods work together, let's discuss an example of Sales Orders and their different status
along the sales process: Registered, Awaiting Confirmation, Confirmed, Delivered. Each Sales Order might be in a different
status at specific times. For this example, we might define the following collection for statuses()
For each status
we define, we must return an array with at least 2 keys: id
and title
.
Now, for records()
we may define a list of Sales Orders that come from an Eloquent model in our project
As you might see in the above snippet, we must return a collection of array items where each item must have at least
3 keys: id
, title
and status
. The last one is of most importance since it is going to be used to match to which
status
the record
belongs to. For this matter, the component matches status
and records
with the following
comparison
To render the component in a view, just use the Livewire tag or include syntax
Populate the Sales Order model and you should have something similar to the following screenshot
You can render any render and statuses of your project using this approach 👍
Sorting and Dragging
By default, sorting and dragging between statuses is disabled. To enable it, you must include the following
props when using the view: sortable
and sortable-between-statuses
sortable
enables sorting withing each status and sortable-between-statuses
allow drag and drop from one status
to the other. Adding these two properties, allow you to have drag and drop in place.
You must also install the following JS dependencies in your project to enable sorting and dragging.
Once installed, make them available globally in the window object. This can be done in the bootstrap.js
file that
ships with your Laravel app.
Behavior and Interactions
When sorting and dragging is enabled, your component can be notified when any of these events occur. The callbacks
triggered by these two events are onStatusSorted
and onStatusChanged
On onStatusSorted
you are notified about which record
has changed position within it's status
. You are also
given a $orderedIds
array which holds the ids of the records
after being sorted. You must override the following
method to get notified on this change.
On onStatusChanged
gets triggered when a record
is moved to another status
. In this scenario, you get notified
about the record
that was changed, the new status
, the ordered ids from the previous status and the ordered ids
of the new status the record in entering. To be notified about this event, you must override the following method:
onStatusSorted
and onStatusChanged
are never triggered simultaneously. You'll get notified of one or the other
when an interaction occurs.
You can also get notified when a record in the status board is clicked via the onRecordClick
event
To enable onRecordClick
you must specify this behavior when rendering the component through the
record-click-enabled
parameter
Styling
To modify the look and feel of the component, you can override the styles
method and modify the base styles returned
by this method to the view. styles()
returns a keyed array with Tailwind CSS classes used to render each one of the components.
These base keys and styles are:
An example of overriding the styles()
method can be seen below
With these new styles, your component should look like the screenshot below
Looks like Trello, right? 😅
Advanced Styling and Behavior
Base views of the component can be customized as needed by exporting them to your project. To do this, run the
php artisan vendor:publish
command and export the livewire-kanban-board-views
tag. The command will publish
the base views under /resources/views/vendor/livewire-kanban-board
. You can modify these base components as
needed keeping in mind to maintain the data
attributes and ids
along the way.
Another approach is copying the base view files into your own view files and pass them directly to your component
Note: Using this approach also let's you add extra behavior to your component like click events on header, footers, such as filters or any other actions
Adding Extra Views
The component let's you add a view before and/or after the status board has been rendered. These two placeholders can
be used to add extra functionality to your component like a search input or toolbar of actions. To use them, just pass
along the views you want to use in the before-kanban-board-view
and after-kanban-board-view
props when displaying
the component.
Note: These views are optional.
In the following example, a before-kanban-board-view
has been specified to add a search text box and a button
Testing
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Credits
- Pieter Naber
- Mantix BV
- Andrés Santibáñez
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-kanban-board with dependencies
illuminate/support Version ^11.0
laravel/framework Version ^11.0
livewire/livewire Version ^3.0