README

此包允许您构建资源/时间网格，以“日历”方式显示事件。您可以定义资源为拥有事件的东西，例如特定的一天、一个用户、一个客户等。使用该组件加载的事件将被渲染在根据资源所属和事件开始日期的列中。

预览

安装

您可以通过 composer 安装此包

composer require asantibanez/livewire-resource-time-grid

要求

此包底层使用 livewire/livewire (https://laravel-livewire.com/)。

它还使用 TailwindCSS (https://tailwind.org.cn/) 进行基本样式设置。

请在使用此组件之前确保包含这两个依赖项。

使用方法

为了使用此组件，您必须创建一个新的 Livewire 组件，它从 LivewireResourceTimeGrid 扩展

您可以使用 make:livewire 创建一个新组件。例如。

php artisan make:livewire AppointmentsGrid

在 AppointmentsGrid 类中，不要从基本的 Component Livewire 类扩展，而要从 LivewireResourceTimeGrid 扩展。还要删除 render 方法。您将拥有一个类似以下片段的类。

class AppointmentsGrid extends LivewireResourceTimeGrid
{
    //
}

在这个类中，您必须重写以下方法

public function resources()
{
    // must return a Laravel collection
}

public function events()
{
    // must return a Laravel collection
}

在 resources() 方法中，返回一个包含将要列在网格中的事件的“资源”的集合。这些“资源”必须是包含 key => value 对的数组，并且必须包含一个 id 和一个 title。您可以根据需要为每个“资源”添加任何其他键

示例

public function resources()
{
    return collect([
        ['id' => 'andres', 'title' => 'Andres'],
        ['id' => 'pamela', 'title' => 'Pamela'],
        ['id' => 'sara', 'title' => 'Sara'],
        ['id' => 'bruno', 'title' => 'Bruno'],
    ]);
}

在 events() 方法中，返回一个包含属于 resources() 方法返回的每个“资源”的事件的集合。事件也必须是至少包含以下键的键数组： id、title、starts_at、ends_at、resource_id。

对于每个返回的事件，还期望以下条件

对于每个事件，resource_id 必须与 resources() 返回的集合中的 id 匹配。
starts_at 必须是 Carbon\Carbon 实例
ends_at 必须是 Carbon\Carbon 实例

示例

public function events()
{
    return collect([
        [
            'id' => 1,
            'title' => 'Breakfast',
            'starts_at' => Carbon::today()->setTime(10, 0),
            'ends_at' => Carbon::today()->setTime(12, 0),
            'resource_id' => 'andres',
        ],
        [
            'id' => 2,
            'title' => 'Lunch',
            'starts_at' => Carbon::today()->setTime(13, 0),
            'ends_at' => Carbon::today()->setTime(15, 0),
            'resource_id' => 'pamela',
        ],
    ]);
}

现在，我们可以将我们的组件包含在任何视图中。您必须指定 3 个参数， starting-hour、ending-hour 和 interval。这些参数表示网格将渲染的一天中的时间以及每小时将显示多少个部分。（interval 必须是分钟，并且小于 60）

示例

<livewire:appointments-grid
    starting-hour="8"
    ending-hour="19"
    interval="15"
/>

您应该包含带有 @livewireResourceTimeGrid 的脚本以启用默认开启的拖放功能。您必须在 @livewireScripts 之后包含它们

@livewireScripts
@livewireResourceTimeGridScripts

这将渲染一个从上午 8 点到晚上 7 点的网格，时间间隔为 15 分钟。

默认情况下，组件使用所有可用宽度和高度。您可以使用包装元素将其限制为使用特定的尺寸集。

高级使用

UI 自定义

当在视图中渲染时，您可以使用以下属性来自定义组件的行为

resource-column-header-view，它可以是任何渲染资源信息的 blade.php 视图。此视图将注入一个 $resource 变量，其中包含其数据。
event-view 可以是任何用于渲染事件卡的 blade.php 视图。此视图将注入一个包含其数据的 $event 变量。
resource-column-header-height-in-rems 和 hour-height-in-rems 可以分别用于自定义资源视图或时间槽的高度。默认值分别为 4 和 8。这些将用作 rem 值。
before-grid-view 和 after-grid-view 可以是任何可以在网格本身之前或之后渲染的 blade.php 视图。这些可以使用 Livewire 添加额外的功能到您的组件中。

示例

<livewire:appointments-grid
    starting-hour="8"
    ending-hour="19"
    interval="15"
    resource-column-header-view="path/to/view/staring/from/views/folder"
    event-view="path/to/view/staring/from/views/folder"
    resource-column-header-height-in-rems="4"
    hour-height-in-rems="8"
    before-grid-view="path/to/view/staring/from/views/folder"
    after-grid-view="path/to/view/staring/from/views/folder"
/>

交互定制

您可以通过重写以下方法来为您的组件添加交互性

public function hourSlotClick($resourceId, $hour, $slot)
{
    // This event is triggered when a time slot is clicked.// 
    // You'll get the resource id as well as the hour and minute
    // clicked by the user
}

public function onEventClick($event)
{
    // This event will fire when an event is clicked. You will get the event that was
    // clicked by the user
}

public function onEventDropped($eventId, $resourceId, $hour, $slot)
{
    // This event will fire when an event is dragged and dropped into another time slot
    // You will get the event id, the new resource id + hour + minute where it was
    // dragged to
}

您也可以覆盖事件和资源匹配的方式，而不是使用分别的 resource_id 和 id。要执行此操作，您必须重写以下方法

public function isEventForResource($event, $resource)
{
    // Must return true or false depending if the $resource is the owner of the $event
}

此方法的基实现为

return $event['resource_id'] == $resource['id'];

您可以按需自定义。👍

测试

composer test

待办事项

添加更多测试 💪

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何安全问题，请通过电子邮件 santibanez.andres@gmail.com 联系我们，而不是使用问题跟踪器。

鸣谢

许可证

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

luizpuretz / livewire-resource-time-grid-laravel-9

维护者

详细信息