vshapovalov/crud

laravel crud admin

Laravel crud dashboard - CrudIt!

Builded with Vue.js, vuetifyjs, _(*1)

Manage your data, store files., _(*2)

Support Laravel 7, _(*3)

, _(*4)

Dashboard components

• textbox (password, masked, slugify, prefix, suffix)
• checkbox
• dropdown (single, multi select)
• datetimepicker
• richedit by tinymce
• image/files (single, multi pick from gallery)
• relation (hasOne, hasMany, belongsTo, belongsToMany with pivot)

Fields validation using laravel validator, _(*5)

Crud forms has access check by roles(select, add, edit, delete), _(*6)

How to install

1. Config your application

Check db settings and APP_URL in .ENV file of your application, _(*7)

Make laravel auth scaffolding, _(*8)

php artisan make:auth

2. Require package

composer require vshapovalov/crud

if you are using Laravel 5.4, add to config/app.php provider section, _(*9)

Vshapovalov\Crud\CrudServiceProvider::class,

3. Install crud

php artisan crud:install

Check url http://app_url/cruds, _(*10)

How to create crud form

• Create eloquent model
• Create crud form in dashboard
• Create dashboard menu item for crud form
• Grant access to role for created crud form

There is still a lot of work ahead - localization, etc. ;] All crud forms can be edited from admin panel, _(*11)

System options->Crud forms, _(*12)

Crud components addtional options(json)

textbox - simple textbox, _(*13)

{ "slugify": "fieldname_to_store_slug" }
{ "mode": "password" }
{ "mode": "masked", "mask":"+7(777)###-##-##" }

datepicker - date picker, _(*14)

{ "mode":"date or datetime" } 

dropdown - simple dropdown, additional field required, _(*15)

{
    "mode:": "single or multi", 
    "values": [ 
        { "key": "DRAFT", "value": "Draft" }, 
        { "key": "PUBLISHED", "value": "Published" } 
    ] 
}

richedit - richeditor by tinymce, _(*16)

{ "size": "small or medium or large"}

image - image picker, pick images/files from media library, _(*17)

{
    "mode": "multi or single",
    "type": "file or image",
    "resize": { "width":1000, "height": null, "quality": 90 },
    "thumbnails": [
        { "name":"medium", "scale":50 },
        { "name":"small", "scale":25 },
        { "name":"cropped", "crop": {"width": 250, "height": 250 } },
        { "name":"fitted", "fit": {"width": 250, "height": 250 } }
    ] 
}

relation - relation field type, field has options, _(*18)

{ "buttons": [ "add", "edit", "pick", "delete_all" ] , "mode": "simple or normal" }

Media library

Media library can resize image, create thumbnails for uploaded images by default settings, also crud image field have additional options for resize image, _(*19)

config/cruds.php, _(*20)

'media_default_settings' => [
    'resize' => [
        'width' => 1440,
        'height' => null,
        'quality' => 90
    ],
    'thumbnails' => [
        [
            'name' => 'medium',
            'scale' => 50
        ],
        [
            'name' => 'small',
            'scale' => 25
        ],
        [
            'name' => 'cropped',
            'crop' => [
                'width' => 250,
                'height' => 250,
            ]
        ],
        [
            'name' => 'fit320-240',
            'fit' => [
                'width' => 320,
                'height' => 240,
                'position' => 'center'
            ]
        ]
    ]
],

Menu options

Dashboard menu items can be edited from admin panel, _(*21)

Custom Vue components in dashboard

Also you can use own Vue components, just add them in components section of config/cruds.php, _(*22)

'components' => [
    [
        'name' => 'test-component', // just simple name
        'path' => '/js/test-components.js' // path to component, must be absolute
    ]
],

simple component file, _(*23)

Vue.component('test-component', require('./test-component.vue') );

let userComponent = {
    id: 'user-component-1',
    name: 'test-component',
    options: {
        isModal: false,
        counterStartValue: 100
    }
};

Bus.$on( 'user:testcomponent:mount', ()=> AdminManager.mountComponent( userComponent, true ) );

then create dashboard menu item< and set action to 'user:testcomponent:mount', _(*24)

Middlewares and user components in crud form

link js file in components section of cruds.php, use registerMiddleware function to make some action on events emmited by crud form or edit panel or add custom component. if you did not call next(), the action will be interruted in some events:, _(*25)

• crud:on:edit
• crud:on:add
• crud:on:delete
• editpanel:before:save

AdminManager.registerMiddleware( ( event, options, next )=>{

    if (event == 'crud:on:mount' && options.crud.code === 'users') {

        options.addComponents(
            [
                {
                    id: 'test-component',
                    name: 'test-component',
                    options: {
                        message: 'i am custom component'
                    }
                }
            ]
        );
    }

    next();
});

How to link libraries

'components' => [
    [
        'name' => 'jquery-slim-cdn', 
        'path' => 'https://code.jquery.com/jquery-3.3.1.slim.js'
    ]
],

Custom components can use Lodash, Axios, they are declared as window obj props, _(*26)

How to create crud form

watch this guide (coming soon), _(*27)

How to make custom component

watch this guide (coming soon), _(*28)