Filament Card Stack

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.

Created some 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

• Mitesh Rathod
• All Contributors

License

The MIT License (MIT). Please see License File for more information.