Skip to content

add chips examples #701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tabacitu merged 7 commits into from
Jun 25, 2025
Merged

add chips examples #701

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8874928
add chips examples
tabacitu Jun 21, 2025
3e6c20d
remove a dd
tabacitu Jun 24, 2025
8fceaa1
change chip syntax
tabacitu Jun 25, 2025
0a37795
ran composer update
tabacitu Jun 25, 2025
af9c162
ran composer update
tabacitu Jun 25, 2025
4759d46
Merge branch 'next' into chips
tabacitu Jun 25, 2025
16b1806
proper order of new items in new page
tabacitu Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
use App\Http\Requests\InvoiceRequest;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;
use Backpack\CRUD\app\Library\Widget;

/**
* Class InvoiceCrudController.
Expand Down Expand Up @@ -53,15 +54,10 @@ public function setupLast5YearsView()
protected function setupListOperation()
{
CRUD::addColumn([
'name' => 'owner',
'label' => 'Owner',
'linkTo' => [
'route' => 'owner.show',
'target' => '_blank',
],
'name' => 'info',
'type' => 'view',
'view' => 'crud::chips.invoice',
]);
CRUD::column('series');
CRUD::column('number');
CRUD::column('issuance_date');
CRUD::column('due_date');
CRUD::column('total');
Expand Down Expand Up @@ -148,6 +144,17 @@ protected function setupShowOperation()
$this->autoSetupShowOperation();

CRUD::column('total');

// get the owner with important relationships
$owner = CRUD::getCurrentEntry()->owner()->with('avatar', 'invoices')->first();

// add a chip widget for the owner
Widget::add()
->to('after_content')
->type('chip')
->view('crud::chips.owner')
->title('Owner')
->entry($owner);
}

public function fetchOwner()
Expand Down
18 changes: 18 additions & 0 deletions resources/views/admin/new-in-v7.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,22 @@

@include('admin.partials.datatable-examples')

<!-- Heading for Datatable component -->
<div class="row g-2 align-items-center mt-3">
<div class="col">
<div class="page-pretitle">Views</div>
<h2 class="page-title">Chips</h2>
<p class="mt-2 mb-2">Include more information about an Eloquent model, in a small space. Hover over the links to understand more about the examples.</p>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-primary"> See docs </a> <!-- TODO: link to final docs -->
</span>
</div>
</div>
</div>

@include('admin.partials.chip-examples')

@endsection
291 changes: 291 additions & 0 deletions resources/views/admin/partials/chip-examples.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,291 @@
@php
$users = \App\User::inRandomOrder()->take(6)->get();
$invoices = \App\Models\PetShop\Invoice::inRandomOrder()->take(6)->get();
$products = \App\Models\Product::inRandomOrder()->take(6)->get();
$owners = \App\Models\PetShop\Owner::inRandomOrder()->take(6)->get();
@endphp

<div class="row">

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with hardcoded complete data --}}
@include('crud::chips.general', [
'text' => 'John Doe',
'title' => 'Example of a chip without URL',
'url' => 'https://google.com',
'target' => '_blank',
'image' => asset('uploads/person1.jpg'),
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
]
])

</div>
</div>

</div>

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with hardcoded data, missing URL --}}
@include('crud::chips.general', [
'text' => 'Adam Mancinello',
'title' => 'Example of a chip without URL',
// 'url' => '#',
'showImage' => true,
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
]
])

</div>
</div>

</div>

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with hardcoded data, missing image --}}
@include('crud::chips.general', [
'text' => 'John Doe',
'title' => 'Example of a chip without an image',
'url' => 'https://example.com',
'showImage' => false,
'details' => [
[
'icon' => 'la la-hashtag',
'text' => '8AH13A7',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-envelope',
'text' => '[email protected]',
'url' => 'mailto:[email protected]',
'title' => 'Click to email',
],
[
'icon' => 'la la-phone',
'text' => '+1 (555) 123-4567',
'url' => 'tel:+15551234567',
'title' => 'Click to call',
]
]
])

</div>
</div>

</div>

</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">Works well to show off people - eg. Users, Customers:</p>
</div>
</div>

<div class="row">

@foreach ($users as $user)

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.general', [
'text' => $user->name,
'url' => backpack_url('user/'.$user->id.'/show'),
'showImage' => false,
// 'image' => backpack_avatar_url($user), // doesn't work well with dummy data
'details' => [
[
'icon' => 'la la-hashtag',
'text' => $user->id,
'url' => backpack_url('user/'.$user->id.'/show'),
'title' => 'Click to preview',
],
[
'icon' => 'la la-envelope',
'text' => $user->email,
'url' => 'mailto:'.$user->email,
'title' => 'Click to email',
],
[
'icon' => 'la la-calendar',
'text' => $user->created_at->format('F j, Y'),
'title' => 'Created at '.$user->created_at,
]
]
])

</div>
</div>

</div>

@endforeach
</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">In this demo, the most obvious example is pet owners:</p>
</div>
</div>

<div class="row">

@foreach ($owners as $owner)

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.owner', ['entry' => $owner])

</div>
</div>

</div>

@endforeach
</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">But it works particularly well for entities where the name alone can't identify an entity, eg. Invoice:</p>
</div>
</div>


<div class="row">

@foreach ($invoices as $invoice)

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.invoice', ['entry' => $invoice])

</div>
</div>

</div>

@endforeach
</div>


<div class="row">
<div class="col">
<p class="mt-2 mb-2">Or entities that can sometimes have duplicated names, like Products:</p>
</div>
</div>

<div class="row">

@foreach ($products as $product)

<div class="col-md-4">

<div class="card mb-2">
<div class="card-body">

{{-- Example of General chip for a person, with data from Eloquent model --}}
@include('crud::chips.general', [
'text' => $product->name,
'url' => backpack_url('product/'.$product->id.'/show'),
// 'showImage' => false,
'details' => [
[
'icon' => 'la la-dollar',
'text' => $product->price,
'title' => 'Priced at $'.$product->price,
],
[
'icon' => 'la la-tag',
'text' => $product->category->name,
'url' => backpack_url('category/'.$product->category->id.'/show'),
'title' => 'Product category: '.$product->category->name,
],
[
'icon' => 'la la-tag',
'text' => $product->status,
'title' => 'Product status: '.$product->status->value,
],
[
'icon' => 'la la-traffic-light',
'text' => $product->condition,
'title' => 'Production condition: '.$product->condition,
]
]
])

</div>
</div>

</div>

@endforeach
</div>

<div class="row">
<div class="col">
<p class="mt-2 mb-2">
The beauty of chips is that they are simple blade files, so you can create your own chips for any entity you want.
You can even use them in your own widgets, in your own custom views or... in your datatables! <a href="{{ backpack_url('pet-shop/invoice') }}">Check out the Invoice datatable</a> to see how we use chips in the List operation, and <a href="{{ backpack_url('pet-shop/invoice/1/show') }}">an Invoice item</a> to see how we use chips inside a Show operation (using the chip widget).
</p>
</div>
</div>
21 changes: 21 additions & 0 deletions resources/views/vendor/backpack/crud/chips/invoice.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@include('crud::chips.general', [
'text' => 'Invoice '.$entry->series.' '.$entry->number.' - '.$entry->owner->name,
'url' => backpack_url('pet-shop/invoice/'.$entry->id.'/show'),
// 'showImage' => false,
'details' => [
[
'icon' => 'la la-dollar',
'text' => $entry->total,
'title' => 'Total invoice amount $'.$entry->total,
],
[
'icon' => 'la la-tags',
'text' => $entry->items->count().' items',
],
[
'icon' => 'la la-calendar',
'text' => $entry->issuance_date->format('F j, Y'),
'title' => 'Issuance date: '.$entry->issuance_date,
]
]
])
Loading