Panel support?

[Athuli7]

Is there any way to extend this to support panels too? The need came while building the following UI.

If that's not possible? Is there any other way to do horizontal splitting?

[domthomas-dev]

Can you send me your resource file?

[Athuli7]

<?php

namespace App\Nova;

use App\Nova\Resource;
use App\Models\Setting;
use Laravel\Nova\Panel;
use NovaItemsField\Items;
use Illuminate\Http\Request;
use Laravel\Nova\Fields\Date;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Number;
use Laravel\Nova\Fields\Select;
use Laravel\Nova\Fields\HasMany;
use Yassi\NestedForm\NestedForm;
use Laravel\Nova\Fields\Textarea;
use Laravel\Nova\Fields\BelongsTo;
use R64\NovaImageCropper\ImageCropper;
use Bissolli\NovaPhoneField\PhoneNumber;
use Whitecube\NovaFlexibleContent\Flexible;
use Benjacho\BelongsToManyField\BelongsToManyField;
use Laravel\Nova\Card;

class Employee extends Resource
{
    // use TabsOnEdit;
    public static $tableStyle = 'default';
    public static $displayInNavigation = true;
    public static $showColumnBorders = false;
    public static $model = \App\Models\Employee::class;
    public static $title = 'nickname';
    public static $group = "Employees";
    public static $search = [
        'fname',
        'lname',
        'nickname',
        'company_emp_id',
    ];
    public function fields(Request $request)
    {
        $fields = [
            Text::make('Number', 'company_emp_id')
                ->onlyOnIndex(),
            Text::make('Name', function($model) { 
                $retVal = "$model->fname $model->lname";
                if(strlen(trim($model->nickname)) > 0)
                    $retVal .= " <strong>[$model->nickname]</strong>";
                return $retVal;
            })->asHtml()->onlyOnIndex(),

            Text::make('Current Assignment', function ($model) { return '-'; })->onlyOnIndex(),
            Text::make('Phone Number', 'primary_number')->onlyOnIndex(),

            Select::make('Status')
                ->options(config('constants.employee_status'))
                ->displayUsingLabels()
                ->onlyOnIndex(),

            // Fields

            // Forms
            (new Panel('Photograph', [
                ImageCropper::make('Photograph', 'image')
                    ->avatar()
                    ->disk('s3public')
                    ->path('employee/images')
                    ->prunable()
                    ->nullable()
                    ->size('w-1/3')
                    ->removeBottomBorderOnForms(),
                
            ])),

            (new Panel('Personal Attributes', [

                // Line 1
                Text::make('Employee Number', 'company_emp_id')
                    ->rules('regex:/^(' . Setting::getValue('Employee_ID_Format') . '|' . Setting::getValue('Temp_Employee_ID_Format') . ')$/')
                    ->hideFromIndex()->size('w-1/6')
                    ->removeBottomBorderOnForms(),
                Select::make('Salutation')->options([
                    'Mr' => 'Mr',
                    'Ms' => 'Ms',
                    'Mrs' => 'Mrs'
                ])->hideFromIndex()
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                Text::make('First Name', 'fname')->hideFromIndex()
                    ->rules('min:1')
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                Text::make('Middle Name', 'mname')->hideFromIndex()
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                Text::make('Last Name', 'lname')->hideFromIndex()
                    ->rules('min:1')
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                Text::make('Nickname', 'nickname')->hideFromIndex()
                    ->rules('min:3')
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                // Line 2
                Date::make('Date of Birth')->hideFromIndex()
                    ->rules('date', 'before:' . now()->subYears(18)->startOfDay())
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                BelongsTo::make('Religion')->hideFromIndex()
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                Text::make('Creed', 'caste')->hideFromIndex()
                    ->size('w-1/6')->removeBottomBorderOnForms(),
                BelongsTo::make('Marital Status', 'MaritalStatus')
                    ->size('w-1/6')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                BelongsTo::make('Recruitment Channel', 'RecruitmentChannel')
                    ->size('w-1/6')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                BelongsTo::make('Accommodation', 'Accommodation')
                    ->nullable()
                    ->size('w-1/6')->removeBottomBorderOnForms(),
            ])),
            (new Panel('Physical Attributes', [
                Number::make('Height [cm]', 'height')->min(60)
                    ->hideFromIndex()->size('w-1/5')->removeBottomBorderOnForms(),
                Number::make('Weight [Kg]', 'weight')->min(30)
                    ->hideFromIndex()->size('w-1/5')->removeBottomBorderOnForms(),
                Select::make('Blood Group')->options(config('constants.blood_groups', []))
                    ->hideFromIndex()->size('w-1/5')->removeBottomBorderOnForms(),
                BelongsTo::make('Gender')
                    ->hideFromIndex()->size('w-1/5')->removeBottomBorderOnForms(),
            ])),
            (new Panel('Contact Information', [
                PhoneNumber::make('Company Number', 'company_number')
                    ->size('w-1/4')->removeBottomBorderOnForms(),
                PhoneNumber::make('Personal Number', 'personal_number')
                    ->size('w-1/4')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Text::make('Company Email', 'company_email')
                    ->size('w-1/4')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Text::make('Personal Email', 'personal_email')
                    ->size('w-1/4')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Items::make('Additional Numbers', 'additional_numbers')
                    ->size('w-1/2')
                    ->rules(['additional_numbers.*' => 'min:10'])
                    ->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Items::make('Additional Emails', 'additional_emails')
                    ->rules(['additional_emails.*' => 'email|min:10',])
                    ->size('w-1/2')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Flexible::make('Personal References', 'personal_references')
                    ->addLayout('Reference', 'wysiwyg', [
                        Text::make('Name'),
                        PhoneNumber::make('Number'),
                        Text::make('Relationship'),
                        Text::make('Email'),
                    ])
                    ->button("Add reference")
                    ->size('w-1/2')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
                Flexible::make('Emergency Contacts', 'emergency_contacts')
                    ->addLayout('Contact', 'wysiwyg', [
                        Text::make('Name'),
                        PhoneNumber::make('Number'),
                        Textarea::make('Address'),
                    ])
                    ->button("Add contact")
                    ->size('w-1/2')->removeBottomBorderOnForms()
                    ->hideFromIndex(),
            ])),
            (new Panel('Skills and Languages', [
                BelongsToManyField::make('Languages', 'Languages', 'App\Nova\Language')->size('w-1/2'),
                BelongsToManyField::make('Skills', 'Skills', 'App\Nova\Skill')->size('w-1/2'),
            ])),
            NestedForm::make('EmployeeAddresses'),
            NestedForm::make('EmployeeContracts'),
            NestedForm::make('EmployeeDocuments'),
            NestedForm::make('PreviousEmployments'),


            // (new Panel('Recruitment Information', [
            //     // BelongsTo::make('Recruitment Channel', 'EmployeeChannel', 'App\Nova\EmployeeChannel')->hideFromIndex()->size('w-1/3'),
            //     // NullField::make('')->hideFromIndex()->size('w-2/3'),
            //     Text::make('Reference 1 Name', 'ref_1_name')->hideFromIndex()->size('w-1/2'),
            //     PhoneNumber::make('Reference 1 Contact Number', 'ref_1_number')->hideFromIndex()->size('w-1/2'),
            //     Text::make('Reference 2 Name', 'ref_2_name')->hideFromIndex()->size('w-1/2'),
            //     PhoneNumber::make('Reference 2 Contact Number', 'ref_2_number')->hideFromIndex()->size('w-1/2'),
            // ])),

            // (new Panel('Emergency Contact Details', [
            //     Text::make('Primary Contact Name', 'emergency_contact_primary_name')->hideFromIndex()->size('w-1/3'),
            //     Select::make('Relation', 'emergency_contact_primary_relation')->options([
            //         'Spouse' => 'Spouse',
            //         'Parent' => 'Parent',
            //         'Other' => 'Other',
            //     ])->hideFromIndex()->size('w-1/3'),
            //     PhoneNumber::make('Contact Number', 'emergency_contact_primary_number')->hideFromIndex()->size('w-1/3'),
            //     Text::make('Secondary Contact Name', 'emergency_contact_secondary_name')->hideFromIndex()->size('w-1/3'),
            //     Select::make('Relation', 'emergency_contact_secondary_relation')->options([
            //         'Spouse' => 'Spouse',
            //         'Parent' => 'Parent',
            //         'Other' => 'Other',
            //     ])->hideFromIndex()->size('w-1/3'),
            //     PhoneNumber::make('Contact Number', 'emergency_contact_secondary_number')->hideFromIndex()->size('w-1/3'),
            // ])),

            // (new Panel('Skills and Languages', [
            // ])),

            // (new Panel('Last Employment Details', [
            //     Text::make('Company Name', 'last_employer_company_name')->hideFromIndex()->size('w-1/3'),
            //     Text::make('Job Title', 'last_employer_job_role')->hideFromIndex()->size('w-1/3'),
            //     Number::make('Duration [Months]', 'last_employer_job_duration')->hideFromIndex()->size('w-1/3'),
            //     Text::make('Reason For leaving', 'last_employer_leaving_reason')->hideFromIndex()->size('w-1/3'),
            //     Number::make('Last Drawn Salary', 'last_employer_salary')->hideFromIndex()->size('w-1/3'),
            //     BelongsToManyField::make('Job Role', 'OldSkills', 'App\Nova\Skill')->size('w-1/3'),
            // ])),
            HasMany::make('EmployeeAddresses'),
            HasMany::make('EmployeeContracts'),
            HasMany::make('EmployeeDocuments'),
            HasMany::make('PreviousEmployments'),
        ];
        return $fields;
    }

    /**
     * Get the cards available for the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function cards(Request $request)
    {
        return [];
    }

    /**
     * Get the filters available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function filters(Request $request)
    {
        return [];
    }

    /**
     * Get the lenses available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function lenses(Request $request)
    {
        return [];
    }

    /**
     * Get the actions available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function actions(Request $request)
    {
        return [];
    }
}

[Athuli7]

@thomasdominic, any chance?

[domthomas-dev]

Hi,

I did not understand your problem ...
I have been tested with Panel and everything was fine.

But, in fact, you wish you could do this:

new panel (...) -> size ('1/2')

That's it ?

[Athuli7]

Yes. I was trying to resize the panel, not the fields inside a panel.

[allanvb]

Any updates on this ?

[tk-subgenius]

hi, please I'd also love this as a feature, thanks!

[didkan]

+1

[mahfoudfx]

I think that the most powerful feature of this plugin is the support of Panels which is currently missing and which will allow great UI customisation regarding its potential. Something like:

Panel::make(__('My Panel 1'), $this->myPanel1())->size('w-2/3'),
Panel::make(__('My Panel 2'), $this->myPanel2())->size('w-1/3'),

[scramatte]

Hi,

To get size working into panels, you need to append "flex-dom flex-wrap flex w-full" to css class of Card component.
It requires overriding vendor/laravel/nova/resources/js/fields/Form/Panel.vue

I'm achieving it with the following package, but it's just a patch, a clean solution is required!
https://novapackages.com/packages/norman-huth/nova-assets-changer

+1 to implement panel support