### Install BCMath Extension
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Provides instructions for installing the BCMath PHP extension on different operating systems to resolve 'Call to undefined function bcadd()' errors.
```bash
# Ubuntu/Debian:
sudo apt-get install php-bcmath
# macOS (Homebrew):
# Usually included, check with: php -m | grep bcmath
# Windows:
# Enable in php.ini: extension=bcmath
```
--------------------------------
### Complete Column Configuration Example (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md
Provides a comprehensive example of configuring multiple columns with various color settings, including semantic colors, Filament constants, and custom hex codes.
```php
use Filament\Support\Colors\Color;
->columns([
Column::make('todo')
->color('gray'), // Tailwind color name
Column::make('in_progress')
->color(Color::Blue), // Color constant
Column::make('review')
->color('primary'), // Semantic color
Column::make('done')
->color('#22c55e'), // Custom hex
])
```
--------------------------------
### Real-World CardFlex Layout Example (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md
Demonstrates a practical application of the CardFlex component within a card schema. This example includes a title, description with character limit, and a CardFlex row containing priority, due date, and assigned user information, all styled as badges with icons. It showcases wrapping and start justification for the flex row.
```php
->cardSchema(fn (Schema $schema) => $schema->components([
TextEntry::make('title')
->weight('bold')
->size('lg'),
TextEntry::make('description')
->limit(100)
->color('gray'),
CardFlex::make([
TextEntry::make('priority')
->badge()
->icon('heroicon-o-flag'),
TextEntry::make('due_date')
->badge()
->date()
->icon('heroicon-o-calendar'),
TextEntry::make('assignedTo.name')
->badge()
->icon('heroicon-o-user'),
])->wrap()->justify('start'),
]))
```
--------------------------------
### Install BCMath PHP Extension (Ubuntu/Debian)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/4.upgrading.md
This command installs the BCMath PHP extension on Ubuntu/Debian systems, which is a requirement for Flowforge v3.x and v4.x due to changes in position column type.
```bash
# Ubuntu/Debian
sudo apt-get install php-bcmath
```
--------------------------------
### Define Record and Column Actions
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Sets up actions that can be performed on individual cards (record actions) or on column headers (column actions). Includes examples for editing, archiving, deleting, and adding new tasks.
```php
use Filament\Actions\Action;
use Filament\Actions\EditAction;
use Filament\Actions\DeleteAction;
->recordActions([
EditAction::make()
->url(fn ($record) => route('tasks.edit', $record)),
Action::make('archive')
->icon('heroicon-o-archive-box')
->action(fn ($record) => $record->archive()),
DeleteAction::make(),
])
->columnActions([
Action::make('add')
->icon('heroicon-o-plus')
->action(function (array $arguments) {
// $arguments['column'] contains column identifier
Task::create([
'status' => $arguments['column'],
'position' => DecimalPosition::forEmptyColumn(),
]);
}),
])
```
--------------------------------
### Install Flowforge v4.0 Composer Package
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/4.upgrading.md
This command installs the latest version of the Flowforge package, ensuring compatibility with v4.x features and requirements.
```bash
composer require relaticle/flowforge:^4.0
```
--------------------------------
### Check PHP bcmath Extension
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Verifies if the 'ext-bcmath' PHP extension is installed and enabled on your system. This extension is a new dependency for Flowforge v3.x.
```bash
php -m | grep bcmath
```
--------------------------------
### Register Flowforge Task Board Page in Filament
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/3.installation.md
Registers the generated Flowforge task board page within your Filament admin panel configuration. This makes the Kanban board accessible through your Filament application.
```php
->pages([
App\Filament\Pages\TaskBoard::class,
])
```
--------------------------------
### Livewire Events: Listen to Kanban Events in PHP and JavaScript
Source: https://context7.com/relaticle/flowforge/llms.txt
This section covers how to listen to Flowforge's Kanban-related Livewire events. It provides examples for both PHP and JavaScript, showing how to register event listeners for actions like card movements and item loading. These listeners allow for custom logic and integrations based on user interactions within the Kanban board.
```php
info("Card {$cardId} moved to {$columnId} at position {$position}");
}
#[On('kanban-items-loaded')]
public function onItemsLoaded(string $columnId, int $loadedCount, int $totalCount, bool $isFullyLoaded): void
{
// Track loading progress
if ($isFullyLoaded) {
logger()->info("All {$totalCount} items loaded for column {$columnId}");
}
}
#[On('kanban-all-items-loaded')]
public function onAllItemsLoaded(string $columnId, int $totalCount): void
{
// Handle "Load All" completion
logger()->info("Load All completed for {$columnId}: {$totalCount} items");
}
```
```javascript
// JavaScript Event Listeners
document.addEventListener('livewire:init', () => {
Livewire.on('kanban-card-moved', ({ cardId, columnId, position }) => {
console.log(`Card ${cardId} moved to ${columnId} at position ${position}`);
// Update external analytics
analytics.track('kanban_card_moved', { cardId, columnId });
});
Livewire.on('kanban-items-loaded', ({ columnId, loadedCount, totalCount, isFullyLoaded }) => {
console.log(`Column ${columnId}: ${loadedCount}/${totalCount} loaded`);
});
});
```
--------------------------------
### Install Flowforge with Composer
Source: https://github.com/relaticle/flowforge/blob/4.x/README.md
This command installs the Flowforge package using Composer, the dependency manager for PHP. Ensure you have PHP 8.3+ and Laravel 12+ installed.
```bash
composer require relaticle/flowforge
```
--------------------------------
### Create Migration for Position Column
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/3.installation.md
Generates a new migration file to add a 'position' column to your tasks table. This column is essential for Flowforge's Kanban board functionality.
```bash
php artisan make:migration add_position_to_tasks_table
```
--------------------------------
### DecimalPosition API Changes from Rank
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Illustrates the transition from the older Rank-based position handling to the new DecimalPosition methods in version 3.x. It highlights how methods for generating and manipulating positions have changed, returning strings directly.
```php
// v2.x Rank::forEmptySequence()
// v3.x DecimalPosition::forEmptyColumn()
// v2.x Rank::after($rank)
// v3.x DecimalPosition::after($position)
// v2.x Rank::before($rank)
// v3.x DecimalPosition::before($position)
// v2.x Rank::betweenRanks($a, $b)
// v3.x DecimalPosition::between($a, $b) // Includes jitter
// v2.x $rank->get()
// N/A in v3.x
```
--------------------------------
### Registering Flowforge Board Page in Filament Resource
Source: https://context7.com/relaticle/flowforge/llms.txt
Registers a new page route for the Flowforge Kanban board within a Filament resource. This example shows how to add a 'tasks' route to the `CampaignResource`'s `getPages` method, linking it to the `CampaignTaskBoard` page.
```php
Pages\ListCampaigns::route('/'),
'create' => Pages\CreateCampaign::route('/create'),
'edit' => Pages\EditCampaign::route('/{record}/edit'),
'tasks' => Pages\CampaignTaskBoard::route('/{record}/tasks'),
];
}
```
--------------------------------
### Flowforge Artisan Commands for Position Management
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Provides command-line tools for diagnosing, rebalancing, and repairing position data within the Flowforge system. These commands help maintain data integrity and resolve ordering issues.
```bash
php artisan flowforge:diagnose-positions
php artisan flowforge:rebalance-positions
php artisan flowforge:repair-positions
```
--------------------------------
### Blueprint Macro for Decimal Position Column
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Demonstrates the change in the `flowforgePositionColumn()` macro, which now defines a `DECIMAL(20,10)` column for storing positions instead of a `VARCHAR` column.
```php
// v2.x created:
$table->string('position')->nullable()->collation('utf8mb4_bin');
// v3.x creates:
$table->decimal('position', 20, 10)->nullable();
```
--------------------------------
### Manage Card Loading and Pagination Programmatically (PHP)
Source: https://context7.com/relaticle/flowforge/llms.txt
Control card loading and pagination within columns using PHP methods. This includes loading specific numbers of items, loading all items for reordering, checking if a column is fully loaded, getting the position for new cards, and programmatically moving cards between columns.
```php
loadMoreItems('todo', 20);
// Load all cards to enable reordering
$this->loadAllItems('in_progress');
// Check if all cards are loaded (drag-drop only enabled when true)
$isReady = $this->isColumnFullyLoaded('review');
// Get position for new card at bottom of column
$position = $this->getBoardPositionInColumn('done');
// Move card programmatically
$this->moveCard(
cardId: '123',
targetColumnId: 'in_progress',
afterCardId: '456', // Card above (optional)
beforeCardId: '789' // Card below (optional)
);
```
--------------------------------
### Update Flowforge Position Service Usage (v2.x to v3.x/v4.x)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/4.upgrading.md
This code demonstrates the change in how the position service is used in Flowforge. The `Rank` service from v2.x has been replaced by `DecimalPosition` in v3.x and v4.x, requiring updates to factory code or custom implementations.
```php
// Before (v2.x)
use Relaticle\Flowforge\Services\Rank;
$position = Rank::forEmptySequence()->get();
$position = Rank::after($lastRank)->get();
// After (v3.x/v4.x)
use Relaticle\Flowforge\Services\DecimalPosition;
$position = DecimalPosition::forEmptyColumn();
$position = DecimalPosition::after($lastPosition);
```
--------------------------------
### DecimalPosition Service: Calculate and Manage Item Positions
Source: https://context7.com/relaticle/flowforge/llms.txt
The DecimalPosition service offers methods to calculate and manage item positions in a programmatic way. It supports operations like getting initial positions, positions after/before existing items, between two bounds, and exact midpoints. It also includes utilities for checking rebalancing needs, generating sequences, and comparing positions. This service is crucial for maintaining order in dynamic lists or boards.
```php
dropColumn('position');
});
Schema::table('tasks', function (Blueprint $table) {
$table->flowforgePositionColumn();
});
}
```
--------------------------------
### Manage Drag-Drop with Pagination in PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md
Demonstrates how to programmatically load all items in a column to enable drag-and-drop functionality when pagination is active, preventing data corruption.
```php
// Check if column is fully loaded
$this->isColumnFullyLoaded('todo'); // Returns false with pagination
// Load all cards programmatically
$this->loadAllItems('todo');
// Now drag-drop is enabled
$this->isColumnFullyLoaded('todo'); // Returns true
```
--------------------------------
### Optimize Board Performance in PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md
Improves board loading speed by optimizing database queries, including eager loading relationships and selecting only necessary fields.
```php
// Optimized query example
->query(
Task::query()
->with(['assignee', 'priority']) // Eager load relationships
->select(['id', 'title', 'status', 'position']) // Select only needed fields
)
```
--------------------------------
### Repair Position Collisions and Order
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Guides users on how to resolve unique constraint violations or order preservation issues after migration by using the `flowforge:repair-positions` artisan command with the 'regenerate' strategy.
```bash
php artisan flowforge:repair-positions
# Select "regenerate" strategy
```
--------------------------------
### Repair Flowforge Positions Command
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/3.installation.md
An optional command to fix corrupted or missing position data in your Flowforge Kanban board. This is useful for maintaining data integrity.
```bash
php artisan flowforge:repair-positions
```
--------------------------------
### Configure Flowforge Board with Essential Settings (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md
Sets up the core configuration for a Flowforge board, including the data source, column identifier, position identifier, and column definitions. This is a fundamental step for initializing a board.
```php
public function board(Board $board): Board
{
return $board
->query(Task::query()) // Required: Data source
->columnIdentifier('status') // Required: Column field
->positionIdentifier('position') // Required: Position field
->columns([
Column::make('todo')->label('To Do')->color('gray'),
Column::make('done')->label('Done')->color('green'),
]);
}
```
--------------------------------
### Configure Flowforge Kanban Board
Source: https://context7.com/relaticle/flowforge/llms.txt
Sets up the configuration for a Flowforge Kanban board, defining the data source, column and position identifiers, and the specific columns with their labels and icons.
```php
query(Task::query()) // Required: Data source
->columnIdentifier('status') // Required: Column field
->positionIdentifier('position') // Required: Position field
->columns([
Column::make('todo')
->label('To Do')
->color('gray')
->icon('heroicon-o-queue-list'),
Column::make('in_progress')
->label('In Progress')
->color('blue')
->icon('heroicon-o-play'),
Column::make('review')
->label('Review')
->color('amber')
->icon('heroicon-o-eye'),
Column::make('completed')
->label('Completed')
->color('green')
->icon('heroicon-o-check'),
]);
}
}
```
--------------------------------
### Add Flowforge Position Column to Database Schema
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/3.installation.md
Applies the 'position' column to your database table using a migration. The `flowforgePositionColumn` method automatically handles database-specific collations.
```php
Schema::table('tasks', function (Blueprint $table) {
$table->flowforgePositionColumn('position'); // Handles database-specific collations automatically
});
```
--------------------------------
### Handle Manual Card Movement in Livewire
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Demonstrates how to implement manual card movement within a Livewire component. It calls the parent method for position calculation and saving, and allows for custom logic after the move.
```php
// In your Livewire component
public function moveCard(
int|string $recordId,
string $toColumn,
?string $afterRecordId = null,
?string $beforeRecordId = null
): void {
// Parent handles position calculation and saving
parent::moveCard($recordId, $toColumn, $afterRecordId, $beforeRecordId);
// Add custom logic after move
$this->dispatch('card-moved');
}
```
--------------------------------
### Update Flowforge Composer Dependency
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Updates the Flowforge package to version 3.0 or higher using Composer. This command fetches the latest version and its dependencies.
```bash
composer require relaticle/flowforge:^3.0
```
--------------------------------
### Configure Standalone Livewire Kanban Board
Source: https://github.com/relaticle/flowforge/blob/4.x/README.md
This PHP code demonstrates how to set up a Kanban board using Flowforge within a standalone Livewire component. It requires the `InteractsWithBoard` trait and defines the board's query, column identifiers, and column configurations.
```php
use Relaticle\Flowforge\Concerns\InteractsWithBoard;
class TaskBoard extends Component implements HasBoard
{
use InteractsWithBoard;
public function board(Board $board): Board
{
return $board
->query(Task::query())
->columnIdentifier('status')
->positionIdentifier('position')
->columns([
Column::make('todo')->label('To Do')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('completed')->label('Completed')->color('green'),
]);
}
}
```
--------------------------------
### Configure Column Appearance with PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md
Demonstrates how to configure a column's label, color, and icon using the Filament PHP framework. It supports various color formats and icon libraries.
```php
use Filament\Support\Colors\Color;
Column::make('todo')
->label('To Do')
->color('gray') // Supports multiple color formats
->icon('heroicon-o-queue-list')
```
--------------------------------
### Configure Flowforge Board (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Configures a Flowforge Kanban board by defining the Eloquent model query, column identifiers, position identifiers, record title attribute, and the board's columns. This is typically done within a `BoardPage` class.
```php
use Relaticle\Flowforge\BoardPage;
use Relaticle\Flowforge\Board;
use Relaticle\Flowforge\Column;
class TaskBoard extends BoardPage
{
protected static ?string $navigationIcon = 'heroicon-o-view-columns';
public function board(Board $board): Board
{
return $board
->query(Task::query())
->columnIdentifier('status')
->positionIdentifier('position')
->recordTitleAttribute('title')
->columns([
Column::make('todo', 'To Do')
->icon('heroicon-o-clipboard'),
Column::make('in_progress', 'In Progress')
->icon('heroicon-o-play'),
Column::make('done', 'Done')
->icon('heroicon-o-check'),
]);
}
}
```
--------------------------------
### Flowforge Diagnostic Artisan Commands
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/4.upgrading.md
These Artisan commands are new in Flowforge v3.x and are used for diagnosing and managing position data within the application. `diagnose-positions` checks for issues, while `rebalance-positions` redistributes them.
```bash
php artisan flowforge:diagnose-positions # Check for issues
php artisan flowforge:rebalance-positions # Redistribute positions
```
--------------------------------
### Generate Flowforge Boards with Artisan
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Provides artisan commands to generate new Flowforge boards. The `make-board` command creates a new board, with an option to generate it for a resource page.
```bash
php artisan flowforge:make-board TaskBoard
php artisan flowforge:make-board TaskBoard --resource # For resource page
```
--------------------------------
### Diagnose Flowforge Positions Artisan Command
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Runs the Flowforge diagnose command to check for any inconsistencies or issues with item positions after the migration. Requires specifying the model, column, and position fields.
```bash
php artisan flowforge:diagnose-positions \
--model=App\\Models\\YourModel \
--column=status \
--position=position
```
--------------------------------
### Configure Dynamic Columns from Database (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
This PHP snippet shows how to dynamically configure board columns based on data from the database, specifically using a 'Status' model. It maps database statuses to Filament `Column` objects, allowing for customizable board views. This enhances flexibility in representing task states.
```php
public function board(Board $board): Board
{
$statuses = Status::ordered()->get();
return $board
->query(Task::query())
->columnIdentifier('status_id')
->positionIdentifier('position')
->columns(
$statuses->map(fn ($status) =>
Column::make($status->id, $status->name)
->icon($status->icon)
->color($status->color)
)->toArray()
);
}
```
--------------------------------
### Enable Actions with Traits and Models in PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md
Configures card and column actions by ensuring the component uses required traits and that actions are properly defined with their associated models.
```php
class TaskBoard extends BoardPage
{
use InteractsWithActions; // Required
use InteractsWithForms; // Required
public function board(Board $board): Board
{
return $board
->cardActions([
EditAction::make()->model(Task::class), // Model required
]);
}
}
```
--------------------------------
### Include Flowforge CSS Assets in Filament Theme
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/3.installation.md
Adds Flowforge's CSS views to your custom Filament theme. This requires a pre-existing custom Filament theme. Ensure the path correctly points to the vendor directory.
```css
@source "../../../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";
```
--------------------------------
### Integrate Kanban Board with Filament Resource
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/1.integration-patterns.md
This snippet shows how to create a Kanban board view for a Filament resource, specifically for campaign tasks. It defines the board's columns and queries tasks related to the current campaign and user's team. This is registered as a new page within the resource.
```php
query(
// Get tasks for this specific campaign and current user's team
$this->getRecord()
->tasks()
->whereHas('team', fn($q) => $q->where('id', auth()->user()->current_team_id))
->getQuery()
)
->columnIdentifier('status')
->positionIdentifier('position')
->columns([
Column::make('backlog')->label('Backlog')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('review')->label('Review')->color('amber'),
Column::make('completed')->label('Completed')->color('green'),
]);
}
}
// Register in your CampaignResource
public static function getPages(): array
{
return [
'index' => Pages\ListCampaigns::route('/'),
'create' => Pages\CreateCampaign::route('/create'),
'edit' => Pages\EditCampaign::route('/{record}/edit'),
'tasks' => Pages\CampaignTaskBoard::route('/{record}/tasks'), // Add this line
];
}
```
--------------------------------
### Control Flowforge Pagination (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md
Offers methods to manage card pagination within columns, including loading more items, loading all items for reordering, checking if a column is fully loaded, and getting the position for a new card.
```php
// Load more cards for pagination
$this->loadMoreItems(string $columnId, ?int $count = null)
// Load all cards to enable reordering
$this->loadAllItems(string $columnId)
// Check if all cards are loaded
$this->isColumnFullyLoaded(string $columnId): bool
// Get position for new card in column
$this->getBoardPositionInColumn(string $columnId): string
```
--------------------------------
### Debug Empty Board Display in PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md
Helps diagnose why a board might be rendering but showing no cards. It involves temporarily dumping query results and verifying status values match column identifiers.
```php
// Add to board method temporarily
dd($this->getEloquentQuery()->get());
```
```php
// Check for global scopes, soft deletes, etc.
->query(Task::withoutGlobalScopes()->get())
```
--------------------------------
### Flowforge Card Component HTML Structure
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md
An example of the HTML structure for a Flowforge card component, showcasing the use of BEM classes for the main block, its elements (like title, body, description), and modifiers (like priority).
```html
Card Title
Description text
```
--------------------------------
### Create Flowforge Board Page (Artisan Command)
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Generates a new Flowforge board page class using an Artisan command. This command scaffolds the basic structure for a custom Kanban board.
```bash
php artisan flowforge:make-board TaskBoard
```
--------------------------------
### Add Card and Column Actions to Kanban Board (PHP)
Source: https://context7.com/relaticle/flowforge/llms.txt
Configures interactive actions for Kanban board cards and columns using Filament Actions. Includes 'EditAction' and 'DeleteAction' for cards, and 'CreateAction' for columns. Dependencies include Filament's Actions and Forms components. The 'cardAction(\'edit\')' setting makes cards clickable to trigger the edit action.
```php
query(Task::query())
->columnIdentifier('status')
->positionIdentifier('position')
->columns([
Column::make('todo')->label('To Do')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('done')->label('Done')->color('green'),
])
->cardActions([
EditAction::make()
->model(Task::class)
->form([
TextInput::make('title')->required(),
Select::make('priority')
->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High']),
DatePicker::make('due_date'),
]),
DeleteAction::make()
->model(Task::class)
->requiresConfirmation(),
])
->columnActions([
CreateAction::make()
->label('Add Task')
->model(Task::class)
->form([
TextInput::make('title')->required(),
Select::make('priority')
->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'])
->default('medium'),
DatePicker::make('due_date'),
])
->mutateFormDataUsing(function (array $data, array $arguments): array {
if (isset($arguments['column'])) {
$data['status'] = $arguments['column'];
$data['position'] = $this->getBoardPositionInColumn($arguments['column']);
}
return $data;
}),
])
->cardAction('edit'); // Makes cards clickable, triggers edit action
}
```
--------------------------------
### Filament Resource Page for Flowforge Board
Source: https://context7.com/relaticle/flowforge/llms.txt
Extends Flowforge's `BoardResourcePage` to integrate a Kanban board directly into a Filament resource. This allows for context-specific board views related to a resource record. It requires the `RelaticleFlowforgeBoardResourcePage` class and defines the board's query, column identifiers, and column configurations.
```php
query(
$this->getRecord()
->tasks()
->whereHas('team', fn($q) => $q->where('id', auth()->user()->current_team_id))
->getQuery()
)
->columnIdentifier('status')
->positionIdentifier('position')
->columns([
Column::make('backlog')->label('Backlog')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('review')->label('Review')->color('amber'),
Column::make('completed')->label('Completed')->color('green'),
]);
}
}
```
--------------------------------
### Update Position Column Migration (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
A Laravel migration script to update the 'position' column in your database from VARCHAR to DECIMAL(20,10). It includes options to either drop and recreate the column or preserve existing order.
```php
dropColumn('position');
});
Schema::table('your_table', function (Blueprint $table) {
$table->flowforgePositionColumn();
$table->unique(['status', 'position'], 'unique_position_per_column');
});
// Option B: Keep existing order (recommended)
// See "Preserving Existing Order" section below
}
public function down(): void
{
Schema::table('your_table', function (Blueprint $table) {
$table->dropUnique('unique_position_per_column');
$table->dropColumn('position');
});
Schema::table('your_table', function (Blueprint $table) {
$table->string('position')->nullable();
});
}
};
```
--------------------------------
### Enable Search and Filtering on Kanban Boards (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md
Sets up search and filtering capabilities for the Kanban board. It enables searching across 'title', 'description', and 'assignee.name' fields. Multiple filters are configured, including a multi-select filter for 'priority', a relationship-based filter for 'assigned_to', and a toggle filter for 'overdue' tasks.
```php
use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\Filter;
public function board(Board $board): Board
{
return $board
->searchable(['title', 'description', 'assignee.name'])
->filters([
SelectFilter::make('priority')
->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'])
->multiple(),
SelectFilter::make('assigned_to')
->relationship('assignee', 'name')
->searchable()
->preload(),
Filter::make('overdue')
->label('Overdue')
->query(fn (Builder $query) => $query->where('due_date', '<', now()))
->toggle(),
]);
}
```
--------------------------------
### Flowforge Column Component HTML Structure
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md
Provides an example of the HTML structure for a Flowforge column component, demonstrating the use of BEM classes for the column, its header, title, count, and content areas, along with color utility classes.
```html
```
--------------------------------
### Manage Card Positions with DecimalPosition Service
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Provides a service for managing card positions using DECIMAL(20,10) precision with BCMath for reliable ordering. Offers methods for calculating positions between cards, before the first, after the last, for empty columns, and for rebalancing.
```php
use Relaticle\Flowforge\Services\DecimalPosition;
// Position between two cards (includes cryptographic jitter)
$position = DecimalPosition::between($afterPosition, $beforePosition);
// Exact midpoint (deterministic, for testing)
$position = DecimalPosition::betweenExact($afterPosition, $beforePosition);
// Position before first card
$position = DecimalPosition::before($firstPosition);
// Position after last card
$position = DecimalPosition::after($lastPosition);
// Initial position for empty column
$position = DecimalPosition::forEmptyColumn();
// Smart positioning (handles nulls)
$position = DecimalPosition::calculate($afterPos, $beforePos);
// Check if rebalancing needed
if (DecimalPosition::needsRebalancing($posA, $posB)) {
// Gap is < 0.0001
}
// Generate evenly-spaced sequence
$positions = DecimalPosition::generateSequence(count: 100);
```
--------------------------------
### Preserve Existing Order Migration (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
A Laravel migration script designed to preserve the existing order of items when changing the position column type. It involves adding a new column, converting positions, and then swapping the columns.
```php
decimal('position_new', 20, 10)->nullable();
});
// 2. Convert existing positions maintaining order
$statuses = DB::table('tasks')->distinct()->pluck('status');
foreach ($statuses as $status) {
$tasks = DB::table('tasks')
->where('status', $status)
->orderBy('position') // Original string order
->get();
$lastPosition = null;
foreach ($tasks as $task) {
$newPosition = $lastPosition === null
? DecimalPosition::forEmptyColumn()
: DecimalPosition::after($lastPosition);
DB::table('tasks')
->where('id', $task->id)
->update(['position_new' => $newPosition]);
$lastPosition = $newPosition;
}
}
// 3. Swap columns
Schema::table('tasks', function (Blueprint $table) {
$table->dropColumn('position');
});
Schema::table('tasks', function (Blueprint $table) {
$table->renameColumn('position_new', 'position');
$table->unique(['status', 'position'], 'unique_position_per_column');
});
}
};
```
--------------------------------
### Migrate Position Column Type (Preserve Order)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/4.upgrading.md
This PHP code snippet shows how to migrate the 'position' column while preserving the existing card order. It involves adding a temporary column, copying data, swapping columns, and then running a repair command.
```php
public function up(): void
{
// Add temporary column
Schema::table('tasks', function (Blueprint $table) {
$table->decimal('position_new', 20, 10)->nullable();
});
// Copy order (positions will be regenerated by repair command)
DB::statement('UPDATE tasks SET position_new = CAST(position AS DECIMAL(20,10))');
// Swap columns
Schema::table('tasks', function (Blueprint $table) {
$table->dropColumn('position');
});
Schema::table('tasks', function (Blueprint $table) {
$table->renameColumn('position_new', 'position');
});
}
```
--------------------------------
### Modified BEM Naming Convention Example
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md
Demonstrates the modified BEM (Block Element Modifier) naming convention used in Flowforge, with a 'ff-' prefix. This convention helps in organizing CSS classes for blocks, elements within blocks, and modifiers for variations.
```css
.ff-[block]__[element]--[modifier]
```
--------------------------------
### Add Flowforge Position Column to Migration (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/3.database-schema.md
Provides an example of how to add a position column to an existing 'tasks' table using Flowforge's `flowforgePositionColumn()` method within a Laravel migration. It also shows how to add a unique constraint for concurrent safety.
```php
flowforgePositionColumn('position');
// Recommended: Add unique constraint for concurrent safety
$table->unique(['status', 'position'], 'unique_position_per_column');
});
}
public function down(): void
{
Schema::table('tasks', function (Blueprint $table) {
$table->dropUnique('unique_position_per_column');
$table->dropColumn('position');
});
}
};
```
--------------------------------
### Eager Load Relationships for Task Cards (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
This PHP code demonstrates how to optimize the loading of task data by eager loading associated relationships such as 'assignee', 'tags', and 'project'. This reduces the number of database queries and improves the performance of displaying task cards.
```php
public function board(Board $board): Board
{
return $board
->query(Task::query()->with(['assignee', 'tags', 'project']))
// ...
}
```
--------------------------------
### Update Code References from Rank to DecimalPosition (Diff)
Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md
Shows the code changes required to replace old `Rank` service calls with the new `DecimalPosition` service in Flowforge v3.x. This includes updating imports and method calls for various positioning scenarios.
```diff
- use Relaticle\Flowforge\Services\Rank;
+ use Relaticle\Flowforge\Services\DecimalPosition;
// Empty column position
- $position = Rank::forEmptySequence()->get();
+ $position = DecimalPosition::forEmptyColumn();
// Position after another
- $position = Rank::after($lastRank)->get();
+ $position = DecimalPosition::after($lastPosition);
// Position before another
- $position = Rank::before($nextRank)->get();
+ $position = DecimalPosition::before($nextPosition);
// Position between two
- $position = Rank::betweenRanks($prevRank, $nextRank)->get();
+ $position = DecimalPosition::between($afterPos, $beforePos);
```
--------------------------------
### Set Column Colors Using Filament Constants (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md
Illustrates setting column colors by utilizing Filament's predefined Color class constants. This provides a structured way to apply theme-consistent colors.
```php
use Filament\Support\Colors\Color;
Column::make('todo')->color(Color::Gray)
Column::make('in_progress')->color(Color::Blue)
Column::make('done')->color(Color::Green)
```
--------------------------------
### Publish Flowforge Configuration
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Command to publish the Flowforge configuration file to your application. This allows for customization of various settings.
```bash
php artisan vendor:publish --tag=flowforge-config
```
--------------------------------
### Standalone Livewire Component for Flowforge Board
Source: https://context7.com/relaticle/flowforge/llms.txt
Integrates a Flowforge Kanban board into a standalone Livewire component for use outside of Filament admin panels. It requires Livewire, Filament, and Flowforge packages. The `board` method defines the data source and column configurations, while the `render` method specifies the Blade view and layout.
```php
query(Task::query())
->columnIdentifier('status')
->positionIdentifier('position')
->columns([
Column::make('todo')->label('To Do')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('completed')->label('Completed')->color('green'),
]);
}
public function render()
{
return view('livewire.task-board')
->layout('components.layouts.app');
}
}
```
--------------------------------
### Create Rich Card Layouts with Filament Schema Components (PHP)
Source: https://context7.com/relaticle/flowforge/llms.txt
Defines a rich card schema for Kanban board tasks using Filament's Schema components. It includes text entries for title and description, and a flex layout for priority, due date, assignee, and avatar. Dependencies include Filament's Infolists and Schema components, and Relaticle's CardFlex. This schema is used to visually represent task details on the board.
```php
query(Task::query())
->columnIdentifier('status')
->positionIdentifier('position')
->recordTitleAttribute('title')
->cardSchema(fn (Schema $schema) => $schema->components([
TextEntry::make('title')
->weight('bold')
->size('lg'),
TextEntry::make('description')
->limit(100)
->color('gray'),
CardFlex::make([
TextEntry::make('priority')
->badge()
->color(fn ($state) => match($state) {
'high' => 'danger',
'medium' => 'warning',
'low' => 'success',
default => 'gray'
})
->icon('heroicon-o-flag'),
TextEntry::make('due_date')
->badge()
->date()
->icon('heroicon-o-calendar'),
TextEntry::make('assignee.name')
->badge()
->icon('heroicon-o-user'),
ImageEntry::make('assignee.avatar_url')
->circular()
->size(24),
])
->wrap()
->justify('between')
->align('center'),
]))
->columns([
Column::make('todo')->label('To Do')->color('gray'),
Column::make('in_progress')->label('In Progress')->color('blue'),
Column::make('done')->label('Done')->color('green'),
]);
}
```
--------------------------------
### Verify Database Schema Status (Bash)
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md
Checks the status of database migrations using the Laravel artisan command. This helps in understanding which migrations have been run and which are pending.
```bash
php artisan migrate:status
```
--------------------------------
### Listen to Kanban Items Loaded Event in PHP
Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md
This PHP code snippet shows how to listen to the 'kanban-items-loaded' Livewire event using the #[On] attribute. The associated method receives payload details like columnId, loadedCount, totalCount, and isFullyLoaded, enabling custom logic for tracking loading progress or updating UI elements based on pagination.
```php
use Livewire\Attributes\On;
#[On('kanban-items-loaded')]
public function onItemsLoaded(string $columnId, int $loadedCount, int $totalCount, bool $isFullyLoaded): void
{
// Track loading progress
}
```
--------------------------------
### Integrate Flowforge with Filament Resource Page (PHP)
Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md
Integrates Flowforge into a Filament resource page by extending `BoardResourcePage`. This allows the Kanban board to operate on the same query as the resource's list page, providing a unified data view.
```php
use Relaticle\Flowforge\BoardResourcePage;
class TaskBoardPage extends BoardResourcePage
{
protected static string $resource = TaskResource::class;
public function board(Board $board): Board
{
return $board
->query($this->getResource()::getEloquentQuery())
->columnIdentifier('status')
->positionIdentifier('position')
->columns([...]);
}
}
// Register in resource:
public static function getPages(): array
{
return [
'index' => Pages\ListTasks::route('/'),
'board' => Pages\TaskBoardPage::route('/board'),
];
}
```