Polish new in v7 - modal form examples

app/Http/Controllers/Admin/MonsterCrudController.php

@@ -13,6 +13,8 @@ class MonsterCrudController extends CrudController
     use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
+    use \Backpack\DataformModal\Http\Controllers\Operations\CreateInModalOperation;
+    use \Backpack\DataformModal\Http\Controllers\Operations\UpdateInModalOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\DeleteOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\FetchOperation;

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

@@ -15,8 +15,8 @@
 class InvoiceCrudController extends CrudController
 {
     use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
-    use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
-    use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
+    // use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
+    // use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;
     use \Backpack\CRUD\app\Http\Controllers\Operations\FetchOperation;
     use \Backpack\Pro\Http\Controllers\Operations\TrashOperation;

resources/views/admin/new-in-v7.blade.php

@@ -15,7 +15,7 @@
                 'formOperation' => 'update',
                 'entry' => \App\Models\PetShop\Skill::find(1),
                 'content' => [
-                    'header' => 'Edit Skill', // optional
+                    'header' => 'Edit Skill (TODO: move this to the right place on page)', // optional
                     'body' => 'This form should make it easy to update an existing skill.<br><br>', // optional
                 ],
             ]
@@ -125,4 +125,22 @@
 
 @include('admin.partials.dataform-examples')
 
+<!-- Heading for Form component -->
+<div class="row g-2 align-items-center mt-3">
+    <div class="col">
+        <div class="page-pretitle">Components</div>
+        <h2 class="page-title">Dataform Modal</h2>
+        <p class="mt-2 mb-2">Show a form for an Eloquent entry, in a modal.</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.dataform-modal-examples')
+
 @endsection

resources/views/admin/partials/dataform-examples.blade.php

@@ -41,10 +41,13 @@ class="icon icon-1">
 <div class="row">
 
     <div class="col-md-6">
-        <div class="card mt-3">
+        <div class="card card-stacked mt-3">
             <div class="card-header">
                 <h3 class="card-title">
-                    Quick Add Tag
+                    Quick Add Tag (With Extra Field)
+
+                    <i class="la la-info-circle text-muted" data-bs-toggle="tooltip" data-bs-placement="top"
+                        title="Showing the form to create a Tag. Configuration is from TagCrudController, and one custom field is added here."></i>
                 </h3>
             </div>
             <div class="card-body">
@@ -82,58 +85,3 @@ class="icon icon-1">
     </div>
 
 </div>
-
-<div class="row">
-    <div class="col-md-6">
-        <div class="card mt-3">
-            <div class="card-header">
-                <h3 class="card-title">
-                    Quick Add Invoice in a Modal
-                </h3>
-            </div>
-            <div class="card-body">
-
-                <button
-                    type="button"
-                    class="btn btn-primary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#create_invoice"
-                    bp-button="create"
-                    data-style="zoom-in"
-                >
-                    <i class="la la-plus"></i> <span>Create Invoice</span>
-                </button>
-                <x-bp-dataform-modal formId="create_invoice" :controller='\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class' />
-
-            </div>
-        </div>
-    </div>
-    <div class="col-md-6">
-        <div class="card mt-3">
-            <div class="card-header">
-                <h3 class="card-title">
-                    Quick Edit Invoice in a Modal
-                </h3>
-            </div>
-            <div class="card-body">
-                <button
-                    type="button"
-                    class="btn btn-primary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#edit_invoice"
-                    bp-button="create"
-                    data-style="zoom-in"
-                >
-                    <i class="la la-plus"></i> <span>Edit Invoice</span>
-                </button>
-                <x-bp-dataform-modal
-                    formId="edit_invoice"
-                    :controller="\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class"
-                    formOperation="updateInModal"
-                    :entry="\App\Models\PetShop\Invoice::find(1)"
-                />
-
-            </div>
-        </div>
-    </div>
-</div>

resources/views/admin/partials/dataform-modal-examples.blade.php

@@ -0,0 +1,69 @@
+<div class="row">
+    <div class="col-md-12">
+        <div class="card mt-3">
+            <div class="card-header">
+                <h3 class="card-title">
+                    Quickly Add/Edit Invoices
+
+                    <span class="card-subtitle">Showing latest invoices in a custom table, with buttons to create or edit an invoice in a modal form.</span>
+            </div>
+            <div class="card-body">
+
+                @php
+                    $newestInvoices = \App\Models\Petshop\Invoice::orderBy('updated_at')->take(5)->get();
+                @endphp
+
+                <div class="table-responsive">
+                    <table class="table table-vcenter card-table table-striped table-hover">
+                        <thead>
+                            <tr>
+                                <th class="w-1">Actions</th>
+                                <th>Invoice</th>
+                                <th>Customer</th>
+                                <th>Total</th>
+                                <th>Created</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach ($newestInvoices as $invoice)
+                            <tr>
+                                <td>
+                                    <a href="#" data-bs-toggle="modal" data-bs-target="#edit_invoice_{{ $invoice->id }}" bp-button="create">Edit</a>
+
+                                    <x-bp-dataform-modal
+                                        formId="edit_invoice_{{ $invoice->id }}"
+                                        :controller="\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class"
+                                        formOperation="updateInModal"
+                                        :entry="\App\Models\PetShop\Invoice::find($invoice->id)"
+                                    />
+
+                                </td>
+                                <td>
+                                    <a href="{{ url('admin/pet-shop/invoice/'.$invoice->id.'/show') }}">
+                                    {{ $invoice->series.' '.$invoice->number }}
+                                    </a>
+                                </td>
+                                <td>{{ $invoice->owner->name }}</td>
+                                <td>${{ number_format($invoice->total, 0) }}</td>
+                                <td class="text-secondary">{{ $invoice->created_at->diffForHumans() }}</td>
+
+                            </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+
+                <p class="mt-3">
+                    Didn't find what you're looking for?
+
+                    <a href="#" class="text-primary" data-bs-toggle="modal" data-bs-target="#create_invoice">
+                        <span>Create a new invoice</span>
+                    </a>
+                </p>
+
+                <x-bp-dataform-modal formId="create_invoice" :controller='\App\Http\Controllers\Admin\PetShop\InvoiceCrudController::class' />
+
+            </div>
+        </div>
+    </div>
+</div>