README

简单的Nova卡片，用于显示表格

注意：此代码是从 m-a-k-o/nova-custom-table-card 分支出来的，请参阅 问题 #8

简单的卡片表格，展示您选择的数据。

它可以用作最新的订单列表或最新的帖子等。

要求

• php: >=8.1
• laravel/nova: ^4.0

安装

您可以通过composer将此包安装到使用 Nova 的Laravel应用程序中

composer require whitespacecode/nova-table-card

您必须使用NovaServiceProvider注册卡片。

// in app/Providers/NovaServiceProvder.php

// ...
public function cards()
{
    return [
        // ...

        // all the parameters are required excelpt title
        new \Whitespacecode\TableCard\TableCard(
            array $header, array $data, string $title, array $viewAll
        ),
    ];
}

使用示例

use Whitespacecode\TableCard\TableCard;
use Whitespacecode\TableCard\Table\Cell;
use Whitespacecode\TableCard\Table\Row;

// ...
public function cards()
{
    return [
        // ...

        // all the parameters are required except title and/or viewLink 
        (new TableCard)
            ->header([
                Cell::make('Order Number'),
                // Set sortable to true in a header Cell to allow its column's sorting
                (Cell::make('Price'))->sortable(true)->class('text-right'),
            ])
            ->data([
                (Row::make(
                    Cell::make('2018091001'),
                    (Cell::make('20.50'))->class('text-right')->id('price-2')
                ))->viewLink('/resources/orders/1'), //Add viewLink to show clickable eye
                (Row::make(
                    Cell::make('2018091002'),
                    (Cell::make('201.25'))->class('text-right')->id('price-2')
                )),
            ])
            ->title('Orders')
            ->viewAll(['label' => 'View All', 'link' => '/resources/orders']),
    ];
}

或

您可以在示例的Nova/Cards目录中创建自己的类，该类将扩展 \Whitespacecode\TableCard\TableCard。

在这个独立的类中，您可以从模型中以干净的方式获取数据。

<?php

namespace App\Nova\Cards;

use Whitespacecode\TableCard\TableCard;
use Whitespacecode\TableCard\Table\Cell;
use Whitespacecode\TableCard\Table\Row;

use App\Models\Order;

class LatestOrders extends TableCard
{
    public function __construct()
    {
        $header = collect(['Date', 'Order Number', 'Status', 'Price', 'Name']);

        $this->title('Latest Orders');
        $this->viewAll([
            'label' => 'View All', //Default value `View All`
            'link' => '/resources/orders', //Required field
            'position' => 'bottom' //Default value `top`
            'style' => 'button' //Default value `link`
        ]);

        // $orders = Order::take(10)->latest->get();
        // Data from you model
        $orders = collect([
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
            ['date' => '2018-12-01', 'order_number' => '2018120101', 'status' => 'Ordered', 'price' => '20.55', 'name' => 'John Doe'],
        ]);

        $this->header($header->map(function($value) {
            // Make the Status column sortable
            return ($value === 'Status') ?
                (Cell::make($value))->sortable(true) :
                Cell::make($value);
        })->toArray());

        $this->data($orders->map(function($order) {
            return Row::make(
                Cell::make($order['date']),
                Cell::make($order['order_number']),
                // Instead of alphabetically ordering the status, set a sortableData value for better representation
                (Cell::make($order['status'])->sortableData($this->getStatusSortableData($order['status']))),
                Cell::make($order['price']),
                Cell::make($order['name'])
            );
        })->toArray());

        //Possible style configuration
        // $this->style = 'tight';

    }

    private function getStatusSortableData (string $status) : int
    {
        switch ($status) {
            case 'Ordered':
                return 1;            
            default:
                return 0.
        } 
    }
}

然后只需在您的资源中将自定义类像普通卡片一样包含进来

use App\Nova\Cards\LatestOrders;

protected function cards()
{
    return [
        ......
        new LatestOrders,
     ];
 }

注意

如果您在 Row::make()->viewLink() 上没有指定viewLink()，则显示图标将不可见。

在viewAll中添加额外字段

您还可以使用 $this->viewAll() 在表格上显示viewAll。

• 标签（可选）：默认设置为'查看所有'。
• 位置（可选）：默认设置为'顶部'。如果需要，您可以将其更改为'底部'。
• 样式（可选）：默认样式为'链接'。或者，您可以将它设置为'按钮'以获得按钮样式的外观。

$this->viewAll([
    'label' => '__('Latest Orders')',
    'link' => '/resources/orders', //URL to navigate when the link is clicked
    'position' => 'bottom', //(Possible values `top` - `bottom`)
    'style' => 'button', //(Possible values `link` - `button`)
]);

表格样式定制

要显示更多表格数据，您可以使用"紧凑"表格样式选项，该选项旨在增加表格行的视觉密度。

use Whitespacecode\TableCard\TableCard;

protected function cards()
{
    return [
        ...
        TableCard::make(
            ...
        )->style('tight'),
     ];
 }

或覆盖您自定义类中的 $style 属性

$this->style = 'tight';

使用分页

分页接受默认的 Illuminate\Pagination\LengthAwarePaginator

在获取数据时，只需使用默认的 ->paginate() 并将数据传递给分页器。
其他一切保持不变。

class LatestOrders extends TableCard
{
    public function __construct()
    {
        $orders = Orders::paginate(5);
        
        //You want to start by showing the latest result? Get them by latest 
        //$orders = Orders::latest()->paginate(5);

        $this->paginator($orders);
    }
}