LARAVEL Publish and Not-publish Function has issue - laravel

Question

I am creating a blog site, but I am having a problem as when the user clicks on the button "Create New Post," there is a form display (Create new post picture). There are two checkboxes, "Published" "Not-Published," in the form. When the user checks "Published," their post will be displayed on the Post site with the status "Published". When the user checks "Not-Published," their post will not be displayed on the Post site, but in the post database.
On the Post site, I have to radio button. The first is "Publish Posts," which will display only publish posts, the second is "All Posts," which will display all the posts include the "Not-Published" post.
I have a problem as when I click on the "Publish Posts," only the published posts will be displayed, which is good. But when I click on the "All Posts," still the published posts are displayed, I don't see any "Not-Published" posts. I checked the database and saw the "Not-Published" posts there, so why don't appear when I click "All Posts". Can someone help me to fix it?
Post site
Create new post
posts.blade.php
<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Post</button>
#if($isOpen)
#include('livewire.create')
#endif
<div class="float-right">
<span class="mr-3 d-inline">
<label class="inline-flex items-center">
<input type="radio" class="form-radio" wire:model="viewAll" value="0">
<span class="ml-2">Publish Posts</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" wire:model="viewAll" value="1">
<span class="ml-2">All Posts</span>
</label>
</span>
</div>
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2 w-20">No.</th>
<th class="px-4 py-2">Title</th>
<th class="px-4 py-2">Body</th>
<th class="px-4 py-2">Published</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
#if($post->published == 1)
<tr>
<td class="border px-4 py-2">{{ $post->id }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate ">{{ $post->title }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate">{{ $post->body }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate">Published</td>
<td class="border px-4 py-2">
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">View</button>
#if (Auth::user()->id == $post->user_id )
<button wire:click="edit({{ $post->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $post->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
#endif
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
Post Schema
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string("title");
$table->string("body");
$table->boolean("published");
$table->integer("user_id")->unsigned()->index();
$table->timestamps();
});
create.blade.php
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<form>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="">
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
#error('title') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="body" placeholder="Enter Body"></textarea>
#error('body') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label class="inline-flex items-center">
<input type="radio" class="form-radio" wire:model="published" name="published" value="1">
<span class="ml-2">Published</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" class="form-radio" wire:model="published" name="published" value="0">
<span class="ml-2">Not-Published</span>
</label>
#error('published') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
</div>
</div>
Post Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'body', 'published', 'user_id'
];
public function user(): \Illuminate\Database\Eloquent\Relations\BelongsTo
{
return $this->belongsTo(User::class);
}
}
app/Http/Livewire/Posts.php
<?php
namespace App\Http\Livewire;
use http\Env\Request;
use Livewire\Component;
use App\Models\Post;
use Illuminate\Support\Facades\Auth;
class Posts extends Component
{
public $posts, $title, $body, $published, $post_id;
public $viewAll = 0;
public $title_filter;
public $isOpen = 0;
public function render()
{
if($this->viewAll == 0){
$this->posts = Post::where('user_id', Auth::user()->id)
->where('title', 'like', '%' . $this->title_filter. '%')
->get();
} else {
$this->posts = Post::where('user_id', Auth::user()->id)
->where('title', 'like', '%' . $this->title_filter. '%')
->get();
}
return view('livewire.posts');
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
public function openModal()
{
$this->isOpen = true;
}
public function closeModal()
{
$this->isOpen = false;
}
private function resetInputFields(){
$this->title = '';
$this->body = '';
$this->post_id = '';
}
public function store()
{
$this->validate([
'title' => 'required',
'body' => 'required',
'published' => 'required'
]);
Post::updateOrCreate(['id' => $this->post_id], [
'title' => $this->title,
'body' => $this->body,
'published' => $this->published,
'user_id' => Auth::user()->id
]);
session()->flash('message',
$this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');
$this->closeModal();
$this->resetInputFields();
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function edit($id)
{
$post = Post::findOrFail($id);
$this->post_id = $id;
$this->title = $post->title;
$this->body = $post->body;
$this->published = $post->published;
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function delete($id)
{
Post::find($id)->delete();
session()->flash('message', 'Post Deleted Successfully.');
}
}

Answer 1

try this
#foreach($posts as $post)
#if($post->published == 1)
<tr>
<td class="border px-4 py-2">{{ $post->id }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate ">{{
$post->title }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate">{{
$post->body }}</td>
<td class="border px-4 py-2 overflow-ellipsis
truncate">Published</td>
<td class="border px-4 py-2">
#elseif($post->published == 0)
<tr>
<td class="border px-4 py-2">{{ $post->id }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate ">{{
$post->title }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate">{{
$post->body }}</td>
<td class="border px-4 py-2 overflow-ellipsis
truncate">Published</td>
<td class="border px-4 py-2">
#else
<tr>
<td class="border px-4 py-2">{{ $post->id }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate ">{{
$post->title }}</td>
<td class="border px-4 py-2 overflow-ellipsis truncate">{{
$post->body }}</td>
<td class="border px-4 py-2 overflow-ellipsis
truncate">Published</td>
<td class="border px-4 py-2">
#endif
<button class="bg-green-500 hover:bg-green-700 text-white
font-bold py-2 px-4 rounded"><a href="/posts/{{ $post->id
}}">View</a></button>
#if (Auth::user()->id == $post->user_id )
<button wire:click="edit({{ $post->id }})" class="bg-
blue-500 hover:bg-blue-700 text-white font-bold py-2
px-4 rounded">Edit</button>
<button wire:click="delete({{ $post->id }})" class="bg-
red-500 hover:bg-red-700 text-white font-bold py-2
px-4 rounded">Delete</button>
#endif
</td>
</tr>
#endforeach

Answer 2

I think that the way you are trying to handle the radio isn't well. I recommend you try with different properties for each radiobutton like
<div>
<input type="radio" name="published" id="published" wire:model="viewPublished">
<label for="published">Published</label>
<input type="radio" name="all" id="all" wire:model="viewAll">
<label for="all">All</label>
</div>
In the component
public $viewAll = 'on';
public $viewPublished = 'off';
public function render()
{
if ($this->viewAll == 'on')
{
return view('livewire.radio-component', ['posts' => Post::all()]); // retrieve all posts
}
else
{
return view('livewire.radio-component', ['posts' => Post::where('published','=',1)->get()]); //....retrieve only published post
}
}
public function updatedViewAll()
{
if($this->viewAll == 'on')
$this->viewPublished = 'off';
}
public function updatedViewPublished()
{
if ($this->viewPublished == 'on')
$this->viewAll = 'off';
}