Hi, Can anyone help me with some hints on how to add search option to reorderlist?

Last updated 3 years ago

Can you explain what you are trying to achieve here? Why would you want to search when reordering records?

mjauvin said:

Can you explain what you are trying to achieve here? Why would you want to search when reordering records?

Actually, I need to filter or search the records, because there will be hunderds of them and need to filter based on category they belong to.

And how do you see that working, interface wise? If you filter by category for example?

mjauvin said:

And how do you see that working, interface wise? If you filter by category for example?

User would type/paste a catergory ID or slug in the searchbox and then able to reorder the records.

I tried to use reorderExtendQuery($query) function but I don't know how could I dinamically pass variable to that function, with the category ID/slug.

Other option I thinking about, to make category children elements reorderable.

Which trait are you using? The Sortable or NestedTree trait?

Here's an example to add a search filter to the reorder controller.

Add the following to your Controller class:

    public function onFilterRecords()
    {   
        $reorderController = $this->asExtension('ReorderController');
        $reorderController->reorder();

        return [
            '#reorderRecords' => $reorderController->reorderMakePartial('records', ['records' => $reorderController->vars['reorderRecords']]),
        ];
    }

    public function reorderExtendQuery($query)
    {
        if ($term = Input::get('filter-records')) {
            $query->where('name', 'like', "%$term%");
            // adjust above query to your model
        }
    }

And add this to your _reorder_toolbar.htm:

    <input name="filter-records" type="text" class="form-control icon search growable"
        data-request="onFilterRecords"
        data-track-input
    />

Last updated 3 years ago

mjauvin said:

Here's an example to add a search filter to the reorder controller.

Add the following to your Controller class:

   public function onFilterRecords()
   {   
       $reorderController = $this->asExtension('ReorderController');
       $reorderController->reorder();

       return [
           '#reorderRecords' => $reorderController->reorderMakePartial('records', ['records' => $reorderController->vars['reorderRecords']]),
       ];
   }

   public function reorderExtendQuery($query)
   {
       if ($term = Input::get('filter-records')) {
           $query->where('name', 'like', "%$term%");
           // adjust above query to your model
       }
   }

And add this to your _reorder_toolbar.htm:

   <input name="filter-records" type="text" class="form-control icon search growable"
       data-request="onFilterRecords"
       data-track-input
   />

This is great, thank you. Now filtering works as expected, but the reordering is not working. I'm using Sortable trait.

Did it work before adding filtering?

mjauvin said:

Did it work before adding filtering?

Yes, it does work without filtering. And I just tried without ajax, just with:

    public function reorderExtendQuery($query)
{
    if ($term = Input::get('filter-records')) {
                $query->where('category_id', $term);

            }
}

in controller and <form method="GET" in reorder toolbar and it works. Problem must be with ajax?

Last updated 3 years ago

The problem is that updating the partial directly using AJAX does not re-initialize the javascript code as it should. When reloading the full form, $.oc.reorderBehavior.initSorting() is called.

At least that's the current hypothesis.

Last updated 3 years ago

mjauvin said:

The problem is that updating the partial directly using AJAX does not re-initialize the javascript code as it should. When reloading the full form, $.oc.reorderBehavior.initSorting() is called.

Thank you. You helped me anyway. I'll use it without AJAX, not a problem.

If I find what's breaking the reordering I'll let you know.

mjauvin said:

If I find what's breaking the reordering I'll let you know.

I appreciate. Thank you.

The only way so far is to wrap the reorderRender() call in reorder.htm with a div as below:

<div id="reorder-wrapper">
   <?= $this->reorderRender() ?>
</div>  

And change the onFilterRecords as below:

    public function onFilterRecords()
    {   
        $reorderController = $this->asExtension('ReorderController');
        $reorderController->reorder();

        return [
            '#reorder-wrapper' => $reorderController->reorderRender(),
        ];
    }

Downside is that the filter text box is cleared, but otherwise it works fine.

Downside is that the filter text box is cleared, but otherwise it works fine.

Thank you.I think I'll stick with the form approach, seems more userfriendly to me.

zs60815 said:

Downside is that the filter text box is cleared, but otherwise it works fine.

Thank you.I think I'll stick with the form approach, seems more userfriendly to me.

Care to share how you use it?

Care to share how you use it?

Sorry, it's not so elegant and correct, but here it is:

    // In _reorder_toolbar.htm:

<div data-control="toolbar">
    <form method="GET" class="form-elements" role="form" action="<?= Backend::url('namespace/my_plugin/my_records/reorder') ?>">
        <a href="<?= Backend::url('namespace/my_plugin/my_records') ?>" class="btn btn-primary oc-icon-caret-left"><?= e(trans('backend::lang.form.return_to_list')) ?></a>
        <label>Enter category ID and press Filter button.</label>
        <input name="filter-records" type="text" class="form-control icon search growable"/>
        <input class="btn btn-default" type="submit" value="Filter">

    </form>
</div>

// In controller:

public function reorderExtendQuery($query)
    {
        if ($term = Input::get('filter-records')) {
            $query->where('category_id', $term);

        }
    }