56. Mostrar mis posts creados

En versiones recientes de livewire al wire:model se debe agregar .live para que funcione wire:model.live="search"

Referencia de los modificadores: https://livewire.laravel.com/docs/wire-model

? 8° Configuración de la vista del componente de Livewire 

Editamos el archivo resources/views/livewire/admin/posts-index.blade.php

Agregamos el input para filtrar los post y le agregamos el atributo wire_model="search" para usarlo en el filtro:

<div class="card">

	<div class="card-header">
		<input wire:model="search" class="form-control" 
			placeholder="Ingrese el nombre de un post">
	</div>
	
	@if ($posts->count())
	
	<div class="card-body">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th colspan="2"></th>
				</tr>
			</thead>
			<tbody>
				@foreach ($posts as $post)
				<tr>
					<td>{{ $post->id }}</td>
					<td>{{ $post->name }}</td>
					<td with="10px">
						<a 
							class="btn btn-primary btn-sm" 
							href="{{ route('admin.posts.edit', $post) }}"
						>Editar</a>
					</td>
					<td with="10px">
						<form 
							action="{{ route('admin.posts.destroy', $post) }}"
							method="POST"
						>
							@csrf
							@method('DELETE')
							<button 
								type="submit" 
								class="btn btn-danger btn-sm"
							>Eliminar</button>
						</form>
					</td>
				</tr>
				@endforeach
			</tbody>
		</table>
	</div>
	
	<div class="card-footer">
		{{ $posts->links() }}
	</div>
	
	@else
		<div class="card-body">
			<strong>No hay ningún registro...</strong>
		</div>
	@endif
	
</div>

? 7° Configuración de la vista index.blade.php con componente de Livewire

@extends('adminlte::page')

@section('title', 'Coders Free')

@section('content_header')
	<h1>Listado de Posts</h1>
@stop

@section('content')
	@livewire('admin.posts-index')
@stop

@section('css')
	<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
	<script> console.log('Hi!'); </script>
@stop

? 6° Creamos un componente de Livewire

php artisan make:livewire Admin/PostsIndex

Se crea un nuevo archivo en app/Http/Livewire/Admin/PostsIndex.php

<?php
namespace App\Http\Livewire\Admin;

use Livewire\Component;
use App\Models\Post;
use Livewire\WithPagination;

class PostsIndex extends Component
{
	use WithPagination;
	
	protected $paginationTheme = "bootstrap";
	
	public $search;
	
	public function updatingSearch()
	{
		$this->resetPage();
	}
	
	public function render()
	{
		$posts = Post::where('user_id', auth()->user()->id)
			->where('name', 'LIKE', '%' . $this->search . '%')
			->latest('id')
			->paginate();
		
		return view('livewire.admin.posts-index', compact('posts'));
	}
}

Básicamente lo que hace este componente es renderizar el archivo de vista que se encuentra en resources/views/livewire/admin/posts-index.blade.php

? 5° Configuración del menú sidebar

Editamos el array 'menu' en el archivo config/adminlte.php para agregar las opciones de Blog:

...
	['header' => 'OPCIONES DE BLOG'],
	[
		'text' => 'Lista de posts',
		'route' => 'admin.posts.index',
		'icon' => 'fas fa-fw fa-clipboard'
	],
	[
		'text' => 'Crear nuevo post',
		'route' => 'admin.posts.create',
		'icon' => 'fas fa-fw fa-file'
	],
...

Y habilitamos livewire para utilizarlo dentro de la plantilla AdminLTE:

	'livewire' => true,
];

? 4° Creación de las vistas

Creamos la carpeta posts en resources/views/admin/ y dentro creamos los archivos de vistas:

• index.blade.php
• show.blade.php
• create.blade.php
• edit.blade.php

Copiamos en cada uno la estructura del archivo resources/views/admin/index.blade.php

@extends('adminlte::page')

@section('title', 'Coders Free')

@section('content_header')
	<h1></h1>
@stop

@section('content')
	<p></p>
@stop

@section('css')
	<link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
	<script> console.log('Hi!'); </script>
@stop

? 3° Configuración de los métodos del Controlador

Configuramos el método index:

public function index()
{
	$posts= Post::all();
	return view('admin.posts.index', compact('posts'));
}

Configuramos el método create:

public function create()
{
	return view('admin.posts.create');
}

Configuramos el método show:

public function show(Post $post)
{
	return view('admin.posts.show', compact('post'));
}

Configuramos el método edit:

public function edit(Post $post)
{	
	return view('admin.posts.edit', compact('post'));
}

Configuramos el método store:

public function store(Request $request)
{
	$request->validate([
		'name' => 'required',
		'slug' => 'required|unique:tags'
	]);
	$post = Post::create($request->all());

	return redirect()->route('admin.posts.edit', compact('post'))
		->with('info', 'El post se creó con éxito');
}

? Debemos habilitar la asignación masiva en el modelo Post en app/Models/Post.php:

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
	use HasFactory;

	protected $fillable = ['name', 'slug'];
}

Configuramos el método update:

public function update(Request $request, Post $post)
{
	$request->validate([
		'name' => 'required',
		'slug' => "required|unique:tags,slug,$post->id",
	]);
	$post->update($request->all());

	return redirect()->route('admin.posts.edit', compact('post'))
		->with('info', 'El post se actualizó con éxito');
}

Configuramos el método destroy:

public function destroy(Post $post)
{
	$post->delete();

	return redirect()->route('admin.posts.index')
		->with('info', 'El post se eliminó con éxito');
}

? 2° Configuración del Controlador

<?php 
namespace App\Http\Controllers\Admin;
 
use App\Http\Controllers\Controller; 
use Illuminate\Http\Request; 
use App\Models\Post; 

class PostController extends Controller 
{ 
	public function index() {} 
	public function create() {} 
	public function store(Request $request) {} 
	public function show(Post $post) {} 
	public function edit(Post $post) {} 
	public function update(Request $request, Post $post) {} 
	public function destroy(Post $post) {} 
}

? 1° Creación de Rutas

Creamos un controlador para las 7 rutas necesarias:

php artisan make:controller Admin/PostController -r

Se crea el controlador en app/Http/Controllers/Admin/PostController.php

Editamos el archivo routes/admin.php para usar el controlador recién creado:

<?php
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Admin\HomeController;
use App\Http\Controllers\Admin\CategoryController;
use App\Http\Controllers\Admin\TagController;
use App\Http\Controllers\Admin\PostController;

Route::get('', [HomeController::class, 'index'])->name('admin.home');

Route::resource('categories', CategoryController::class)
	->names('admin.categories');

Route::resource('tags', TagController::class)
	->names('admin.tags');
	
Route::resource('posts', PostController::class)
	->names('admin.posts');