range-of-motion/budget

{
    //
    "require": {
        //
        "livewire/livewire": "^2.3"
    },
    //
}

use App\Models\Widget;
use Livewire\Component;
 
class WidgetList extends Component
{
    public $widgets;
 
    protected $listeners = [
        'widgetCreated' => 'reloadWidgets'
    ];
 
    public function __construct()
    {
        $this->reloadWidgets();
    }
 
    public function reloadWidgets()
    {
        $this->widgets = request()->user()
            ->widgets()
            ->orderBy('sorting_index')
            ->get();
    }
 
    public function up(Widget $widget)
    {
        if ($widget->sorting_index > 0) {
            $previousWidget = Widget::where('user_id', $widget->user_id)
                ->where('sorting_index', $widget->sorting_index - 1)
                ->first();
 
            $previousWidget->update([
                'sorting_index' => $widget->sorting_index
            ]);
 
            $widget->update([
                'sorting_index' => $widget->sorting_index - 1
            ]);
        }
 
        $this->reloadWidgets();
    }
 
    public function down(Widget $widget)
    {
        if ($widget->sorting_index < count($this->widgets) - 1) {
            $nextWidget = Widget::where('user_id', $widget->user_id)
                ->where('sorting_index', $widget->sorting_index + 1)
                ->first();
 
            $nextWidget->update([
                'sorting_index' => $widget->sorting_index
            ]);
 
            $widget->update([
                'sorting_index' => $widget->sorting_index + 1
            ]);
        }
 
        $this->reloadWidgets();
    }
 
    public function delete(Widget $widget)
    {
        $widget->delete();
 
        $outOfSyncWidgets = Widget::where('user_id', $widget->user_id)
            ->whereRaw('sorting_index > ?', [$widget->sorting_index])
            ->get();
 
        foreach ($outOfSyncWidgets as $outOfSyncWidget) {
            $outOfSyncWidget->update([
                'sorting_index' => $outOfSyncWidget->sorting_index - 1
            ]);
        }
 
        $this->reloadWidgets();
    }
 
    public function render()
    {
        return view('livewire.widget-list');
    }
}

<div class="box">
    @foreach ($widgets as $widget)
        <div wire:key="{{ $widget->id }}" class="box__section row">
            <div class="row__column row__column--compact mr-1">
                #{{ $widget->sorting_index + 1 }}
            </div>
            <div class="row__column">
                {{ ucfirst($widget->type) }}
                @if (count((array) $widget->properties))
                    ({{ ucfirst(str_replace('_', ' ', $widget->properties->{key($widget->properties)})) }})
                @endif
            </div>
            <div class="row__column">
                <button class="button link mr-1" wire:click="up({{ $widget }})" class="mr-1">
                    <i class="fas fa-arrow-alt-up"></i>
                </button>
                <button class="button link" wire:click="down({{ $widget }})">
                    <i class="fas fa-arrow-alt-down"></i>
                </button>
            </div>
            <div class="row__column row__column--compact">
                <button class="button link" wire:click="delete({{ $widget }})">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    @endforeach
    @if (!count($widgets))
        <div class="box__section text-center">There aren't any widgets yet</div>
    @endif
</div>