DEV Community: Saurabh Mahajan

Using Service Container to create Objects in Laravel

Saurabh Mahajan — Sat, 16 Apr 2022 09:25:57 +0000

Recently I tweeted about using Service Container to create an Object instead of using the new Keyword and it led to a lot of questions.
// Detect dark theme var iframe = document.getElementById('tweet-1492044765314965504-860'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1492044765314965504&theme=dark" }

In this article, we will see how to create objects using Service Container and some of its benefits.

Let's say we have a Transistor class as follows:

namespace App\Services;

class Transistor {
    public function __construct()
    {
    }
    .
    .
    .
}

Now, if we want to use this Class in the index method of our Controller, we would do something like below:

public function index()
{
    $transistor = new Transistor();
    .
    .    
}

However, the way Laravel works under the hood, we can simply inject our Transistor Class like below:

public function index(Transistor $transistor)
{
    //$transistor object will be available here.
    .
    .

}

Laravel is automatically able to resolve the Transistor Class and able to inject it into our method (This is also known as Dependency Injection).

In fact, you might have been using this Laravel Feature even without knowing it. Ever wondered how Request Class gets injected into your Controller Methods.

public function store(Request $request)
{
.
.    
}

Now, currently our Transistor Class has, what we call, Zero Configuration so Laravel is able to resolve the Class on its own. Now let us say that our Transistor Class expected a parameter via Constructor as follows:

namespace App\Services;

class Transistor {
    public $key;

    public function __construct($key)
    {
        $this->key = $key;
    }
    .
    .
    .
}

Now since our Transistor Class expects a parameter, Laravel would not be able to resolve the Class on its own. We will need to tell Laravel how to resolve this Class. We can do so in AppServiceProvider as follows:

$this->app->bind(Transistor::class, function () {
    return new Transistor(config('settings.key'));
});

So now every time, we ask for the Transistor Class to be injected, Laravel will look into the Service Provider and inject the Class as we have defined.

Laravel Service Container supports many other type of Binding, which are beyond the scope of this Article. You can check them in the Documentation.

Now, some of the benefits of using the Service Container to resolve your Classes are:

Controller is no longer responsible for creating the Object. We just inject the Object into the Controller and Controller is only responsible for calling the methods related to Transistor Class. This removes a lot of noise and helps to keep our Controller Clean.
If the implementation of our Transistor class changes in the future, let's say our Transistor Class requires another parameter to be passed via constructor, we only need to make changes at one single location. Without Service Container, we will have to make changes at every file where Transistor Class is being used.
Using Service Container makes it very easy to Mock the Transistor Class using Tests.

$mock = $this->mock(Transistor::class, function (MockInterface $mock) {
    $mock->shouldReceive('fetchStations')->once();
});

This is even more useful when our Transistor Class is hitting a Third Party API and we want to avoid hitting the API during our Tests so as to avoid Rate Limit as well as make our Tests faster.

Without using Service Container, it would not be easy to Mock our Transistor Class.

In conclusion, if you are using new to create an Object in Laravel, there is a probably a better way.

Using Scope to improve Code readability.

Saurabh Mahajan — Sat, 16 Apr 2022 08:01:41 +0000

Laravel Query Scope is one of my favorite feature and its the one that I use extensively as it helps to keep code clean and make it more readable.

Let's suppose we have the following Code in Controller which fetches all the Posts which are active.

Post::query()
    ->where('active', 1)
    ->get();

A very simple query with one where clause. Let's convert this where Clause to a Scope. We will go to Post Model and will create a method. We will call it scopeActive. The method name must being with scope. It will have Eloquent\Builder passed to it automatically. So we will define our method like below:

public function scopeActive( $query ) 
{
    return $query->where('active', 1);
}

We can now use utilize this Scope and our Controller Code will become as below:

Post::query()
    ->active()
    ->get();

We can now use our active scope anywhere in our code and Laravel will automatically convert it into query. Not a big improvement, you might say, but let's look at the following example where we need to get Active Posts which are created between 2 dates.

Post::query()
    ->where('active', 1)
    ->whereBetween('created_at', [
        $startDate . ' 00:00:00',
        $endDate .' 23:59:59'
    ])
    ->get();

Let's create a scope for this. We will call it scopeBetween and it will accept 2 parameters, $startDate and $endDate.

public function scopeBetween($query, $startDate, $endDate)
{
    $endDate .= ' 23:59:59';
    return $query->whereBetween('created_at', [
        $startDate,
        $endDate
    ]);
}

And now we can change our Controller Code as below:

Post::query()
    ->active()
    ->between($startDate, $endDate)
    ->get();

If we compare this, our code is much more readable and a lot of noise has been removed. And we are starting to see the benefit of using Scopes.

Let us have another scenario where we want to retrieve active Posts created during Last Month. Our Code without Scope would look like below:

Post::query()
    ->where('active', 1)
    ->whereBetween('created_at', [
        Carbon::now()->startOfMonth()->subMonthNoOverflow(),
        Carbon::now()->subMonthNoOverflow()->endOfMonth()
    ])
    ->get();

Now let us define a Scope as follows:

public function scopeLastMonth($query)
{
    $startDate = Carbon::now()->startOfMonth()->subMonthNoOverflow();
    $endDate = Carbon::now()->subMonthNoOverflow()->endOfMonth();

    return $query->whereBetween('created_at', [
        $startDate,
        $endDate
    ]);
}

And our Code which uses the above scope becomes:

Post::query()
    ->active()
    ->lastMonth()
    ->get();

As you can see, we can encapsulate our complex or repeating conditions within the scope. We can give a meaningful name to our Scopes. And then use those scopes in our code which drastically improves the readability of our code.

JS Timer using AlpineJs with Carbon Format

Saurabh Mahajan — Wed, 09 Mar 2022 10:58:56 +0000

If you have used Carbon Class in PHP, then you might have heard about the method Carbon::diffForHumans(). It returns the difference between 2 dates in a Human Readable Form.

So if difference is less than 60 seconds, the output would be in seconds. If the difference is more than 60 seconds, the output would be in minutes. If the difference is more than 60 minutes, the output would be in hours and so on.

Recently I had to built a Timer in JS which should the elapsed Time in a similar manner. I choose to built the Timer using AlpineJS.

I choose to call my Component moment because I have been a big fan of moment.js. The Component had a prop of seconds which would hold the number of seconds that timer would need to display.

<span x-data="moment">
</span>

<script>
    function moment() {
        return {
            seconds: 1,
        }
    }
</script>

Next I created an init method which would set the initial value of the timer.

<span x-data="moment" x-init="init(40)">
</span>

<script>
    function moment() {
        return {
            seconds: 1,
            init(seconds) {
                this.seconds = seconds;
            },
        }
    }
</script>

Next, within this init method, I would use setInterval to call a closure after each second. Within the closure, I would increment the value of seconds prop. I would also create an interval prop which I could use to close the Timer.

interval: "",
init(seconds) {
    this.seconds = seconds;
    this.interval = setInterval(() => {
        this.seconds++;
    }, 1000);
},

Next I will create a method to display the Timer, I will call it getTimeElapsed and use it as below:

<span x-data="moment" x-init="init(40)">
    <span x-text="getTimeElapsed"></span>
</span>

.
.
.
            getTimeElapsed() {
                return this.seconds;
            }

At this stage the Timer would be working well and it will increment after each second. Now, we would format the getTimeElapsed method so that it would return the data similar to Carbon method.

In order to do so, I created an intervals property like below:

    intervals: [
      { label: "hour", seconds: 3599 },
      { label: "minute", seconds: 59 },
      { label: "second", seconds: 1 }
    ],

And then I used this property within the getTimeElapsed as follows:

getTimeElapsed() {
    const interval = this.intervals.find((i) => i.seconds < this.seconds);
    const count = Math.floor(this.seconds / interval.seconds);
    return `${count} ${interval.label}${count !== 1 ? "s" : ""} ago`;
}

This will display the difference in seconds and as soon as the difference crosses 59 seconds, it would display the difference in minutes and so on. I only needed difference till hours so I only defined interval props till 3600. If you need to display days, you can define further.

My last requirement was to Stop the Timer as soon as it crossed 2 hours. So I used the following check in getTimeElapsed.

if (this.seconds > 7200) {
    clearInterval(this.interval);
}

The beauty of AlpineJS is that you can define multiple of these Components on your page and each will behave independently of each other. You can check the implementation at the CodePen.

Hope you have enjoyed this tutorial. For similar articles, you can follow me on Twitter

Limiting Pusher Connections with Laravel

Saurabh Mahajan — Fri, 04 Mar 2022 06:14:27 +0000

Laravel allows you to Broadcast Server Side Events over a WebSocket Connection. This allows you to update your Frontend when a certain action is initiated or completed on Server, without User having to refresh their screen, thereby improving the User experience.

Laravel supports multiple drivers to implement Broadcasting, with Pusher being one of the famous drivers. It allows you to have 100 Concurrent Connections in the Free Plan. Depending upon your usage, you might need one of their Paid Plan.

We had implemented the same on Laravel Shift, most noticeably on Can I Upgrade Laravel, which allows you to determine if your dependencies are compatible. All the other pages using Pusher were behind login and not publicly accessible.

Just before Laravel 9 was due to be released, the number of visitors to the Shift increased and we had to upgrade to a higher Pusher Plan to keep up with the Concurrent Connections. As the release buzz passed, the number of visitors were going back to pre-release levels, however the number of Concurrent Connections hadn't fallen by as much.

On further investigation we found out that a New Connection was being established for every visitor on the Site. Ideally a Connection should only be established when a User visits a Page which has functionality related to Pusher. However, a New Connection was getting established even if User Visited the Home Page. With the large number of Users that visit Laravel Shift, this was definitely a problem that we needed to address.

Laravel Documentation recommends adding the following code to bootstrap.js inside /resources/js in order to enable Pusher.

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

We soon found out that whenever Pusher encounters the code new Echo({..., it starts a New Connection. Since this code was present in bootstrap.js which was being loaded on every page of the website (compiled via Laravel Mix), a connection was being established on every Page.

So once we figured out the root cause, we just moved the above code from bootstrap.js to a New JS File custom.js. We then injected this JS File using Stacks only on the pages where we were using Pusher.

We immediately saw a big decrease in the number of Connections after this fix and the numbers have been steady since then. In the hindsight, it is something which should have been obvious and could easily have been avoided. Fortunately it wasn't a very costly mistake.

Laravel Toast Component using Tailwind and Alpine

Saurabh Mahajan — Mon, 24 Jan 2022 10:24:29 +0000

In this Article, we will see how to create a Toast Component and make it customisable by allowing for different types and positions.

First of all we are going to create a Component File in resources/views/components/ directory. We are going to call it alert.blade.php and we can call it in Blade File using below syntax

<x-alert></x-alert>

We are going to pass the message that we want to display in between the 2 tags.

<x-alert>You are Logged in!</x-alert>

This message will be available to the component as $slot variable.

<div>
    {{$slot}}
</div>

Let us design it using some Tailwind CSS Classes.

<div>
    <div class="bg-blue-500 border-blue-700 max-w-xs text-white rounded-lg px-4 py-2">
        {{$slot}}
    </div>
</div>

We have applied following classes:

bg-blue-500: This gives a background color of Blue Shade.
border-blue-700: This gives a border of slightly darker Blue Shade.
max-w-xs: This limits the maximum widht that div can take.
text-white: This gives the white color to the message
rounded-lg: This gives the border radius to the div.
px-4 py-2: They give a padding to the div.

At this stage our alert component is displayed depending upon where it is rendered in the Blade File. However, we want to display it in a fixed position at bottom right of the screen. To do this, we will give Tailwind CSS Classes to the outer div.

<div class="bottom-4 right-4 fixed">
    <div class="bg-blue-500 border-blue-700 max-w-xs text-white rounded-lg px-4 py-2">
        {{$slot}}
    </div>
</div>

fixed class gives it a fixed Position and bottom-4 and right-4 place it at the bottom right of the screen. At this stage we can include our Component anywhere in our Blade File and it will display at the bottom right of the screen.

Lets make our Component a bit more flexible. Currently it only display every message in Blue Shade. However, we want to support error, warning and success message type along with the info message type which will be default. We are going to add type as @props. And we are going to change the CSS classes based on the type property.

@props(['type' => 'info'])

@php
    $typeClasses = [
        'info' => 'bg-blue-500 border-blue-700',
        'warning' => 'bg-yellow-500 border-yellow-700',
        'error' => 'bg-red-500 border-red-700',
        'success' => 'bg-green-500 border-green-700',
    ][$type];
@endphp

<div class="bottom-4 right-4 fixed">
    <div class="{{$typeClasses}} max-w-xs text-white rounded-lg px-4 py-2">
        {{$slot}}
    </div>
</div>

Now we can call our Alert Component by passing type as follows:

<x-alert type="error">Record was not Saved.</x-alert>

And the Component will be displayed with a shade of red color. If you do not pass any type, it will default to info.

Similarly, we are going to allow our Component to take position as props. We will support 4 positions, bottom-right, bottom-left, top-right, top-left. Our Component will look like this.

@props(['type' => 'info', 'position' => 'bottom-right'])

@php
    $typeClasses = [
        'info' => 'bg-blue-500 border-blue-700',
        'warning' => 'bg-yellow-500 border-yellow-700',
        'error' => 'bg-red-500 border-red-700',
        'success' => 'bg-green-500 border-green-700',
    ][$type];

    $positionClasses = [
        'bottom-right' => 'bottom-4 right-4',
        'bottom-left' => 'bottom-4 left-4',
        'top-right' => 'top-4 right-4',
        'top-left' => 'top-4 left-4',
    ][$position]
@endphp

<div class="{{$positionClasses}} fixed">
    <div class="{{$typeClasses}} max-w-xs text-white rounded-lg px-4 py-2">
        {{$slot}}
    </div>
</div>

You can try by calling the component as follows:

<x-alert type="error" position="top-right">
    Profile was saved successfully.
</x-alert>

And we also want User to close this Notification when they click on it. we are going to use AlpineJs for it. We will create a show property and use x-show directive to change the display of our Component. Using the @click directive we will change the value of show to false. We will also use the class cursor-pointer to change the Cursor to Pointer.

<div class="{{$positionClasses}} fixed cursor-pointer"
    x-data="{show:true}"
    x-show="show"
    @click="show=false"
>

And with that our Component is complete and we can use this Component anywhere in our Laravel Project. If you are interested in more complex implementation using Livewire, please check out this package.

Hope you have enjoyed this tutorial. For similar articles, you can follow me on Twitter

Livewire Button Component with Loading Indicator

Saurabh Mahajan — Sat, 22 Jan 2022 09:39:09 +0000

In this Article, we will see how to customize our Button to have following Animation using Livewire and extract everything into a Blade Component so as to reuse anywhere into your application.

We are going to use the Breeze Button Component and extend it according to our needs. Its definition looks like below:

<button {{ $attributes->merge(['type' => 'submit']) }}>
    {{ $slot }}
</button>

I have removed all the CSS Classes for clarify.We can use this Button Component inside our Livewire Component like below:

<x-button wire:click="save" wire:loading.attr="disabled">
    Save
</x-button>

What we want is that whenever this button is clicked, we want to change the Text to Saving. In order to do that we will use the wire:loading property.

<x-button wire:click="save" wire:loading.attr="disabled">
    Save
    <span wire:loading>Saving..</span>
</x-button>

So now "Saving.." will get displayed as long as the submit button is clicked. And it will get hidden when the AJAX Call has finished. However, during this AJAX Call both "Save" and "Saving.." are showing. So we also need to hide the "Save" during this AJAX Call. We can do so using wire:loading.remove

<x-button wire:click="save" wire:loading.attr="disabled">
    <span wire:loading.remove>Save</span>
    <span wire:loading>Saving..</span>
</x-button>

Now, even though this is working, this will lead to unexpected issues when you have more than 1 button on the Page. So it is always a good practice to specify that we only want to change the display of these elements when the AJAX Call corresponding to save method is being called. We can do so using wire:target.

<x-button wire:click="save" wire:loading.attr="disabled">
    <span wire:loading.remove wire.target="save">Save</span>
    <span wire:loading wire.target="save">Saving..</span>
</x-button>

At this stage, you should see your buttons having the same behaviour as shared at the start of the Article. However, we can further improve the readability of our code by extracting the code to our Button Component. We want this to be as simple as following:

<x-button wire:click="save" loading="Saving..">
  Save
</x-button>

First of all we will create a loading property in our button component and assign it a default value of false.

@props(['loading' => false])

We can read the Livewire Attributes inside our Blade Component using below code:

$attributes->wire('click')->value()

You can read more about them in the Livewire Docs.

When both loading property is present and the wire:click attribute is present, we want to insert our span tags, otherwise we will just display the Slot. So our Blade Components becomes like this.

@props(['loading' => false])

<button {{ $attributes->merge(['type' => 'submit']) }}>
    @if ($loading && $target = $attributes->wire('click')->value())
        <span wire:loading.remove wire:target="{{$target}}">{{$slot}}</span>
        <span wire:loading wire:target="{{$target}}">{{$loading}}</span>
    @else
        {{ $slot }} 
    @endif
</button>

So now we can use our Button Component using the loading attributes as well as without the loading attribute.

Hope you have enjoyed this tutorial. For similar articles, you can follow me on Twitter

Laravel Components to keep your Code Clean

Saurabh Mahajan — Wed, 12 Jan 2022 08:45:41 +0000

In one of our recent Project, we had to create a lot of Forms using Livewire. The Forms were rather simple as can be seen from the following screenshot. The Forms were built on top of Laravel Breeze which comes up with some handy components for Form. However, even after using these Components, the View File had a lot of repeating HTML.

Our View File looked like below:

As you can see even with after using the Components for Label, Input and Error Message, there is still a lot of HTML which is just repeating with minor changes for each field. We decided to further organize the things by creating a Separate Component for Input Field Group which would consist of a div and then the Label, Text Input and the Error Field Component.

We created a folder form-group inside the resources/views/components Folder. And within that we created a file input.blade.php. We noticed that for each Input Form Group only label and the name are different. So we created them as @props in our Component. Our File looked like below:

@props(['label', 'field'])

<div class="mt-4">
    <x-label>{{$label}}</x-label>
    <x-input class="block mt-1 w-1/2" type="text" wire:model.defer="{{$field}}" />
    @error($field) <x-error-message>{{$message}}</x-error-message> @enderror
</div>

So now in order to display the Name Field all we had to use the above component and pass the props as below

<x-form-group.input label="Name" field="product.name" />

By creating similar Form Group Components for Select, Textarea and other fields we were able to reduce our View File as below:

This looks much more compact and easy to read with all the noise being removed. Depending upon the requirements, we can easily make the components defined under form-group to accept attributes and make more dynamic.

Hope you have enjoyed this Article. Let us know in comments, how you use Components to keep your View File Clean. For similar articles, you can follow me on Twitter

Tabs using Tailwind and AlpineJs

Saurabh Mahajan — Wed, 05 Jan 2022 10:04:20 +0000

In this tutorial, we are going to implement the Tab Component using Tailwind CSS and Alpine JS. Tutorial assumes that you have a basic understanding of both Tailwind CSS and JS and have them setup in a Project.

We are going to have 3 Tabs each with its unique content. We will first of all define the Tabs. We are going to use grid class. Since there are 3 tabs we will use grid-cols-3 class.



<div class="grid grid-cols-3 cursor-pointer font-bold">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</div>

We have also used cursor-pointer class so that the cursor changes to pointer and font-bold class to make the Headings Bold. At this stage the Result looks like this.

Next we will apply classes to these Tabs to design them. We will add border, border-black, rounded-t-lg and px-4 classes to each of these div. The first 2 classes apply black border. rounded-t-lg makes sure that the upper left and upper right corners of the div are rounded. px-4 just applies some left and right padding. At this stage our HTML and output looks like below:



<div class="grid grid-cols-3 cursor-pointer font-bold">
    <div class="border border-black rounded-t-lg px-4">First</div>
    <div class="border border-black rounded-t-lg px-4">Second</div>
    <div class="border border-black rounded-t-lg px-4">Third</div>
</div>

Next we will apply white background and blue text to the first tab, which would be active by default. We will use bg-white and text-blue-700 classes for it. For inactive Tabs, we will use blue background and white text using the classes bg-blue-700 and text-white.



<div class="grid grid-cols-3 cursor-pointer font-bold">
    <div class="border border-black rounded-t-lg px-4 bg-white text-blue-700">First</div>
    <div class="border border-black rounded-t-lg px-4 bg-blue-700 text-white">Second</div>
    <div class="border border-black rounded-t-lg px-4 bg-blue-700 text-white">Third</div>
</div>

Before we continue further, lets also include AlpineJS. We will wrap the above HTML in a div.



<div x-data="tabs">
    ....
</div>

Here we have used x-data and specified tabs. So we will need define this function. This function will hold all the properties and methods related to Tabs Component.



function tabs() {
    return {
        active: 1,
    }
}

Here we have defined the property active which would define the active Tab and we have given it a default value of 1. We would also define a method which would tell us if the given Tab is active or not.



function tabs() {
    return {
        active: 1,
        isActive(tab) {
            return tab == this.active;
        },
    }
}

Next we will use this isActive Method and :class Alpine Directive to dynamically apply classes to our Tabs.



<div class="border border-black rounded-t-lg px-4"
    :class="isActive(1) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
>First</div>

Overall HTML looks like below.



<div x-data="tabs">
    <div class="grid grid-cols-3 cursor-pointer font-bold">
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(1) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
        >First</div>
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(2) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
        >Second</div>
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(3) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
        >Third</div>
    </div>
</div>

Next we will change the value of active property when User Clicks on it. We will define a setActive Method in JS.



    setActive(value) {
        this.active = value;
    }

We will call this method when User clicks on the Tab. We are going to use @click Alpine Directive.



<div class="border border-black rounded-t-lg px-4"
    :class="isActive(1) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
    @click="setActive(1)"
>First</div>

At this stage User should be able to change the Tab by clicking on it and the Active Tab Classes should change accordingly. Next we will define the Contents of the Tab.



<div class="border border-black p-4 rounded-b-lg">
    <div>
        This is First Tab.
    </div>
    <div>
        This is Second Tab.
    </div>
    <div>
        This is Tab Tab.
    </div>
</div>

Currently all Contents are showing. We can show / hide the contents based on the active tab. We will use the x-show directive and the same isActive Method.



<div x-show="isActive(1)">
    This is First Tab.
</div>
<div x-show="isActive(2)">
    This is Second Tab.
</div>
<div x-show="isActive(3)">
    This is Third Tab.
</div>

At this stage, our Tab Functionality will be working correctly. We can further improve UI this using the x-transition directive.



<div x-show="isActive(1)" x-transition>
    This is First Tab.
</div>

You will see that this gives a bit of flicker effect. We can fix it by changing x-transition to x-transition:enter.duration.500ms.

Our HTML at this stage looks like below:



<div x-data="tabs">
    <div class="grid grid-cols-3 cursor-pointer font-bold">
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(1) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
            @click="setActive(1)"
        >First</div>
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(2) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
            @click="setActive(2)"
        >Second</div>
        <div class="border border-black rounded-t-lg px-4"
            :class="isActive(3) ? 'bg-white text-blue-700': 'bg-blue-700 text-white'"
            @click="setActive(3)"
        >Third</div>
    </div>
    <div class="border border-black p-4 rounded-b-lg">
        <div x-show="isActive(1)" x-transition:enter.duration.500ms>
            This is First Tab.
        </div>
        <div x-show="isActive(2)" x-transition:enter.duration.500ms>
            This is Second Tab.
        </div>
        <div x-show="isActive(3)" x-transition:enter.duration.500ms>
            This is Third Tab.
        </div>
    </div>
</div>

We see a bit of duplicating classes for Active Tab. We can define a getClasses method as below:



getClasses(tab) {
    if(this.isActive(tab)) {
        return 'bg-white text-blue-700';
    }
    return 'bg-blue-700 text-white';
}

Our HTML now becomes



<div x-data="tabs">
    <div class="grid grid-cols-3 cursor-pointer font-bold">
        <div class="border border-black rounded-t-lg px-4" :class="getClasses(1)"
            @click="setActive(1)">First</div>
        <div class="border border-black rounded-t-lg px-4" :class="getClasses(2)"
            @click="setActive(2)">Second</div>
        <div class="border border-black rounded-t-lg px-4" :class="getClasses(2)"
            @click="setActive(3)">Third</div>
    </div>
    <div class="border border-black p-4 rounded-b-lg">
        <div x-show="isActive(1)" x-transition:enter.duration.500ms>
            This is First Tab.
        </div>
        <div x-show="isActive(2)" x-transition:enter.duration.500ms>
            This is Second Tab.
        </div>
        <div x-show="isActive(3)" x-transition:enter.duration.500ms>
            This is Third Tab.
        </div>
    </div>
</div>

And our Tab should be working fine like below:

Hope you have enjoyed this Article. For similar articles, you can follow me on Twitter

Applying Filter using BelongsToMany Relationship in Livewire

Saurabh Mahajan — Wed, 06 Oct 2021 08:50:22 +0000

In this Tutorial, we will see how to Filter Records using a BelongsToMany Relationship in Livewire. This is the part 6 of the Series related to adding New Functionality to a Table using Livewire. In Last Part of the Series we implemented Filter on the BelongsTo column of the Product Model using Livewire.

Lets say our Product Model has belongsToMany Relationship with Category as follows

    public function categories()
    {
        return $this->belongsToMany(Category::class);
    }

That means there is a Category Table which holds all the Categories. And then there is a Pivot Table which links Products and Categories. And we want to Filter using Category, so when the User selects a Category we will display only those Products which are related to that Category.

First of all we will fetch all the Categories. We would create a categories property and populate it in the mount method.

$this->categories = Category::pluck('name', 'id')->toArray();

And in the View, we would create the dropdown by looping through these categories.

<div>
    <label>
        Categories
    </label>
    <select>
        <option value="">Any</option>
        @foreach($categories as $category_id => $category_name)
        <option value="{{$category_id}}">{{$category_name}}</option>
        @endforeach
    </select>
</div>

The Dropdown will have all the Categories that User can select from. As usual we also have an Any option so as to display all the Products.

Next we will create a property called $selectedCategory and link it with above dropdown using wire:model.

<select wire:model="selectedCategory">
    ....
    ....
</select>

This way whenever User changes the above Dropdown, the property $selectedCategory would be updated in the Component and Livewire will re-render the component. Now all we need to do is to change the Query to reflect the value of Selected Category.

Below is the current Query that we have.

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        })
        ->when($this->selectedBrand, function($query) {
            return $query->where('brand_id', $this->selectedBrand);
        });
}

We will include another when Condition and we would filter the records using whereHas Clause like below:

->when($this->selectedCategory, function($query) {
    return $query->whereHas('categories', function($query) {
        return $query->where('categories.id', $this->selectedCategory);
    });
});

Go ahead and test it, our Filter should be working now. So unlike the previous Filters where we were able to apply the Query directly on the Product Model, here we had to pass a Closure to whereHas in order to Filter using BelongsToMany Relation.

If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to applying Filter on a BelongsToMany Relation.

Applying Filter on a BelongsTo Column using Livewire

Saurabh Mahajan — Thu, 30 Sep 2021 13:56:20 +0000

In this Tutorial, we will see how to implement Filter on a belongsTo Column to a Table using Livewire. This is the part 5 of the Series related to adding New Functionality to a Table using Livewire. In Last Part of the Series we implemented Filter on the status column of the Product Model using Livewire.

Lets say our Product Model has belongsTo Relationship with Brand as follows

    public function brand()
    {
        return $this->belongsTo(Brand::class);
    }

That means our Product table has a column brand_id. And we want to Filter the Result using this column. This is very similar to the Filter that we applied on the status column in the last part. The only difference is that we would need to fetch the brands from the Brand table so that we can show them in the dropdown.

We would create a brands property and populate it in the mount method.

$this->brands = Brand::pluck('name', 'id')->toArray();

And in the View, we would create the dropdown by looping through the brands

<div>
    <label>
        Brand
    </label>
    <select>
        <option value="">Any</option>
        @foreach($brands as $brand_id => $brand_name)
        <option value="{{$brand_id}}">{{$brand_name}}</option>
        @endforeach
    </select>
</div>

The Dropdown will have all the Brands that User can select from. Moreover, we also have an Any option so as to display all the Products.

Next we will create a property called $selectedBrand and link it with above dropdown using wire:model.

public $selectedBrand = '';

<select wire:model="selectedBrand">
    <option value="">Any</option>
    @foreach($brands as $brand_id => $brand_name)
    <option value="{{$brand_id}}">{{$brand_name}}</option>
    @endforeach
</select>

This way whenever User changes the above Dropdown, the property $selectedBrand would be updated in the Component and Livewire will re-render the component. Now all we need to do is to change the Query so that User Selection is honoured.

Below is the current Query that we have.

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        });
}

We will include another when Condition like below:

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        })
        ->when($this->selectedBrand, function($query) {
            return $query->where('brand_id', $this->selectedBrand);
        });
}

Since we are using when clause, the query with where clause on brand_id column will only be added when User selects a particular Brand. So if the User selects Any which is equivalent to empty, then the query with where Clause on brand_id will not be added.

This is all that we need to filter the Records using a BelongsTo column. If you have noticed this is very similar to the filter that we applied on the status column. In the next post we will see how to filter the Records using BelongsToMany Relation.

If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Filter on multiple columns.

Applying Filter to Table using Livewire

Saurabh Mahajan — Fri, 24 Sep 2021 12:22:32 +0000

In this Tutorial, we will see how to implement Filter on a Table using Livewire. This is the part 4 of the Series related to adding New Functionality to a Table using Livewire. In Last Part of the Series we saw how to implement Bulk Action using Livewire.

Let us assume we have a Model called as Product and it has a column status which represents whether the Product is active or not. And we want to give User the ability so that they can Filter the Products using status.

I would assume that you already have a working Livewire Component which is showing the Records in a Table Form. First of all we are going to create a Dropdown in View which would allow User to Filter the Records.

<div>
    <label>
        Status
    </label>
    <select>
        <option value="">Any</option>
        <option value="1">Yes</option>
        <option value="2">No</option>
    </select>
</div>

The Dropdown has 3 Values. Any, Yes and No. When User selects Any, all Products will be displayed. When User selects Yes, only those Products which have status of 1 should display. And when the User selects No, Products with status of 0 will display.

Next we will create a property called $selectedStatus and link it with above dropdown using wire:model.

public $selectedStatus = '';

<select wire:model="selectedStatus">
    <option value="">Any</option>
    <option value="1">Yes</option>
    <option value="2">No</option>
</select>

This way whenever User changes the above Dropdown, the property $selectedStatus would be updated in the Component and Livewire will re-render the component. Now all we need to do is to change the Query so that User Selection is honoured.

Below is the current Query that we have.

public function query()
{
    return Product::query();
}

We will change this using when Condition like below

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        });
}

Since we are using when clause, the query with where clause on status column will only be added when User selects Yes or No. So if the User selects Any which is equivalent to empty, then the query with where Clause will not be added.

This is all that we need to filter the Records using Livewire. Here we filtered the Records using the column from the current table. In the next post we will see how to filter the Records using Belongs To Relation.

If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Filter on multiple columns.

Bulk Action using Livewire

Saurabh Mahajan — Wed, 22 Sep 2021 11:11:00 +0000

In this Tutorial, we will see how to implement Bulk Action so that User can select and update multiple records using Livewire. This is the part 3 of the Series related to Livewire Table. In Part 2 of the Series we saw how to Hide/Show Columns in a Table using Livewire.

Let us assume we have a Model called as Product and it has a column status. We want to give user the ability to select multiple products and then change the value of status column for all of the selected products.

I would assume that you already have a working Livewire Component which is showing the Records in a Table Form. First of all we are going to add a New Property $selectedProducts to our Livewire Component. This would hold all the Products that user has selected.

public $selectedProducts = [];

Now in the View, we would like to display a checkbox next to each item. We would create a New column and we will paste the following code inside the loop which displays all the Results.

<input type="checkbox" value="{{$product->id}}" />

This would display the checkbox and we have given it the value which is the Primary Key of the Product Table so as to uniquely identify it.

Now we would link this checkbox to the $selectedProducts using the wire:model.

<input type="checkbox" value="{{$product->id}}"
     wire:model="selectedProducts" />

Now every time a User selects a Product, $selectedProducts would be updated. So at any time $selectedProducts would have all the Products that User has selected for Bulk Action.

Infact, we are going to use wire:model.defer. The defer directives makes sure that our Component will not be re-rendered when the User checks the checkbox. This will result in a significant performance improvement. If you want to learn more about defer and other techniques to improve Performance using Livewire, you can check this Article.

<input type="checkbox" value="{{$product->id}}"
     wire:model.defer="selectedProducts" />

Now we need to create 2 Buttons, Activate and Deactivate. Both these buttons will call a method changeStatus on click. We will pass the value that we want to set for the status column as the parameter. So for Activate we pass 1 and for Deactivate we will pass 0.

<button wire:click="changeStatus(1)">Activate</button>
<button wire:click="changeStatus(0)">Deactivate</button>

Next we need to define this method within our Component. We can define it as follows. Here $status will hold the value that we want to set for the status column. So for Activate it will be 1 and for Deactivate it will be 0.

public function changeStatus($status)
{
}

Within this method we will first of all check, if there are any Records that User has selected using $selectedProducts. Then we will update the status column for all those Products. And then we will finally clear the $selectedProducts variable.

if (!empty($this->selectedProducts)) {
    Product::whereIn('id', $this->selectedProducts)->update(['status' => $status]);
    $this->selectedProducts = [];
}

And that is all we need to do to give User the Ability to update Records in Bulk.

If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Bulk Actions.