add chips examples (#701)

Author: tabacitu

app/Http/Controllers/Admin/PetShop/InvoiceCrudController.php

@@ -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.
@@ -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');
@@ -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()

composer.lock

@@ -33,6 +33,25 @@
 
 @section('content')
 
+<!-- Heading for chips -->
+<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 headings
+            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')
+
 <!-- Heading for Datagrid component -->
 <div class="row g-2 align-items-center">
     <div class="col @if(session('backpack.theme-tabler.layout') == 'horizontal_overlap') text-white @endif">
@@ -103,6 +122,7 @@
     </div>
 </div>
 
+
 @include('admin.partials.dataform-examples')
 
 @endsection