dillingham / nova-list-card
List Nova Resources
Installs: 10 869
Dependents: 0
Suggesters: 0
Security: 0
Stars: 41
Watchers: 2
Forks: 14
Open Issues: 3
Requires
- php: >=7.1.0
- watson/aggregate: ^3.0
README
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(); }
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'),