How to save data in backend while dragging the element ?

[Neeraj1005]

In my project I've used this package and dragging is working but Now the major part is how to save data in the backend. Means while dragging the element one group to another than status_id would be updated in the tasks table. How can I achieve this...? please check this my code livewire blade component code

<div>
    @include('includes.livewire-message')
    <div class="row" wire:sortable-group="updateTaskOrder">
        @foreach($taskKanban as $status)
            <div class="col-md-4" wire:key="group-{{ $status->id }}" wire:sortable-group.item-group="{{ $status->id }}">
                <div class="card rounded-pill bg-gradient">
                    <div class="card-body">
                        <span class="fs-5 fw-bold p-2">{{ $status->name }} {{ $status->id }}</span><span
                            class="badge position-absolute top-50 end-0 translate-middle bg-pink rounded-pill p-2">{{ count($status->tasks) }}</span>
                    </div>
                </div>
                @foreach($status->tasks as $task)
                    <div class="card br-10 m-2" wire:key="task-{{ $task->id }}" wire:sortable-group.item="{{ $task->id }}">
                        <div class="card-body">
                            <img class="profile-xl float-sm-end border" src="{{ $task->assignTo->userProfile() }}">
                            <h5 class="text-black m-0 fs-6 fw-bold">
                                <a wire:click.prevent="viewTask({{ $task->id }})" href="#" data-bs-toggle="modal"
                                    data-bs-target="#viewTask">{{ $task->assignTo->name }}</a>
                            </h5>
                            <p class="text-dark-gray m-0 fst-italic">Department: {{ $task->department->name }}
                            </p>
                            <p class="text-gray m-0 w-90">
                                Task Title: {{ $task->name }}
                                <a href="#" class="gray"><i class="bi bi-paperclip p-1 gray"></i></a>
                            </p>
                            <span
            class="text-pink mt-1 float-start">{{ $task->created_at->calendar().' '.$task->created_at->isoFormat('Do Y') }}</span>
                            <div class="float-end">
                                @hasrole('admin')
                                    <a wire:click.prevent="editTask({{ $task->id }})" href="#" class="gray"
                                        data-bs-toggle="modal" data-bs-target="#updateTaskModal">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    <a wire:click.prevent="putTaskOnTrash({{ $task->id }})"
                                        onclick="confirm('Confirm delete?') || event.stopImmediatePropagation()"
                                        href="#" class="gray"><i class="bi bi-trash p-2"></i></a>
                                @endhasrole
                                <a href="#" data-bs-toggle="modal" data-bs-target="#comment" class="gray">
                                    <i class="bi bi-chat-right-text"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>

livewire component

<?php

namespace App\Http\Livewire\Dashboard;

use App\Models\Task;
use App\Models\Status;

class Kanban extends Component
{
    public $taskKanban;

    public function updateTaskOrder($orderIds)
    {
        ray($orderIds);
    }

    public function render()
    {
        ray()->clearAll();
        
        $this->taskKanban = Status::with(['tasks' => function($q){
            return $q->where('assign_to', auth()->user()->id)->isActive()->latest();
        }])->get();
        
        return view('livewire.dashboard.kanban');
    }
}

#Output screen

#after drag dd() show result like this

[webakademia]

Hi, The implementation of the backend is not part of the package. It is common php (and livewire) knowledge. To help you out, here is how I implemented it (you have to change the property name as I used it on Products):

public function updateOrder($list)
{
    foreach($list as $item) {
        Product::find($item['value'])->update(['position' => $item['order']]);
    }
}

The key is the array values. $item['value'] contains the ID of my product and $item['order'] is the position. So I simple loop them thru' and update the 'position' column (if you named it something else, then change it too. Sometimes I name it 'sortId')

I hope it was helpfull

[Neeraj1005]

Hi, The implementation of the backend is not part of the package. It is common php (and livewire) knowledge. To help you out, here is how I implemented it (you have to change the property name as I used it on Products):

public function updateOrder($list)
{
    foreach($list as $item) {
        Product::find($item['value'])->update(['position' => $item['order']]);
    }
}

The key is the array values. $item['value'] contains the ID of my product and $item['order'] is the position. So I simple loop them thru' and update the 'position' column (if you named it something else, then change it too. Sometimes I name it 'sortId')

I hope it was helpfull

Thanks... I'll try this one...

[webakademia]

Hi, The implementation of the backend is not part of the package. It is common php (and livewire) knowledge. To help you out, here is how I implemented it (you have to change the property name as I used it on Products):

public function updateOrder($list)
{
    foreach($list as $item) {
        Product::find($item['value'])->update(['position' => $item['order']]);
    }
}

The key is the array values. $item['value'] contains the ID of my product and $item['order'] is the position. So I simple loop them thru' and update the 'position' column (if you named it something else, then change it too. Sometimes I name it 'sortId') I hope it was helpfull

Thanks... I'll try this one...

Did you manage?

[Neeraj1005]

Hi, The implementation of the backend is not part of the package. It is common php (and livewire) knowledge. To help you out, here is how I implemented it (you have to change the property name as I used it on Products):

public function updateOrder($list)
{
    foreach($list as $item) {
        Product::find($item['value'])->update(['position' => $item['order']]);
    }
}

The key is the array values. $item['value'] contains the ID of my product and $item['order'] is the position. So I simple loop them thru' and update the 'position' column (if you named it something else, then change it too. Sometimes I name it 'sortId') I hope it was helpfull

Thanks... I'll try this one...

Did you manage?

At present not....because I'm busy on other schedule. But I'll try