Backpack/Calander : enum as title

[NeguinhoAdmin]

Hi,

I am new to bacpack perhaps, I need to understand the entire eco-system, as I am lacking to mapping mind. anyway

I have following issues where I need holistic idea what is I am missing.

1. In below table there is field status which is enum datatype. How it could displayed on calendar GUI as title. Enum might have pre-defined color code.
2. How to make one time one booking/slot not overlap, no more than one at a time.
3. Or can i concate title+vehicle_registeration number on public function setupCalendarOperation() {...
4. Initially I was assuming that , i can avoid title field name, but it not working at all so I put title on it.

I wish to see more in-depth documentation so Ill learn eco-system.

class MOTBookingCrudController 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 \Backpack\CalendarOperation\CalendarOperation;

    public function setup()
    {
        CRUD::setModel(\App\Models\MOTBooking::class);
        CRUD::setRoute(config('backpack.base.route_prefix') . '/mot-booking');
        CRUD::setEntityNameStrings('MOT Booking', 'MOT Bookings');
    }

    public function setupCalendarOperation()
    {
        CRUD::setOperationSetting('initial-view', 'dayGridMonth');
        CRUD::setOperationSetting('views', ['dayGridMonth', 'timeGridWeek', 'timeGridDay']);
        CRUD::setOperationSetting('editable', true);
        CRUD::setOperationSetting('background_color', fn ($event) => $event->active ? 'green' : 'red');
        CRUD::setOperationSetting('text_color', fn ($event) => $event->active ? 'white' : 'black');
        CRUD::setOperationSetting('with-javascript-widget', true);
    }

    protected function getCalendarFieldsMap()
    {

        return [
            'title' => 'status',
            'start' => 'start',
            'end' => 'end',
            'background_color' => 'background_color',
            'text_color' => 'text_color',
            'all_day' => 'all_day',
        ];
    }

    protected function setupListOperation()
    {
        CRUD::setFromDb();
    }

    protected function setupCreateOperation()
    {

        CRUD::setValidation(MOTBookingRequest::class);

        $start = request()->has('start') ? Carbon::parse(request('start')) : null;
        $end = request()->has('end') ? Carbon::parse(request('end')) : null;

        CRUD::field('start')
            ->type('datetime')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->value($start);

        CRUD::field('end')
            ->type('datetime')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->value($end);

        CRUD::addField([
            'name' => 'status',
            'label' => 'Status',
            'type' => 'enum',
            'options' => ['pending', 'available', 'completed', 'cancelled'],
            'default' => 'pending',

            'tab' => 'General',
        ]);

        CRUD::setFromDb();


        CRUD::field('background_color')
            ->type('color')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->default('#3788d8');

        CRUD::field('text_color')
            ->type('color')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->default('#ffffff');

        CRUD::addField([
            'name' => 'branch_id',
            'label' => 'Branch',
            'type' => 'select2',
            'entity' => 'branch',
            'attribute' => 'name',
            'model' => Branch::class,
            'tab' => 'General',
        ]);
    }

    protected function setupUpdateOperation()
    {
        $this->setupCreateOperation();
    }
}

public function up(): void
    {
        Schema::create('mot_bookings', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('branch_id')->nullable(false);
            $table->foreign('branch_id')->references('id')->on('branches')->onDelete('restrict');
            $table->string('title')->nullable()->default('MOT Booking');
            $table->dateTime('date_of_appointment')->default(now());
            $table->dateTime('start')->nullable();
            $table->dateTime('end')->nullable();
            $table->string('vehicle_registration');
            $table->string('vehicle_chassis')->nullable();
            $table->string('vehicle_color')->nullable();
            $table->boolean('all_day')->nullable(true)->default(false);
            $table->string('customer_name');
            $table->string('customer_contact');
            $table->string('customer_email');
            $table->enum('status', ['pending', 'available', 'completed', 'cancelled'])->default('available');
            $table->text('notes')->nullable(true);
            $table->string('background_color')->default('white');
            $table->string('text_color')->default('black');
            $table->timestamps();
        });
    }

class MOTBooking extends Model
{
    use CrudTrait;
    use HasFactory;

    protected $fillable = [
        'branch_id',
        'title',
        'vehicle_registration',
        'vehicle_chassis',
        'vehicle_color',
        'date_of_appointment',
        'start',
        'end',
        'customer_name',
        'customer_contact',
        'customer_email',
        'status',
        'notes',
        'background_color',
        'text_color',
        'all_day',
    ];

    protected $table = 'mot_bookings';


    public function branch()
    {
        return $this->belongsTo(Branch::class);
    }

    public function getRouteKeyName()
    {
        return 'vehicle_registration';
    }

    public function scopePending($query)
    {
        return $query->where('status', 'pending');
    }

    public function scopeCompleted($query)
    {
        return $query->where('status', 'completed');
    }

    public function scopeCancelled($query)
    {
        return $query->where('status', 'cancelled');
    }

    public function isPending()
    {
        return $this->status === 'pending';
    }

    public function isCompleted()
    {
        return $this->status === 'completed';
    }

    public function isCancelled()
    {
        return $this->status === 'cancelled';
    }

    public function markAsCompleted()
    {
        $this->status = 'completed';
        $this->save();
    }

    public function markAsCancelled()
    {
        $this->status = 'cancelled';
        $this->save();
    }
}

[jcastroa87]

Hello @NeguinhoAdmin

I will answer your questions:

• In below table there is field status which is enum datatype. How it could displayed on calendar GUI as title. Enum might have pre-defined color code.

This is not working for you? bind status on title?

protected function getCalendarFieldsMap()
    {
        return [
            'title' => 'status',
            'start' => 'start',
            'end' => 'end',
            'background_color' => 'background_color',
            'text_color' => 'text_color',
            'all_day' => 'all_day',
        ];
    }

• How to make one time one booking/slot not overlap, no more than one at a time.

You can try to use something like combine date + time need to be unique.

• Or can i concate title+vehicle_registeration number on public function setupCalendarOperation() {...

I think is better do this in an accessor

Cheers.

[ShariqAyaz]

No, it say undefined. 'title' => 'status',

yes i make unique togather constraint in database and put rules on request validation, that restrict slots. which is fine.

How? in model? i have tried i think
Or can i concate title+vehicle_registeration number on public function setupCalendarOperation() {...
I think is better do this in an accessor

[NeguinhoAdmin]

Still waiting for update, as binding is not working with other field other than title. Literally, I am thinking to make concatination on database level or pre-post. to solve the issue.

[jcastroa87]

Hello @NeguinhoAdmin

I made a test on my side, and everything is working normal.

I use our demo meetings as a main Controller: https://github.com/Laravel-Backpack/demo/blob/main/app/Http/Controllers/Admin/MeetingCrudController.php

I add status column to our meetings table

public function up(): void
    {
        Schema::table('meetings', function (Blueprint $table) {
            $table->enum('status', ['pending', 'available', 'completed', 'cancelled'])->default('available');
        });
    }

Add the field in CreateOperation in Controller:

CRUD::addField([
                'name' => 'status',
                'label' => 'Status',
                'type' => 'enum',
                'options' => ['pending', 'available', 'completed', 'cancelled'],
                'default' => 'pending',
    
                'tab' => 'General',
            ]);

Bind the column in Controller

public function getCalendarFieldsMap()
    {
        return [
            'title'            => 'status',
            'start'            => 'start',
            'end'              => 'end',
            'background_color' => 'background_color',
            'text_color'       => 'text_color',
            'all_day'          => 'all_day',
            'email'            => 'email',
            'number'           => 'number',
        ];
    }

Here the result:

Cheers.

[NeguinhoAdmin]

No it is not working for me.

If bind mean left hand side "title" is what calendar displayed and right hand side is what field name of database that it is not working for me.

it say undefined: 'title' => 'background_color',

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Requests\CalanderRequest;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;
use Carbon\Carbon;


class CalanderCrudController 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 \Backpack\CalendarOperation\CalendarOperation;

    public function setup()
    {
        CRUD::setModel(\App\Models\Calander::class);
        CRUD::setRoute(config('backpack.base.route_prefix') . '/calander');
        CRUD::setEntityNameStrings('calander', 'calanders');
    }

    protected function setupListOperation()
    {
        CRUD::setFromDb();
    }

    public function setupCalendarOperation()
    {
        CRUD::setOperationSetting('initial-view', 'dayGridMonth');
        CRUD::setOperationSetting('views', ['dayGridMonth', 'timeGridWeek', 'timeGridDay']);
        CRUD::setOperationSetting('editable', true);
        CRUD::setOperationSetting('background_color', '#3788d8');
        CRUD::setOperationSetting('text_color', '#ffffff');
        CRUD::setOperationSetting('with-javascript-widget', true);
    }

    protected function getCalendarFieldsMap()
    {
        return [
            'title' => 'background_color',
            'start' => 'start',
            'end' => 'end',
            'background_color' => 'background_color',
            'text_color' => 'text_color',
            'all_day' => 'all_day',
        ];
    }

    protected function setupCreateOperation()
    {
        CRUD::setValidation(CalanderRequest::class);

        $start = request()->has('start') ? Carbon::parse(request('start')) : null;
        $end = request()->has('end') ? Carbon::parse(request('end')) : null;

        CRUD::field('start')
            ->type('datetime')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->value($start);

        CRUD::field('end')
            ->type('datetime')
            ->wrapper(['class' => 'form-group col-md-6'])
            ->value($end);

        CRUD::setFromDb();
    }

    protected function setupUpdateOperation()
    {
        $this->setupCreateOperation();
    }
}