README

在您的 Filament 应用程序中定义一个 Kanban 页面。它可以是页面或资源页面。

安装

您可以通过 composer 安装此包

composer require invaders-xx/filament-kanban-board

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-kanban-board-config"

这是发布配置文件的内容

return [
];

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-kanban-board-views"

您还可以指定自己的视图来更改记录内容的行为

public string $recordContentView = 'filament-kanban-board::record-content';

在您的类中添加更多内容到 Kanban 的盒子中。

您可以为 Kanban 的每个元素定义自己的样式

protected function styles(): array
{
    return [
        'wrapper' => 'w-full h-full flex space-x-4 overflow-x-auto',
        'kanbanWrapper' => 'h-full flex-1',
        'kanban' => 'bg-primary-200 rounded px-2 flex flex-col h-full',
        'kanbanHeader' => 'p-2 text-sm text-gray-900',
        'kanbanFooter' => '',
        'kanbanRecords' => 'space-y-2 p-2 flex-1 overflow-y-auto',
        'record' => 'shadow bg-white dark:bg-gray-800 p-2 rounded border',
        'recordContent' => 'w-full',
    ];
}

使用方法

为了使用此组件，您必须创建一个新的 Filament 页面，它从 FilamentKanbanBoard 扩展

class KanbanOrders extends FilamentKanbanBoard
{
    protected function statuses() : Collection
    {
        return collect([
            [
                'id' => 'registered',
                'title' => 'Registered',
            ],
            [
                'id' => 'awaiting_confirmation',
                'title' => 'Awaiting Confirmation',
            ],
            [
                'id' => 'confirmed',
                'title' => 'Confirmed',
            ],
            [
                'id' => 'delivered',
                'title' => 'Delivered',
            ],
        ]);
    }
}

对于每个我们定义的状态，我们必须返回一个包含至少 2 个键的数组：id 和标题。

现在，对于 records()，我们可能定义一个来自您的项目中 Eloquent 模型的销售订单列表。

protected function records() : Collection
{
    return SalesOrder::all()
        ->map(function (SalesOrder $item) {
            return [
                'id' => $item->id,
                'title' => $item->customer->name,
                'status' => $item->status,
            ];
        });
}

如上所示，我们必须返回一个包含数组项的集合，其中每个项必须至少包含 3 个键：id、标题和状态。最后一个是最重要的，因为它将被用于匹配记录属于哪个状态。为此，组件使用以下比较匹配状态和记录。

$status['id'] == $record['status'];

如果您需要在 Filament 的资源中使用此页面，请将路由函数定义添加到类中

public static function route(string $path): array
{
    return [
        'class' => static::class,
        'route' => $path,
    ];
}

排序和拖动

默认情况下，排序和拖动状态之间是禁用的。要启用它，请在您的类中设置

public bool $sortable = true;
public bool $sortableBetweenStatuses = true;

行为和交互

当排序和拖动启用时，您的组件可以在这些事件发生时收到通知。由这两个事件触发的回调是 onStatusSorted 和 onStatusChanged

在 onStatusSorted 中，您会收到有关哪个 record 在其 status 中改变了位置的提示。您还提供了一个 $orderedIds 数组，它包含排序后 records 的 id。您必须覆盖以下方法以在更改时收到通知。

public function onStatusSorted($recordId, $statusId, $orderedIds)
{
    //   
}

在 onStatusChanged 被触发时，一个 record 被移动到另一个 status。在这种情况下，您会收到有关被更改的 record、新 status、从先前状态到有序 id 以及进入新状态的有序 id 的通知。要接收此事件的提醒，您必须覆盖以下方法

public function onStatusChanged($recordId, $statusId, $fromOrderedIds, $toOrderedIds)
{
    //
}

onStatusSorted 和 onStatusChanged 永远不会同时触发。当发生交互时，您会收到一个或另一个的通知。

您还可以通过 onRecordClick 事件在状态板上点击记录时收到通知

public function onRecordClick($recordId)
{
    //
}

要启用 onRecordClick，请在类中设置它

public bool $recordClickEnabled = true;

在模态窗口中编辑记录

您可以使用模态窗口来编辑记录

确保将 $recordClickEnabled 设置为 true，将 $modalRecordClickEnabled 设置为 true

public bool $recordClickEnabled = true;
public bool $modalRecordClickEnabled = true;

您可以为模态标题、宽度、保存/取消按钮标签设置

protected string $editModalRecordTitle = 'Edit modal record title';
protected string $editModalRecordWidth = '2xl';
public string $editModalSaveButtonLabel = "Save";
public string $editModalCancelButtonLabel = "Cancel";

您可以通过覆盖函数 getEditModalRecordSchema() 来设置表单组件

protected static function getEditModalRecordSchema(): array
    {
        return [
            TextInput::make('title'),
            TextInput::make('status'),
        ];
    }

要调用带有表单的模态，请覆盖 onRecordClick() 函数并添加以下

public function onRecordClick($recordId, $data): void
    {
        $this->editModalRecord->fill($data);
        $this->dispatchBrowserEvent('open-modal', ['id' => 'kanban--edit-modal-record']);
    }

要操作来自模态表单的数据，请覆盖 editRecord() 函数

public function editRecord(array $data): void
    {

    }

测试

composer test

更改日志

请参阅变更日志获取最近更改的详细信息。

安全漏洞

请审查我们的安全策略以了解如何报告安全漏洞。

鸣谢

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。

invaders-xx / filament-kanban-board

维护者

详细信息