DEV Community

Michael Messerli
Michael Messerli

Posted on

3 2

Custom order with sortBy() -- Bonus Livewire implementation

I recently ran into an issue where I wanted to order a list of users by their role. The problem is the roles don't have any kind of order built in, and they're not alphabetical.

Problem

Teams have a many-to-many relationship with Users. On the pivot table we have a role attribute.

Users can be one of 4 roles within a Team: Owner, Admin, Moderator, or Member.

We want to list members of a team in the above order.

Solution

In the ->sortBy() return a Closure with the array of keys you'd like to order by, and return their index.

return $this->team->users()->withPivot('role')->get()->sortBy(function ($item, $key) {
    $order = ['owner', 'admin', 'moderator', 'member'];
    return array_search($item['pivot']['role'], $order);
})
Enter fullscreen mode Exit fullscreen mode

Bonus: Building this list in Livewire

Changing user roles

// livewire/Teamwork/MemberList.php
class MemberList extends Component
{
    public $team;

    protected $listeners = [
        'membersUpdated' => 'updateList',
        'roleUpdated' => 'updateList'
    ];

    public function mount($team)
    {
        $this->team = $team;
    }

    public function updateList()
    {
        //
    }

    public function render()
    {
        return view('livewire.teamwork.member-list', [
            'members' => $this->team->users()->get()->sortBy(function ($item, $key) {
                $order = ['owner', 'admin', 'moderator', 'member'];
                return array_search($item['pivot']['role'], $order);
            })
        ]);
    }
}
Enter fullscreen mode Exit fullscreen mode

Wrapping Up

So this works great for me and I was happy to find a way to create a custom order. I'd like to hear from someone with more experience about alternate ways to accomplish this.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️