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）。请参阅许可证文件了解更多信息。

asantibanez / livewire-resource-time-grid

维护者

详细信息