rmitesh / card-stack
Creates a Filament Card view
Requires
- php: ^8.1
- filament/filament: ^2.0
- illuminate/contracts: ^10.0
- spatie/laravel-package-tools: ^1.14.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^7.9
- orchestra/testbench: ^8.0
- pestphp/pest: ^2.0
- pestphp/pest-plugin-arch: ^2.0
- pestphp/pest-plugin-laravel: ^2.0
This package is auto-updated.
Last update: 2024-10-17 11:31:07 UTC
README
Design for Multi-purpose usage, and also second option of the KanBan Board
Want to see how it's works...? Let's go though below details
Installation
You can install the package via composer:
composer require rmitesh/card-stack
You can publish the config file with:
php artisan vendor:publish --tag="card-stack-config"
You can publish and run the migrations with:
php artisan vendor:publish --tag="card-stack-migrations"
php artisan migrate
Optionally, you can publish the views using
php artisan vendor:publish --tag="card-stack-views"
This is the contents of the published config file:
<?php return [ 'models' => [ 'card' => Rmitesh\CardStack\Models\Card::class, ], 'table_names' => [ 'cards' => 'cards', ], 'table_column_names' => [ /** * "cards" table schema */ 'cards' => [ 'user_id' => 'user_id', 'name' => 'name', 'color' => 'color', 'position' => 'position', ], ], ];
Usage
Note: Make sure you have create full resource, not
--simple
resource.
Create a custom resource page
php artisan make:filament-page ViewPlan --resource=PlanResource
Then, register route for this page in PlanResource
file and for redirection create a new Action
.
public static function getPages(): array { return [ 'view' => Pages\ViewPlan::route('/{record}/view'), ]; }
public static function table(Table $table): Table { return $table ->actions([ Tables\Actions\Action::make('View') ->icon('heroicon-o-x-eye') ->color('secondary') ->url(fn (Model $record) => route('filament.resources.plans.view', ['record' => $record])), ]) }
You can give any route name as per your specification.
You can find you routes for the view using
php artisan route:list
.
In PlanResource/Pages/ViewPlan
file, use CardView
trait
use Rmitesh\CardStack\Resources\Pages\Concerns\CardView; class ViewPlan extends Page { use CardView; }
Replace the view file located in resources/views/filament/resources/YOUR RESOURCE/pages/
with following:
<x-card-stack::card-view :cards="$cards" :record="$record"> </x-card-stack::card-view>
Now, create a custom widget PlanListView
without any resource and extends with CardViewList
php artisan make:filament-widget PlanListView
<?php namespace App\Filament\Widgets; use Rmitesh\CardStack\Pages\Widgets\CardViewList; use Illuminate\Database\Eloquent\Builder; class PlanListView extends CardViewList { protected function getTableQuery(): Builder { // Your eloquest query } }
$tableHeadingId
and$tableHeading
variables are holding the each card's id and name. So if you want to display items based on card id then you can use$tableHeadingId
variable in your eloquent condition.
then add getHeaderWidgets()
function in you ViewPlan class.
protected function getHeaderWidgets(): array { return [ PlanListView::class, ]; }
and here we are good to go!... 🚀🚀🚀
Extending and customizing CardViewList page.
Add Table Columns
To add column in the cards, you can use getTableColumns()
function in your custom widget class.
protected function getTableColumns(): array { return [ Tables\Columns\TextColumn::make('name'), ]; }
Add Table Actions
To add table actions in the cards, you can use getTableActions()
function in your custom widget class.
protected function getTableActions(): array { return [ // ]; }
Add Header Actions
To add table header actions in the cards, you can use getTableHeaderActions()
function in your custom widget class.
protected function getTableHeaderActions(): array { return [ // ]; }
Change empty state text
To change empty state table text, you can use getTableEmptyStateHeading()
function in your custom widget class.
protected function getTableEmptyStateHeading(): ?string { // your message }
Change empty state description
To change empty state table description, you can use getTableEmptyStateDescription()
function in your custom widget class.
protected function getTableEmptyStateDescription(): ?string { // your message }
Example
Let's take a typical example
- You are creating montly plans for a work. and you want to manage task list with cards.
In your plan view screen will be look like this.
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.