0%

Its common to give user an option to filter the data which they wanted when the data amount is huge and normally you may provide different conditions to filter the data. In this article, I will show you how to build a condition based query in Laravel.
Its pretty easy to be done by the query builder.

for example:
you may give user two options to filter the data. one is the status of your order and other is the general search for the different fields.

for the status option ,we can provide a dropdown list and the general search we can provide a input field to the user.

in the livewire component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public $search = "";
public $filter_status = "";

public function render()
{
$orders = $this->getData();
return view('livewire.orders.orderlist', [
'orders' => $orders,
]);
}

public function getData()
{
$query = DB::table('orders');
if ($this->filter_status != "*") {
$query->where('status', $this->filter_status);
}
if ($this->search != "") {
$query->where('name', 'like', '%' . $this->search . '%');
}
$query->where('user_id', auth()->id());
$query->orderBy('id', 'desc');
return $query->paginate(10);
}
//reset page after update
public function updatingSearch()
{
$this->resetPage();
}
public function updatingFilterStatus()
{
$this->resetPage();
}


If you want passing route parameter to Livewire view, you can use the following method.

Change your route web.php pass route parameter to the view

1
2
3
Route::get('/posts/{id}', function ($id) {
return view('livewire.posts.home', compact('id'));
})->name('posts');

Change your view blade file posts/home.blade.php, find where you call your livewire component add the parameter to it

1
<livewire:show-post :id="$id" />

Receiving parameter from your component, you can get parameter from mount method

1
2
3
4
5
6
7
8
9
10
11
class ShowPost extends Component
{
public $post;

public function mount($id)
{
$this->post = Post::find($id);
}

...
}

Ref

If you use a livewire upload file filed in a modal dialoge, after you close the modal or upload the file you may see the upload filed is still the old one unless you choose an other file or refresh the page. I try to set the file upload variable to null to solve, but it is still the same. Livewire may not recognize the file upload filed is changed, so we can reset it by add a different id to it.

in the view file, add a iteration to reset the file upload filed.

1
<input type="file" wire:model="photo" id="upload_{{ $iteration }}" />

in the livewire component file where you reset the variable, add the following code

1
2
3
4
5
6
7
public function closeModal()
{
$this->resetValidation();
//clear photo
$this->photo = null;
$this->iteration++;
}

Sometimes after login, you will still get a 419 page expired error. This is because the server can not match the token send from the client. To avoid this error, you can use the following method:

Make sure your login form has @csrf

1
2
<form method="POST" action="{{ route('login') }}">
@csrf

Edit .env file

You can add one item to the .env file
if you are under developing, you can add this line to the .env file:

1
SESSION_DOMAIN=127.0.0.1

if you are in production, you can add this line to the .env file:

1
SESSION_DOMAIN=yourdomain.com

Clear the cache

1
php artisan cache:clear

We have two model class, one is User the other one is Division, user belongs to one division and division has many users.
Users table only has one column named division_id, the other division information like “division name” we can get from Divisions table.

1
2
3
4
5
6
7
8
9
10
11
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->unsignedBigInteger('division_id')->nullable();
$table->timestamps();
});

1
2
3
4
5
6
Schema::create('divisions', function (Blueprint $table) {
$table->id();
$table->string('name', 128);
$table->timestamps();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Illuminate\Database\Eloquent\Model; //by default this line is not here, you need to add it manually

class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;

/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'name',
'email',
'password',
'division_id',
];

/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
*/
protected $hidden = [
'password',
'remember_token',
];

/**
* The attributes that should be cast.
*
* @var array<string, string>
*/
protected $casts = [
'email_verified_at' => 'datetime',
];

public function division()
{
return $this->belongsTo(Division::class);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php

namespace App\Models;

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

class Division extends Model
{
use HasFactory;

/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
];

/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'id' => 'integer',
];


public function users()
{
return $this->hasMany(User::class);
}
}

In the blade file if you try to use user->division()->name it will throw an error.

1
#message: "Undefined property: Illuminate\Database\Eloquent\Relations\BelongsTo::$name"

Instead you should use user->division->name to get the name of the division, but if you directly use the property name name it will throw an other error, beacuse the default Laravel user model do not import Eloquent Model.

1
Attempt to read property "name" on null

To solve this problem we need to add a this line to your User model file.

 use Illuminate\Database\Eloquent\Model;