How to create is_active toggle operation in backpackforlaravel

[christmex]

*note :

1. I’m sorry about my english, english its not my first language.
2. If you get an error or get confused feel free to comment.

Hi there, in this tutorial I'm about to share with you guys how to make "is_active toggle operation" in backpackforlaravel, without any further ado let's begin.

Glosarium

• Operation with no interface -> This means we don't need a controller

Steps

Step 0. Preparation

Before we jump into our case today, make sure that you already have your is_active column inside your table.

Step 1. Create a new custom operation

First, we need to create our custom operation, so that, let's create it with this command

php artisan backpack:crud-operation ToggleIsActive

then we would have a new file placed in App\Http\Controllers\Admin\Operations\ToggleIsActiveOperation, open that file, and change the code, so the code would look like this

<?php

namespace App\Http\Controllers\Admin\Operations;

use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;
use Illuminate\Support\Facades\Route;

trait ToggleIsActiveOperation
{
    /**
     * Define which routes are needed for this operation.
     *
     * @param string $segment    Name of the current entity (singular). Used as first URL segment.
     * @param string $routeName  Prefix of the route name.
     * @param string $controller Name of the current CrudController.
     */
    protected function setupToggleIsActiveRoutes($segment, $routeName, $controller){

        Route::post($segment.'/{id}/toggle-is-active', [
            'as'        => $routeName.'.toggleIsActive',
            'uses'      => $controller.'@toggleIsActive',
            'operation' => 'toggleIsActive',
        ]);
        
    }

    protected function setupToggleIsActiveDefaults() {
        $this->crud->allowAccess('toggleIsActive');
      
        $this->crud->operation(['list', 'show'], function () {
          $this->crud->addButtonFromView('line', 'toggle_is_active', 'toggle_is_active', 'end');
        });
    }

    public function toggleIsActive($id) 
    {
        $this->crud->hasAccessOrFail('toggleIsActive');
        $this->crud->setOperation('toggleIsActive');

        // Check if they have is_active field in database
        if(in_array('is_active',$this->crud->model->getFillable())){
            // set is_active to 0 for all rows, except the current record
            $this->crud->model->where('id', '!=', $id)->update(['is_active' => 0]);
    
            // set is _active to 1 for the current record
            $toggleIsActive = $this->crud->model->findOrFail($id)->update(['is_active' => 1]);
            
            return (string) $toggleIsActive;
        }else {
            return Response()->json([
                'error' => "You can't perform this action when you don't have is_active field in your database"
            ], 500); // Status code here
        }

        
    }
}

Step 2. Create a custom button

After we create our custom operation, we will create a button so that we can click it and toggle the is_active inside our database, here's the command to make a new button

php artisan backpack:button ToggleIsActive

after that you will find a new file placed in resourecs/views/vendor/backpack/crud/buttons/toggle_is_active.blade.php , then replace all existing code with this code

@if ($crud->hasAccess('toggleIsActive') && $entry->is_active != 1)
    <a href="javascript:void(0)" onclick="toggleIsActive(this)" data-route="{{ url($crud->route.'/'.$entry->getKey().'/toggle-is-active') }}" class="btn btn-sm btn-link text-capitalize" data-button-type="toggleIsActive"><i class="la la-toggle-off"></i> Activate</a>
@endif

{{-- Button Javascript --}}
{{-- - used right away in AJAX operations (ex: List) --}}
{{-- - pushed to the end of the page, after jQuery is loaded, for non-AJAX operations (ex: Show) --}}
@push('after_scripts') @if (request()->ajax()) @endpush @endif
<script>
    if (typeof toggleIsActive != 'function') {
      $("[data-button-type=clone]").unbind('click');

      function toggleIsActive(button) {
          var button = $(button);
          var route = button.attr('data-route');

          $.ajax({
              url: route,
              type: 'POST',
              success: function(result) {
                  // Show an alert with the result
                  new Noty({
                    type: "success",
                    text: "<strong>Successfully</strong><br>Activated {{$crud->entity_name}}"
                  }).show();

                  // Hide the modal, if any
                  $('.modal').modal('hide');

                  if (typeof crud !== 'undefined') {
                    crud.table.ajax.reload();
                  }
              },
              error: function(result) {
                  // Show an alert with the result
                  new Noty({
                    type: "error",
                    text: "<strong>Failed</strong><br>"+JSON.parse(result.responseText).error
                  }).show();
              }
          });
      }
    }

    // make it so that the function above is run after each DataTable draw event
    // crud.addFunctionToDataTablesDrawEventQueue('cloneEntry');
</script>
@if (!request()->ajax()) @endpush @endif

Step 3. Replace list column for showing the is_active status

//... another code inside setupListOperation()
CRUD::addColumn([
            'name' => 'is_active',
            'wrapper' => [
                'element' => 'span',
                'class' => function ($crud, $column, $entry, $related_key) {
                    
                if ($entry->is_active == true) {
                    return 'badge badge-success';
                }
                return 'badge badge-danger';
            }
            ],
            'value' => function($entry) {
                if ($entry->is_active == true) {
                    return 'Active';
                }
                return 'Not active';
            }
        ]);
//... another code inside setupListOperation()

Step 4. We're set to go

Finally, we're done creating our custom operation and our custom button for toggle is_active, now how we use it? simple, we're just calling it in our controller, so let's say I have my SchoolYearCrudController.php

<?php

namespace App\Http\Controllers\Admin;
//...
class SchoolYearCrudController extends CrudController
{
    use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\DeleteOperation;
    use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;

    use \App\Http\Controllers\Admin\Operations\ToggleIsActiveOperation; //-> just added the operation here

   //... another code below
}
?>

Also don't forget to modify your setupListOperation like the step.3

Result

v2fmAwa.mp4

That's all guys, I know its really easy to create, with or without this tutorial, but I hope I can help someone with this, also if you have any issues, feel free to comment, and let me know, thx

[tabacitu]

Nice tutorial @christmex , well done 👏👏👏 You're too humble about your English man, everything reads nice and clear!

[christmex]

Thank you @tabacitu 🙌🙏