#187: Backend layout introduced

app/Http/Controllers/ArticleController.php

@@ -11,13 +11,6 @@
 
 class ArticleController extends Controller
 {
-    public function index(Request $request): View
-    {
-        $articles = Article::getPaginated($request);
-
-        return view('frontend.articles.index', compact('articles'));
-    }
-
     public function show(string $slug): mixed
     {
         $article = Article::query()

app/Livewire/Backend/Article/Index.php

@@ -6,10 +6,12 @@
 use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\Lazy;
 use Livewire\Attributes\Url;
 use Livewire\Component;
 use Livewire\WithPagination;
 
+#[Lazy]
 class Index extends Component
 {
     use WithPagination;

app/Providers/ViewServiceProvider.php

@@ -23,6 +23,6 @@ public function register(): void
     public function boot(): void
     {
         View::composer(['livewire/backend/*'], CategoriesComposer::class);
-        View::composer(['components/backend', 'components/frontend', 'emails/*'], GlobalConfigComposer::class);
+        View::composer(['components/layouts/*', 'emails/*'], GlobalConfigComposer::class);
     }
 }

config/livewire.php

@@ -0,0 +1,160 @@
+<?php
+
+return [
+
+    /*
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
+    |
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'components.layouts.backend',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
+        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
+    |
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
+    |
+    */
+
+    'render_on_redirect' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];

resources/views/backend/articles/create.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.article.form/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/articles/edit.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.article.form :article="$article"/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/auth.blade.php

@@ -1,4 +1,4 @@
-<x-backend>
+<x-layouts.backend>
     <div class="flex justify-center px-4">
         <div class="w-full sm:w-1/4">
             <div>
@@ -33,4 +33,4 @@ class="text-slate-700 underline decoration-dotted hover:decoration-solid hover:t
             </div>
         </div>
     </div>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/categories/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.category.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/comments/edit.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.comment.edit :comment="$comment"/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/comments/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.comment.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/comments/show.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.comment.show :comment="$comment"/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/config/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.config.index/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/dashboard.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.dashboard/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/feedback/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.feedback.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/keywords/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.keyword.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/subscribers/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.subscriber.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/users/create.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.user.form/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/users/edit.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.user.form :user="$user"/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/users/index.blade.php

@@ -1,3 +1,3 @@
-<x-backend>
+<x-layouts.backend>
     <livewire:backend.user.index lazy/>
-</x-backend>
+</x-layouts.backend>

resources/views/backend/users/show.blade.php

@@ -1,4 +1,4 @@
-<x-backend>
+<x-layouts.backend>
     <div class="flex justify-center">
         <div>
             <div>
@@ -46,4 +46,4 @@ class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100
             @endif
         </div>
     </div>
-</x-backend>
+</x-layouts.backend>

routes/backend.php

@@ -9,6 +9,7 @@
 use App\Http\Controllers\Backend\KeywordController;
 use App\Http\Controllers\Backend\SubscriberController;
 use App\Http\Controllers\UserController;
+use App\Livewire\Backend\Article\Index as ArticleIndex;
 use Illuminate\Support\Facades\Route;
 
 Route::group(['middleware' => ['auth', 'role:owner|admin|author']], function () {
@@ -19,7 +20,7 @@
     Route::get('dashboard', [DashboardController::class, 'index'])->name('admin-dashboard');
 
     //admin articles
-    Route::get('article', [ArticleController::class, 'index'])->name('backend.article.index');
+    Route::get('article', ArticleIndex::class)->name('backend.article.index');
     Route::get('article/create', [ArticleController::class, 'create'])->name('backend.article.create');
     Route::get('article/{article}/edit', [ArticleController::class, 'edit'])->name('backend.article.edit');