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)。请参阅许可文件获取更多信息。

d4ve-r / livewire-resource-time-grid

维护者

详细信息