{"id":13540808,"url":"https://github.com/asantibanez/livewire-status-board","last_synced_at":"2026-01-27T13:37:45.129Z","repository":{"id":40362454,"uuid":"268219011","full_name":"asantibanez/livewire-status-board","owner":"asantibanez","description":"Livewire component to show records according to their current status","archived":false,"fork":false,"pushed_at":"2025-03-17T14:35:36.000Z","size":1113,"stargazers_count":340,"open_issues_count":4,"forks_count":88,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-02T01:39:56.091Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asantibanez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-31T06:00:42.000Z","updated_at":"2025-03-17T14:35:40.000Z","dependencies_parsed_at":"2024-01-14T23:57:12.924Z","dependency_job_id":"d28517a1-8fa8-4738-a23f-57815fc999b6","html_url":"https://github.com/asantibanez/livewire-status-board","commit_stats":{"total_commits":26,"total_committers":4,"mean_commits":6.5,"dds":"0.11538461538461542","last_synced_commit":"0c4ffa93597116d4fee35a9379e863dab8947cd6"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-status-board","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-status-board/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-status-board/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-status-board/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asantibanez","download_url":"https://codeload.github.com/asantibanez/livewire-status-board/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246741187,"owners_count":20826063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T10:00:33.197Z","updated_at":"2026-01-27T13:37:40.096Z","avatar_url":"https://github.com/asantibanez.png","language":"PHP","funding_links":[],"categories":["Packages / Plugins"],"sub_categories":[],"readme":"# Livewire Status Board\n\nLivewire component to show records/data according to their current status\n\n### Preview\n\n![preview](https://github.com/asantibanez/livewire-status-board/raw/master/preview.gif)\n\n### Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require asantibanez/livewire-status-board\n```\n\n### Requirements\n\nThis package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood.\n\nIt also uses TailwindCSS (https://tailwindcss.com/) for base styling. \n\nPlease make sure you include both of this dependencies before using this component. \n\n### Usage\n\nIn order to use this component, you must create a new Livewire component that extends from \n`LivewireStatusBoard`\n\nYou can use `make:livewire` to create a new component. For example.\n``` bash\nphp artisan make:livewire SalesOrdersStatusBoard\n```\n\nIn the `SalesOrdersStatusBoard` class, instead of extending from the base Livewire `Component` class, \nextend from `LivewireStatusBoard`. Also, remove the `render` method. \nYou'll have a class similar to this snippet.\n \n``` php\nclass SalesOrdersStatusBoard extends LivewireStatusBoard\n{\n    //\n}\n```\n\nIn this class, you must override the following methods to display data\n```php\npublic function statuses() : Collection \n{\n    //\n}\n\npublic function records() : Collection \n{\n    //\n}\n```\n\nAs you may have noticed, both methods return a collection. `statuses()` refers to all the different status values\nyour data may have in different points of time. `records()` on the other hand, stand for the data you want to show\nthat could be in any of those previously defined `statuses()` collection.\n\nTo show how these two methods work together, let's discuss an example of Sales Orders and their different status\nalong the sales process: Registered, Awaiting Confirmation, Confirmed, Delivered. Each Sales Order might be in a different\nstatus at specific times. For this example, we might define the following collection for `statuses()`\n\n```php\npublic function statuses() : Collection\n{\n    return collect([\n        [\n            'id' =\u003e 'registered',\n            'title' =\u003e 'Registered',\n        ],\n        [\n            'id' =\u003e 'awaiting_confirmation',\n            'title' =\u003e 'Awaiting Confirmation',\n        ],\n        [\n            'id' =\u003e 'confirmed',\n            'title' =\u003e 'Confirmed',\n        ],\n        [\n            'id' =\u003e 'delivered',\n            'title' =\u003e 'Delivered',\n        ],\n    ]);\n}\n```\n\nFor each `status` we define, we must return an array with at least 2 keys: `id` and `title`.\n\nNow, for `records()` we may define a list of Sales Orders that come from an Eloquent model in our project\n\n```php\npublic function records() : Collection\n{\n    return SalesOrder::query()\n        -\u003emap(function (SalesOrder $salesOrder) {\n            return [\n                'id' =\u003e $salesOrder-\u003eid,\n                'title' =\u003e $salesOrder-\u003eclient,\n                'status' =\u003e $salesOrder-\u003estatus,\n            ];\n        });\n}\n```\n\nAs you might see in the above snippet, we must return a collection of array items where each item must have at least\n3 keys: `id`, `title` and `status`. The last one is of most importance since it is going to be used to match to which\n`status` the `record` belongs to. For this matter, the component matches `status` and `records` with the following \ncomparison\n\n```php\n$status['id'] == $record['status'];\n``` \n\nTo render the component in a view, just use the Livewire tag or include syntax\n\n```blade\n\u003clivewire:sales-orders-status-board /\u003e\n```  \n\nPopulate the Sales Order model and you should have something similar to the following screenshot\n\n![basic](https://github.com/asantibanez/livewire-status-board/raw/master/basic.jpg)\n\nYou can render any render and statuses of your project using this approach 👍\n\n### Sorting and Dragging\n\nBy default, sorting and dragging between statuses is disabled. To enable it, you must include the following\nprops when using the view: `sortable` and `sortable-between-statuses` \n\n```blade\n\u003clivewire:sales-orders-status-board \n    :sortable=\"true\"\n    :sortable-between-statuses=\"true\"\n/\u003e\n```\n\n`sortable` enables sorting withing each status and `sortable-between-statuses` allow drag and drop from one status \nto the other. Adding these two properties, allow you to have drag and drop in place.\n\nYou must also install the following JS dependencies in your project to enable sorting and dragging.\n```bash\nnpm install sortablejs\n```\n\nOnce installed, make them available globally in the window object. This can be done in the `bootstrap.js` file that \nships with your Laravel app.\n\n```javascript\nwindow.Sortable = require('sortablejs').default;\n``` \n\n### Behavior and Interactions\n\nWhen sorting and dragging is enabled, your component can be notified when any of these events occur. The callbacks\ntriggered by these two events are `onStatusSorted` and `onStatusChanged`\n\nOn `onStatusSorted` you are notified about which `record` has changed position within it's `status`. You are also\ngiven a `$orderedIds` array which holds the ids of the `records` after being sorted. You must override the following\nmethod to get notified on this change.\n\n```php\npublic function onStatusSorted($recordId, $statusId, $orderedIds)\n{\n    //   \n}\n```\n\nOn `onStatusChanged` gets triggered when a `record` is moved to another `status`. In this scenario, you get notified\nabout the `record` that was changed, the new `status`, the ordered ids from the previous status and the ordered ids\nof the new status the record in entering. To be notified about this event, you must override the following method:\n\n```php\npublic function onStatusChanged($recordId, $statusId, $fromOrderedIds, $toOrderedIds)\n{\n    //\n}\n``` \n\n`onStatusSorted` and `onStatusChanged` are never triggered simultaneously. You'll get notified of one or the other\nwhen an interaction occurs. \n\nYou can also get notified when a record in the status board is clicked via the `onRecordClick` event\n\n```php\npublic function onRecordClick($recordId)\n{\n    //\n}\n``` \n\nTo enable `onRecordClick` you must specify this behavior when rendering the component through the \n`record-click-enabled` parameter\n\n```blade\n\u003clivewire:sales-orders-status-board \n    :record-click-enabled=\"true\"\n/\u003e\n```\n\n### Styling\n\nTo modify the look and feel of the component, you can override the `styles` method and modify the base styles returned \nby this method to the view. `styles()` returns a keyed array with Tailwind CSS classes used to render each one of the components.\nThese base keys and styles are:\n\n```php\nreturn [\n    'wrapper' =\u003e 'w-full h-full flex space-x-4 overflow-x-auto', // component wrapper\n    'statusWrapper' =\u003e 'h-full flex-1', // statuses wrapper\n    'status' =\u003e 'bg-blue-200 rounded px-2 flex flex-col h-full', // status column wrapper \n    'statusHeader' =\u003e 'p-2 text-sm text-gray-700', // status header\n    'statusFooter' =\u003e '', // status footer\n    'statusRecords' =\u003e 'space-y-2 p-2 flex-1 overflow-y-auto', // status records wrapper \n    'record' =\u003e 'shadow bg-white p-2 rounded border', // record wrapper\n    'recordContent' =\u003e '', // record content\n]; \n```\n\nAn example of overriding the `styles()` method can be seen below\n\n```php\npublic function styles()\n{\n    $baseStyles = parent::styles();\n\n    $baseStyles['wrapper'] = 'w-full flex space-x-4 overflow-x-auto bg-blue-500 px-4 py-8';\n\n    $baseStyles['statusWrapper'] = 'flex-1';\n\n    $baseStyles['status'] = 'bg-gray-200 rounded px-2 flex flex-col flex-1';\n\n    $baseStyles['statusHeader'] = 'text-sm font-medium py-2 text-gray-700';\n\n    $baseStyles['statusRecords'] = 'space-y-2 px-1 pt-2 pb-2';\n\n    $baseStyles['record'] = 'shadow bg-white p-2 rounded border text-sm text-gray-800';\n\n    return $baseStyles;\n}\n```\n\nWith these new styles, your component should look like the screenshot below\n\n![basic](https://github.com/asantibanez/livewire-status-board/raw/master/styles.jpg)\n\nLooks like Trello, right? 😅\n\n### Advanced Styling and Behavior\n\nBase views of the component can be customized as needed by exporting them to your project. To do this, run the\n`php artisan vendor:publish` command and export the `livewire-status-board-views` tag. The command will publish\nthe base views under `/resources/views/vendor/livewire-status-board`. You can modify these base components as\nneeded keeping in mind to maintain the `data` attributes and `ids` along the way.\n\nAnother approach is copying the base view files into your own view files and pass them directly to your component\n\n```blade\n\u003clivewire:sales-orders-status-board \n    status-board-view=\"path/to/your/status-board-view\"\n    status-view=\"path/to/your/status-view\"\n    status-header-view=\"path/to/your/status-header-view\"\n    status-footer-view=\"path/to/your/status-footer-view\"\n    record-view=\"path/to/your/record-view\"\n    record-content-view=\"path/to/your/record-content-view\"\n/\u003e\n```\n\nNote: Using this approach also let's you add extra behavior to your component like click events on header, footers,\nsuch as filters or any other actions\n\n### Adding Extra Views\n\nThe component let's you add a view before and/or after the status board has been rendered. These two placeholders can\nbe used to add extra functionality to your component like a search input or toolbar of actions. To use them, just pass\nalong the views you want to use in the `before-status-board-view` and `after-status-board-view` props when displaying \nthe component.\n\n```blade\n\u003clivewire:sales-orders-status-board \n    before-status-board-view=\"path/to/your/before-status-board-view\"\n    after-status-board-view=\"path/to/your/after-status-board-view\"  \n/\u003e\n```\n\nNote: These views are optional.\n\nIn the following example, a `before-status-board-view` has been specified to add a search text box and a button\n\n![extra-views](https://github.com/asantibanez/livewire-status-board/raw/master/extra-views.jpg)\n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email santibanez.andres@gmail.com instead of using the issue tracker.\n\n## Credits\n\n- [Andrés Santibáñez](https://github.com/asantibanez)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasantibanez%2Flivewire-status-board","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasantibanez%2Flivewire-status-board","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasantibanez%2Flivewire-status-board/lists"}