Nova List Card

Add a variety of lists to your dashboard

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

->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

Method	Description
resource()	declare the resource
heading()	add a title to card
subtitle()	display subtitle value
timestamp()	display & format timestamp
value()	display right side value
withCount()	aggregate count value
withSum()	aggregate sum value
orderBy()	set the resource order
limit()	set number of resources
viewAll()	enable view all link
viewAllLens()	enable lens view all
footerLink()	add a static footer link
zebra()	add alternate row color
id()	unique id for card's requests
classes()	add css classes to card