Nova List Card

Add a variety of lists to your dashboard

nova-list-card

Install

composer require dillingham/nova-list-card

Basic Usage

php artisan nova:list-card RecentUsers

<?php

namespace App\Nova\Metrics;

use App\Nova\User;
use NovaListCard\ListCard;

class RecentUsers extends ListCard
{
    /**
     * Setup the card options
     */
    public function __construct()
    {
        $this->resource(User::class)
            ->heading('Recent Users')
            ->orderBy('created_at', 'desc')
            ->timestamp()
            ->viewAll();
    }

View more examples

Possible Scenarios

Latest resource / oldest resource
Upcoming / past due resources
Top resource by relationship count
Top resource by relationship's column sum

Card Width

Set the card's width, default 1/3

->width('3/5')

Card Heading

->heading('Top Bloggers')

Resource Subtitle

Display resource subtitle beneath the title

->subtitle(),

or display resource proporties beneath the title

->subtitle('city'),

Timestamps

Adds timestamp beneath resource title

Optionally can add as a side value, see below.

Defaults: created_at & moment.js format: MM/DD/YYYY:

->timestamp(),
->timestamp('due_at'),
->timestamp('completed_at', 'MM/DD'),

Relative timestamps: 5 days ago | in 5 days

->timestamp('completed_at', 'relative'),

Side Values

Display resource values on the right side

->value('city'),

Aggregated Count

Add counts of relationships:

->resource(Category::class)
->withCount('posts')
->value('category_posts'),

Aggregated Sum

Add sum of relationship's column:

->resource(User::class)
->withSum('orders', 'total')
->value('orders_sum'),

Value formatting

You can change the value output using numeral.js

-value('orders_sum') // 55200
-value('orders_sum', '0.0a') // 55.2k
-value('orders_sum', '($ 0.00 a)') // $55.2k

Value Timestamp: add third parameter for moment.js formats

->value('created_at') // 2019-04-27 00:00:00
->value('created_at', 'MM/DD', 'timestamp') // 04/27
->value('created_at', 'relative', 'timestamp') // 5 days ago

Limit

Set the number of items to display, default: 5:

->limit(3)

OrderBy

Set the order of the resources:

->orderBy('scheduled_at', 'desc')

Show View All Link

You can link to the resource's index

->viewAll()

Or to a lens attached to the resource

->viewAllLens('most-popular-users')

Footer Link

You can link to a urL instead of using viewAll:

->footerLink('Google', 'https://google.com')

Scoped Resource

Check the card's uri key within IndexQuery:

public static function indexQuery($request, $query)
{
    if($request->input('nova-list-card') == 'upcoming-tasks') {
        $query->whereNull('completed_at');
    }

    return $query;
}

CSS Classes

Customize styles easily if you have your own theme.css

.nova-list-card {}
.nova-list-card-heading {}
.nova-list-card-body {}
.nova-list-card-item {}
.nova-list-card-title {}
.nova-list-card-subtitle {}
.nova-list-card-timestamp {}
.nova-list-card-value {}
.nova-list-card-footer-link {}

Also includes resource specific classes etc

.nova-list-card.users.most-tasks

Also can target specific rows

.nova-list-card-item-1 {}
.nova-list-card-item-2 {}
.nova-list-card-item-3 {}

The uri key is added to the card

#upcoming-tasks {}

You can also add classes manually

->classes('font-bold text-red some-custom-class')

You can also add alternate row formatting

->zebra()

Examples

nova-list-card

->resource(Contact::class)
->heading('Recent Contacts')
->subtitle('email')
->timestamp()
->limit(3)
->viewAll(),

->resource(Contact::class)
->heading('Contacts: Most tasks', 'Tasks')
->orderBy('tasks_count', 'desc')
->subtitle('email')
->value('tasks_count')
->withCount('tasks')
->zebra()
->viewAll(),

->resource(Contact::class)
->heading('Top Opportunities', 'Estimates')
->withSum('opportunities', 'estimate')
->value('opportunities_sum', '0.0a')
->viewAllLens('top-opportunities')
->orderBy('opportunities_sum', 'desc'),

Methods